Develop Reference

React Navigation (Native) navigation.navigate isn't working and throwing an undefined error

My Custom Button that should take me home doesn't and give me an "undefined error." I'm pretty sure its because the Stack Navigator stuff is in the main file, but I don't know how to give this code file access to it and my Google efforts and the Docs have been unsuccessful. Any help on this simple issue would be appreciated.
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import CustomButton from './CustomButton';
import { useFonts } from 'expo-font';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import player from './Player';
import App from './App';
import usePotion from './UsePotion';
import { useState } from 'react';
import { useEffect } from 'react';
function BattleScreen({ navigation }) {
const [fontsLoaded, error] = useFonts({
'Valorax': require('./Fonts/Valorax.otf'),
});
if (!fontsLoaded) {
return <Text>Loading...</Text>;
}
return (
<View style={styles.container}>
<Text style={styles.text}>{player.potions}</Text>
<View style={styles.topHalf}>
</View>
<View style={styles.bottomHalf}>
<View style={styles.buttonRow}>
<CustomButton onPress={() => handleAttack()} title='Attack'></CustomButton>
<CustomButton onPress={() => handleMagic()} title='Magic'></CustomButton>
</View>
<View style={styles.buttonRow}>
<CustomButton onPress={usePotion()} title='Use Potion'></CustomButton>
<CustomButton onPress={() => handleRun()} title='Run'></CustomButton>
<CustomButton onPress={() => navigation.navigate('Home')} title="Home"></CustomButton>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000000',
},
topHalf: {
flex: 1,
color: 'white',
},
bottomHalf: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap'
},
buttonRow: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-evenly',
flexWrap: 'wrap'
},
text: {
fontSize: 90,
color: 'white',
fontFamily: "Valorax",
}
});
export default BattleScreen;
**strong text**

Try using the useNavigation hook (https://reactnavigation.org/docs/use-navigation/):
import { useNavigation } from '#react-navigation/native';
function BattleScreen() {
const [fontsLoaded, error] = useFonts({
'Valorax': require('./Fonts/Valorax.otf'),
});
const navigation = useNavigation()
if (!fontsLoaded) {
return <Text>Loading...</Text>;
}
return (
<View style={styles.container}>
<Text style={styles.text}>{player.potions}</Text>
<View style={styles.topHalf}>
</View>
<View style={styles.bottomHalf}>
<View style={styles.buttonRow}>
<CustomButton onPress={() => handleAttack()} title='Attack'></CustomButton>
<CustomButton onPress={() => handleMagic()} title='Magic'></CustomButton>
</View>
<View style={styles.buttonRow}>
<CustomButton onPress={usePotion()} title='Use Potion'></CustomButton>
<CustomButton onPress={() => handleRun()} title='Run'></CustomButton>
<CustomButton onPress={() => navigation.navigate('Home')} title="Home"></CustomButton>
</View>
</View>
</View>
);
}

Can someone help me with a React Navigation screen change problem?

I'm having a problem getting my React Navigation to actually transition screens. I've used it successfully before and I cannot figure out what my problem is this time. I click my button and no transition happens. I think it might be a problem with the inline onPress not running....does it have to be in Main Button? Or does the inline code on App.js override anything in MainButton.js.
Also...NarScreen is the screen I'm trying to get to.
FILE 1: App.js
import 'react-native-gesture-handler';
import React from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { color } from 'react-native-reanimated';
import MainButton from './components/MainButton';
import NarScreen from './screens/NarScreen.js'
function HomeScreen({ navigation }) {
return(
<View style={styles.background}>
<View style={styles.logo}>
<Image source={require('./components/HNS1.png')} style={styles.image} resizeMode='contain' />
</View>
<View style={styles.buttons}>
<MainButton onPress={() => navigation.navigate('Nar')}>NAR Test</MainButton>
<MainButton>Tripoli Test</MainButton>
</View>
</View>
);
}
function Nar({ navigation }) {
return(
<NarScreen />
)
}
const Stack = createStackNavigator();
function App() {
return(
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Nar" component={Nar} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
background: {
backgroundColor: '#00629B',
flex: 1,
},
buttons: {
marginTop: "20%",
marginLeft: 10,
},
image: {
width: '80%',
height: 300,
borderRadius: 20,
},
logo: {
borderRadius: 200,
marginTop: '30%',
alignItems: 'center'
},
});
export default App;
File 2: NarScreen.js
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
const NarScreen = props => {
return(
<View>
<Text>BigScreen!</Text>
</View>
)
}
export default NarScreen;
FILE 3: MainButton.js
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity, } from 'react-native';
const MainButton = props => {
return <TouchableOpacity>
<View style={styles.button}>
<Text style={styles.buttonText}>{props.children}</Text>
</View>
</TouchableOpacity>
}
const styles = StyleSheet.create({
button: {
backgroundColor: "#FCD757",
paddingVertical: 30,
paddingHorizontal: 30,
height: 100,
width: 300,
marginTop: "10%",
borderRadius: 10,
marginLeft: '12%',
justifyContent: 'space-between',
},
buttonText: {
color: 'black',
fontSize: 26,
textAlign: 'center',
}
})
export default MainButton;

