CODEWITHSUNDEEP
react-native
Joko Joko
Joko Joko

Reputation: 121

How to update variable react native?

I have an app, where i need to get known ratio of picture for resizing it later. User can take pictures horizontal and vertical. And of course, ratio changes. So i need to get two different ratios.

There is problem with updating let horizontalImageRatio = 0;

How can i solve this, any tips?

my code:

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

            let stringImageWidth = '' + imageWidth; // Make double to string for storing to asyncstorage
            let stringImageHeight = '' + imageHeight;


            let horizontalImageRatio = 0; // this value should be updated
            let verticalImageRatio = 0;


            // For updating let horizontalImageRatio, but not working outside of this <-- PROBLEM

            const horizontalRatioCalc = () => {
                horizontalImageRatio = imageWidth/imageHeight;
                console.log('horizontal_update', horizontalImageRatio);
            };
            
            const verticalRatioCalc = () => {
                verticalImageRatio = imageWidth/imageHeight;
                console.log('vertical_update', verticalImageRatio);
            };
            

            let stringHorizontalImageRatio = '' + horizontalImageRatio;
            let stringVerticalImageRatio = '' + verticalImageRatio;

            console.log(`Size of the picture ${imageWidth}x${imageHeight}`); // Tells size of the image for the console


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

                    verticalRatioCalc();

                    try {
                        AsyncStorage.setItem("imageVerticalRatio", stringVerticalImageRatio),
                        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.`)
                    }
                }else {
                    
                    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();

Upvotes: 3

Views: 60

Answers (1)

Daniel Grabowski
Daniel Grabowski

Reputation: 331

So, apparently, you don't have access to horizontalImageRatio inside of horizontalRatioCalc, the method horizontalRatioCalc has a different scope. What you can do is change horizontalRatioCalc to receive a parameter and return a value, just like I've done in this example: https://stackblitz.com/edit/react-xiysai This is good because now you have a function that can be tested independently.

Or you can also do it this way: https://stackblitz.com/edit/react-variable-scope This way you have access to both the variable and the method.

Upvotes: 1

Related Questions