CODEWITHSUNDEEP
react-nativereact-navigation-stack
Aashish Sapkota
Aashish Sapkota

Reputation: 59

StackNavigation problem in react native app

enter image description here

I am having a problem solving this error. Do I need to render using class components only? or is there a way to use the function method? Help me if you can. What would be my best solution? I have attached code below

EstesGuideNavigator.js

    import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';

import CategoriesScreen from '../screens/CategoriesScreen';
import PlaceScreen from '../screens/PlacesScreen';
import PlacesDetailScreen from '../screens/PlacesDetailScreen';

const EstesGuideNavigator= createStackNavigator({

    Categories: CategoriesScreen, //mapping CategoriesScreen to Categories which makes easier to navigate
    Places: {
        screen: PlaceScreen
    },

    PlacesDetail:PlacesDetailScreen
});

export default createAppContainer(EstesGuideNavigator);

Below would be App.js

import React, {useState}from 'react';
import { StyleSheet, Text, View } from 'react-native';
import *as Font from 'expo-font';
import {Apploading} from 'expo';
import EstesGuideNavigator from './navigation/EstesGuideNavigator';

const fetchFonts = () => {   //fetching costum fonts for my app using Async
  Font.loadAsync({
    'raleway-blackItalic' : require('./assets/fonts/Raleway-BlackItalic.ttf'),
    'raleway-bold' : require('./assets/fonts/Raleway-Bold.ttf'),
    'raleway-regular' : require('./assets/fonts/Raleway-Regular.ttf'),
    'raleway-thin' : require('./assets/fonts/Raleway-Thin.ttf')
  });
};

export default function App() {
const [fontLoaded, setFontLoaded] = useState(false); //initially it's false because app hasn't been loaded 

if (!fontLoaded) {
  return(
  <Apploading 
  startAsync = {fetchFonts} 
  onFinish = {() => setFontLoaded(true) }
  /> //if assets(fonts here) is not loaded we display loading screen and load assets for app
  );

}
return <EstesGuideNavigator/>;
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  }
});

CategoriesScreen.js

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

const CategoriesScreen = props =>{

    return(
        <View style ={styles.screen}>
            <Text> Categories Screen! Dummy </Text>
        </View>
    );
};

const styles = StyleSheet.create({
screen:{
    flex:1,
    justifyContent:'center',
    alignItems:'center'
}
});

export default CategoriesScreen;

This is just a dummy screen that i wanted to create.

Upvotes: 0

Views: 78

Answers (1)

Aashish Sapkota
Aashish Sapkota

Reputation: 59

It was a wrong import that react native automatically changed in my CategoriesScreen.js.

Upvotes: 1

Related Questions