Inside your MainButton.js file, you are not handling onPress event. Add it to touchable opacity.
const MainButton = props => {
return <TouchableOpacity onPress={props.onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>{props.children}</Text>
</View>
</TouchableOpacity>
}

How to pass firestore data between screens React Native

I am not using classes or functions as a native component, I am using const with props as a parameter.
In my project I am using Firestore as database and I want to pass data from one screen to another and I don't know how, can someone give me some tips ?
My other problem is in the firestore query because I need to put .doc(firebase.auth().currentUser) and when I test my application an error occurs in the application.
BreadAndBounty.js
import React, { useState, useEffect } from "react";
import { View, Text, TextInput, StyleSheet, Image, ScrollView, TouchableOpacity, StatusBar, SafeAreaView, FlatList, Dimensions, ImageBackground } from 'react-native'
import { Ionicons } from '#expo/vector-icons'
import Constants from 'expo-constants'
import firebase, { firestore } from 'firebase'
require('firebase/firestore')
const { width, height } = Dimensions.get("window");
const BreadAndBounty = (props) => {
const [adverts, setAdverts] = useState([])
const getAdverts = async () => {
const querySnap = await firestore()
.collection('adverts')
.get()
const result = querySnap.docs.map(docSnap => docSnap.data())
setAdverts(result)
}
useEffect(() => {
getAdverts()
}, [])
const renderItem = (item) => {
return (
<View>
<View style={{
flexDirection: "row",
paddingTop: 50,
alignItems: "center"
}}>
<View style={{ width: "20%" }}>
</View>
<View style={{
width: "60%"
}}>
<Text style={{
fontWeight: "bold",
fontSize: 14,
color: "#044244"
}}>{item.title}</Text>
<Text style={{
fontWeight: "900",
fontSize: 12,
color: "#9ca1a2"
}}>
{item.name}
</Text>
</View>
<View style={{
width: "20%",
alignItems: "flex-end"
}}>
</View>
</View>
<TouchableOpacity
onPress={() => props.navigation.navigate(("AdvertsDetail"), { uid: firebase.auth().currentUser })}
style={{
flexDirection: "row",
width: "100%",
paddingTop: 20
}}>
<ImageBackground
source={item.image}
style={{
width: 300,
height: 220,
borderRadius: 30,
}}
imageStyle={{
borderRadius: 30,
}}
>
<View style={{
height: "100%",
flexDirection: "row",
alignItems: 'flex-end',
justifyContent: "flex-end"
}}>
</View>
</ImageBackground>
</TouchableOpacity>
</View>
)
}
return (
<ScrollView showsVerticalScrollIndicator={false}
style={{
height: "100%",
backgroundColor: "#62929E"
}}>
<View style={styles.view1}>
<View style={styles.view2}>
<View>
</View>
<View style={styles.view3}>
</View>
</View>
<Text style={styles.text1}>Bread And Bounty</Text>
<View style={styles.view_search}>
<TextInput
placeholder="Pesquisar anúncios de voluntariado..."
style={styles.textinput}>
</TextInput>
<Ionicons
name="search"
size={15}
color="#9CALA2"
></Ionicons>
</View>
</View>
<View style={styles.view4}>
<View style={{ width: "100%" }}>
<FlatList
numColumns={1}
horizontal={false}
showsVerticalScrollIndicator={false}
style={{
display: "flex",
height: Dimensions.get("screen").height,
width: Dimensions.get("screen").width
}}
data={adverts}
renderItem={({ item }) => renderItem(item)} />
</View>
</View>
</ScrollView>
)
}
export default BreadAndBounty
AdvertsDetail
import React, { useState } from 'react'
import { View, StyleSheet, Text,TouchableOpacity } from 'react-native'
import Constants from 'expo-constants';
import { Ionicons } from "#expo/vector-icons"
const AdvertsDetail = (props) => {
const [currentUser, Adverts] = useState([])
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity onPress={() => props.navigation.goBack()}>
<Ionicons name="md-arrow-back" size={24} color="#52575D"></Ionicons>
</TouchableOpacity>
</View>
<Text>{currentUser.title}</Text>
</View>
)
}
export default AdvertsDetail

