CODEWITHSUNDEEP
checkboxreact-nativereact-native-iosreact-native-flatlist
iOSDev
iOSDev

Reputation: 412

How to Implement checkbox in react-native which supports both ios and android in Flatlist

The CheckBox present in the official website only supports Android.

How can we implement checkbox in react-native which can be supported in both iOS and Android?

Upvotes: 2

Views: 3392

Answers (4)

Ruchi Tiwari
Ruchi Tiwari

Reputation: 261

Step1: While forming the list to be mapped to your FlatList, map the list and add a boolean flag to maintain the state of Checkbox selection.

Step2: Set the value of Checkbox as the flag stored in your item rendered from the FlatList and onValueChange pass the index and change the flag value of the respective index of the array.

Step3: Map the array rendered in FlatList and push each item to the new array/temporary array initialised and set the temporary array to your actual array. This resolves the issue in Android and in the same render the checkbox works absolutely fine.

Step1:

const [responseList, setResponseList] = useState([])

   response.data= response.data.map(item => {
        item.isSelect = false;
        return item;
      });
      setResponseList(response.data)

Step2:

 <FlatList style={styles.flatView}
      data={responseList}
      renderItem={({ item, index }) => (
              <View style={styles.checkboxContainerList}>
                <CheckBox
                  boxType='square'
                  value={item.isSelect}
                  onValueChange={() => {
                    setData(index)
                  }}
                  tintColor={'grey'}
                  onCheckColor={colorTheme}
                  onFillColor='white'
                  onTintColor={colorTheme}
                  tintColors={{ true: colorTheme }}
                  style={styles.checkboxView}
                />

              </View>
        )}

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

    />

Step3:

function setData(index) {
var isSelected = responseList[index].isSelect
responseList[index].isSelect = !isSelected

let doc = []
responseList.map(item => {
  doc.push(item)
})
setResponseList(doc)
  }

For more detailed description and complete code https://github.com/ritzblogs/reactnative-FlatListCheckbox

Upvotes: 0

Nikhil P
Nikhil P

Reputation: 76

You can try using <CheckBox /> component of NativeBase and it should work on both platforms.

Example:

     <CheckBox 
        checked={this.state.checked}
        onPress={()=>this.setState({ checked: !this.state.checked})}
      />

Upvotes: 1

Nag Repala
Nag Repala

Reputation: 13

const CheckBox = (props) => {
  const {name, value, isChecked} = props;
  return (
    <View>
      <TouchableHighlight
        onPress={() => {
          props.function(value);
        }}
        underlayColor="transparent"
        style={styles.checkBoxRowAlign}>
        {isChecked ? (
          <View>
            <View>
              <FastImage
                source={require('../assets/images/checkbox_Tick.png')}
              />
            </View>
          </View>
        ) : (
          <View>
            <View/>
          </View>
        )}
      </TouchableHighlight>
      <Text>{name}</Text>
    </View>
  );
};

export default CheckBox;

This is like a custom checkbox,if we add the above code in ur app and if u want to use it anywhere you just need to import the file and use it like

    import CheckBox from '../../CheckBox';
        <CheckBox isChecked={isChecked} name={item.name} value={item.value} function={this.onclickCheckBox} />


 onclickCheckBox(value) {
   your logic.........
  }

Upvotes: 0

CampbellMG
CampbellMG

Reputation: 2220

If you are looking for a way to render a boolean value purely within React Native, you could try a switch, like so: 

<Switch value={item.selected} onValueChange={selected => this.setState({selected })/>

A switch renders like this: enter image description here

Otherwise, if you are looking for a checkbox, you could try the React Native Elements library. Like so: 

import { CheckBox } from 'react-native-elements'

<CheckBox
  title='Click Here'
  checked={this.state.checked}
/>

Upvotes: 0

Related Questions