Function BannerExample

example/src/Examples/BannerExample.tsx:20–101

()

);

const BannerExample = () => {
  const [visible, setVisible] = React.useState<boolean>(true);
  const [useCustomTheme, setUseCustomTheme] = React.useState<boolean>(false);
  const defaultTheme = useExampleTheme();

  const [height, setHeight] = React.useState(0);

  const handleLayout = ({ nativeEvent }: LayoutChangeEvent) => {
    const { height: layoutHeight } = nativeEvent.layout;
    setHeight(layoutHeight);
  };

  const customTheme = !defaultTheme.isV3
    ? {
        ...defaultTheme,
        colors: {
          text: MD2Colors.white,
          surface: MD2Colors.blue200,
          primary: MD2Colors.purple900,
        },
      }
    : {
        ...defaultTheme,
        colors: {
          onSurface: MD3Colors.tertiary100,
          elevation: {
            level1: MD3Colors.tertiary50,
          },
          primary: MD3Colors.tertiary10,
        },
      };

  return (
    <>
      <ScreenWrapper>
        <View style={[styles.grid, { paddingTop: height }]}>
          {PHOTOS.map((uri) => (
            <View key={uri} style={styles.item}>
              <Image
                source={{ uri }}
                style={styles.photo}
                accessibilityIgnoresInvertColors
              />
            </View>
          ))}
        </View>
      </ScreenWrapper>
      <FAB
        icon="eye"
        label={visible ? 'Hide banner' : 'Show banner'}
        style={styles.fab}
        onPress={() => setVisible(!visible)}
      />
      <Banner
        onLayout={handleLayout}
        actions={[
          {
            label: `Set ${useCustomTheme ? 'default' : 'custom'} theme`,