react-native-elements#SearchBar JavaScript Examples

BrandScreen = ({ navigation }) => {
  const [search, setSearch] = React.useState('')

  return (
    <>
      <ScrollView style={globalStyles.containerFluid}>
        <SearchBar
          platform="ios"
          value={search}
          placeholder="Search shop catalogue"
          onChangeText={setSearch}
          inputContainerStyle={{
            backgroundColor: colors.background
          }}
          inputStyle={{
            fontFamily: 'lato-regular',
            fontSize: 15
          }}
          searchIcon={{
            color: colors.black
          }}
        />
        {brandFilterList.map((item, i) => (
          <View key={i} style={styles.listContainer}>
            <View style={styles.listLeftContainer}>
              <CheckR size={17} style={{color: item.active ? colors.primary : colors.gray, marginRight: 10}} />
              <Text style={[styles.listItemTitle, { color: item.active ? colors.primary : colors.gray }]}>{item.name}</Text>
            </View>
            <Text style={{color: item.active ? colors.primary : colors.gray}}>{item.count}</Text>
          </View>
        ))}
      </ScrollView>
    </>
  );
}

render(){
      return(
        <View style ={styles.container}>
           <Header 
                backgroundColor = {'pink'}
                centerComponent = {{
                    text : 'Bed Time Stories',
                    style : { color: 'white', fontSize: 20}
                }}
            />
          <View styles ={{height:20,width:'100%'}}>
              <SearchBar
              placeholder="Type Here..."
              onChangeText={text => this.SearchFilterFunction(text)}
              onClear={text => this.SearchFilterFunction('')}
              value={this.state.search}
            />
          </View>
          
          <FlatList
                data={this.state.search === "" ?  this.state.allStories: this.state.dataSource}
                renderItem={({ item }) => (
                  <View style={styles.itemContainer}>
                    <Text>  Title: {item.title}</Text>
                    <Text>  Author : {item.author}</Text>
                  </View>
                )}
                keyExtractor={(item, index) => index.toString()}
                /> 
          
          
          
        </View>  
      );      
    }

