Just created my first React-Native application and added my first library 'react-native-elements' using
yarn add react-native-elements
the package appears in my node_modules folder and yarn.lock, however I receive the following error:
Cannot find module 'react-native-elements'
app.tsx
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button, FormLabel, FormInput, FormValidationMessage } from 'react-native-elements';
export default function App() {
return (
<View style={styles.container}>
<FormLabel>Name</FormLabel>
<FormInput />
<FormValidationMessage>Error message</FormValidationMessage>
<Button>Send</Button>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
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": "~37.0.3",
"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-elements": "^2.0.2",
"react-native-screens": "~2.2.0",
"react-native-web": "~0.11.7"
},
"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
}
https://react-native-elements.github.io/react-native-elements/docs/troubleshooting.html
Can you try this?
yarn - rm -rf node_modules && yarn && yarn add react-native-elements
npm start -- --reset-cache
Given that previous answer did not help me, here is what I finally found to solve it:
Source of problem:
yarn add react-native-elements
Solution (that worked with me):
yarn add #types/react-native-elements
Related
For some reason, I cannot get tailwind rn to actually style my program. When I run expo start, the items are not aligned to the center, even though I put that in my code.
import { StyleSheet, Text, View, Button } from 'react-native';
import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
import {useTailwind} from 'tailwind-rn';
export default function App() {
const tailwind = useTailwind();
return (
<TailwindProvider utilities={utilities}>
<View style={tailwind('flex-1 items-center justify-center')}>
<Text>Hello</Text>
<StatusBar style="auto" />
</View>
</TailwindProvider>
);
}
Here is my package.json file:
{
"name": "mari-application",
"version": "1.0.0",
"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",
"build:tailwind": "tailwindcss --input input.css --output tailwind.css --no-autoprefixer && tailwind-rn",
"dev:tailwind": "concurrently \"tailwindcss --input input.css --output tailwind.css --no-autoprefixer --watch\" \"tailwind-rn --watch\""
},
"dependencies": {
"expo": "~45.0.0",
"expo-status-bar": "~1.3.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-web": "0.17.7",
"tailwind-rn": "^4.2.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"concurrently": "^7.2.2",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.6"
},
"private": true
}
I ended up just downloading an older version of tailwind and it worked fine.
Follow these steps:
install npm i tailwind-rn
npx setup-tailwind-rn
Then wrap the root component with the TailwindProvider like:
import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
import { StyleSheet, Text, View, Button} from 'react-native';
import {useTailwind} from 'tailwind-rn';
const App = () => (
const tailwind = useTailwind();
return(
<TailwindProvider utilities={utilities}>
<View style={tailwind("flex-1 justify-center items-center")}>
<Text>wwww</Text>
<Button title='click me' />
</View>
</TailwindProvider>
);
)
Credits: #Aniket:
https://stackoverflow.com/a/71122844/13431819
Or
Downgrade the tailwind version to version-2
I have been trying to use tailwind for my react native project but for some reason it won't work.
I've done "npm install tailwind-rn" and then "npx setup-tailwind-rn" but nothing changes in my app.
This is the code I have
import { StatusBar } from 'expo-status-bar';
import {SafeAreaView, View, Text} from 'react-native';
import {TailwindProvider, useTailwind} from 'tailwind-rn';
import utilities from './tailwind.json';
const App = () => {
const tailwind = useTailwind();
return (
<SafeAreaView style={tailwind('h-full')}>
<View style={tailwind('pt-12 items-center')}>
<View style={tailwind('bg-blue-200 px-3 py-1 rounded-full')}>
<Text style={tailwind('text-blue-800 font-semibold')}>
Hello Tailwind
</Text>
</View>
</View>
</SafeAreaView>
);
};
const Root = () => (
<TailwindProvider utilities={utilities}>
<App />
</TailwindProvider>
);
export default Root;
but all it does is get the "Hello Tailwind" sentence to the top left of the screen. Can anybody help me with this?
I think you didn't finish the remaining configuration
STEP1: What you need to do is first go and follow each and every instruction and you will be able to solve your issue.Tailwind CSS RN Docs
STEP2: Check your package.json it should look like this-
{
"name": "expo-tailwind-example",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"build:tailwind": "tailwindcss --input input.css --output tailwind.css --no-autoprefixer && tailwind-rn",
"dev:tailwind": "concurrently \"tailwindcss --input input.css --output tailwind.css --no-autoprefixer --watch\" \"tailwind-rn --watch\""
},
"dependencies": {
"expo": "~44.0.2",
"expo-splash-screen": "~0.14.1",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-web": "0.17.1",
"tailwind-rn": "^4.2.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"concurrently": "^7.0.0",
"postcss": "^8.4.12",
"tailwindcss": "^3.0.23"
},
"private": true
}
Initially your utilities will be empty, Do not panic but as you use classes it will be filled with styles.
CHILL
I have an existing project that uses React Native and Expo. Currently, the application runs fine. I'm trying to integrate Jest into the project. A basic "true=true" test in jest passes and runs without error. When I try to run any code using ES6 terms, however, the following error occurs:
FAIL screens/__tests__/home.test.js
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/Users/user/Documents/GitHub/ReadingRainbow/node_modules/react-native/index.js:13
import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
^^^^^^
SyntaxError: Cannot use import statement outside a module
1 | import React from 'react';
> 2 | import { Image, View, Text, Button, TouchableOpacity, ScrollView} from 'react-native';
| ^
3 | import { globalStyles } from '../styles/global';
4 | import { useNavigation } from '#react-navigation/native';
5 |
at Runtime._execModule (node_modules/jest-expo/node_modules/jest-runtime/build/index.js:1157:58)
at Object.<anonymous> (screens/home.js:2:1)
at Object.<anonymous> (screens/__tests__/home.test.js:2:1)
I have also set up a clean, brand new project (following these directions first and these second) to test the compare the dependencies and such against my current project. The clean project runs as intended, including import/export statements. How do I correct and clean up my real project so that jest runs without error?
I have tried deleting the node_modules folder and running npm install to reestablish the dependencies. I have also tried adjusting the preset configurations for jest, the transformIgnorePatterns, and the preset defined in babel.config.js. The most helpful explanation I've been given so far is, "[this is probably not working because] node can't use imports (without transpiling) and jest is trying to render using node instead of a browser." Any help is sincerely appreciated! Please let me know if you need further information or clarification.
Example file:
// Intro.js
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
const styles = StyleSheet.create({
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
});
export default class Intro extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>
This is a React Native snapshot test.
</Text>
</View>
);
}
}
Example test:
// __tests__/Intro-test.js
import React from 'react';
import renderer from 'react-test-renderer';
import Intro from './Intro';
test('renders correctly', () => {
const tree = renderer.create(<Intro />).toJSON();
expect(tree).toMatchSnapshot();
});
package.json of "clean" project
{
"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",
"test": "jest"
},
"dependencies": {
"expo": "~39.0.2",
"expo-status-bar": "~1.0.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"jest-expo": "^39.0.0",
"react-test-renderer": "^17.0.1"
},
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element|#react-native-community|expo(nent)?|#expo(nent)?/.*|react-navigation|#react-navigation/.*|#unimodules/.*|unimodules|sentry-expo|native-base|#sentry/.*)"
]
},
"private": true
}
package.json of my actual project
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"test": "jest",
"test:update": "jest --verbose --coverage --updateSnapshot",
"test:watch": "jest --verbose --watch",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#react-native-community/masked-view": "0.1.10",
"#react-navigation/native": "^5.8.2",
"#react-navigation/stack": "^5.11.1",
"axios": "^0.20.0",
"expo": "~39.0.2",
"expo-status-bar": "~1.0.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz",
"react-native-dotenv": "^2.4.2",
"react-native-gesture-handler": "~1.7.0",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.4",
"react-native-screens": "~2.10.1",
"react-native-testing-library": "^6.0.0",
"react-native-web": "~0.13.12",
"react-navigation-stack": "^2.10.0"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.1",
"#testing-library/react": "^11.1.0",
"babel-jest": "^26.6.2",
"jest": "^26.6.2",
"jest-expo": "^39.0.0",
"react": "^17.0.1",
"react-navigation": "^4.4.3",
"react-test-renderer": "^17.0.1"
},
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element|#react-native-community|expo(nent)?|#expo(nent)?/.*|react-navigation|#react-navigation/.*|#unimodules/.*|unimodules|sentry-expo|native-base|#sentry/.*)"
]
},
"private": true
}
babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
jest.config.json (non-existent in "clean" project)
{
"testRegex": "((\\.|/*.)(test))\\.js?$"
}
In your __tests__/Intro-test.js file, just above the test, mock your component like this
jest.mock('./Intro', () => './Intro');
The content of your file will look like this:
// __tests__/Intro-test.js
import React from 'react';
import renderer from 'react-test-renderer';
import Intro from './Intro';
jest.mock('./Intro', () => './Intro');
test('renders correctly', () => {
const tree = renderer.create(<Intro />).toJSON();
expect(tree).toMatchSnapshot();
});
I was facing the exact same problem. Mocking my components solved the issue. I hope it will help you too.
I am unable to use the Icon component from react-native-vector-icons. I was able to use it before with no issues, but now when I import the Icon component into my App.js file that I created with Expo, I get an error.
I have already uninstalled and reinstalled Expo, uninstalled and reinstalled react-native-elements, and created a new Expo project.
Here is my App.js file from Expo. The only thing that is changed from the default App.js file is the import of the Icon and the Button components. The Button component renders correctly.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Icon, Button } from 'react-native-elements';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<Button title='hello' />
<Icon
name='g-translate'
color='#00aced'
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
And 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": {
"expo": "^33.0.0",
"react": "16.8.3",
"react-dom": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"react-native-elements": "^1.1.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "^0.11.4"
},
"devDependencies": {
"babel-preset-expo": "^5.1.1"
},
"private": true
}
I get the error [Unhandled promise rejection: Error: Directory for file:///Users/{myusername}/Library/Developer/CoreSimulator/Devices/CE65DD4F-AFFE-46F7-A173-6B25AF30CBCE/data/Containers/Data/Application/DB21F77C-3BE4-470E-AA62-52E6C8376F0C/Library/Caches/ExponentExperienceData/%2540psoren%252FOctave/ExponentAsset-b06871f281fee6b241d60582ae9369b9.ttf doesn't exist.]
- node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:155:41 in createErrorFromErrorData
- node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:104:55 in
I have a component class that I am using react-redux to connect the redux store, but I am getting an error when I try to pass the component into the connect function.
_react.default.memo is not a function. (In '_react.default.memo(ConnectFunction),
'_react.default.memo' is undefined)
wrapWithConnect C:\Users\SESA506797XmobileApp Gatherman\node modul es react-redux\lib\components connectAdvanced.js: 339:45
I enclose an image of the generated errerur
Here is the content of the class in which connect was called
FilmDetail
import React from 'react'
import { StyleSheet, View, ActivityIndicator, ScrollView, Text, Image }
from 'react-native'
import { getFilmDetailFromApi, getImageFromApi } from '../API/TMDBApi'
import { connect } from 'react-redux'
class FilmDetail extends React.Component {
constructor(props) {
super(props)
this.state = {
film: undefined,
}
}
componentDidMount() {
getFilmDetailFromApi(this.props.navigation.state.params.idFilm).then(data => {
this.setState({
film:data,
isLoading: false
})
})
}
_displayFilm(){
const film = this.state.film
if(film != undefined){
return(
<ScrollView style={styles.scrollView_container}>
<Image
style = {styles.image}
source = {{uri: getImageFromApi(film.backdrop_path)}}
/>
<Text style={styles.title_text}>{film.title}</Text>
<Text style={styles.description_text}>{film.overview}</Text>
<Text style={styles.default_text}>Note : {film.vote_average} / 10</Text>
</ScrollView>
)
}
}
render() {
return (
<View style={styles.main_container}>
{this._displayFilm()}
</View>
)
}
}
const styles = StyleSheet.create({
main_container: {
flex: 1
},
})
const mapStateToProps = (state) => {
return state
}
export default connect(mapStateToProps)(FilmDetail)
This 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",
"numeral": "^2.0.6",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-modal": "^9.0.0",
"react-navigation": "^3.6.1",
"react-redux": "^7.0.1",
"redux": "^4.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0"
},
"private": true
}
Had a while ago what I think is the same problem as you. I updated to the latest React version with:
npm install react#latest
Then installed version 0.4.0 of the react schedule package with:
npm i schedule#0.4.0 --save-dev
And downgraded react-redux with
npm i react-redux#6.0.1
at least for the moment my problem is solved, hope it works with yours.
If you're using expo, you have to downgrade your react-redux and clear expo cache.
npm i react-redux#6.0.1
npm i
expo r -c
I use yarn to solve it (or npm if you want)
yarn add react-redux
It will update your 'react-redux' to latest version and it solve my problem. Hope it helpful.
Just update your React to the latest version. It's backward compatible, so no need to worry.
npm install react#latest
React.memo is only available on React version 16.6 and above.
https://reactjs.org/blog/2018/10/23/react-v-16-6.html
It happened because you used the most recent version of react-redux dependent on react.memo API which is not supported by the Expo SDK. To solve this problem, you can install the older version of react-redux such as version 6.0.
I was having the same issue and and got fixed when I downgraded my react-redux back to version 4.4.9
npm install react-redux#4.4.9
or if you using yarn
yarn add react-redux#4.4.9
Hope it works for you too. But make sure first this dramatic downgrade doesn't affect your project in a negative way.
Had the same issue. It was solved by switching to yarn and reinstalling all modules with the following setup:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"#expo/vector-icons": "^9.0.0",
"date-fns": "^1.30.1",
"expo": "^32.0.6",
"moment": "^2.24.0",
"native-base": "^2.10.0",
"react": "16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-elements": "^0.19.1",
"react-navigation": "^3.0.9",
"react-redux": "^6.0.0",
"redux": "^4.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.1.1",
"schedule": "^0.4.0"
},
"private": true
}