Quantcast
Viewing all articles
Browse latest Browse all 17050

How to implement checkbox in FlatList React Native

I'm trying to implement checkbox while fetching the data API from the backend but the issue that i encountered is that all the checkbox are checked and i'm unable to uncheck it and also how can i pass the selected checked checkbox as a params to the next component.Hope I could get some help.

This is what i have in my current codes;

 class Gifts extends Component {    constructor(props){      super(props);      this.state={        users:'',        checked: {},        selected: 0      }    }

//api codes//handle checkbox

  handleChange = (index) => {    let { checked } = this.state;    checked[index] = !checked[index];    this.setState({ checked });  }  onPress(value) {    this.setState({ selected: value });}  render() {    let { navigation } = this.props        return (<SafeAreaView style={{flex:1 }}><View style={{ flex:1,justifyContent: 'center'}}>               //...codes..//<View style={styles.userlist}><FlatList                            data={this.state.users}                            keyExtractor={(item ,index) => index.toString()}                            renderItem={({ item }) => (<FlatList                                  data={item.friendList}                                  renderItem={({ item }) => <View style= {{flexDirection:'row', justifyContent:'space-between'}}><Text style={{marginTop:20, marginLeft:10, fontSize: 20}}>{item.name}</Text><CheckBox                                      center                                      checkedIcon='dot-circle-o'                                      uncheckedIcon='circle-o'                                      checked={this.state.checked}                                      value={ this.state.checked[item.flag]}                                      onPress={this.onPress}                                    /> </View>                                }                                  keyExtractor={(item ,index) => index.toString()}                                  ItemSeparatorComponent ={this.ItemSeparator}                                />                            )}                    /></View><Button                   rounded                  // disabled={true}                    //onPress={}                  style={{width: 100, justifyContent: 'center',marginLeft:150}}><Text>Send</Text></Button></View></SafeAreaView>    );  }}

Viewing all articles
Browse latest Browse all 17050

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>