React Native:How to dynamically arrange local images in display when picked from local gallery?

Question

In my RN 0.62.2 app, a function is used to display local images picked from gallery:

const displayImg = (img_source, width, ht, local=false) => {
        if (local) {
            return (<Image source={require(img_source)} style={{width:width, height:ht, resizeMode:'cover'}}/>); //<<<== require causes error with dynamic image source
        } else {  //online 
            return (<FastImage source={{uri:img_source}} resizeMode={FastImage.resizeMode.cover} style={{width:width, height:ht}}/>);
        };
        
    };

But because of the image source is not available when bundling, the RN throws error for the require. The purpose of the function above is to dynamically arrange the image display format by the number of images picked. For example, for 1 image, then the image displayed will take full width. If there are 2 images, then one image will take half width side by side with another image. Since the app does not know which image to display until users pick the miage, the require(image_source) won't know the exact path when bundling and this is violation in React Native bundling. Is there way I can get around of this?

Answer 1

You don't have to require user input images.

You should use them as external images because react-native-image-picker will return url of picked image.

So instead of

 <Image source={require(img_source)} />

you should:

<Image source={{uri: img_source}} />