Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How i can limit the items in the FlatList and add load more?

My skills is basic, and i'm newbie in React native, what i want to do is limit the posts in 12 and when the user scroll automatically load more posts.

My Code:

export default class Posts extends Component {
constructor(props) {
super(props);
this.state = {
  isLoading: true,};}

componentDidMount() {
   return fetch(ConfigApp.URL+'json/data_posts.php')
     .then((response) => response.json())
     .then((responseJson) => {
       this.setState({
         isLoading: false,
         dataPosts: responseJson
       }, function() {
       });
     })
     .catch((error) => {
     });}

render() {
return (
    <FlatList
      data={ this.state.dataPosts }
      numColumns={2}
      renderItem={({item}) => 
            <TouchableOpacity activeOpacity={1} style={{flex: 1}}>
            <View style={{margin: 5, marginLeft: 4}}>
            <ImageBackground source={{uri: ConfigApp.IMAGESFOLDER+item.post_image}}>
                <LinearGradient colors={['rgba(0,0,0,0.3)', 'rgba(0,0,0,0.8)']}>
                        <Text numberOfLines={2}>{item.post_title}</Text>
                </LinearGradient>
            </ImageBackground>
            </View>
            </TouchableOpacity>
}
    keyExtractor={(item, index) => index}

    />
);}}
like image 631
bdroid Avatar asked May 05 '18 19:05

bdroid


People also ask

How do I add more data in FlatList in react-native?

flatlist-simpleBy passing extraData={selectedId} to FlatList we make sure FlatList itself will re-render when the state changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is a PureComponent and the prop comparison will not show any changes.

How do you optimize a large list of items on FlatList?

Use basic components​ The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component only for your big lists and make them with as little logic and nesting as possible.

How do you highlight and select multiple items in a FlatList?

FlatList has a prop called extraData that basically re-renders the FlatList whenever there is any change using state. This feature re-renders our selectItem and renderItem function and highlights the selected items.


1 Answers

You Can add the slice(start,end) method while fetching jsondata in datasource. This trick may solve your problem.

dataPosts: responseJson.slice(0,10) replace this line with yours.

like image 105
Adarsh Sharma Avatar answered Nov 02 '22 13:11

Adarsh Sharma