Actually, I am using react-native-element design language. When I used to implement checkbox than it behave like touchable opacity that I dont want.

<CheckBox
  containerStyle={{ backgroundColor: "transparent", borderWidth: 0 }}
  center
  size={14}
  title="vegetarian"
  textStyle={{
    fontSize: theme.FONT_SIZE_X_SMALL,
    fontWeight: theme.FONT_WEIGHT_LIGHT
  }}
  checkedColor="red"
  checked={this.state.checked}
  onPress={() => this.setState({ checked: !this.state.checked })}
/>;

Actually, I am using react-native-element design language. When I used to implement checkbox than it behave like touchable opacity that I dont want.

<CheckBox
  containerStyle={{ backgroundColor: "transparent", borderWidth: 0 }}
  center
  size={14}
  title="vegetarian"
  textStyle={{
    fontSize: theme.FONT_SIZE_X_SMALL,
    fontWeight: theme.FONT_WEIGHT_LIGHT
  }}
  checkedColor="red"
  checked={this.state.checked}
  onPress={() => this.setState({ checked: !this.state.checked })}
/>;

• javascript
• react-native
• react-native-elements

5 Answers 5

You can pass a Component prop (which is TouchableOpacity by default), with TouchableWithoutFeedback for instance as value.

<CheckBox
  Component={TouchableWithoutFeedback}
  containerStyle={{ backgroundColor: "transparent", borderWidth: 0 }}
  center
  size={14}
  title="vegetarian"
  textStyle={{
    fontSize: theme.FONT_SIZE_X_SMALL,
    fontWeight: theme.FONT_WEIGHT_LIGHT
  }}
  checkedColor="red"
  checked={this.state.checked}
  onPress={() => this.setState({ checked: !this.state.checked })}
/>;

we can do it by anotherway activeOpacity={1} as prop like below.

<CheckBox
  activeOpacity={1}
  containerStyle={{ backgroundColor: "transparent", borderWidth: 0 }}
  center
  size={14}
  title="vegetarian"
  textStyle={{
    fontSize: theme.FONT_SIZE_X_SMALL,
    fontWeight: theme.FONT_WEIGHT_LIGHT
  }}
  checkedColor="red"
  checked={this.state.checked}
  onPress={() => this.setState({ checked: !this.state.checked })}
/>

This is not mentioned in the documentation, but there is a available props "disabled"

    <CheckBox
          disabled={true}
          title={l.name}
          checked={!!indexCheckBox.includes(i)}
          checkedIcon="dot-circle-o"
          uncheckedIcon="circle-o"
          checkedColor="#6cc49a"
          uncheckedColor="#6cc49a"
          onPress={() => onPressCheckBox(i)}
        />

<TouchableWithoutFeedback
                      style={{
                        flex: 1,
                      }}>
                      <CheckBox
                        disabled={false}
                        boxType={'square'}
                        value={this.isChecked(item._id)}
                        onCheckColor={COLORS.SWDarkBlue}
                        onFillColor={COLORS.SWLightBlue}
                        tintColors={{
                          true: COLORS.SWDarkBlue,
                          false: '#4445',
                        }}
                        onTintColor={COLORS.SWDarkBlue}
                        onValueChange={value =>
                          this.onToggleCheckBox(item._id)
                        }
                        style={checkBoxContainer}
                      />
                    </TouchableWithoutFeedback>

For Button, i just used below one it works for me. let me know if it didn't.

import { TouchableOpacity } from "react-native";
import { Button } from "react-native-elements";

<Button
      TouchableComponent={TouchableOpacity}
      title="Next"
      raised
      activeOpacity={1}
/>