CODEWITHSUNDEEP
react-nativejsx
hesam sameni
hesam sameni

Reputation: 151

How to use checkboxes in react native for both android and IOS?

I have a modal with diffrent tabs in my app in which user can filter the search result with categories in the modal . right now it is working but I simply put an event on a <TEXT> , I need some visual clue like checkbox for my options

            {this.state.currentTab === 1 && (
              <View>                         
                <Text onPress={(text) => this.setGender(true)}>male</Text>
                <Text onPress={(text) => this.setGender(false)}>female</Text>
              </View>
            )}

How Can I use checkbox instead of <TEXT> to use both in android and IOS?

Upvotes: 0

Views: 3028

Answers (3)

shubham choudhary
shubham choudhary

Reputation: 3120

Use This Component which I manually created. It renders same radio button on both platforms

const RenderRadio = (props) => {
  const {
     value, onChange, selectedValue
  } = props;
const checked = value === selectedValue;
  return (
    <TouchableOpacity
      style={{ flexDirection: 'row' }}
      onPress={() => onChange(value)}
    >
      <View
        style={{
          width: 20,
          height: 20,
          borderRadius: 10,
          borderWidth: 2,
          borderColor: '#002451',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <View
          style={{
            width: 10,
            height: 10,
            borderRadius: 5,
            backgroundColor: checked ? '#002451' : 'white',
          }}
        />
      </View>
      <Text style={{ fontSize: 15, marginLeft: 10 }}>{value}</Text>
    </TouchableOpacity>
  );
};

use it as 

   <RenderRadio onChange={this.setSelectedValue} selectedValue={selectedValue} value={value}/>

and set Your selected value as

   setSelectedValue = (value) => {
     this.setState(selectedValue : value)
}

Upvotes: 1

Neelam Soni
Neelam Soni

Reputation: 1361

You can use native-base library, that has more components which you can use for Search filters and this is more reliable, you can set it checked using checked prop, that is boolean, like this :

import {
  Icon,
  CheckBox,
  Spinner
} from "native-base";
 <TouchableOpacity   onPress={(text) => this.setGender(true)}       >
          <CheckBox checked ={tru}
            onPress={(text) => this.setGender(true)}                          />
  
        </TouchableOpacity>

Upvotes: 0

Pramod
Pramod

Reputation: 1940

You can use this library for the checkbox " react-native-circle-checkbox "

import CircleCheckBox, {LABEL_POSITION} from 'react-native-circle-checkbox';

        {this.state.currentTab === 1 && (
                  <View>
                    <CircleCheckBox
              checked={true}
              onToggle={(text) => this.setGender(true)}
              labelPosition={LABEL_POSITION.RIGHT}
              label="MALE"
            />    
    <CircleCheckBox
              checked={true}
              onToggle={(text) => this.setGender(false)}
              labelPosition={LABEL_POSITION.RIGHT}
              label="FEMALE"
            />  
                  </View>
                )}

Example: https://snack.expo.io/@msbot01/intrigued-marshmallows

Upvotes: 2

Related Questions