Function SurfaceExample

example/src/Examples/SurfaceExample.tsx:15–74

()

import ScreenWrapper from '../ScreenWrapper';

const SurfaceExample = () => {
  const { isV3 } = useExampleTheme();
  const v2Elevation = [1, 2, 4, 8, 12];
  const elevationValues = isV3 ? Array.from({ length: 6 }) : v2Elevation;

  const renderSurface = (index: number, mode: 'flat' | 'elevated') => (
    <Surface
      key={index}
      style={[
        styles.surface,
        isV3 ? styles.v3Surface : { elevation: v2Elevation[index] },
      ]}
      mode={mode}
      {...(isV3 && { elevation: index as MD3Elevation })}
    >
      <Text variant="bodyLarge">
        {isV3
          ? `Elevation ${index === 1 ? '(default)' : ''} ${index}`
          : `${elevationValues[index]}`}
      </Text>
    </Surface>
  );

  return (
    <ScreenWrapper>
      <List.Section title="Elevated surface">
        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
          {elevationValues.map((_, index) => renderSurface(index, 'elevated'))}
        </ScrollView>
      </List.Section>

      <List.Section title="Flat surface">
        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
          {elevationValues.map((_, index) => renderSurface(index, 'flat'))}
        </ScrollView>
      </List.Section>

      <List.Section title="Layout">
        <View style={styles.content}>
          <View style={styles.horizontalSurfacesContainer}>
            <Surface style={styles.horizontalSurface}>
              <Text style={styles.centerText}>Left</Text>
            </Surface>
            <Surface style={styles.horizontalSurface}>
              <Text style={styles.centerText}>Right</Text>
            </Surface>
          </View>
          <View style={styles.verticalSurfacesContainer}>
            <Surface style={styles.verticalSurface}>
              <Text style={styles.centerText}>Top</Text>
            </Surface>
            <Surface style={styles.verticalSurface}>
              <Text style={styles.centerText}>Bottom</Text>
            </Surface>
          </View>
        </View>
      </List.Section>
    </ScreenWrapper>