I am new to reactnative and I was following a tutorial with YouTube and I went exactly like an instructor, but my app does not work and the white screen shows
The program is very simple, there are three js files that I will put in now.
App.js :
import { StatusBar } from 'expo-status-bar';
import { Image, StyleSheet, Text, View, Button } from 'react-native';
import { NavigationContainer } from 'react-navigation';
import StackNavigator from './pages/StackNavigator';
export default function App() {
return (
<NavigationContainer>
<StackNavigator />
</NavigationContainer>
);
}
Home.js:
import { StatusBar } from 'expo-status-bar';
import { Image, StyleSheet, Text, View, Button } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Image source={require('./header.png') } style={{ width: "100%", height: 300 }} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#04294F',
},
});
StackNavigator.js:
import { View, Text } from 'react-native'
import React from 'react'
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import Home from "./pages/Home";
const Stack = createNativeStackNavigator();
const StackNavigator = () => {
return (
<Stack.Navigator ScreenOptions={{headerShown: false }}>
<Stack.Group>
<Stack.screen name="Home" component={Home} />
</Stack.Group>
</Stack.Navigator>
);
};
export default StackNavigator;
Related
I am a beginner of react native. After reading the reactive navigation basics, I'm trying to build my personal app. However, I have a difficulty of navigation to another components.
I only have the following components:
app.js
import { StatusBar } from 'expo-status-bar';
import { Button, StyleSheet, Text, View, TextInput, Image } from 'react-native';
import * as React from 'react';
import { NavigationContainer, StackActions } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import Dict from './dict';
const Stack = createNativeStackNavigator();
const HomeScreen = ({ navigation }) => {
return (
<View style={{ height: '100%' }}>
<View style={{
height: '15%', backgroundColor: 'powderblue', flexDirection:'row'
}} />
<Text>This is a test</Text>
<Button title="Go to Dictionary" onPress={() => navigation.navigate('Dict')}/>
</View>
);
};
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ headerShown: false }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
dict.js
import React from 'react';
import { Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
function Dict () {
return (
<Text>Hello, I am your cat!</Text>
);
}
export default Dict;
When I click the button Go to Dictionary, I've received the following error message:
The action 'NAVIGATE' with payload {"name":"Dict"} was not handled by any navigator.
Do you have a screen named 'Dict'?
What I want to achieve is jump to the dictionary page via a button click. Thank you for your help!
You have to create your Dict screen in your Navigator, try this:
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Dict"
component={Dict}
options={{ headerShown: false }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
I'm new to React Native and I'm trying to perform a simple stack navigation. I got it to work in another part of the application (User authentication step). My code then feeds onto another stack once the user is logged in. This stack navigator has a tab navigator nested in which may be causing the problem?
Either way I can't perform a push, from my profile screen to the edit profile screen. Code is below.
import React from 'react'
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import LoginScreen from './screens/LoginScreen';
import HomeScreen from './screens/HomeScreen';
import SignupScreen from './screens/SignupScreen';
import ProfileScreen from './screens/ProfileScreen';
import EditProfileScreen from './screens/EditProfileScreen';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';
const Stack = createNativeStackNavigator()
const screenOptions = {
headerShown: false
}
export const SignedOutStack = () =\> (
\<NavigationContainer\>
\<Stack.Navigator
initialRouteName="LoginScreen"
screenOptions={screenOptions}
\\>
\<Stack.Screen
name="Login"
component={LoginScreen}
/\>
\<Stack.Screen
name='SignupScreen'
component={SignupScreen}
/\>
\</Stack.Navigator\>
\</NavigationContainer\>
)
const Tab = createBottomTabNavigator();
export const SignedInStack = () =\> (
\<NavigationContainer\>
\<Tab.Navigator
screenOptions={screenOptions}\>
\<Tab.Screen name="Home" component={HomeScreen} /\>
\<Tab.Screen name="Profile" component={ProfileScreen} /\>
\</Tab.Navigator\>
\</NavigationContainer\>
)
export const ProfileStack = () =\> (
\<NavigationContainer\>
\<Stack.Navigator\>
\<Stack.Screen name="SignedInStack" component={SignedInStack} /\>
\<Stack.Screen name="EditProfile" component={EditProfileScreen} /\>
\</Stack.Navigator\>
\</NavigationContainer\>
)
Where I'm trying to implement the push
import { View, Text, SafeAreaView, ScrollView, StyleSheet, Image, TouchableOpacity, StatusBar, Button } from 'react-native'
import React, {useState, useEffect, useContext} from 'react';
import EditProfileScreen from './EditProfileScreen';
const ProfileScreen = ({navigation}) =\> (
// const {user, logout} = useContext(AuthContext)
<SafeAreaView style={styles.wrapper}>
<ScrollView
style={styles.container}
contentContainerStyle={{justifyContent: 'center', alignItems: 'center'}}
showsVerticalScrollIndicator = {false}
>
<Image style={styles.userImg} source={{uri: 'https://www.dmarge.com/wp-content/uploads/2021/01/dwayne-the-rock-.jpg'}} />
<Text style={styles.userName}>Person</Text>
<View style={styles.userBtnWrapper}>
<Button title="Edit Profile" onPress = {() => {
navigation.push("EditProfile")
}}/>
</View>
</ScrollView>
</SafeAreaView>
)
export default ProfileScreen
You may need to declare a stackAction before actually use navigation.
import { StackActions } from '#react-navigation/native';
....
const pushAction = StackActions.push('Profile', { user: 'Wojtek' });
navigation.dispatch(pushAction);
I am coding an application that will have more than one page. I use '#react-navigation/native' and '#react-navigation/stack' to navigate between these pages. It works correctly when I write a function name in Stack.Screen's component. But I did not understand how the class call was made.
Api.js
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
const Stack = createStackNavigator();
export default function App(props) {
// Load any resources or data that we need prior to rendering the app
return (
<View style={styles.container}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Homa Page" component={HomeScreen}/>
</Stack.Navigator>
</NavigationContainer>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});
screens/HomeScreen.js
import * as React from 'react';
import { Text, View } from 'react-native';
import { getSummary } from '../data/getSummary.js';
export class HomeScreen extends Component {
constructor(props){
super(props);
this.state ={
isLoading: true,
}
this.getSummary = getSummary.bind(this)
}
componentDidMount(){
this.getSummary;
}
render(){
return (
<View style={{flex: 1, paddingTop:20}}>
<FlatList
data={ this.state.data}
keyExtractor={(item) => item.CountryCode}
renderItem={({ item }) => (
<View>
<Text>Country:{item.CountryCode}</Text>>
</View>
)}
/>
</View>
);
}
}
I am facing a error called "undefine is not an object (evaluating '_this.props'). Its a very simple code which i am using the modern function of react native. I am not using class here.
my code is this App.js
import React from 'react';
import { StyleSheet, Text, View,TextInput,Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Routes from './Routes';
export default function App() {
return (
<Routes/>
);
}
And Route.js
import React from 'react';
import { StyleSheet, Text, View,TextInput,Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { render } from 'react-dom';
/// define all components here
import HomeScreen from './src/Component/HomeScreen';
import DetailScreen from './src/Component/DetailScreen';
// Routes defination
export default function Routes(){
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Details: DetailScreen,
},
{
initialRouteName: 'Home',
}
);
const AppContainer = createAppContainer(RootStack);
return(
<AppContainer/>
);
}
And Homescreen.js from where i need this to be jump to detail screen
import React from 'react';
import { StyleSheet, Text, View,TextInput,Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
export default function HomeScreen() {
return (
<View>
<Text>I am testing from the home screen</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}></Button>
</View>
)
}
And DetailScreen.js
import React from 'react';
import { StyleSheet, Text, View,TextInput,Button } from 'react-native';
export default function DetailScreen() {
return (
<View>
<Text>I am testing from the detail screen</Text>
</View>
)
}
Try withNavigation from react-navigation, you're seeing this error because you are not passing navigation from the parent.
import React from 'react';
import { StyleSheet, Text, View,TextInput,Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import {withNavigation} from 'react-navigation'
export default withNavigation(function HomeScreen() {
return (
<View>
<Text>I am testing from the home screen</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}></Button>
</View>
)
})
Its fix
export default function HomeScreen(props) {
return (
<View>
<Text>I am testing from the home screen</Text>
<Button
title="Go to Details"
onPress={() => props.navigation.navigate('Details')}></Button>
</View>
)
}
because this.props only coming in class component but in function component its coming without a 'this'
I am trying to create react native application.But it is throwing error. I used react-native-navigation.
(I am trying to create react native application.But it is throwing error. I used react-native-navigation. )
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createBottomTabNavigator } from "react-navigation-tabs";
import DashboardScreen from "./src/component/Dashboard";
import LoginScreen from "./src/component/Auth/Login";
import RegisterScreen from "./src/component/Auth/Register";
const AppStack = createStackNavigator({ Dashboard: DashboardScreen });
const AuthStack = createBottomTabNavigator({
SignIn: LoginScreen,
Register: RegisterScreen
});
export const RootNaviation = () => {
return createAppContainer(
createSwitchNavigator(
{
Auth: AuthStack,
App: AppStack
},
{ initialRouteName: "Auth" }
)
);
};
App File
import React from "react";
import { StyleSheet, Text, View, Button } from "react-native";
import { SwitchNavigator } from "./Router";
const Nav = SwitchNavigator();
export default function App() {
return (
<View style={styles.container}>
<Button title="dafdlka" />
<Nav />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
}
});
enter image description here
You have never created a variable called SwitchNavigator.
You can use RootNaviation
import { RootNaviation } from "./Router"
...
export default function App() {
return (
<View style={styles.container}>
<Button title="dafdlka" />
<RootNaviation />
</View>
);
}