react-native-community/CheckBox can't resolve module - reactjs

It looks like an easy question with an easy answer i.e.
npm install #react-native-community/checkbox
but it doesn't work. I had an error saying that the package had a dependency to react-native-windows, so I also downloaded this package which lead to not solving my issue.
I really don't get why it happens...
Here is my package.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#react-native-community/checkbox": "^0.5.6",
"expo": "~39.0.2",
"expo-status-bar": "~1.0.2",
"moviedb-promise": "^3.1.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-image": "^4.0.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz",
"react-native-web": "~0.13.12",
"react-native-windows": "^1.0.0",
"react-tinder-card": "^1.3.1"
},
"devDependencies": {
"#babel/core": "~7.9.0"
},
"private": true
}
EDIT
Here is my code:
import React from 'react'
import { View, Text } from 'react-native';
import CheckBoxSetting from './CheckBoxSetting';
import PressableSetting from './PressableSetting'
import SwitchSetting from './SwitchSetting';
function SettingItemFactory () {
this.createSettingItem = function (name, type, initState) {
let settingItem = <Text/>;
switch(type){
case 'pressable':
settingItem = <PressableSetting title={name}/>;
break;
case 'switch':
settingItem = <SwitchSetting name={name} state={initState}/>
break;
case 'check':
settingItem = <CheckBoxSetting name={name} state={initState}/>
break;
default:
settingItem = <PressableSetting title={name} />;
}
return settingItem;
}
}
export default SettingItemFactory;
import React from 'react'
import {View, Text, ImagePropTypes} from 'react-native'
import CheckBox from '#react-native-community/checkbox'
const CheckBoxSetting = (props) => {
return (
<View>
<Text>
{props.name}
</Text>
</View>
)
}
export default CheckBoxSetting;

The answer was given by Tushar Khatiwada in the comments of the original post:
As of right now, the library isn't supported by expo. Thanks Tushar!

If you're using expo in your react native project, expo provides a Checkbox component that can be leveraged, and it appears to utilize the same API as the react-native CheckBox component. :)
https://docs.expo.io/versions/latest/sdk/checkbox/

It's not supported in the expo.
in react-native CLI, make sure linking is done and do pod install.

Related

React JS, library problem with react-navigation

I'm a beginner in react, I learned using a (french) tutorial for learning react native. I have a new library in my project and I added react-navigation, i don't know why i have this error when I check my device.
"Unable to resolve module 'react-navigation-stack' from 'Navigation/Navigation.js' (my files) react-navigation-stack could not be found within the project.
Here is the link to the french tutorial: https://openclassrooms.com/fr/courses/4902061-developpez-une-application-mobile-react-native/5046301-concevez-une-navigation-entre-vos-vues
Thanks you so much if you can help me. I don't understand why it does not work
Package.json :
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~38.0.8",
"expo-status-bar": "^1.0.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native-web": "~0.11.7",
"react-navigation": "^4.4.0"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"babel-preset-expo": "~8.1.0"
},
"private": true
}
Your guide is using React Navigation 4, and it has a link to React Navigation page which has been updated to use version 5.
So you are probably missing some dependencies here, but since you are learning, it would be best to move to the new version and follow the Getting started guide to install new version and all dependencies, and then use:
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
You also have a code example there: Hello React Navigation

Unable to resolve "./SafeAreaContext"

I recently set up react-native project with expo and later on I added #react-navigation packages.
It seems like this wasn't enough as NavigationContainer render complains about SafeAreaContext
I tried to install required packages with expo install react-native-safe-area-context ... but It didn't solve it.
Thought deleting node_modules && npm install could help, but it didn't work either.
There were related questions to this issue
, but they didn't provide much help
I will appreciate your help.
Here's what I get in android emulator
terminal
Unable to resolve "./SafeAreaContext" from "node_modules\react-native-safe-area-context\src\index.tsx"
Failed building JavaScript bundle.
App.tsx
import React, { useState } from 'react';
import { AppLoading } from 'expo'
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator } from '#react-navigation/stack';
function Test() {
return (
<View
style={{ flex: 1, justifyContent: 'space-between', alignItems: 'center' }}
>
<Text>Test</Text>
</View>
);
}
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
export default function App() {
const [loaded, setLoaded] = useState(false);
if(!loaded) {
return <AppLoading
startAsync={() => Promise.resolve()}
onFinish={() => setLoaded(true)}/>
}
return <NavigationContainer>
</NavigationContainer>
}
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#expo/vector-icons": "^10.2.0",
"#react-native-community/masked-view": "^0.1.6",
"#react-navigation/bottom-tabs": "^5.5.1",
"#react-navigation/native": "^5.5.0",
"#react-navigation/stack": "^5.4.1",
"expo": "^37.0.12",
"expo-asset": "^8.1.5",
"expo-constants": "^9.0.0",
"expo-linking": "^1.0.1",
"expo-splash-screen": "^0.2.3",
"expo-web-browser": "^8.2.1",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-gesture-handler": "~1.6.0",
"react-native-reanimated": "~1.7.0",
"react-native-safe-area-context": "0.7.3",
"react-native-safe-area-view": "^1.1.1",
"react-native-screens": "~2.2.0",
"react-native-web": "~0.11.7",
"react-redux": "^7.2.0",
"redux": "^4.0.5"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"#types/react": "~16.9.23",
"#types/react-native": "~0.61.17",
"babel-preset-expo": "~8.1.0",
"typescript": "~3.8.3"
},
"private": true
}
Look like cleaning expo cache helped
expo r -c
expo r --help
Usage: start|r [options] [project-dir]
Starts or restarts a local server for your app and gives you a URL to it
Options:
-c, --clear Clear the Metro bundler cache
....
expo --version
3.21.3
Installing following two,
npm install --save #react-native-community/masked-view
npm install react-native-safe-area-context
it is work for me

