/**

 * Copyright (c) 2024 Huawei Technologies Co., Ltd.

 *

 * This source code is licensed under the MIT license found in the

 * LICENSE-MIT file in the root directory of this source tree.

 */



import React, { useState } from 'react';

import { Image, ScrollView, StyleSheet, TextInput, View } from 'react-native';



export function LargeImageScrollExample() {

  const [numberOfComponents, setNumberOfComponents] = useState(300);



  return (

    <ScrollView style={styles.container}>

      <TextInput

        style={styles.textInput}

        value={numberOfComponents.toString()}

        onChangeText={value => {

          setNumberOfComponents(parseInt(value) || 0);

        }}

      />



      {new Array(numberOfComponents).fill(0).map((_, idx) => (

        <View style={styles.imageContainer}>

          <Image

            key={idx}

            source={require('../assets/placeholder2000x2000.jpg')}

            style={styles.image}

          />

        </View>

      ))}

    </ScrollView>

  );

}



const styles = StyleSheet.create({

  container: {

    flex: 1,

  },

  image: {

    width: '100%',

    height: '100%',

  },

  imageContainer: {

    width: '100%',

    aspectRatio: 1,

  },

  textInput: {

    backgroundColor: 'white',

    width: '100%',

    height: 36,

    color: 'black',

  },

});