I have an issue with this React Native project where when this page loads in the app, I get the following error: source.uri should not be an empty string
. It loops round a couple more times, and the console.log statements eventually evaluate to have values instead of empty strings. URL first, then followed by score. How would I ensure that the app has the values ready before the return?
import {Image, Text, View} from 'react-native';import {useNavigation} from '@react-navigation/native';import {StackNavigationProp} from '@react-navigation/stack';import {RootStackParamList} from './RootStack';import Styles from '../styles/MatchFoundStyles';import { GestureHandlerRootView, TouchableOpacity,} from 'react-native-gesture-handler';import AsyncStorage from '@react-native-async-storage/async-storage';type FingerScreenProp = StackNavigationProp<RootStackParamList, 'Fingerprint'>;const MatchFound = () => { const navigation = useNavigation<FingerScreenProp>(); const [value, setValue] = useState('value'); const useAsyncStorage = (key: string) => { const [storedData, setStoredData] = useState(''); const storeData = async () => { try { const valueToStore = typeof value === 'string' ? value : JSON.stringify(value); await AsyncStorage.setItem(key, valueToStore); setStoredData(valueToStore); } catch (e) { console.error(e); } }; useEffect(() => { const getData = async () => { try { const storageValue = await AsyncStorage.getItem(key); if (storageValue !== null) { setStoredData(storageValue); } } catch (e) { console.error(e); } }; getData(); }, [key]); return {storedData, storeData}; }; const url = useAsyncStorage('@data__url').storedData; const score = useAsyncStorage('@data__score').storedData; console.log('Score =', score); console.log('URL =', url); return (<GestureHandlerRootView style={Styles.container}><View style={Styles.container}><View><Image style={{height: 100, width: 100}} source={{uri: url}} /></View></View></GestureHandlerRootView> );};export default MatchFound;