CODEWITHSUNDEEP
javascriptreact-nativereact-navigation
Shahar Brandman
Shahar Brandman

Reputation: 83

React navigation - Component doens't display with Screen

like I said in the title, I'm trying to display a component with .Screen in React Navigation and it just doesn't do it for some reason

index.js

import React from 'react'
import { StyleSheet , View, Text } from 'react-native'
import 'react-native-gesture-handler'
import { StatusBar } from 'expo-status-bar'

import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

import Home from './source/fragments/Home'

export default function App() {
  const AuthStack = createStackNavigator()
  return (
    <View style = { styles.container }>
      <StatusBar style = "auto" />
      <NavigationContainer>
        <AuthStack.Navigator initialRouteName = "Home">
          <AuthStack.Screen 
            name = "Home"
            component = {Home} 
          />
        </AuthStack.Navigator>
      </NavigationContainer>
    </View>
  )
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffff',
    alignItems: 'center'
  }
})

Home.js

import React, { Component } from 'react'
import { View, Text } from 'react-native'

export default class Home extends Component {
    render() {
        return (
            <View>
                <Text> Home screen </Text>
            </View>
        )
    }
}

thank you for scrolling down here

Upvotes: 0

Views: 1149

Answers (4)

Tripode
Tripode

Reputation: 1

set a heigt to component:

import React from 'react'
import { StyleSheet , View, Text, Dimensions} from 'react-native'
import 'react-native-gesture-handler'
import { StatusBar } from 'expo-status-bar'

import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

import Home from './source/fragments/Home'

export default function App() {
  const AuthStack = createStackNavigator()
  return (
    <View style = { styles.container }>
      <StatusBar style = "auto" />
      <NavigationContainer>
        <AuthStack.Navigator initialRouteName = "Home">
          <AuthStack.Screen 
            name = "Home"
            component = {Home} 
          />
        </AuthStack.Navigator>
      </NavigationContainer>
    </View>
  )
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffff',
    alignItems: 'center'
    height: Dimensions.get('screen').height
  }
})

i use Dimensions to take screen height

Upvotes: 0

Shahar Brandman
Shahar Brandman

Reputation: 83

none of the answers below were my solution I fixed it by removing the <View> component in index.js

just like in the following code: index.js

export default function App() {
  const Stack = createStackNavigator()
  return (
    <NavigationContainer>
      <StatusBar style = "auto"/>
      <Stack.Navigator initialRouteName = "Home">
        <Stack.Screen 
          name = "Home"
          component = {Home}
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

Upvotes: 3

Don OzOn
Don OzOn

Reputation: 166

i also have same problem when add new stack to my navigation , just restart app

Upvotes: 0

Ruchira Swarnapriya
Ruchira Swarnapriya

Reputation: 1015

Export your home component as following

import React, { Component } from 'react'
import { Text, View } from 'react-native'

export class Home extends Component {
    render() {
        return (
            <View>
                <Text> This is Home </Text>
            </View>
        )
    }
}

export default Home

Upvotes: 0

Related Questions