i am getting error with props.title this is my code enter image description here
1: https://i.stack.imgur.com/Bjrb4.png and i am getting this error
enter image description here
navigation.Opendrawer not working...PFA...code
when i am clicking nothing is happening
It's wrong syntax, use this
const CustomHeader = (props) => {
const {title, home} = props;
....
props.navigation.goBack()
}
or
const CustomHeader = ({title, home, navigation}) => {
.....
navigation.goBack() // <== No props.navigation
}
Please specify what value is delivered to prop in CustomerHeder component.
<CustomerHeder title={"title"} isHome={"something"}/>
const CustomerHeder = (props) => {
const {title, isHome} = props
return ...
}
also You can try...
const CustomerHeder = ({title , isHome}) => {
return ...
}
Related
AsyncStorage.getItem is giving this error in react native when added in useEffect what am I doing wrong here can anyone pls help me understand the error.
export default function Pregent_login(props) {
const [first, setfirst] = useState();
useEffect(() => {
console.log('route.params ==>', props.route.params);
const value = AsyncStorage.getItem('token');
setfirst(value);
}, []);
Check the below code:
export default function Pregent_login(props) {
const [first, setfirst] = useState();
useEffect(() => {
console.log('route.params ==>', props.route.params);
AsyncStorage.getItem('token').then(token => {
setfirst(token);
})
}, []);
Please try using this way
AsyncStorage.getItem('token').then(token => {
// again, the rest of your function should be in this block
})
More details Here
I can't even tell you how many variations I have tried, tutorials and documentations that I have watched and read, I cannot transfer data from one page to another. Am using react native expo. I have this included in both pages: import AsyncStorage from '#react-native-async-storage/async-storage';.
This is the page I'm trying to set the data:
const ToyDetails = () => {
const [savedName, setSavedName] = useState('')
const addCart = async() => {
setButtonText('ADDED TO CART!')
try {
await AsyncStorage.setItem('saved_name', savedName)
}catch(error){
console.log(error)
}
}
return(
<View>
<Text value={savedName}>{name}</Text>
#{name} is because I am importing the name from a FlatList item
</View>
)
}
And getting that data from another page:
const Cart = () => {
const [savedName, setSavedName] = useState('')
useEffect(()=>{
getData()
}, [])
const getData = () => {
try {
AsyncStorage.getItem('saved_name')
.then((value)=>{
if(value!=null){
setSavedName(value)
}
})
}catch(error){
console.log(error)
}
}
return (
<View>
<Text value={savedName} onChangeText={(value)=>setSavedName(value)}>{savedName}</Text>
</View>
)
}
I can post other variations I have tried if asked, I've tried adding it into a list and importing the list in the second page, I've tried to JSON.stringify the value savedName first (and JSON.parse it), I even tried doing it in the same way I did for FlatList. I'm not even getting any error messages.
in your ToyDetails.js while saving savedName is empty. i changed to name and able to get it on CartScreen
https://snack.expo.dev/7ozHrsOBT check ToyDetails.j file
const addCart = async() => {
setButtonText('ADDED TO CART!')
try {
console.log("savedName",savedName) //saved name is empty here
await AsyncStorage.setItem('saved_name', name)
}catch(error){
console.log('setitem didnt work')
}
}
I have 4 buttons on one Screen1 that pass different data to Screen2. The data received in Screen2 has to be sent to Screen3 again using react navigation. I am aware of passing parameters using react-navigation along a route but how do I pass that same data from Screen2 to Screen3 again using an if statement? I am very new to react native so any help would be appreciated
const Screen1 = () => {
const navigation = useNavigation()
const onPress = () => {
navigation.navigate("Screen2", {
thing1:"my thing",
thing2:"my second thing"
})
}
}
const Screen2 = ({ route }) => {
const navigation = useNavigation()
// get the params
const { thing1, thing2 } = route.params
const onPress = () => {
// send to screen 3
navigation.navigate("Screen3", {
thing1,
thing2
})
}
}
EDIT
Oh - i think i realised what you meant by an 'if statement'. You are talking about an effect when you land on the page.
I would say that navigating automatically away from a page is very likely to cause you problems, and may mean you need to combine your screens into one. But to do it you would use an effect:
const Screen1 = () => {
const navigation = useNavigation()
const onPress = () => {
navigation.navigate("Screen2", {
thing1:"my thing",
thing2:"my second thing"
})
}
}
const Screen2 = ({ route }) => {
const navigation = useNavigation()
const isFocused = useIsFocused() // react-navigation
// get the params
const { thing1, thing2 } = route.params
useEffect(() => {
if(thing2 !== thing1 && isFocused){
navigation.navigate("Screen3", {
thing1,
thing2
})
}
}, [thing1, thing2, isFocused]) // <- this means the callback will trigger whenever one changes, including when the component gains focus from react-navigation
}
I created a barcode scanner App using expo-barcode-scanner.
I have some problems.
The purpose of the scanner is to get the barcode number and send it to barcode.monster and get product details. It works, but I have two main problems which I dont know what should I look for and how to resolve.
After the scanner get a barcode, I want to send to a confirmation screen, where the User should add the product into a category.
const handleBarCodeScanned = ({ type, data }) => {
reqForProduct(data);
setScanned(true);
setText(data);
navigation.navigate('Confirmation');
};
The function above is executed when the barcode camera find a number.
const reqForProduct = async barcode => {
try {
const Product = await axios.get(`https://barcode.monster/api/${barcode}`);
console.log(Product.data);
} catch (error) {
console.log(error);
}
}
The function above is responsible to get the product data.
THE NAVIGATION WORKS, BUT IF I PRESS THE BACK BUTTON AFTER THE FUNCTION SEND ME TO THE CONFIRMATION SCREEN, I CANNOT RESCAN OTHER BARCODE UNLESS I PRESS R (RELOAD) IN THE CONSOLE... THIS IS MY FIRST PROBLEM. Moreover, after coming back to the screen, the console is stucked with the last product fetched from the api.
The second problem is is to transfer the data fetched to the confirmation screen. I tried with the navigation prop like navigation.navigate('Confirmation', {fetchedDataObj} but is not working....
<Stack.Screen
name='Confirmation'
component={AddToContainerScreen} />
THE FULL PAGE CODE BELLOW ----------------------------------------------------
import {View, Text, Button, StyleSheet} from 'react-native';
import {useState, useEffect} from 'react';
import { BarCodeScanner } from 'expo-barcode-scanner';
import axios from 'axios';
const Scanner = ({navigation}) => {
const [permission, setPermission] = useState(null);
const [scanned, setScanned] = useState(false);
const [text, setText] = useState('');
const permissionCamera = () => {
( async () => {
const {status} = await BarCodeScanner.requestPermissionsAsync();
setPermission(status == 'granted');
})()
}
const reqForProduct = async barcode => {
try {
const Product = await axios.get(`https://barcode.monster/api/${barcode}`);
console.log(Product.data);
} catch (error) {
console.log(error);
}
}
// Execute permission
useEffect(() => {
permissionCamera();
}, []);
const handleBarCodeScanned = ({ type, data }) => {
reqForProduct(data);
setScanned(true);
setText(data);
navigation.navigate('Confirmation');
};
if (!permission) {
return (
<View>
<Text>Requesting camera permission</Text>
</View>
)
}
return (
<View style={styles.wrapper}>
<BarCodeScanner
style={StyleSheet.absoluteFill}
onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
/>
</View>
)
};
const styles = StyleSheet.create({
wrapper: {
flex: 1
}
})
export default Scanner;
Can someone please help me?
BTW THE PRODUCT DATA FROM tHE API COMES SLOWeR THAN the APP MOVES TO THE CONFIRMATION SCREEN...
Problem 1: I think you need to reinitialize it on a focus even listener or something.
useEffect(() => {
permissionCamera();
}, []);
since useEffect() is basically a componentOnMount and it only fires the first time you load the page. When you navigate back this is not gonna fire. Please check if this is the case. You can do a simple log to confirm this.
For the 2nd problem, I can't help you much since there is only very little data. If you really need help, you could dm me on skype. I'll be glad to help you out.
I'm trying to optimize my code with hooks. I am thinking to move all bottom sheet refs into a useBottomSheet hook so I can share those refs and be able to manipulate the bottom sheet from any components that import the refs, or callbacks that use those refs. SO I have this:
export const useBottomSheet = () => {
const searchModalRef = useRef<BottomSheetModal>(null);
const handleOpenFilters = useCallback(() => {
console.log('GO');
searchModalRef.current?.snapToIndex(0);
}, []);
In my screen I have
const SearchScreen = () => {
const { searchModalRef } = useBottomSheet();
return (
<>
<Button onPress={() => searchModalRef.current?.snapToIndex(0)} title="PRESS" />
<BottomSheet
ref={searchModalRef}
...
/>
When I press the button, the BottomSheet moves. But when I import const { handleOpenFilters } = useBottomSheet(); in another component and use it, I can see it prints "GO" in the console, but the bottomsheet doesn't move. How come?
It looks like you forgot to return the values you destructure when you call the hook!
export const useBottomSheet = () => {
const searchModalRef = useRef<BottomSheetModal>(null);
const handleOpenFilters = useCallback(() => {
console.log('GO');
return searchModalRef.current?.snapToIndex(0);
}, []);
// add this:
return { searchModalRef, handleOpenFilters }
}