How to use container in react native? - 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;

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

react navigation issue with versions

I have a problem when I try to add a bottomnavigation in my app on the main screen:
This is the main screen code:
// Main.js
import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import firebase from 'react-native-firebase';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
export default class Main extends React.Component {
state = { currentUser: null }
componentDidMount() {
const { currentUser } = firebase.auth()
this.setState({ currentUser })
}
render() {
const { currentUser } = this.state
return (
<View style={styles.container}>
<Text>
Hi {currentUser && currentUser.email}!
</Text>
</View>
)
}
}
const bottomTabNavigator = createBottomTabNavigator(
{
Main: Main,
},
{
initialRouteName: 'Main'
}
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
})
No when I run it I get this error:
Error: Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5? See https://reactnavigation.org/docs/en/hello-react-navigation.html for usage guide.
<unknown>
index.bundle?platform=ios&dev=true&minify=false:109707:24
<global>
Main.js:24
loadModuleImplementation
require.js:322:6
guardedLoadModule
require.js:201:45
runUpdatedModule
require.js:657:17
metroHotUpdateModule
require.js:533:8
define
require.js:53:24
global code
Main.bundle?platform=ios&dev=true&minify=false&modulesOnly=true&runModule=false&shallow=true:1:4
<unknown>
[native code]:0
inject
injectUpdate.js:62:35
forEach
[native code]:0
injectUpdate
injectUpdate.js:71:26
on$argument_1
HMRClient.js:40:21
emit
index.js:202:37
_ws.onmessage
WebSocketHMRClient.js:72:20
EventTarget.prototype.dispatchEvent
event-target-shim.js:818:39
_eventEmitter.addListener$argument_1
WebSocket.js:232:27
emit
EventEmitter.js:190:12
callFunctionReturnFlushedQueue
[native code]:0
So i checked my package file which is:
{
"name": "kowop",
"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.6",
"#react-navigation/bottom-tabs": "^5.0.3",
"#react-navigation/material-bottom-tabs": "^5.0.1",
"#react-navigation/native": "^5.0.1",
"email-validator": "^2.0.4",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-firebase": "^5.6.0",
"react-native-gesture-handler": "^1.5.6",
"react-native-paper": "^3.6.0",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.6.4",
"react-native-screens": "^2.0.0-beta.2",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.1.1",
"react-navigation-stack": "^2.0.16",
"typescript": "^3.7.5"
},
"devDependencies": {
"#babel/core": "7.8.3",
"#babel/runtime": "7.8.3",
"#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.56.4",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
But apparently react-navigation can't be updated above 4.11 or at least that is what the npm page says.
244,663
Version
4.1.1
License
MIT
Unpacked Size
41 kB
Total Files
12
Issues
133
Pull Requests
3
So I am a bit lost here. Does anyone see what I do wrong?
Thanks a lot!
Tim
You are using react-navigation v5 dependencies but in your code you implement with v4 api way.
You should change react-navigation dependencies to v4 to make your code work.
I made you code work on snack : demo

i could not resolve this bundling error with react navigation v4

bundling failed: Error: Unable to resolve module react-navigation-stack from App.js: react-navigation-stack could not be found within the project.
i tried removing the node modules and reinstalling them, clearing the cache, trying the same in a new fresh project but no result
Package.json file
{
"name": "navigator",
"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": "16.9.0",
"react-native": "0.61.2",
"react-native-gesture-handler": "^1.4.1",
"react-native-reanimated": "^1.3.0",
"react-native-screens": "1.0.0-alpha.23",
"react-navigation": "^4.0.10"
},
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/runtime": "^7.6.2",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
App.js
import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from './src/screens/HomeScreen';
import ComponentScreen from './src/screens/ComponentScreen';
const navigator = createStackNavigator(
{
Home: HomeScreen
},
{
initialRouteName: 'Home',
defaultNavigationOptions: {
title: 'App'
}
}
);
export default createAppContainer(navigator);
Your package.json does not have the module you want to use. You need to install a module.
yarn add react-navigation-stack
or
npm install react-navigation-stack
npm install react-navigation-stack
npm install react-navigation-stack --save

Cannot run React Native project with Expo

I have an old React Native project, now i want to run it with Expo. The problem is Expo software stuck at “waiting for package and tunnel to start” when i try to use Expo to open the project and start it. I am working on MacOS with watchman already installed.
Here's the structure of my project
My app.json:
{ "name": "myapp", "displayName": "myApp", "expo": { "sdkVersion": "28.0.0" } }
package.json:
{
"name": "MyApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"expo": "^28.0.0",
"react": "15.4.1",
"react-native": "0.42.0",
"react-native-calendar-strip": "^0.1.4",
"react-native-check-box": "^1.0.4",
"react-native-checkbox": "^1.1.0",
"react-native-code-push": "1.17.0-beta",
"react-native-collapsible": "0.8.0",
"react-native-datepicker": "^1.6.0",
"react-native-fetch-blob": "0.10.6",
"react-native-image-picker": "0.26.2",
"react-native-keyboard-aware-scroll-view": "^0.2.9",
"react-native-modal-picker": "0.0.16",
"react-native-modalbox": "1.3.9",
"react-native-pdf": "1.2.4",
"react-native-picker": "4.0.18",
"react-native-signature-pad": "git+https://github.com/silverspace/react-native-signature-pad/#greg/android_blank_workaround",
"react-native-simple-store": "^1.2.0",
"react-native-vector-icons": "4.0.1",
"react-navigation": "1.0.0-beta.7",
"react-redux": "5.0.3",
"realm": "2.11.0",
"redux": "3.6.0",
"redux-logger": "2.8.2",
"redux-thunk": "2.2.0",
"tipsi-stripe": "3.2.0"
},
"devDependencies": {
"babel-jest": "19.0.0",
"babel-preset-react-native": "1.9.1",
"jest": "20.0.4",
"react-test-renderer": "15.4.1"
},
"jest": {
"preset": "react-native"
}
}
index.ios.js and and index.android.js have the same code: import './App';
Here's my App.js:
import React from 'react';
import {
AppRegistry,
Text,
View,
Button,
AppState,
DeviceEventEmitter
} from 'react-native';
import { BackAndroid } from 'react-native'
import { NavigationActions, StackNavigator } from 'react-navigation';
// Redux
import { Provider } from 'react-redux'
import store from './app/store'
import codePush from 'react-native-code-push';
import HomeNavigation from './app/Home/screens/HomeNavigation'
import simpleStore from 'react-native-simple-store';
import { HOST } from './app/Common/constants';
const GET_USER_URL = `${HOST}/api/user`;
let codePushOptions = {
checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
installMode: codePush.InstallMode.ON_NEXT_RESUME
};
class App extends React.Component {
//Doing something here...
render(){
return(
<Provider store={store}>
<HomeNavigation />
</Provider>
)
}
}
export default CodePushApp = codePush(codePushOptions)(App);
AppRegistry.registerComponent('MypApp', () => CodePushApp);
I have try to install Expo on a Window PC but still have the same issues when try to run this project.
I know this is late but if you have already installed expo-cli then try changing the scripts section of your package.json file to the following
"scripts": {
"start": "expo start",
"eject": "expo eject",
"android": "expo start --android",
"ios": "expo start --ios",
"test": "jest"
}
This worked for me

