react router native - undefined is not an object - react-native

I've created a project using npx react-native init MyTestApp
When i use react-router-native i get an error. When i remove NativeRouter and Route components there is no error.
Repository
How i can fix this error?
index.js:
const Home = () => <Text>Home</Text>;
const About = () => <Text>About</Text>;
const App = () => (
<NativeRouter>
<View>
<Text>Hello world</Text>
<Link to="/about">
<Text>About</Text>
</Link>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</View>
</NativeRouter>
);
AppRegistry.registerComponent(appName, () => App);
package.json:
{
"name": "mytestapp",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "17.0.2",
"react-native": "0.68.2",
"react-router-native": "^5.3.2"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.67.0",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}

Related

How to install tailwind-rn?

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

TypeError: Cannot read property 'current' of undefined ( with React.js )

Whenever I try to use "emoji-picker-react" package, I am facing this error.
I tried to use this package byfollowing the guide.
import React, { useState } from 'react';
import Picker from 'emoji-picker-react';
const Comment = (props) => {
const [chosenEmoji, setChosenEmoji] = useState(null);
...
const onEmojiClick = (event, emojiObject) => {
setChosenEmoji(emojiObject);
};
...
return (
<div>
...
{chosenEmoji ? (
<span>You chose: {chosenEmoji.emoji}</span>
) : (
<span>No emoji Chosen</span>
)}
<Picker onEmojiClick={onEmojiClick} />
</div>
);
};
export default Comment;
These are my installed packages.
{
"name": "...",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.21.1",
"emailjs-com": "^2.6.4",
"emoji-picker-react": "^3.4.7",
"firebase": "^7.18.0",
"hogan": "^1.0.2",
"nodemailer": "^6.6.0",
"pug": "^3.0.2",
"query-string": "^4.3.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-google-login": "^5.2.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-spinners": "^0.10.6",
"reactjs-media": "^1.5.1",
"video-react": "^0.14.1",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
]
}
My project worked well before this using this package.
How to solve this issue? Thanks.
It is mentioned on their npm page that this package doesn't support SSR.
Are you doing server-side rendering?
The variationMenuOpenRef can be undefined in such case.
If that's the case, try to lazy load/dynamically import the component.

Jest Testing in React Native (EXPO) .jsx extension not working "React.createElement: type is invalid"

Issue
I'm trying to test using jest, but it looks like my compiler is not handling .jsx files. If I change both of the files extension to js: (App.jsx and App.test.jsx) to (App.JS and App.test.JS), it does work. But I want to be able to use jsx files.
Files
App.jsx
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
App.test.jsx
import React from 'react';
// import { render } from '#testing-library/react-native';
import renderer from 'react-test-renderer';
import App from './App';
it('renders correctly', () => {
const tree = renderer.create(<App />).toJSON();
expect(tree.children.length).toBe(1);
// const { toJSON } = render(<App />); // ** THIS DOESN'T WORK EITHER **
// expect(toJSON()).toMatchSnapshot();
});
Console Error
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"eject": "expo eject",
"test": "jest --watch",
"test:debug": "jest",
"test:coverage": "npm test -- --coverage --watchAll",
"test:pr": "npm test -- coverage --ci --silent --changedSince=origin/development --coverageReporters='text' --coverageReporters='lcov'",
"test:all": "npm test -- --coverage --ci --silent --watchAll=false",
"linter": "eslint src",
"linter:fix": "eslint src --fix"
},
"dependencies": {
"#react-native-async-storage/async-storage": "^1.13.0",
"#react-navigation/native": "^5.9.4",
"#reduxjs/toolkit": "^1.5.1",
"babel-jest": "^26.6.3",
"expo": "~41.0.1",
"expo-status-bar": "~1.0.4",
"i18next": "^20.2.2",
"moment": "^2.29.1",
"msw": "^0.28.2",
"node-fetch": "^2.6.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
"react-native-web": "~0.13.12",
"redux": "^4.1.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#babel/core": "^7.9.0",
"#babel/eslint-parser": "^7.14.2",
"#babel/eslint-plugin": "^7.13.16",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#testing-library/react-native": "^7.2.0",
"#types/jest": "^26.0.23",
"eslint": "^7.26.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.23.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0",
"identity-obj-proxy": "^3.0.0",
"jest-expo": "^41.0.0",
"react-test-renderer": "^17.0.2"
},
"jest": {
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(js|jsx)$",
"moduleFileExtensions": [
"js",
"json",
"jsx"
],
"preset": "jest-expo",
"setupFiles": [
"./jestSetup.js"
],
"transform": {
"^.+\\.(js|jsx|mjs)$": "babel-jest"
},
"moduleNameMapper": {
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
}
},
"private": true
}
You need to configure Jest to accept jsx extensions. This is done in the jest section of your package.json file or in your jest.config.js file (if you have both Jest seems to ignore the package.json contents).
Take a look at this: https://levelup.gitconnected.com/setting-up-jest-under-expo-to-work-with-jsx-files-ba35a51bc25a
Here's what worked for me:
$ yarn add --dev babel-jest#latest
then in package.json:
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!((jest-)?react-native|#react-native(-community)?)|expo(nent)?|#expo(nent)?/.*|#expo-google-fonts/.*|react-navigation|#react-navigation/.*|#unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
],
"transform": {
"^.+\\.[jt]sx?$": "babel-jest"
}
}

Expo - React Native FileSystem error on requirement

I can't require react-native-fs, the app throws the exception:
'main' has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
I installed it following the guide from the oficial docs.
App.js:
import React from 'react';
import { View } from 'react-native';
const RNFS = require("react-native-fs");
export default function App() {
return (
<View>
</View>
);
}
package.json:
{
"main": "index.js",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"expo": "~39.0.2",
"expo-splash-screen": "~0.6.0",
"expo-status-bar": "~1.0.2",
"expo-updates": "~0.3.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "~0.63.2",
"react-native-fs": "^2.16.6",
"react-native-gesture-handler": "~1.7.0",
"react-native-reanimated": "~1.13.0",
"react-native-screens": "~2.10.1",
"react-native-unimodules": "~0.11.0",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"babel-jest": "~25.2.6",
"jest": "~25.2.6",
"react-test-renderer": "~16.13.1"
},
"jest": {
"preset": "react-native"
},
"private": true
}
Obviously, if I remove the require line, the error disappears.

How to use container in react native?

I am very new to React native I am trying to show content it is showing from starting. But I have
To show the content from the container, but I don't know how to apply this in React native. So
So someone please help me how to use container in React native.
In this component I tried some code please check it once
This is App.js
import React from 'react';
import {View, Text} from 'react-native';
const App = props => {
return (
<View>
<Text>Hi Mark</Text>
</View>
);
};
export default App;
These are the packages I installed in my React native project
{
"name": "testone",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/native": "^5.3.2",
"#react-navigation/stack": "^5.3.6",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^1.0.0",
"react-native-screens": "^2.7.0"
},
"devDependencies": {
"#babel/core": "7.9.6",
"#babel/runtime": "7.9.6",
"#react-native-community/eslint-config": "0.0.5",
"babel-jest": "24.9.0",
"eslint": "6.8.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.58.0",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
}
}
Note I am not using expo I am using pure React native for app development.
Add margin style property to root View to make it like container
import React from "react";
import { Text, View } from "react-native";
const App = () => {
return (
<View style={{ margin:100 }}>
<Text>Hi There!</Text>
</View>
);
};
export default App;