CheckBox is working perfect but it shown Module '"react-native"' has no exported member 'CheckBox'.

Here is my code

import React, { useState } from 'react';
import { CheckBox, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
import { Colors } from '@utils';
import { Text } from '../Text';

interface ICheckboxProps {
label: string;
onPress: () => void;
disabled?: boolean;
style?: StyleProp<ViewStyle>;
error?: boolean;
}

export const CheckBoxButton = (props: ICheckboxProps) => {
const { onPress, disabled, label, error } = props;
const [isSelected, setSelection] = useState(false);

return (
<View style={styles.container}>
  <View style={styles.checkboxContainer}>
    <CheckBox
      value={isSelected}
      onValueChange={setSelection}
      labelColor={Colors.PurpleLight}
      color={Colors.PurpleLight}
      onPress={onPress}
      disabled={disabled}
      style={[styles.checkbox, error && styles.errorBorder]}
    />
  </View>
  <Text>{label}</Text>
</View>

); };

I've tried with this:

1.Delete node_modules folder

2.run yarn add @types/react @types/react-native

3. close the editor and restart everything but still don't working

CodePudding user response：

As you can see, its removed from react native inbuilt package

Thats why youre thrown the error

You need to use it from this , install a new package from below

https://github.com/react-native-checkbox/react-native-checkbox

CodePudding user response：

I make a custom checkBox, only with react-native.

import React from 'react';
 import { Image, StyleSheet, TouchableOpacity } from 'react-native';

 interface IProps {
 value: boolean;
 onPress: () => void;
 size?: number;
 backgroundColor?: string;
 }

 export const CheckBoxButton = (props: IProps) => {
 const { value, onPress, size, backgroundColor } = props;

return (
<TouchableOpacity
  activeOpacity={0.7}
  style={[
    styles.checkBoxContainer,
    {
      height: size || 38,
      width: size || 38,
      backgroundColor: value ? backgroundColor : 'transparent',
      borderColor: 'blue',
    },
  ]}
  onPress={onPress}
>
  {value ? <Image style={styles.activeIcon} tintColor={'white'} source={require('@assets/icons/check.png')} /> : <></>}
</TouchableOpacity>
);
};

const styles = StyleSheet.create({
activeIcon: {
width: 32,
height: 32,
tintColor: Colors.White,
},
 checkBoxContainer: {
  borderRadius: 5,
  borderWidth: 1.3,
 },
});