undefined is not an object(evaluating'_react2.Proptypes.store')?

I am trying to build the taxi booking app. From i get the error
undefined is not an object (evaluating'_react2.Proptypes.store'). I have tried all the other solutions in previously asked but it was not helpful. Any help on this is appreciated.
import React, { Component, PropTypes} from "react";
import { Router } from "react-native-router-flux";
import scenes from "../routes/scenes";
import { Provider } from "react-redux";
export default class AppContainer extends Component{
static propTypes = {
store: PropTypes.object.isRequired
}
render(){
return(
<Provider store = {this.props.store}>
<Router scenes = {scenes} />
</Provider>
)
}
}
package.json
{
"name": "TaxiApp",
"version": "0.0.7",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"native-base": "^2.3.5",
"prop-types": "^15.6.0",
"react": "16.0.0",
"react-addons-update": "^15.6.2",
"react-native": "0.51.0",
"react-native-router-flux": "^4.0.0-beta.24",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-jest": "22.0.4",
"babel-preset-react-native": "4.0.0",
"jest": "22.0.4",
"react-test-renderer": "16.0.0",
"redux-logger": "^3.0.6"
},
"jest": {
"preset": "react-native"
}
}
Ever since react version 16.0.0 forward, prop types cannot be taken from React itself as you did on the first line. You need to do the following;
npm install prop-types --save
Add the following import and remove the PropTypes from first line:
import PropTypes from 'prop-types';
After this, it should work like a charm.