react-native-gesture-handler#FlatList JavaScript Examples

export default function DirectMessageScreen() {
  return (
    <>
      <FlatList
        style={{backgroundColor: '#000', flex: 1}}
        data={data}
        renderItem={() => (
          <>
            <DirectMessageSearch />
            <Title />
            <MessagesList />
          </>
        )}
      />
      <TouchableOpacity>
        <View
          style={{
            backgroundColor: colors.bottomBackGround,
            height: 45,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <View style={{flexDirection: 'row', alignItems: 'center'}}>
            <Image
              source={images.dmBottomCamera}
              style={{width: 25, height: 25}}
            />
            <Text style={{color: '#4296f5', marginStart: 10}}>Camera</Text>
          </View>
        </View>
      </TouchableOpacity>
    </>
  );
}

export default function StoryContainer({stories, storyOnPress}) {
  return (
    <View>
      <FlatList
        showsHorizontalScrollIndicator={false}
        indicatorStyle={'white'}
        horizontal={true}
        data={stories}
        renderItem={({item}) => (
          <StoryListItem item={item} storyOnPress={storyOnPress} />
        )}
        keyExtractor={(item) => item.key}
      />
      <View style={Styles.sperator}></View>
    </View>
  );
}

export default function ProfileGrid() {
  return (
    <FlatList
      data={data}
      style={{marginTop: 2, marginStart: 2}}
      renderItem={({item, index}) => <Test />}
      numColumns={3}
      indicatorStyle={'white'}
      showsVerticalScrollIndicator={true}
    />
  );
}

export default function profileScreen() {
  return (
    <FlatList
      style={{flex: 1, backgroundColor: colors.bottomBackGround}}
      /*<ProfileHeader />
      <UserBio />
      <EditProfileButton />
      <ConstantStories />
      <LineSeperator />
      <ProfileGrid />*/
      data={data}
      renderItem={() => (
        <>
          <ProfileHeader />
          <UserBio />
          <EditProfileButton />
          <ConstantStories />
          <LineSeperator />
          <GridIcon />
          <ProfileGrid />
        </>
      )}
    />
  );
}

export default function SearchGrid() {
  return (
    <FlatList
      data={data}
      //style={{marginTop: 2, marginStart: 2}}
      renderItem={({item, index}) => <Test />}
      //numColumns={3}
      indicatorStyle={'white'}
      showsVerticalScrollIndicator={true}
    />
  );
}

export default function SearchTopTags() {
  return (
    <FlatList
      horizontal={true}
      showsHorizontalScrollIndicator={false}
      style={{backgroundColor: colors.bottomBackGround}}
      data={data}
      renderItem={({item, index}) => <TagContainer tag={item.tag} />}
    />
  );
}

export default function MessagesList() {
  return (
    <FlatList
      data={data}
      renderItem={({item, index}) => <MessageListItem data={item} />}
    />
  );
}

render() {
    return (
      <View style={styles.viewContainer}>
        <Image
          source={bg}
          style={styles.backgroundImage}
          resizeMode="stretch"
        />
        <View style={styles.backBtn}>
          <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
            <Text style={[styles.backBtnText, Styles.fontLarge]}>x</Text>
          </TouchableOpacity>
        </View>
        <Image source={bird} resizeMode="contain" style={[styles.birdImage]} />
        <Animated.View style={styles.innerContainer}>
          <FlatList
            style={styles.boardListContainer}
            data={this.state.board}
            keyExtractor={(i, index) => index}
            renderItem={({item}) => {
              return (
                <View style={styles.flatListRow}>
                  <Text style={[styles.flatListText, Styles.fontSmall]}>
                    {item.name}
                  </Text>
                  <Text style={[styles.flatListText, Styles.fontSmall]}>
                    {item.score}
                  </Text>
                </View>
              );
            }}
            ItemSeparatorComponent={() => {
              return <View style={styles.flatListSeparator} />;
            }}
            ListEmptyComponent={() => {
              return (
                <Text style={[styles.flatListText, Styles.fontSmall]}>
                  Loading...
                </Text>
              );
            }}
            ListHeaderComponent={() => {
              return (
                <View
                  style={[
                    styles.flatListRow,
                    {
                      borderBottomColor: 'white',
                      borderBottomWidth: 1,
                    },
                  ]}>
                  <Text style={[styles.flatListText, Styles.fontSmall]}>
                    Name
                  </Text>
                  <Text style={[styles.flatListText, Styles.fontSmall]}>
                    Score
                  </Text>
                </View>
              );
            }}
          />
        </Animated.View>
      </View>
    );
  }

function Search({navigation}) {
  const [searchResult, setResult] = useState([]);
  const [keyword, setKeyword] = useState('');
  const [loading, setLoading] = useState(false);

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

  fetchData = () => {
    setLoading(true);
    return Axios.get(
      'https://api.orhanaydogdu.com.tr/deprem/live.php?limit=100',
    )
      .then((res) => {
        setResult(res.data.result);
        return res.data.result;
      })
      .catch((err) => {
        alert(err);
        return err;
      })
      .finally(() => setLoading(false));
  };

  searchData = () => {
    fetchData().then((response) => {
      let result = [];
      const text = keyword.toUpperCase();
      if (text != '') {
        response.map((element) => {
          if (element.title.includes(text)) {
            result.push(element);
          }
        });
      } else {
        result = response;
      }
      setResult(result);
    });
  };

  const renderItem = useCallback(
    ({item}) => (
      <ListItem
        onPress={() => navigation.navigate('QuakeDetail', {item: item})}
        title={item.title}
        mag={item.mag}
        date={item.date}
      />
    ),
    [],
  );

  const getItemLayout = useCallback(
    (_, index) => ({
      length: ITEM_HEIGHT,
      offset: ITEM_HEIGHT * index,
      index,
    }),
    [],
  );

  const keyExtractor = useCallback((_, index) => index.toString(), []);

  return (
    <View style={styles.container}>
      <View style={styles.headerView}>
        <Text style={styles.titleText}>Deprem</Text>
        <Text style={styles.subtitleText}>
          Kandilli Rasathanesi'nden Anlık Veriler
        </Text>
        <View style={styles.inputView}>
          <TextInput
            style={styles.textInput}
            value={keyword}
            onChangeText={(value) => setKeyword(value)}
            placeholder="Bölge Giriniz"
          />
          <IconButton
            onPress={searchData}
            name="magnify"
            color={Colors.primary}
          />
        </View>
      </View>
      <View style={styles.contentView}>
        {loading ? (
          <Loading
            title="Depremler Yükleniyor"
            subtitle="Deprem verileri yükleniyor. Lütfen bekleyiniz."
          />
        ) : (
          <FlatList
            data={searchResult}
            keyExtractor={keyExtractor}
            renderItem={renderItem}
            getItemLayout={getItemLayout}
            maxToRenderPerBatch={5}
          />
        )}
      </View>
    </View>
  );
}