We can simply access the params from the previous screen in the new screen by accessing the props of the current screen.
ex.
import React, { useState } from 'react'
import { View, StyleSheet, Text,TouchableOpacity } from 'react-native'
import Constants from 'expo-constants';
import { Ionicons } from "#expo/vector-icons"
const AdvertsDetail = (props) => {
const currentUser = props.route.params.uid
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity onPress={() => props.navigation.goBack()}>
<Ionicons name="md-arrow-back" size={24} color="#52575D"></Ionicons>
</TouchableOpacity>
</View>
<Text>{currentUser.title}</Text>
</View>
)
}
export default AdvertsDetail
Check out the official docs from react-navigation for passing the params to the screen and accessing it.
https://reactnavigation.org/docs/params/

How to i read field data from firestore in react native?

I want to display the temp value in application from fire store but I don't know how to do it by using hook (온도 means temperature)
please help me this is my code. v v
import React ,{useState,useEffect} from 'react';
import Iconicons from 'react-native-vector-icons/Ionicons';
import firestore, { firebase } from '#react-native-firebase/firestore';
import {
SafeAreaView,
ScrollView,
StyleSheet,
TouchableOpacity,
Text,
View}
from 'react-native';
const temp = ({navigation}) => {
return (
<SafeAreaView style={styles.top}>
<View style={styles.array}>
<TouchableOpacity onPress={() => {navigation.pop()}}>
<Iconicons name={'arrow-back-outline'} size={40} color={'white'}/>
</TouchableOpacity>
<Text style={styles.word}>온도</Text>
<Text> </Text>
</View>
<ScrollView style={styles.container}>
<View style={styles.body}>
<View style={styles.box}>
<Text style={styles.text}>온도:{temp} </Text>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'skyblue',
flex: 1,
},
top:{
backgroundColor: '#007ccc',
flex: 1,
},
body:{
marginTop:100,
alignItems:'center',
justifyContent:'center',
},
word:{
fontSize:20,
color:'white',
},
array:{
justifyContent:'space-between',
flexDirection:'row',
},
box:{
justifyContent:'center',
backgroundColor:'white',
borderRadius:30,
width:300,
height:300,
},
text:{
fontSize:50,
},
});
export default temp;
This is my data from firestore:

React Native: Unable to navigate to the' Login.js' screen

