CODEWITHSUNDEEP
reactjsreact-nativereduxreact-native-flatlist
serene
serene

Reputation: 1646

Refreshing FlatList on pull up with react native redux

I am trying to refresh FlatList data on pulling up using react-native redux. And on pulling the FlatList data, the loading icon is appearing and disappearing but the list is not showing any updates that I have done on the database.

Here is the code:

    class flatRedux extends Component {

        componentWillMount() {
            this.props.listShow();
        }
        onRefresh = () => { 
               this.props.loading = true,
               this.props.flatlist= [],

                () => {  
                      this.props.listShow();                      
                  }         
        }

        render() {
            if (this.props.loading) {
                return <Spinner size="large" />;
            }
            return (
                <View style={styles.MainContainer}>
                    <SearchBox
                        placeholder="Search..."
                        onChangeText={this._onSearchChange}
                    />
                    <FlatList
                        onRefresh={() => this.onRefresh()}
                        refreshing={this.props.loading}
                        data={this.props.flatlist}
                        extraData={this.props}
                        ItemSeparatorComponent={this.FlatListItemSeparator}

                        keyExtractor={(item, index) => index.toString()}

                        renderItem={({ item }) =>
                            <Text key={item.id} style={styles.FlatListItemStyle} >
                                {item.cl_name} {'\n'} {item.check} </Text>}

                       />
                </View>
            );
        }
    }
    const mapStateToProps = state => {
        return {
            flatlist: state.listShow.flatlist,
            loading: state.listShow.loading
        };
    };
    export default connect(mapStateToProps, { listShow, searchResult, searchShow })(flatRedux);

This one is Reducer's code:

import {FLAT_DATA } from '../actions/types';

const INITIAL_STATE = {
    flatlist: [],
    loading: true
};
export default (state = INITIAL_STATE, action) => {
   console.log(action);
    switch (action.type) {
        case FLAT_DATA:
            return { ...state, flatlist: action.payload, loading: false };
        default:
            return state;
    }

};

Upvotes: 0

Views: 1954

Answers (3)

pahferreira
pahferreira

Reputation: 126

You should have state for your component and apply the changes you want in it. When the state is changed by your data fetch, the component will re-render and display the new data.

Upvotes: 0

SDushan
SDushan

Reputation: 4631

Don't assign values to props inside onRefresh function. Create separate actions to handle fetch data.

Ex:

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case FETCHING_FLAT_DATA:
            return { ...state, flatlist: [], loading: true };
        case FETCHING_FLAT_DATA_SUCCESS:
            return { ...state, flatlist: action.payload, loading: false };
        default:
            return state;
    }
}

If you want more help Check this example.

Upvotes: 2

Manzn
Manzn

Reputation: 316

Have you tried using RefreshControl?

<View style={styles.MainContainer}>
    <SearchBox
        placeholder="Search..."
        onChangeText={this._onSearchChange}
    />
    <FlatList
        refreshControl={
          <RefreshControl
            refreshing={this.props.loading}
            onRefresh={this.onRefresh.bind(this)}
          />
        }
        data={this.props.flatlist}
        extraData={this.props}
        ItemSeparatorComponent={this.FlatListItemSeparator}

        keyExtractor={(item, index) => index.toString()}

        renderItem={({ item }) =>
            <Text key={item.id} style={styles.FlatListItemStyle} >
                {item.cl_name} {'\n'} {item.check} </Text>}

       />
</View>

When I used onRefresh, i also saw a couple of people having trouble with it, and I ended up using this!

Haven´t testet the snipped, hope this works!

Upvotes: 0

Related Questions