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

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

Related

React navigation params object empty

When i try passing the params to my review screen it comes up undefined.
I'm using "#react-navigation/native": "^6.1.3" and "#react-navigation/stack": "^6.3.12"
App.js
import 'react-native-gesture-handler';
import { StyleSheet, Text, View, Button, TouchableOpacity, FlatList } from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
import Stack from './routes/stack';
export default function App() {
return (
<NavigationContainer>
<Stack/>
</NavigationContainer>
);
}
Stack.js
import {createStackNavigator} from '#react-navigation/stack';
import ReviewScreen from '../screens/Reviews';
import HomeScreen from '../screens/Home';
import AboutScreen from '../screens/About';
const stack = createStackNavigator();
const Stack = () => {
return(
<stack.Navigator>
<stack.Screen name="Home" component={HomeScreen} />
<stack.Screen name="Review" component={ReviewScreen} />
</stack.Navigator>
)}
export default Stack;
HomeScreen
<View style={{width: 100, alignItems: "center"}}>
<TouchableOpacity style={{backgroundColor: "#333", padding: 10, borderRadius: 15, margin: 10}}
onPress={() => navigation.navigate("Review",
{title:"Title Name"}
)}
>
<Text style={{color: "white"}}>{item.title}</Text>
</TouchableOpacity>
</View>
Review.js
import {View, Text, Button} from 'react-native';
import React from 'react';
export default ReviewScreen = ({ navigation, route }) => {
console.log(route);
const { title } = route.params;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Review Screen</Text>
<Button
title="Go to Home"
onPress={() => navigation.goBack()}
/>
</View>
);
};
When I send the object from the home page to the review screen the destructed title throws an undefined error and when I log the route object it shows that the params value is undefined.
console logged route object
{"key": "Review-xxx", "name": "Review", "params": undefined, "path": undefined}
How can I get the params to pass onto the review screen properly?
here is the working code see it!
App.js
import * as React from 'react';
import { Button, View, Text, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details',{ title:"Full Stack Developer"})}
/>
</View>
);
}
function DetailsScreen({ navigation, route }) {
const { title } = route.params;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>{title}</Text>
</View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
I had not properly installed the #react-navigation/native and #react-navigation/stack dependencies. Find them stated here and here respectively.

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;

Navigate Between Stack Screens using imported button

I am new to react native and am having trouble establishing connections between components.
For example
onClickFunction() {this.props.navigation.navigate('CurrencyList')} is not working for my pattern. I did a several research on this subject but I could not understand its logic.
This is my App.js
import React from 'react'
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
// Screens---------------------------------------------------------
// Auth Screens
import Login from './screens/Authentication/Login'
import Register from './screens/Authentication/Register'
// Main Screens
import Home from './screens/Home'
import Converter from './screens/Converter'
import CurrencyList from './screens/CurrencyList'
//-----------------------------------------------------------------
const Stack = createStackNavigator();
var routeName = 'Converter';
export default class App extends React.Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName={`${routeName}`}>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="Converter" component={Converter} />
<Stack.Screen name="CurrencyList" component={CurrencyList} />
</Stack.Navigator>
</NavigationContainer>
)
}
}
This my Converter Page
// Currency Converter Page
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
// Components
import UpdateButton from '../../components/UpdateButton'
import CurrencySelectButton from '../../components/CurrencySelectButton'
import CurrencyTextInput from '../../components/CurrencyTextInput'
import ConvertedCurrencyTextInput from '../../components/ConvertedCurrencyTextInput'
export default function Home() {
return (
<View style={styles.container}>
<View style={styles.textHolder}>
<CurrencyTextInput />
<Text>=</Text>
<ConvertedCurrencyTextInput />
</View>
<View style={styles.buttonHolder}>
<CurrencySelectButton />
<Text>to</Text>
<UpdateButton />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
buttonHolder: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#f1f1f1',
alignContent: 'center'
},
textHolder:{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#f1f1f1',
alignContent: 'center'
}
});
This is the button component that I want to change the screen
import React from 'react'
import { TouchableOpacity, Text, StyleSheet } from 'react-native'
export default class CurrencySelectButton extends React.Component {
onClickFunction() {
this.props.navigation.navigate('CurrencyList')
}
render() {
return (
<TouchableOpacity onPress={() => this.onClickFunction()} style={styles.button} >
<Text style={styles.buttonText} >TRY</Text>
</TouchableOpacity>
)
}
}
const styles = StyleSheet.create({
button: {
backgroundColor: 'black',
padding: 15,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 15,
flex: 1,
height: 75,
marginHorizontal:20
},
buttonText: {
color: 'white',
fontWeight: 'bold',
fontSize: 17
}
})
You will have to pass the navigation prop from home to the button like below
export default function Home({navigation}) {
return (
<View style={styles.container}>
<View style={styles.textHolder}>
<CurrencyTextInput />
<Text>=</Text>
<ConvertedCurrencyTextInput navigation={navigation}/>
</View>
<View style={styles.buttonHolder}>
<CurrencySelectButton />
<Text>to</Text>
<UpdateButton />
</View>
</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>
);
}

Categories