function Entry({ navigation }) {
  const [cards, setCards] = useState([]);
  const [filteredCards, setFilteredCards] = useState([]);
  const [search, setSearch] = useState('');
  const isFocused = useIsFocused();
  const {colors, isDark} = useTheme();

  const onNewVaccine = (e) => {
    navigation.navigate('QRReader')
  }

  const actions = [{
      text: "New Vaccine",
      icon:  <FontAwesome5 name={'syringe'} style={styles.icon} solid />,
      name: "bt_vaccine",
      position: 0
    }
  ];

  const filter = (cards, text) => {
    if (text && text.length > 0) { 
      const lowerText = text.toLowerCase();
      return cards.filter(function (item) {
          return JSON.stringify(item).toLowerCase().includes(lowerText);
        });
    } else {
      return cards;
    }
  }

  const searchFilter = (text) => {
    setFilteredCards(filter(cards, text));
    setSearch(text);
  }

  const load = async () => {
    let cards = await listCards();
    setCards(cards);
    setFilteredCards(filter(cards, search));
  };

  const removeItem = async (signature) => {
    const remaining = await removeCard(signature);
    setCards(remaining);
    setFilteredCards(filter(remaining, search));
  }

  useEffect(() => {
    changeNavigationBarColor(colors.background, !isDark);
    load();
  }, [isFocused]);

  return (
    <View style={styles.container} backgroundColor={colors.background}>
        <StatusBar 
          backgroundColor={colors.background}
          barStyle={isDark ? "light-content" : "dark-content"}/>

        <SearchBar round lightTheme={!isDark}
            containerStyle={{backgroundColor:colors.background, 
                            borderBottomColor: colors.divisor,  
                            borderTopColor: colors.background, paddingBottom: 4, paddingTop: 0}}
            placeholder="Search Here..."
            onChangeText={text => searchFilter(text)}
            value={search}
            inputContainerStyle={{marginLeft: 7, marginRight: 7, backgroundColor:colors.background}}
          />

        <SafeAreaView style={styles.flatList}>
          <View style={styles.border}>
            <FlatList 
              data={filteredCards} 
              keyExtractor={item => item.signature} 
              contentContainerStyle={filteredCards.length == 0 && styles.centerEmptySet}
              ListEmptyComponent={<NoCards colors={colors} />}
              renderItem={({item}) => {
                if (item.format === "CRED" && item.type === "BADGE")  
                  return <View style={styles.listItem}><VaccineCard detail={item} colors={colors} navigation={navigation} removeItem={removeItem} pressable/></View>
                if (item.format === "CRED" && item.type === "COUPON")  
                  return <View style={styles.listItem}><CouponCard detail={item} colors={colors} navigation={navigation} removeItem={removeItem} pressable/></View>
                if (item.format === "CRED" && item.type === "STATUS")  
                  return <View style={styles.listItem}><StatusCard detail={item} colors={colors} navigation={navigation} removeItem={removeItem} pressable/></View>
                if (item.format === "CRED" && item.type === "PASSKEY")  
                  return <View style={styles.listItem}><PassKeyCard detail={item} colors={colors} navigation={navigation} removeItem={removeItem} pressable/></View>
                if (item.format === "DIVOC" && item.type === "COWIN")  
                  return <View style={styles.listItem}><CowinCard detail={item} colors={colors} navigation={navigation} removeItem={removeItem} pressable/></View>
                if (item.format === "SHC" && item.type === "FHIRBundle")  
                  return <View style={styles.listItem}><SHCCard detail={item} colors={colors} navigation={navigation} removeItem={removeItem} pressable/></View>
                if (item.format === "DCC" && item.type === "DCC")  
                  return <View style={styles.listItem}><DCCCard detail={item} colors={colors} navigation={navigation} removeItem={removeItem} pressable/></View>
                if (item.format === "DCC" && item.type === "UY")  
                  return <View style={styles.listItem}><DCCUYCard detail={item} colors={colors} navigation={navigation} removeItem={removeItem} pressable/></View>
                if (item.format === "VDS" && item.type === "icao.vacc")  
                  return <View style={styles.listItem}><VDSVaxCard detail={item} colors={colors} navigation={navigation} removeItem={removeItem} pressable/></View>
                if (item.format === "VDS" && item.type === "icao.test")  
                  return <View style={styles.listItem}><VDSTestCard detail={item} colors={colors} navigation={navigation} removeItem={removeItem} pressable/></View>
              
              
              }} />
          </View>
        </SafeAreaView>

        <FloatingAction
          actions={actions}
          overrideWithAction={true}
          onPressItem={onNewVaccine}
        />
    </View>
  );
}