Unable to resolve "./vendor/TransitionConfigs/CardStyleInterpolators" from "node_modules/react-navigation-stack/lib/module/index.js"

I am getting the following error on creating the navigation stack as follows:
Unable to resolve "./vendor/TransitionConfigs/CardStyleInterpolators" from "node_modules/react-navigation-stack/lib/module/index.js"
App.js:-
import React from "react";
import {createAppContainer,createSwitchNavigator} from "react-navigation";
import {createStackNavigator} from "react-navigation-stack";
import {createBottomTabNavigator} from "react-navigation-tabs";
import AccountScreen from "./src/screens/AccountScreen";
import SigninScreen ...... ;
const switchNavigator=createSwitchNavigator({
loginFlow:createStackNavigator({
Signin:SigninScreen,
Signup:SignupScreen
}),
mainFlow:createBottomTabNavigator({
trackListFlow:createStackNavigator({
TrackList:TrackListScreen,
TrackDetails:TrackDetailsScreen
}),
TrackCreate:TrackCreateScreen,
Account:AccountScreen
})
});
export default createAppContainer(switchNavigator);
I am using the following dependency version:-
Package.json:-
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~36.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-gesture-handler": "^1.5.3",
"react-native-reanimated": "^1.4.0",
"react-native-web": "~0.11.7",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.10.3",
"react-navigation-tabs": "^2.7.0"
},
"devDependencies": {
"babel-preset-expo": "~8.0.0",
"#babel/core": "^7.0.0"
},
"private": true
}
While bundling I am getting the following error although I am using stable version of all the dependencies...
You need to clear your metro Cache.
Since you're using Expo, first stop Expo server. Then run:
expo start -c
If you're not, run:
react-native start --reset-cache

Redux + React Native + Expo - In development environment, component not rendered after updating state, but it works in production

I encounter a problem with, I think, Expo environment
When my Redux State is updated, my components are not rendered, whereas in Production mode, everything works fine
I do not print my code because it's surely not related to code, but rather than Expo environnement. Some others developers encountered that problem, but I still not found a working solution ..
It's just annoying to code in Prod' env rather than Dev' / Local env
Here is my package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"expo": "^32.0.0",
"native-base": "^2.12.1",
"react": "^16.5.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-navigation": "^3.9.1",
"react-redux": "^6.0.0",
"redux": "^4.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0",
"schedule": "^0.4.0"
},
"private": true
}
If anyone has an idea about how to fix it, it would be great
If you require more information, don't hesitate to ask
EDIT : Here is my app.js
import React from 'react'
import { View, StyleSheet } from 'react-native'
import Navigation from './Navigation/Navigation'
import { Provider } from 'react-redux'
import Store from './Store/configureStore'
class App extends React.Component {
render() {
return (
<Provider store={Store} >
<Navigation />
</Provider>
);
}
}
export default App
Here is another Git post relative to this subject : https://github.com/expo/expo/issues/3859#issuecomment-490979505

can’t import npm installed packages expo react native

I’m a beginner in react native. I created a sample app with the expo. But I can’t import npm installed packages to code its shows an 500 error like
import DeviceInfo from ‘react-native-device-info’;
it shows an error like “unable to resolve react-native-device-info from screens\homescreen.js”
HomeScreen.js
==========
import React from 'react';
import {
Image,
Platform,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
StatusBar,
Dimensions,
LayoutAnimation,
Alert,
Linking,
} from 'react-native';
import { WebBrowser } from 'expo';
import { BarCodeScanner, Permissions } from 'expo';
import { MonoText } from '../components/StyledText';
import DeviceInfo from 'react-native-device-info';
...
...
Package.json
==========
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"test": "node ./node_modules/jest/bin/jest.js --watchAll"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/samples": "2.1.1",
"expo": "^31.0.2",
"link": "^0.1.5",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-native-camera": "^1.4.3",
"react-native-device-info": "^0.24.3",
"react-native-permissions": "^1.1.1",
"react-native-qrcode-scanner": "^1.1.0",
"react-navigation": "^2.18.2"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0",
"jest-expo": "^31.0.0"
},
"private": true
}
It seems that that 'react-native-device-info' uses native code (it requires linking as per the GitHub Repo) and therefore can't be used with Expo without detaching / ejecting your Expo project first.
From looking at your package.json, it seems that you haven't ejected yet. If you really need to use this specific device info library, you can look into ejecting your Expo project.
If you setup this package properly, just try to reload package-manager-server.

Resources