Function SearchExample

example/src/Examples/SearchbarExample.tsx:21–239

({ navigation }: Props)

};

const SearchExample = ({ navigation }: Props) => {
  const [isVisible, setIsVisible] = React.useState(false);
  const [searchQueries, setSearchQuery] = React.useState({
    searchBarMode: '',
    traileringIcon: '',
    traileringIconWithRightItem: '',
    rightItem: '',
    loadingBarMode: '',
    searchViewMode: '',
    searchWithoutBottomLine: '',
    loadingViewMode: '',
    clickableBack: '',
    clickableDrawer: '',
    clickableLoading: '',
  });

  const { isV3, colors } = useExampleTheme();

  return (
    <>
      <ScreenWrapper>
        {!isV3 && (
          <Searchbar
            placeholder="Search"
            onChangeText={(query) =>
              setSearchQuery({ ...searchQueries, searchBarMode: query })
            }
            value={searchQueries.searchBarMode}
            style={styles.searchbar}
          />
        )}
        {isV3 && (
          <List.Section title="Bar mode">
            <Searchbar
              placeholder="Search"
              onChangeText={(query) =>
                setSearchQuery({ ...searchQueries, searchBarMode: query })
              }
              value={searchQueries.searchBarMode}
              style={styles.searchbar}
              mode="bar"
            />
            <Searchbar
              placeholder="Trailering icon"
              onChangeText={(query) =>
                setSearchQuery({ ...searchQueries, traileringIcon: query })
              }
              value={searchQueries.traileringIcon}
              traileringIcon={'microphone'}
              traileringIconColor={
                isVisible ? MD3Colors.error40 : colors.onSurfaceVariant
              }
              traileringIconAccessibilityLabel={'microphone button'}
              onTraileringIconPress={() => setIsVisible(true)}
              style={styles.searchbar}
              mode="bar"
            />
            <Searchbar