We Keep Coding

How to use stack navigator and bottom navigator in a React native expo app

I am developing a react-native application using expo cli, where I use bottomTabNavigator (which works fine) and the stackNavigator.
The application consists of 5 screens, which are navigated with the bottomTabNavigator, and of these five screens 2 need the stackNavigator.
For the implementation of the stack navigator I read the react native documentation, and reported in the project the example code that is on the documentation, to test the correct integration with my application.
My problem arises from the fact that importing the stack navigator into the actual screen where I need it, I am not shown any error messages, but neither do the navigation buttons of my test stack navigator appear.
Do you have any advice or suggestions as to why?
my stack navigator code : StackN.js
import * as React from 'react';
import { Button, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
function HomeScreen({navigation}){
return (
<View style={{flex:1, alignItems: 'center', justifyContent: 'center'}}>
<Button title="Go to Profile" onPress={()=>navigation.navigate('Profile')} />
</View>
);
}
function ProfileScreen({navigation}){
return (
<View style={{flex:1, alignItems: 'center', justifyContent: 'center'}}>
<Button title="Go to Notifications" onPress={()=>navigation.navigate('Profile')} />
<Button title="Go Back" onPress={()=>navigation.goBack()} />
</View>
);
}
const Stack = createStackNavigator();
function MyStack() {
return(
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
);
}
export default function App() {
return(
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}
screen where I import the stack navigator
import * as React from 'react';
import { View, Text, StyleSheet, Platform, Button,TouchableOpacity, ImageBackground, Dimensions, ScrollView } from 'react-native';
import Colors from '../constants/Colors';
import { Ionicons, MaterialCommunityIcons } from '#expo/vector-icons';
import ClubDetails from '../components/clubcomponents/ClubDetails';
import HeaderComponent from '../components/commoncomponents/HeaderComponent';
import { NavigationContainer } from '#react-navigation/native';
import StackN from '../navigations/StackN';
const ClubDetailScreen = props => {
return (
<View>
<HeaderComponent />
<View>
<ScrollView style={{height:100}}>
<Text>SCHERMATA NON DIRETTAMENTE COLLEGATA ALL'IMPLEMENTAZIONE ATTUALE : - TODO - </Text>
</ScrollView>
<NavigationContainer>
<StackN />
</NavigationContainer>
</View>
</View>
);
}
//opzioni di navigazione della pagina
const styles = StyleSheet.create({
header:{
marginTop:27,
height: 50,
backgroundColor: Colors.primary
},
text:{
},
icon: {
marginTop: 14,
marginLeft:3
},
title: {
marginVertical: -35,
fontSize: 20,
fontStyle: 'italic',
fontWeight: 'bold',
color: 'white',
textAlign: 'center'
},
avatar: {
marginLeft: Dimensions.get('window').width - 40,
marginTop: 7,
color: 'white'
},
dropdown:{
marginRight: 40,
}
});
export default ClubDetailScreen;

Keep getting "Unable to resolve module" in react native

I am quite new to react-native. I am currently attempting to add a custom button. Whenever I try to import the file I have created (or any file that I myself have created) I keep getting this error I am unable to resolve. I have looked far and wide but I have not found any solution that works.
Relevant information:
Npm Version: 6.14.13,
React-Native version: 0.63.2,
Expo Version: 4.5.2.
Project structure:
https://imgur.com/a/zqtplbQ
The error I get:
Unable to resolve module ./components/custombutton.js from C:\Users\levik\Desktop\App\App\App.js:
None of these files exist:
* components\custombutton.js(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
* components\custombutton.js\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
Code in App.js
import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet, Text, View, Button, Alert, Dimensions } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import * as ScreenOrientation from 'expo-screen-orientation';
import { CustomButton } from "./components/custombutton.js";
const Stack = createStackNavigator();
export default function App() {
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
return (
<View style={styles.container}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
headerStyle: {
backgroundColor: '#1e1e1e',
},
headerTintColor: '#fff',
}}
/>
<Stack.Screen
name="Thing"
component={Thing}
options={{
headerStyle: {
backgroundColor: '#1e1e1e',
},
headerTintColor: '#fff',
}}
/>
<Stack.Screen
name="About"
component={About}
options={{
headerStyle: {
backgroundColor: '#1e1e1e',
},
headerTintColor: '#fff',
}}
/>
</Stack.Navigator>
</NavigationContainer>
</View>
);
}
const HomeScreen = ({ navigation }) => { //the homescreen
navigation.addListener('focus', () => { //issue solver
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
});
return (
<View style={styles.container}>
<Button title="Poker" onPress={() => navigation.navigate('Thing')} />
<Button title="About" onPress={() => navigation.navigate('About')} />
</View>
);
}
const Thing = ({ navigation }) => { //looks like i have to use expo's API for setting it to landscape mode
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE); //works
return (
<View style={styles.container}>
<Button title="Home" onPress={() => navigation.navigate('Home')} />
<Button title="About" onPress={() => navigation.navigate('About')} />
</View>
);
}
const About = ({ navigation }) => { //the
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT); //works
return (
<View style={styles.container}>
<Button title="Home" onPress={() => navigation.navigate('Home')} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#1e1e1e',
},
title: {
fontWeight: '700',
fontSize: 40,
color: 'white',
paddingTop: 40,
paddingLeft: 10,
}
});
Code in custombutton.js:
import React from 'react';
import { StyleSheet, Text, View, Button, Alert, Dimensions } from 'react-native';
export default function CustomButton() {
return(
<Text>this is text</Text>
);
}
Things I have tried:
Take custombutton out of the components folder and change the the import line in App.js to both "./custombutton.js" and "./custombutton"
change the import to "./components/custombutton"
Run both "expo start -c" and "npm start --reset-cache"