I have created 3 files and places the navigation container in the app.js file. i am unable to navigate through the screens. I don't understand where the mistake lies.
App.js
import 'react-native-gesture-handler';
import React, { useState } from 'react';
import { NavigationContainer } from '#react-navigation/native';
import Login from './Login.js';
import {createStackNavigator} from '#react-navigation/stack';
import InitialScreen from './InitialScreen.js';
const Stack = createStackNavigator();
function Nav() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="InitialScreen">
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="InitialScreen" component={InitialScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default Nav;
InitialScreen.js
import 'react-native-gesture-handler';
import React, { useState } from 'react';
import {Button, Text, TextInput, View, StyleSheet ,TouchableOpacity,Image} from 'react-native';
import Icon from 'react-native-vector-icons/Feather';
import { NavigationContainer } from '#react-navigation/native';
import Login from './Login.js';
function InitialScreen({navigation}){
const pressHandler=()=>{
navigation.navigate('Login');
}
return (
<>
<View style={styles.container}>
<View style={styles.Container0}>
<TouchableOpacity>
<Text style={{backgroundColor:'white',
fontSize:30,
borderWidth:2,
borderRadius:4,
marginTop: 5,
marginLeft:10,
marginRight:10,
fontWeight:'bold',
textAlign:'center',
padding:2,
}} onPress={pressHandler}
>Login</Text>
<Text style={{marginLeft:10,
fontSize:15,}}> Do not have an account?</Text>
<Text style={{backgroundColor:'white',
fontSize:30,
borderWidth:2,
borderRadius:4,
marginTop: 5,
marginLeft:10,
marginRight:10,
fontWeight:'bold',
textAlign:'center',
padding:2,
}}>SignUp</Text>
</TouchableOpacity>
</View>
<View style={styles.Container1}>
<Image source={{uri: 'http://i.pinimg.com/originals/d1/9b/4d/d19b4d524b8f95b3c640228c28373696.jpg'}}
style={{width:'100%',
height:'100%',
marginTop:5,
flexDirection: 'column',
justifyContent: 'center',
alignSelf: 'center',}}/>
</View>
<View style={styles.Container3}>
<Text style={{fontSize:25,fontWeight:'bold',
color:'white',
textAlign:'center',
}}>I am going to be so productive!!!!!!</Text>
</View>
</View>
<View style={styles.icons}>
<Icon
name='download-cloud'
size={30}
/>
<Icon
name='mail'
size={30}
/>
<Icon
name='instagram'
size={30}
/>
<Icon
name='link'
size={30}
/>
</View>
</>
);
}
const styles=StyleSheet.create({
container:
{ flex:0.9,
marginLeft:5,
marginRight:5,
marginTop:5,
marginBottom:5,
backgroundColor:'black',
},
Container0:
{ flex:0.25,
flexDirection:'column',
backgroundColor:'#ffa07a',
},
Container1:
{
flex:0.6,
backgroundColor:'white',
},
Container3:
{flex:0.1,
justifyContent:"center",
alignItems:'center',
marginTop:10,
},
icons:
{
flex:0.1,
flexDirection: 'row',
justifyContent:'space-around',
marginTop:10,
},
}
);
export default InitialScreen;
Login.js
import 'react-native-gesture-handler';
import React, { useState } from 'react';
import { Text, TextInput, View, StyleSheet ,TouchableOpacity,Image} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
function Login() {
const [text,onChangeText]= React.useState('Enter your email');
const [Value,setValue]= React.useState('Enter your password');
return(
<View style={styles.container}>
<Text style={{marginTop:40,fontWeight:'bold',fontSize:40,textAlign:'center',}}>Login</Text>
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
onChangeText={text => onChangeText(text)}
value={value}
/>
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
setValue={Value => setValue(Value)}
value={value}
/>
</View>
);
}
const styles=StyleSheet.create({
container:
{
flexDirection:'column',
}
});
export default Login;
I don't understand why the "onPress" isn't working here . I am unable to even click on it . it is just like a text with no response or change in opacity too . The navigation isn't working either.

#nandita you are using onPress on Text tag. onPress event only works on TouchableOpacity or TouchableHightlight
try doing this.
<TouchableOpacity onPress={pressHandler}>
<Text style={{backgroundColor:'white',
fontSize:30,
borderWidth:2,
borderRadius:4,
marginTop: 5,
marginLeft:10,
marginRight:10,
fontWeight:'bold',
textAlign:'center',
padding:2,
}}
>Login</Text>
<TouchableOpacity>