Question 34719 in React native Question posted in
The official React Native documentation can be found here.

Module '"react-native"' has no exported member 'CheckBox' – React native

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

  1. close the editor and restart everything but still don’t working
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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,
 },
});

  2. 0

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

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search