export default function Cases(props) {

	const activeTheme = useContext(theme).globalTheme;
	const darkTheme = useContext(theme).darkTheme;

	const styles = {
		container: {
			height: 250,
			width: '100%',
			position: 'relative',
			top: 0,
			zIndex: 10,
		},
		map: {
			position: 'absolute',
			top: 0,
			width: '100%',
			height: '100%'
		},
		searchContainer: {
			zIndex: 90,
			backgroundColor: activeTheme.darkTheme ? '#00000070' : '#ffffff70',
			width: '78%',
			position: 'absolute',
			right: 10,
			top: 20,
			// backgroundColor: 'transparent',
			borderWidth: 0,
			borderTopWidth: 0,
			borderBottomWidth: 0,
			borderRadius: 10,
			padding: 0,
			paddingHorizontal: 20,
			borderColor: activeTheme.textColor.secondary,
			borderBottomColor: activeTheme.textColor.secondary,
			borderTopColor: activeTheme.textColor.secondary
		}
	}


	const mapView = useRef(null);
	const [search, setSearch] = useState("");
	const [data, setData] = useState([]);

	const [filteredData, setFilteredData] = useState([]);

	const [forceListRerender, setForceListRerender] = useState(false);

	const [currentLatitude, setCurrentLatitude] = useState(35.8617);
	const [currentLongitude, setCurrentLongitude] = useState(104.1954);

	function updateSearch(search) {
		setSearch(search);
	}

	useEffect(() => {
		console.log(currentLatitude);
		console.log(currentLongitude);
	}, [currentLatitude, currentLongitude]);

	//filter data
	useEffect(() => {
		let newData;

		if (search.length > 0) {
			newData = data.filter((item) => {
				if (item) {
					return item.provinceState?.includes(search) || item.countryRegion?.includes(search);
				}
			})

		} else {
			console.log("new Data")
			newData = data;
		}

		setFilteredData(newData);

	}, [search, data]);

	useEffect(() => {
		setForceListRerender(!forceListRerender);
	}, [filteredData])

	function renderItem({ item }) {
		return (
			<CasesCard case={item} type={props.route.params['case']} onPress={() => setMapLocation(item.lat, item.long)} />
		)
	}

	function setMapLocation(latitude, longitude) {
		setCurrentLatitude(latitude);
		setCurrentLongitude(longitude);

		mapView.current.animateCamera({
			center: {
				latitude: currentLatitude,
				longitude: currentLongitude,
			},
			pitch: 1,
			heading: 0,
			zoom: 3
		})
	}

	useEffect(() => {
		getCases();
	}, [])

	async function getCases() {
		let caseType = props.route.params['case'];
		let response = await fetch(base_url + '/' + caseType.toLowerCase());

		if (response.status == 200) {
			let result = await response.json();

			setData(result, () => {
				setForceListRerender(!forceListRerender);
			});
		}
	}

	let markerColor;
	switch (props.route.params['case']) {
		case 'Confirmed':
			markerColor = activeTheme.textColor.confirmed;
			break;
		case 'Recovered':
			markerColor = activeTheme.textColor.recovered;
			break;
		case 'Deaths':
			markerColor = activeTheme.textColor.deaths;
	}
	return (
		<>
			<Button
				icon={
					<Icon
						name="arrow-back"
						type="material"
						color={activeTheme.textColor.secondary}
					/>
				}
				containerStyle={{ position: 'absolute', top: 20, left: 20, zIndex: 100 }}
				buttonStyle={{ backgroundColor: activeTheme.darkTheme ? '#00000070' : '#ffffff70', padding: 12 }}
				onPress={() => props.navigation.goBack()}
			/>
			<View style={styles.container}>
				<MapView
					ref={mapView}
					style={styles.map}
					initialCamera={{
						center: {
							latitude: 35.8617,
							longitude: 104.1954,
						},
						pitch: 1,
						heading: 0,
						zoom: 1
					}}
				>
					{data.map((item) => {
						return (
							<Marker
								coordinate={{
									longitude: item.long,
									latitude: item.lat
								}}
								pinColor={markerColor}
							/>)
					})}
				</MapView>
				{/* <View style={{}}> */}
				<SearchBar
					placeholder="Type City or province region"
					onChangeText={updateSearch}
					value={search}
					containerStyle={styles.searchContainer}
					inputContainerStyle={{ backgroundColor: 'transparent' }}
					inputStyle={{ color: activeTheme.textColor.secondary }}
					placeholderTextColor={activeTheme.textColor.secondary}
					searchIcon={{ color: activeTheme.textColor.secondary }}
				/>
				{/* </View> */}
			</View>
			<Container>
				<KeyboardAvoidingView>

					<View style={{ flex: 1, padding: 10 }}>
						<FlatList
							data={filteredData}
							renderItem={renderItem}
							extraData={forceListRerender}
						/>
					</View>
				</KeyboardAvoidingView>
			</Container>


		</>
	)
}

