paramoshkinandrew / ReactNativeCircleCheckbox

Circle checkbox component for React Native
MIT License
46 stars 14 forks source link

CheckBox selection not work #15

Open sid-metiz opened 3 years ago

sid-metiz commented 3 years ago

I have a list and while i changed the item the checkbox not change but value upated

sid-metiz commented 3 years ago

data: [ { id: 1, name: 'Nik', birthday: '10 September', isSelect: true, }, { id: 2, name: 'David', birthday: '05 Febuary', isSelect: false, }, { id: 3, name: 'John', birthday: '', isSelect: false, }, { id: 4, name: 'William', birthday: '', isSelect: false, }, { id: 5, name: 'Lizza', birthday: '24 March', isSelect: true, }, { id: 6, name: 'Ellie', birthday: '17 December', isSelect: false, }, { id: 7, name: 'Ellie', birthday: '09 April', isSelect: false, }, { id: 8, name: 'Ellie', birthday: '09 April', isSelect: false, }, { id: 9, name: 'Ellie', birthday: '09 April', isSelect: false, }, { id: 10, name: 'Ellie', birthday: '09 April', isSelect: false, }, { id: 11, name: 'Ellie', birthday: '09 April', isSelect: false, }, ],

        <FlatList
          data={filteredEmails}
          showsVerticalScrollIndicator={false}
          extraData={this.state}
          style={{marginTop: 10}}
          contentContainerStyle={{}}
          renderItem={({item, index}) => (
            <View style={{flexDirection: 'column'}}>
              <View style={{flexDirection: 'column', padding: 10}}>
                <MStartTimePicker
                  isVisible={this.state.isDateTimePickerVisible}
                  onConfirm={(date) =>
                    this._handleDatePicked(date, this.state.pos)
                  }
                  onCancel={() => this._hideDateTimePicker()}
                  mode="date"
                />
                <Text style={style.text_style_msg_wishes}>{item.name}</Text>

                <View
                  style={{
                    flexDirection: 'row',
                    marginTop: 5,
                    justifyContent: 'center',
                    marginLeft: 8,
                  }}>
                  <Image
                    source={Icons.birthday_icon}
                    style={style.birthday_icon_style}
                  />
                  <TouchableOpacity
                    style={{flex: 1}}
                    underlayColor={null}
                    onPress={() => {
                      this._showDateTimePicker();
                      this.setState({pos: index});
                    }}>
                    <Text style={[style.birthday_text_style, {flex: 1}]}>
                      {item.birthday}
                    </Text>
                  </TouchableOpacity>

                  <RoundCheckbox1
                    size={24}
                    borderColor={'#ADADAD'}
                    iconColor={'#5853C7'}
                    checked={item.isSelect}
                    style={{borderColor: 'red'}}
                    onValueChange={(checked) => {
                      item.isSelect = checked
                    }}
                  />
                </View>
              </View>
              <View
                style={{
                  marginTop: 2,
                  backgroundColor: '#D0D0D0',
                  width: '100%',
                  height: 1,
                }}></View>
            </View>
          )}
          keyExtractor={(item) => item.id}></FlatList>