You are exporting the CustomButton component as a default export. But on App.js, you are importing it as a named import. So, you should either do:
export function CustomButton() on custombutton.js
OR
import CustomButton from "./components/custombutton.js"; on App.js

Why Don't I See Anything Rendering in My Stack Navigator?

I have this file and I am unable to see anything, other than the title at the top of screen, rendering:
import React from 'react';
import { Text, View, Button } from 'react-native';
import { NavigationContainer} from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator } from '#react-navigation/stack'
import CreateSessionScreen from '../screens/CreateSessionScreen';
import CompletedSessionsScreen from '../screens/CompletedSessionsScreen';
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
function Hello() {
return (
<View>
<Text
style={{
flex: 1,
fontSize: 100,
height: 80,
width: 80,
borderColor: 'black',
borderWidth: 1,
justifyContent: 'center',
alignItems: 'center'}}>
Hello World
</Text>
<Button title='click me'>Click me</Button>
</View>
);
}
function AppNavigator() {
return (
<NavigationContainer >
<Stack.Navigator>
<Stack.Screen name="Hello" component={Hello} />
<Stack.Screen name="Completed Sessions" component={CompletedSessionsScreen} />
<Stack.Screen name="CreateSessionScreen" component={CreateSessionScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default AppNavigator;
For some reason I can't see anything rendering to the screen. I can throw a console.log in the component to ensure that it is rendering. I have a couple of components imported, and then threw the Hello component in the same file for troubleshooting, and can't get either to render

the problem is with your fontSize = 100 and you have the height/width very smaller compare to that. change it to 10 and see what happens.
function Hello() {
return (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
flex: 1,
}}>
<Text>
Hello World
</Text>
<Button title="click me">Click me</Button>
</View>
);
}

Display buttons dependent on variable value in React Native

I am using the following code to display a 'Home' page with a button on it in React Native...it is functional without difficulty:
import React, { useState } from 'react';
import { Button, Text, TextInput, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button title="Go to Login" onPress={() => navigation.navigate('Login')} />
</View>
);
}
function LoginScreen({ navigation }) {
//do things to login here
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Login" component={LoginScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
The problem arises when I try to modify the code to display a button on the 'Home' page dependent on the value of a global variable, I get an error. I am not sure why however it may be the 'HomeScreen' function does not recognize the value of the '_secured' variable...?
import React, { useState } from 'react';
import { Button, Text, TextInput, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
var _secured = 0;
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
if (_secured === 0) {
<Button title="Go to Login" onPress={() => navigation.navigate('Login')} />
} else {
<Button title="Stuff" onPress={() => navigation.navigate('DoStuff')} />
}
</View>
);
}
function LoginScreen({ navigation }) {
//do things to login here
}
function StuffScreen({ navigation }) {
//do other things here
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="DoStuff" component={StuffScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Any suggestions greatly appreciated, I am new to React Native. I thank you in advance.
Unfortunately I am still having immense difficulty trying to figure this out, it is incredibly frustrating. I believe I need to define my 'global' variable using the 'useState'. My code for the 'Home' screen is as follows:
function HomeScreen({ navigation }) {
const [isLogged, setLog] = useState(0);
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
(isLogged === 0) ? (<Button title="Go to Login"> onPress={() => navigation.navigate('Login')} </Button>) : (<Button title="Stuff"> onPress={() => navigation.navigate('DoStuff')} </Button>)
}
As previously mentioned I am new to developing for React Native. The inability to use simple if/else statements to accomplish this is extremely disheartening. I thank anybody in advance for some insight.

Just like an ordinary function, react renderer cannot return more than one JSX element. So wrapping up your original code inside a single JSX EmptyView <></> and then using JS to evaluate conditions and finally returning a button view.
function HomeScreen({ navigation }) {
const [isLogged, setLog] = useState(0);
return (
<>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
{isLogged === 0 ? (<Button title="Go to Login" onPress={() => navigation.navigate('Login')} > </Button>) : (<Button title="Stuff" onPress={() => navigation.navigate('DoStuff')} > </Button>)}
</>
);
}

Undefined this.props.navigation when using it in App.js inside Stack Screen component

I need to use navigation when pressing the bag icon in the header. When I press it, I get the following error:
undefined is not an object (evaluating '_this.props.navigation')
The thing is I need to use it inside a Stack.Screen component, but props.navigation always return undefined.
App.js file:
import React, { Component } from 'react';
import {
Button,
Text,
TextInput,
View,
StyleSheet,
TouchableOpacity,
Image,
} from 'react-native';
import { Header } from 'react-navigation-stack';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import TelaInicial from './components/telaInicial';
import TelaCarrinho from './components/telaCarrinho';
const Stack = createStackNavigator();
export default function AppContainer() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Inicial">
<Stack.Screen
name="Inicial"
component={TelaInicial}
options={{
title: '',
headerTintColor: 'white',
headerStyle: { backgroundColor: '#6b39b6', height: 100 },
height: Header.height,
headerLeft: null,
headerTitle: (
<View>
<TouchableOpacity
onPress={() => {
this.props.navigation.navigate('Carrinho');
}}>
<Image
style={{
width: 29,
height: 29,
marginTop: 0,
marginLeft: 170,
}}
source={require('./assets/shopping bag.png')}
/>
</TouchableOpacity>
</View>
),
}}
/>
<Stack.Screen
name="Carrinho"
component={TelaCarrinho}
options={{
title: '',
headerTintColor: 'white',
headerStyle: { backgroundColor: '#6b39b6', height: 100 },
height: Header.height,
headerBackTitle: 'Voltar',
headerTitle: 'Carrinho'.toUpperCase(),
headerTitleStyle: {
fontSize: 17,
fontWeight: 600,
},
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
Do you guys have any idea how I can fix it?
I have a link to Expo: https://snack.expo.io/#rapolasls/eager-crackers
Thank you!

Per React Navigation v5 documentation on createStackNavigator, the header property can be either an object or function.
We use it as a function below to gain access to navigation property. 👍
import React from "react";
import { View, Text, TouchableOpacity, } from "react-native";
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const Stack = createStackNavigator();
const Placeholder = (props) => {
const {
name,
backgroundColor,
} = props;
return (
<View style={{ flex: 1, backgroundColor, justifyContent: "center", alignItems: "center", }}>
<Text style={{ fontSize: 20, color: "white", }}>{ name }</Text>
</View>
)
}
const ScreenA = (props) => {
return <Placeholder name="Screen A" backgroundColor="steelblue" />
}
const ScreenB = (props) => {
return <Placeholder name="Screen B" backgroundColor="tomato" />
}
const RootNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen component={ScreenA} name="a" options={({ navigation }) => {
// navigation object available
const navigateToB = () => { navigation.navigate("b") };
return {
headerTitle: () => {
return (
<TouchableOpacity onPress={navigateToB} style={{ backgroundColor: "green", justifyContent: "flex-end", alignItems: "center", }}>
<Text style={{ fontSize: 20, color: "white", }}>{ "Screen A" }</Text>
</TouchableOpacity>
)
}
}
}} />
<Stack.Screen component={ScreenB} name="b" options={{ headerTitle: "Screen B" }} />
</Stack.Navigator>
);
}
export default function() {
return (
<NavigationContainer>
<RootNavigator />
</NavigationContainer>
);
}