SearchScreen = ({ navigation }) => {
  const [query, setQuery] = useState("");
  const [XMen, popularHeroes, villains] = useContext(HeroesContext);
  const [heroNames, setHeroNames] = useState([]);
  const [filteredHeroNames, setFilteredHeroNames] = useState([]);
  const [loadingSearch, setLoadingSearch] = useState(false);
  const [loading, setLoading] = useState(false);

  const fetchHeroes = async () => {
    try {
      setLoadingSearch(true);
      const response = await fetch(
        "https://cdn.jsdelivr.net/gh/akabab/[email protected]/api/all.json"
      );
      const herojson = await response.json();

      setHeroNames(herojson);
      // heroNames.forEach((hero) => {
      //   console.log(hero.name);
      // });
      setLoadingSearch(false);
    } catch (error) {
      console.error(error);
      setLoadingSearch(false);
    }
  };

  const renderFooter = () => {
    if (!loadingSearch) return null;

    return (
      <View
        style={{
          paddingVertical: 20,
          borderTopWidth: 1,
          borderColor: "#CED0CE",
        }}
      >
        <ActivityIndicator animating size="large" />
      </View>
    );
  };

  const renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "86%",
          backgroundColor: COLORS.navy,
          borderRadius: 50,
          marginLeft: "7%",
        }}
      />
    );
  };

  const handleSearch = (text) => {
    const formattedQuery = text.toLowerCase();
    const data = heroNames.filter((item) => {
      // return contains(name, formattedQuery);
      return item.name.toLowerCase().includes(formattedQuery);
    });
    setFilteredHeroNames(data);
    setQuery(text);
    // this.setState({ data, query: text })
  };

  const search = async (item) => {
    try {
      setLoading(true);
      const searchResponse = await fetch(
        `https://superheroapi.com/api/${api.key}/${item.id}/`,
        {
          method: "GET",
        }
      );
      // console.log(item.biography.fullName);
      // const realName = item.biography.fullName.text();
      const characterResponse = await fetch(
        `https://comicvine.gamespot.com/api/characters/?api_key=${apiComicVine.key}&filter=name:${item.name},publisher:${item.biography.publisher},real_name:${item.biography.fullName},origin:${item.appearance.race}&field_list=deck,publisher,first_appeared_in_issue&format=json`,
        {
          method: "GET",
        }
      );
      const hero = await searchResponse.json();
      const characterInfo = await characterResponse.json();
      // console.log(characterInfo);
      {
        characterInfo.results[0].deck == undefined
          ? (summary = "no summary")
          : (summary = characterInfo.results[0].deck);
      }
      // summary = characterInfo.results[0].deck;
      firstIssue = characterInfo.results[0].first_appeared_in_issue;
      publisher = characterInfo.results[0].publisher.name;
      const firstComicResponse = await fetch(
        `https://comicvine.gamespot.com/api/issue/4000-${firstIssue.id}/?api_key=${apiComicVine.key}&format=json`,
        {
          method: "GET",
        }
      );
      const firstComicInfo = await firstComicResponse.json();
      // console.log(firstComicInfo);
      firstIssueURL = firstComicInfo.results.image.original_url;
      navigation.navigate("Character", {
        hero: hero,
        image: { uri: item.images.lg },
        // publisher: item.publisher,
        comicPicture: comicPicture,
        summary: summary,
        firstIssue: firstIssue,
        firstIssueURL: firstIssueURL,
        publisher: publisher,
      });
      setLoading(false);
    } catch (error) {
      console.error(error);
      setLoading(false);
      Alert.alert("Sorry!", "Hero Not Found");
    }
  };

  useEffect(() => {
    fetchHeroes();
    setLoading(false);
  }, []);

  return (
    <View style={styles.appContainer}>
      <StatusBar
        translucent
        backgroundColor="transparent"
        barStyle="dark-content"
      />
      <SafeAreaView>
        <View style={styles.header}>
          <Text style={styles.appTitle}>search</Text>
        </View>
        {/* <KeyboardAvoidingView
          style={{
            paddingHorizontal: 15,
            marginBottom: -20,
            zIndex: 5,
            backgroundColor: "transparent",
          }}
        > */}
        <SearchBar
          placeholder="Search..."
          onChangeText={handleSearch}
          value={query}
          containerStyle={styles.inputContainer}
          inputContainerStyle={styles.input}
          inputStyle={styles.inputText}
          searchIcon={{ size: 25 }}
          round={true}
        />
        {/* </KeyboardAvoidingView> */}
        <BigList
          itemHeight={ITEM_HEIGHT}
          headerHeight={0}
          footerHeight={0}
          style={{
            position: "absolute",
            width: "100%",
            marginTop: 20,
            paddingTop: 10,
            height: Platform.OS === "ios" ? 580 : 590,
          }}
          data={
            filteredHeroNames && filteredHeroNames.length > 0
              ? filteredHeroNames
              : heroNames
          }
          renderItem={({ item }) => (
            <TouchableOpacity onPress={() => search(item)}>
              <View
                style={{
                  flexDirection: "row",
                  padding: 10,
                  // paddingTop: 30,
                  paddingHorizontal: 15,
                  alignItems: "center",
                  borderBottomColor: COLORS.navy,
                  borderBottomWidth: 2,

                  // backgroundColor: COLORS.navy,
                  marginBottom: 15,
                  // marginHorizontal: 10,
                  borderRadius: 15,
                }}
              >
                <Avatar
                  rounded
                  source={{ uri: item.images.md }}
                  size="medium"
                  containerStyle={{
                    marginRight: 13,
                    borderColor: COLORS.navy,
                    borderWidth: 2,
                    top: 0,
                  }}
                />
                {/* <Image
                  source={{ uri: item.images.sm }}
                  style={{ width: "100%", height: 90, borderRadius: 10 }}
                /> */}
                <Text
                  style={{
                    ...styles.p,
                    fontFamily: "Flame-Regular",
                    color: COLORS.navy,
                  }}
                >
                  {item.name}
                </Text>
              </View>
            </TouchableOpacity>
          )}
          keyExtractor={(item) => item.id.toString()}
          // ItemSeparatorComponent={renderSeparator}
          renderFooter={renderFooter}
          // ListHeaderComponent={}
        />
        <LinearGradient
          colors={[COLORS.beige, "#ffffff00"]}
          style={styles.scrollGradient}
          locations={[0, 1]}
          pointerEvents={"none"}
        />
        {loading === true ? (
          <Modal statusBarTranslucent={true}>
            <View
              style={{
                backgroundColor: COLORS.beige,
                width: "100%",
                height: "100%",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <Progress.CircleSnail
                color={[COLORS.navy, COLORS.orange, COLORS.blue]}
                size={80}
                thickness={10}
                style={styles.loading}
                strokeCap={"round"}
              />
              <Text
                style={{
                  ...styles.p,
                  fontFamily: "Flame-Regular",
                  marginTop: -15,
                  left: 3,
                }}
              >
                loading...
              </Text>
            </View>
          </Modal>
        ) : null}
      </SafeAreaView>
    </View>
  );
}

SearchBarPlayground = () => {
  const params = useView({
    componentName: "SearchBar",
    props: {
      platform: {
        value: "default",
        options: {
          default: "default",
          ios: "ios",
          android: "android",
        },
        type: PropTypes.Enum,
        description: "Defines the Platfrom.",
      },
      clearIcon: {
        type: PropTypes.Object,
        value: "",
      },
      searchIcon: {
        type: PropTypes.Object,
        value: "",
      },
      cancelIcon: {
        type: PropTypes.Object,
        value: "",
        description: "Android Only",
      },
      containerStyle: {
        type: PropTypes.Object,
        value: `{}`,
      },
      inputContainerStyle: {
        type: PropTypes.Object,
        value: `{}`,
      },

      inputStyle: {
        type: PropTypes.Object,
        value: `{}`,
      },

      leftIconContainerStyle: {
        type: PropTypes.Object,
        value: `{}`,
      },

      rightIconContainerStyle: {
        type: PropTypes.Object,
        value: `{}`,
      },
      lightTheme: {
        type: PropTypes.Boolean,
        value: false,
        description: "Default (platform) only ",
      },
      loadingProps: {
        type: PropTypes.Object,
        value: `{}`,
      },
      onChangeText: {
        type: PropTypes.Function,
        value: `(newVal) => setValue(newVal)`,
      },
      onClearText: {
        type: PropTypes.Function,
        value: `() => console.log(onClearText())`,
      },
      placeholder: {
        type: PropTypes.String,
        value: "Type query here...",
      },
      placeholderTextColor: {
        type: PropTypes.String,
        value: "#888",
      },
      round: {
        type: PropTypes.Boolean,
        value: false,
        description: "Default (platform) only ",
      },
      showCancel: {
        type: PropTypes.Boolean,
        value: false,
        description: "ios (platform) only ",
      },
      showLoading: {
        type: PropTypes.Boolean,
        value: false,
        description: "Shows loader",
      },
      underlineColorAndroid: {
        type: PropTypes.String,
        value: "",
      },
      cancelButtonTitle: {
        type: PropTypes.String,
        value: "Cancel",
        description: "ios (platform) only ",
      },
      cancelButtonProps: {
        type: PropTypes.Object,
        value: `{}`,
        description: "ios (platform) only ",
      },
      onCancel: {
        type: PropTypes.Function,
        value: `() => console.log(onCancel())`,
      },
      value: {
        type: PropTypes.String,
        value: "",
        stateful: true,
      },
    },
    scope: {
      SearchBar,
    },
    imports: {
      "react-native-elements": {
        named: ["SearchBar"],
      },
    },
  });

  return (
    <React.Fragment>
      <Playground params={params} />
    </React.Fragment>
  );
}

HomeScreen = ({ navigation }) => {
  const [searchQuery, setSearchQuery] = React.useState('')

  const newJustInRenderItem = ({ item }) => {
    return (
      <FlatListImageItem
        item={item}
        onPress={() => console.log(item.id)}
        imageStyle={styles.newJustInImage}
        itemContainerStyle={styles.newJustInItemContainer}
      />
    )
  }

  return (
    <ScrollView style={globalStyles.containerFluid}>
      <View style={globalStyles.container}>
        <SearchBar
          platform="ios"
          value={searchQuery}
          placeholder="Search shop catalogue"
          onChangeText={text => setSearchQuery(text)}
          inputContainerStyle={{ backgroundColor: colors.white }}
          containerStyle={{ backgroundColor: colors.background }}
          inputStyle={ globalStyles.latoRegular16 }
          searchIcon={{ color: colors.black }}
          onSubmitEditing={() => {
            navigation.navigate('ProductsList', { searchQuery })
          }}
        />
      </View>
      <Image
        source={require('../../../../../assets/images/banner-first-order-discount/banner-first-order-discount.png')}
        style={styles.bannerFirst}
        onPress={() => {
          navigation.navigate('ProductsList', { title: 'Womens Dress' })
        }}
      />
      <Image
        source={require('../../../../../assets/images/discount-stripe/DiscountStripe.png')}
        style={styles.discountStripe}
      />
      <Image
        source={require('../../../../../assets/images/banner-EOS-sale/banner-EOS-sale.png')}
        style={styles.bannerEndOfSale}
      />
      <Text style={styles.hoardingBoard}>
        Free Shipping For You Till Midnight !
      </Text>
      <View style={styles.flatListContainer}>
        <View style={globalStyles.container}>
          <FlatList
            data={DATA}
            keyExtractor={item => item.id}
            renderItem={({ item }) => <Item item={item} />}
            numColumns={3}
            ListHeaderComponent={() => <Text style={[styles.flatListHeaderText, { marginLeft: 8 }]}>EXPLORE TOP BRANDS</Text>}
          />
        </View>
      </View>
      <View style={styles.flatListContainer}>
        <View
          style={globalStyles.container}
        >
          <FlatList
            data={BEST_DEAL_CARD_DATA}
            keyExtractor={item => item.id}
            renderItem={({ item }) => <Image source={item.source} style={styles.bestDealCards} /> }
            ListHeaderComponent={() => <Text style={styles.flatListHeaderText}>BEST DEALS</Text> }
          />
        </View>
      </View>
      <View style={globalStyles.containerFluid}>
        <Image source={require('../../../../../assets/images/banner-festive-trend-card/banner-festive-trend-card.png')}
          style={styles.bannerFestiveTrend}
        />
      </View>
      <View style={[styles.flatListContainer, {
          marginBottom: 114
        }
      ]}>
        <View
          style={globalStyles.container}
        >
          <FlatList
            data={NEW_JUST_IN_DATA}
            keyExtractor={item => item.id}
            renderItem={newJustInRenderItem}
            numColumns={3}
            ListHeaderComponent={() => <Text style={styles.flatListHeaderText}>NEW JUST IN</Text>}
          />
        </View>
      </View>
    </ScrollView>
  )
}