Search code examples
react-nativeasyncstorage

How to return variable in React Native?


I have an app, where I make a pdf file from given text and picture.

takePicture function in camera component app take a picture, get width and height of it, calculate ratio and save all that info to AsyncStorage. It works fine.

Problem is when I trying to get that AsyncStorage data in different component.

Question is: How can I return this const height? I want use it in pdf image drawing. Tried different ways, but none of them working.

    getImageHeight = async () => {
        try {
          const height = await AsyncStorage.getItem('asyncimageHeight')
      
          if (height!== null) {
            console.log(`Height from AsyncStorage is: ${height}`)
          }
        } catch (e) {
          alert('Failed to fetch the data from storage')
        }
      }
      getImageHeight();

Here is takePicture if it helps you to get the point of the question:

takePicture = async() => {
    
    if (this.camera) {
        const options = { quality: 0.5, base64: true , fixOrientation: true};
        const data = await this.camera.takePictureAsync(options);
        console.log(data.uri);


        Image.getSize(data.uri, (width, height) => { // Get image width and height of the picture
            let imageWidth = width;
            let imageHeight = height;

            let stringImageWidth = '' + imageWidth; // Makes string for saving in AsyncStorage, allows only strings
            let stringImageHeight = '' + imageHeight;

            const horizontalRatioCalc = () => { // Calculating image ratio for horizontal pictures
                return (imageWidth/imageHeight);
              };
            
            
            const verticalRatioCalc = () => {
                return (imageWidth/imageHeight);
            };

            horizontalImageRatio = horizontalRatioCalc();
            verticalImageRatio = verticalRatioCalc();
        
            stringHorizontalImageRatio = '' + horizontalImageRatio;
            stringVerticalImageRatio = '' + verticalImageRatio;

            console.log(`Size of the picture ${imageWidth}x${imageHeight}`);


            horizontalRatio = async () => {
                if (imageHeight>imageWidth) {

                    verticalRatioCalc();

                    try {
                        AsyncStorage.setItem("imageVerticalRatio", stringVerticalImageRatio), // Save image ratio, height and width to AsyncStorage
                        AsyncStorage.setItem("asyncimageWidth", stringImageWidth),
                        AsyncStorage.setItem("asyncimageHeight", stringImageHeight),
                        
                        console.log(`Vertical ratio saved! It's ${stringVerticalImageRatio}`),
                        console.log(`Image Width saved! It's ${stringImageWidth}`),
                        console.log(`Image height saved! It's ${stringImageHeight}`)
    
                    }   catch (e) {
                        console.log(`AsyncStorage saving of image vertical ratio cannot be done.`)
                    }
                }if (imageHeight<imageWidth) {
                    
                    horizontalRatioCalc();

                    try {
                        AsyncStorage.setItem("imageHorizontalRatio", stringHorizontalImageRatio),
                        AsyncStorage.setItem("asyncimageWidth", stringImageWidth),
                        AsyncStorage.setItem("asyncimageHeight", stringImageHeight),

                        console.log(`Horizontal ratio saved! It's ${stringHorizontalImageRatio}`),
                        console.log(`Image Width saved! It's ${stringImageWidth}`),
                        console.log(`Image height saved! It's ${stringImageHeight}`)
    
                    }   catch (e) {
                        console.log(`AsyncStorage saving of image vertical ratio cannot be done.`)
                    }
                }
            }
            horizontalRatio();


            }, (error) => {
            console.error(`Cannot size of the image: ${error.message}`);
            
        });
        back(data.uri)
    }
};

Solution

  • Now I solved that case, it was too easy at finally :)

    readData = async () => {
            try {
              kuvakorkeus = await AsyncStorage.getItem('asyncimageHeight')
              kuvaleveys = await AsyncStorage.getItem('asyncimageWidth')
    
              vertikaaliratio = await AsyncStorage.getItem('imageVerticalRatio')
              horisontaaliratio = await AsyncStorage.getItem('imageHorizontalRatio')
          
              if (kuvakorkeus !== null) {
                return kuvakorkeus; // <-- That makes you able to you this variable outside of the function.
              }
            } catch (e) {
              alert('Failed to fetch the data from storage')
            }
          }
          readData ();