I followed the documentation here and wrote this code.
App.js
import React from "react";
import {createAppContainer, createStackNavigator} from 'react-navigation';
import LoginScreen from "./src/components/LoginScreen";
export default App = () => createAppContainer(createStackNavigator({
Login: {screen: LoginScreen},
}));
LoginScreen.js
import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';
export default class LoginScreen extends Component {
static navigationOptions = {
title: 'Login',
};
render() {
const {navigate} = this.props.navigation;
return (
<View style={this.styles.viewStyle}>
<Text> Login </Text>
<Button
title="Go to Jane's profile"
onPress={() => navigate('Home', {name: 'Jane'})}
/>
</View>
);
}
}
Output
A blank screen. Login page is not rendered on screen.
You are trying to export a method in your App.js
Either Import and use it as a method or change your default export to
export default App = createAppContainer(createStackNavigator({
Login: {screen: LoginScreen},
}));
Related
I tried to give an onPress action to one of my custom button made with TouchableOpacity. It is supposed to navigate me to another screen. I did how exactly i did at other screens but this time it doesn't work and don't get any error as well. On the Navigation.js, when i give initialRouteName manually, screen appears, but when i click on the button, nothing happens.
Home Screen:
import React from "react";
import { StyleSheet, View, StatusBar, Image, ImageBackground, TouchableOpacity} from "react-native";
const HomeScreen = ({ navigation }) => {
return (
<View>
<TouchableOpacity onPress={() => navigation.navigate('Baslica')}>
<ImageBackground
source={require("../../assets/HomeScreen/baslicaButton.png")}
resizeMode="contain"
style={styles.baslicaButton}
imageStyle={styles.baslicaButton_imageStyle}
>
<Image
source={require("../../assets/HomeScreen/baslicaText.png")}
resizeMode="contain"
style={styles.baslicaText}
></Image>
</ImageBackground>
</TouchableOpacity>
</View>
);
}
export default HomeScreen;
Navigation JS:
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import IntroScreen from './src/screens/IntroScreen';
import HomeScreen from './src/screens/HomeScreen';
import BaslicaScreen from './src/screens/BaslicaScreen';
const navigator = createStackNavigator(
{
Intro: IntroScreen,
Home: HomeScreen,
Baslica: BaslicaScreen
},
{
initialRouteName: "Intro",
}
);
export default createAppContainer(navigator);
You need to wrap your components between AppContainer tags in your root component similar with below so that the navigation object become aware of the react-navigation context.
import AppContainer from './navigation'; // your navigation.js file
export default class RootApp extends React.Component {
...
render() {
return <AppContainer>
// the rest of your other components here
</AppContainer>
}
}
you Should use navigation param like this:
this.props.navigation.navigate("yourScreen", { ParamName: Valu });
Edit Your code like This:
import React from "react";
import { StyleSheet, View, StatusBar, Image, ImageBackground, TouchableOpacity} from "react-native";
const HomeScreen = ({ navigation }) => {
return (
<View>
<TouchableOpacity onPress={() =>
this.props.navigation.navigate('Baslica')}>
<ImageBackground
source={require("../../assets/HomeScreen/baslicaButton.png")}
resizeMode="contain"
style={styles.baslicaButton}
imageStyle={styles.baslicaButton_imageStyle}
>
<Image
source={require("../../assets/HomeScreen/baslicaText.png")}
resizeMode="contain"
style={styles.baslicaText}
></Image>
</ImageBackground>
</TouchableOpacity>
</View>
);
}
export default HomeScreen;
and Edit this code like that :
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import IntroScreen from './src/screens/IntroScreen';
import HomeScreen from './src/screens/HomeScreen';
import BaslicaScreen from './src/screens/BaslicaScreen';
const navigator = createStackNavigator(
{
Intro: {screen:IntroScreen},
Home: {screen:HomeScreen},
Baslica: {screen:BaslicaScreen},
},
{
initialRouteName: "Intro",
}
);
export default createAppContainer(navigator);
I am using react-native: 0.61.4.
In app.js I have
import React from 'react';
import { View, Text } from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import HomeScreen from './pages';
import ProfileScreen from './pages';
const MainNavigator = createStackNavigator({
Home: {screen: HomeScreen},
Profile: {screen: ProfileScreen}
});
const App = createAppContainer(MainNavigator);
export default App;
in pages.js I have
import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';
export default class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Main Page',
};
render() {
const {navigate} = this.props.navigation;
return (
<View style={{flex: 1}}>
<Text>You are on the main Page</Text>
<Button
title="Go to Profile"
onPress={() => navigate('Profile')}
/>
</View>
);
}
}
class ProfileScreen extends React.Component {
static navigationOptions = {
title: 'Profile',
};
render() {
return (
<View style={{flex: 1}}>
<Text>You are on the profile page</Text>
</View>
);
}
}
On the IOS simulator, the app loads properly and shows HomeScreen. When clicking on the button though, instead of taking me to ProfileScreen like it should, it looks like it moves forward in the stack to an identical page of HomeScreen, except the page has a back button that goes back to the actual HomeScreen. Anyone know what is wrong with my navigation?
You are using a default export in your pages.js instead of just export HomeScreen as default switch it to:
export { HomeScreen, ProfileScreen };
So you have access to both in app.js, and import them as
import { HomeScreen, ProfileScreen } from './pages';
So, I have got a dummy Register activity. When the user presses on TouchableOpacity, the user should be taken to a PortalListScreen which has DrawerNavigator available i.e. a drawer should be available and it needs to be toggled using a hamburger menu. I don't need the drawer on Register screen, only on PortalListScreen and subsequent screens.
I've tried everything but haven't been able to make it work.
App.js:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
*/
import React, {Component} from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import{
createStackNavigator,
createAppContainer
} from 'react-navigation';
import Login from './components/Login';
import Register from './components/Register';
import Portal from './components/Portal';
const AppNavigator = createStackNavigator(
{
Login:
{
screen: Login
},
Register:
{
screen: Register
},
Portal:
{
screen: Portal
}
},
{
initialRouteName: 'Register'
}
);
const AppContainer = createAppContainer(AppNavigator);
export default class App extends Component{
render()
{
return(
<AppContainer/>
);
}
}
Register.js:
export default class Register extends Component{
render()
{
return(
<View>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('Portal')}>
<Text>Go to portal</Text>
</TouchableOpacity>
<Text>This is registration</Text>
</View>
);
}
}
Portal.js:
import React, {Component} from 'react';
import {
View,
Text,
TextInput
} from 'react-native';
import{
createDrawerNavigator,
createAppContainer
} from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import PortalListScreen from './PortalListScreen';
const PortalStackNavigator = createStackNavigator(
{
PortalStackNavigator: PortalListScreen
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
headerLeft: (
<Icon
style={{ paddingLeft: 10 }}
onPress={() => navigation.openDrawer()}
name="md-menu"
size={30}
/>
)
};
}
}
);
const PortalDrawer = createDrawerNavigator(
{
PortalListScreen:
{
screen: PortalStackNavigator
},
},
{
initialRouteName: 'PortalListScreen'
}
);
const PortalContainer = createAppContainer(PortalDrawer);
export default class Portal extends Component{
render()
{
return(
<PortalContainer/>
);
}
}
PortalListScreen.js:
import React, {Component} from 'react';
import {
View,
Text,
TextInput,
TouchableOpacity
} from 'react-native';
export default class PortalListScreen extends Component{
render()
{
return(
<View>
<TouchableOpacity
onPress={() => this.props.navigation.toggleDrawer}>
<Text>Toggle drawer</Text>
</TouchableOpacity>
<Text>This is PortalListScreen</Text>
</View>
);
}
}
Earlier by clicking on Toggle drawer, nothing was happening but now it has started giving me this error message: Module AppRegistry is not a registered callable module (calling runApplication).
You need to add your Drawer Navigator to AppNavigator in App.js
const AppNavigator = createStackNavigator(
{
Login:
{
screen: Login
},
Register:
{
screen: Register
},
PortalDrawer,
},
{
initialRouteName: 'Register'
}
);
I am using react-navigation v3 for navigation in my react-native app. When I start app, It navigates to final navigation page i.e. Electonics
AppNavigator.js
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Home from '../container/Home';
import BooksScreen from '../container/BooksScreen'
import ElectronicsScreen from '../container/ElectronicsScreen';
const AppNavigator = createStackNavigator({
Home:Home,
Book: BooksScreen,
Electronics: ElectronicsScreen
});
export default AppContainer = createAppContainer(AppNavigator);
Home.js
import React, { Component } from 'react';
import { View, Text, TouchableOpacity as Button } from 'react-native';
export default class Home extends Component {
render() {
return (
<View>
<Text> Home Page </Text>
<Button
title="Books"
onPress={this.props.navigation.navigate('Book')}
>
</Button>
<Button
title="Books"
onPress={this.props.navigation.navigate('Electronics')}
>
</Button>
</View>
);
}
}
App.js
import AppContainer from './src/Navigation/AppNavigator';
export default class App extends Component {
render() {
console.log(this.props)
return (
<AppContainer />
);
}
}
When I run the code, it runs directly to the ElectronisScreen.js. How can I make it stay at the Home?
Change your AppNavigator to below.
const AppNavigator = createStackNavigator({
Home: Home,
Book: BooksScreen,
Electronics: ElectronicsScreen
},
{
initialRouteName: 'Home',
});
you have to define your initialRouteName.
I am creating an app in ReactNative and i got this issue. Following are the files containing code
index.js
import React from 'react';
import {AppRegistry} from 'react-native';
import Home from 'MobileApp/src/users/Home';
AppRegistry.registerComponent('MobileApp', () => App);
Home.js
import React, {Component} from 'react';
import { View,Button} from 'react-native';
import Profile from './Profile';
class Home extends Component{
onPressProfile(){
navigate('Profile', { name: 'Profile' })
}
render() {
return(
<View style={styles.viewStyle}>
<View style={styles.buttonStyle}>
<Button
onPress={this.onPressProfile}
title="Profile"
/>
</View>
</View>
);
}
}
const styles= {
viewStyle: {
flex: 1,
justifyContent: 'center',
},
};
export default Home;
Error is in my Home.js. what is the mistake?Thanks in advance.
In your index.js file, you should be using your Home component as entry point of your app.
Index.js
import React from 'react';
import {AppRegistry} from 'react-native';
import Home from 'MobileApp/src/users/Home';
AppRegistry.registerComponent('MobileApp', () => Home);
In your actual code, App is undefined.
You may have error on this line:
navigate('Profile', { name: 'Profile' })
need to define navigate to access it. Assuming you are learning from official documentation
const { navigate } = this.props.navigation;
And import navigation would be like:
import {
StackNavigator,
} from 'react-navigation';
const App = StackNavigator({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen },
});
For further information how navigation works, check documentation