Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Image rendering using async storage, variables not ready

$
0
0

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;

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>