display images in scrollView don't scroll

Question

I have to display 2 images from API in flex column, and it have to scroll but the issu is that it don't scroll and images are incomplete ! this is my code:

    return (
            <View style={Styles.container}>
            {
              this.state.isLoading
          ?
          <ActivityIndicator size='large' color={Colors.mainYellow}/>
          :

          <View
            style={Styles.containerImg}
            contentContainerStyle={{alignItems: 'center'}}
          >

            <View style={Styles.containerImg}>
              <Image source={{uri: 'link to API' + this.state.privilegeData.link1}}
                style={Styles.imageStyle}
              />
            </View>
            <View style={Styles.containerImg}>
              <Image source={{uri: 'link to API' + this.state.privilegeData.link2}}
                style={Styles.imageStyle}
              />
            </View>

          </View>
            }
            </View>
    );

and this is the code of styles:

    container: {
        flex: 1,
        backgroundColor: 'white',
      },

      containerImg: {
        flex: 1,
      },

      containerAI: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        width: wp('100%'),
        backgroundColor: 'white',
      },

  containerImg: {
    flex: 1,
    backgroundColor: 'red',

    // borderWidth: 1, borderColor: 'blue'
  },

      imageStyle: {
        flex: 1,
        width: wp('100%'),
      },

If I add resiMode to images, I have my images complete but streched, I want to keep the height of image and scroll it

So when I replace View tag (containerImg) with ScrollView I have a red screen without any image

Answer 1

If you simply want to see an array of images with scrolling, you can wrap the image in a scrollview. Please refer to my example.

The height of the image should be raised so that it is 'contain' so as not to damage the image quality by increasing it too wide.

//This is an example code to understand Image//
import React, { Component } from 'react';
//import react in our code.
import { Text, Image, View, StyleSheet,ScrollView } from 'react-native';
//import all the components we are going to use.
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
      <ScrollView>
        <Image
          source={{
            uri:
              'http://aboutreact.com/wp-content/uploads/2018/07/sample_img.png',
          }}
          style={{ width: 400, height: 400, margin: 16,resizeMode: 'contain' }}
        />
        <Image
          source={{
            uri:
              'http://aboutreact.com/wp-content/uploads/2018/07/sample_img.png',
          }}
          style={{ width: 400, height: 400, margin: 16,resizeMode: 'contain' }}
        />
        <Image
          source={{
            uri:
              'http://aboutreact.com/wp-content/uploads/2018/07/sample_img.png',
          }}
          style={{ width: 400, height: 400, margin: 16,resizeMode: 'contain' }}
        />
        </ScrollView>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 40,
    backgroundColor: '#ecf0f1',
  },
});