I am trying to learn React Native and got stuck with React Navigation. I have installed NPM and expo CLI. Also followed the react documentation to create the React Project. But when I tried to create navigation between screens got this error on expo mobile client -
I am not sure what I am doing wrong. I searched for hours on StackOverflow but none of the solutions worked. I am seeking a bit guidance from experts. Below I am pasting the source -
======
App.js
======
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import HomeScreen from './screen/HomeScreen';
import DetailsScreen from './screen/DetailsScreen';
const AppStackNavigator = createStackNavigator({
Home: {
screen: HomeScreen
},
Details: {
screen: DetailsScreen
},
});
export default class App extends React.Component {
render() {
return (<AppStackNavigator />);
}
}
=============
HomeScreen.js
=============
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
/* StyleSheet */
const styles = StyleSheet.create({
mainContainer: {flex: 1, flexDirection: 'column', backgroundColor: '#efefef', alignItems: 'center', justifyContent: 'center'},
});
class HomeScreen extends React.Component {
render() {
return (
<View style={styles.mainContainer}>
<Text>Home Screen</Text>
</View>
);
}
}
export default HomeScreen;
================
DelaitsScreen.js
================
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
/* StyleSheet */
const styles = StyleSheet.create({
mainContainer: {flex: 1, flexDirection: 'column', backgroundColor: '#efefef', alignItems: 'center', justifyContent: 'center'},
});
class DetailsScreen extends React.Component {
render() {
return (
<View style={styles.mainContainer}>
<Text>Details Screen</Text>
</View>
);
}
}
export default DetailsScreen;
To The Experts, I will be forever grateful if anyone can nudge me to the right direction. :)
Thank You.
Your app is crashing because it seems like you are using React Navigation V3 with code that is for V2. V3 requires a container.
Either downgrade to V2 or add the container.
Related
I have created a React Native app with React Native CLI.
The App.tsx has the following content:
import React from "react";
import {
StyleSheet,
Text,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
const App = () => {
return (
<SafeAreaView>
<Text>Hello React</Text>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
});
export default App;
The app is very straightforward, it shows only Hello React.
What does disturb me is the gray bulk on the top:
and I do not know, where it comes from.
My virtual device:
React Native version 0.65.
Could you please tell me, where the gray bulk comes from?
The repository is hosted on https://github.com/softshipper/GrayBulk.
Update
I have changed the App component to:
import React from "react";
import {
StyleSheet,
View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
const App = () => {
return (
<SafeAreaView style={{ flex: 1, backgroundColor: "red" }}>
<View style={{ flex: 1, backgroundColor: "blue" }} />
</SafeAreaView>
)
}
const styles = StyleSheet.create({
});
export default App;
and the gray bulk still appears:
Change the SafeAreaView and change it to View to remove the boundaries and then give the component flex: 1, then paddingTop: 25 and backgroundColor: white.
Hey guys I am trying to make an app using AWS Amplify and React Native. I want to just add a background image to my app and for that small purpose, I don't want to create an entirely custom component to display for the Sign In Screen. Here is my code.
import React, { useEffect } from 'react';
import { Text, View, StyleSheet, StatusBar, ImageBackground, Image } from 'react-native';
import SplashScreen from 'react-native-splash-screen';
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import { Authenticator, AmplifyTheme } from 'aws-amplify-react-native';
Amplify.configure(awsconfig);
console.disableYellowBox=true;
const App = function() {
useEffect(() => {
SplashScreen.hide();
}, []);
return(
<View style={styles.container}>
<StatusBar
barStyle = 'light-content'
backgroundColor='black'
/>
<Authenticator usernameAttributes="email" >
</Authenticator>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
}
});
export default App;
I know ImageBackground should do the job but I don't know how to integrate the Amplify sign in with it.
Thanks in advance.
I'm building a React Native app with TypeScript. I'm currently configuring my TSLint file.
Is there a way to enforce styles in the same document to be at the bottom of the file (before the exports)?
E.g. MyComponent.tsx:
import React, { Component } from "react";
import { StyleSheet, Text } from "react-native";
import { SafeAreaView } from "react-navigation";
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
}
});
export class MyComponent extends Component {
render() {
return (
<SafeAreaView style={styles.container}>
<Text>This screen is my component.</Text>
</SafeAreaView>
);
}
}
export default MyComponent;
Should throw an error, whereas:
import React, { Component } from 'react';
import { StyleSheet, Text } from 'react-native';
import { SafeAreaView } from 'react-navigation';
export class MyComponent extends Component {
public render() {
return (
<SafeAreaView style={styles.container}>
<Text>This screen is my component.</Text>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
flex: 1,
justifyContent: 'center'
}
});
export default MyComponent;
should pass?
I am an Android developer who works with Android Studio most.
I started with my first react-native project for iOS and I want to know how is it possible to have one screen with a button that when the user clicks takes him to another screen (or activity in an android way) which has a hello message.
I would be really obliged to anyone that can help because I am really new to React and React-Native.
I have tried the following code but I get the following error.
My code is the following:
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import Settings from './Settings';
import Home from './Home';
const AppNavigator = createStackNavigator({
HomeScreen: { screen: Home },
SettingScreen: { screen: Settings },
});
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Image style={styles.image} source={require('./assets/adc.png')} />
<Text style={styles.adc}>Aratos Disaster Control</Text>
<Button title="Settings" onPress = {() => this.props.navigation.navigate('SettingScreen')} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
adc:{
fontWeight: 'bold',
marginTop: 20
},
image:{
width: 80,
height: 100
}
});
// Home.js
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
export class Home extends Component {
render() {
return (
<View>
<Text>This is the home screen</Text>
<Button title="Settings" onPress={() => this.props.navigation.navigate('SettingScreen')} />
</View>
)
}
}
export default Home
// Settings.js
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
export class Settings extends Component {
render() {
return (
<View>
<Text>This is the Settings screen</Text>
</View>
)
}
};
export default Settings;
For navigate between pages, you can use React Navigation or react-native-router-flux or other packages. You have to define the structure of your navigation and then navigate to each page using this packages. Read guides for more information.
I want to navigate between pages using react-native.
I have total three pages. I can navigate from first -> second -> third page.
However, from the third page, when I try to go back to the first page I am getting an error "undefined is not an object (evaluating'_this2.props.navigation.navigate).
In the third page, unlike the other two pages, I imported a class to navigate back to the first page but it's giving me an error. Below is my code.
This is my App.js:
import React, {Component} from 'react'
import {View,Text,StyleSheet,ScrollView,Image,Button} from "react-native"
import FirstScreen from './FirstScreen'
import SecondScreen from './SecondScreen'
import ThirdScreen from './ThirdScreen'
import {StackNavigator} from 'react-navigation'
class App extends Component {
render(){
return(
<MyApp/>
)
}
}
const MyApp = StackNavigator({
Frist:FirstScreen,
Second:SecondScreen,
Third:ThirdScreen
})
export default App
This is my first screen code:
import React, {Component} from 'react'
import{ View,StyleSheet,Button} from 'react-native'
class FirstScreen extends Component{
render() {
return(
<View style={styles.container}>
<Button title="go to Second screen"
onPress={()=>this.props.navigation.navigate('Second')}>
</Button>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
alignItems: 'center',
justifyContent: 'center'
}
})
export default FirstScreen
This is my second screen code:
import React, {Component} from 'react'
import{ View, StyleSheet,Button} from 'react-native'
import CardDetail from './Components/CardDetail'
class SecondScreen extends Component {
render(){
return(
<View style={styles.container}>
<Button title="go to Third screen"
onPress={()=>this.props.navigation.navigate('Third')}/>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
paddingTop:20,
alignItems: 'center',
justifyContent: 'center'
}
})
export default SecondScreen
This is my third screen code:
import React, {Component} from 'react'
import{ View,Button,StyleSheet} from 'react-native'
import CardDetail from './Components/CardDetail'
class ThirdScreen extends Component{
render() {
return(
<View style={styles.container}>
<CardDetail/>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
alignItems: 'center',
justifyContent: 'center'
}
})
export default ThirdScreen
And this is the class I imported:
import React, {Component} from 'react'
import {View,
StyleSheet,
Button} from 'react-native'
class CardDetail extends Component{
render() {
return(
<View style={styles.container}>
<Button title="go back to First screen"
onPress={()=>this.props.navigation.navigate('First')}/>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
alignItems: 'center',
justifyContent: 'center'
}
})
export default CardDetail
<CardDetail /> is not provided the navigation prop i.e.
<CardDetail navigation={this.props.navigation} />
react-navigation will provide the navigation prop automatically to screens specified in the navigator creation, but if you want children components on those screens to use it, you would need to give it to them via context or manually as above.
try looking into BrowserRouter
here is an example:
<Route path="/name" exact strict render={
()=> {
return (
<div> your code </div> ....