react-native-gesture-handler#FlatList JavaScript Examples

The following examples show how to use react-native-gesture-handler#FlatList. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: DirectMessageScreen.js    From react-native-instagram-clone with MIT License 6 votes vote down vote up 
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>
    </>
  );
}
Example #2
Source File: StoryContainer.js    From react-native-instagram-clone with MIT License 6 votes vote down vote up 
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>
  );
}
Example #3
Source File: ProfileGrid.js    From react-native-instagram-clone with MIT License 6 votes vote down vote up 
export default function ProfileGrid() {
  return (
    <FlatList
      data={data}
      style={{marginTop: 2, marginStart: 2}}
      renderItem={({item, index}) => <Test />}
      numColumns={3}
      indicatorStyle={'white'}
      showsVerticalScrollIndicator={true}
    />
  );
}
Example #4
Source File: profileScreen.js    From react-native-instagram-clone with MIT License 6 votes vote down vote up 
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 />
        </>
      )}
    />
  );
}
Example #5
Source File: SearchGrid.js    From react-native-instagram-clone with MIT License 6 votes vote down vote up 
export default function SearchGrid() {
  return (
    <FlatList
      data={data}
      //style={{marginTop: 2, marginStart: 2}}
      renderItem={({item, index}) => <Test />}
      //numColumns={3}
      indicatorStyle={'white'}
      showsVerticalScrollIndicator={true}
    />
  );
}
Example #6
Source File: SearchTopTags.js    From react-native-instagram-clone with MIT License 6 votes vote down vote up 
export default function SearchTopTags() {
  return (
    <FlatList
      horizontal={true}
      showsHorizontalScrollIndicator={false}
      style={{backgroundColor: colors.bottomBackGround}}
      data={data}
      renderItem={({item, index}) => <TagContainer tag={item.tag} />}
    />
  );
}
Example #7
Source File: MessagesList.js    From react-native-instagram-clone with MIT License 5 votes vote down vote up 
export default function MessagesList() {
  return (
    <FlatList
      data={data}
      renderItem={({item, index}) => <MessageListItem data={item} />}
    />
  );
}
Example #8
Source File: Leaderboard.js    From FlappyFace with MIT License 5 votes vote down vote up 
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>
    );
  }
Example #9
Source File: Home.js    From deprem with GNU Lesser General Public License v3.0 4 votes vote down vote up 
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>
  );
}