CODEWITHSUNDEEP
react-nativereact-navigation
enzio902
enzio902

Reputation: 467

React Native Navigation : Child components are not rendered on screen

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.

enter image description here

Upvotes: 1

Views: 525

Answers (1)

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

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},
}));

Upvotes: 2

Related Questions