Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

How to implement checkbox in FlatList React Native

$
0
0

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 16750

Trending Articles



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