react-native-elements#colors JavaScript Examples

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>
  );
}