Qfyilyi

I tried several codes but I only have errors every time.
How to add images from my gallery (no links) one below the other, with text
at the top and bottom of each image?

Like this:

import React, { Component } from "react";

import { Text, View, StyleSheet, Image, ImageBackground,ScrollView } from "react-native";

import withBackground from "../components/WithBackground";



class LinksScreen extends Component {

  render() {

    return (

    

<ScrollView> 

<text>Hi</text>

 <Image source={require('./assets/images/ici.jpg')} />

 <text> Hello</text>



<text> Hi2</text>

 <Image source={require('./assets/images/ici2.jpg')} />

<text> Hello2</text>

</ScrollView> 

    

  );

  }}



export default withBackground(LinksScreen);

I am novice,
any help would be appreciated.

Can you give a screenshot of the result you are expecting?
There is something called a FlatList you can use that to achieve a list of images.

Note : menuData is an array of objects and Item is an object that has image title and URL

<FlatList

    data={this.props.menuData}

    renderItem={({ item }) => {

        return(

            <View style={{ flexDirection: 'row' }}>

                <Image source={require(item.imageURL)} />

                <Text>{item.imageText}</Text>

            </View>

        );

    }}

    keyExtractor={(item) => item.title }

/>

Use this style for Text:

textStyle: {

    flex: 1,

    width: '100%',

    position: 'absolute',    

    alignSelf: 'center',   

    backgroundColor: 'rgba(0.57, 0.57, 0.57, 0.3)', 

    height: '100%',

}

I am going to show you a possibility of working with native-base, but it's just a suggestion. You can see some possibilities in the official docs: https://docs.nativebase.io/Components.html#Components

import React, { Component } from 'react';

import { Image, ImageBackground, View } from 'react-native';

import { Card, CardItem, Text, Left, Right } from 'native-base';

import styles from './styles';



class ProductImage extends Component {

  render() {

    return (

      <View style={{ flex: 1 }}>

        <ImageBackground

          style={ styles.image }

          source={{ uri: this.props.photo }} 

        >

        </ImageBackground>

      </View>

    );

  }

}



export default ProductImage

So if you want to put a photo without props, it's just put the link image, like 'https://www.w3schools.com/w3css/img_lights.jpg'. Don't forget to install the dependence: npm install native-base --save

Can you try this once:

<ScrollView> 

  <View>

    <Text>Hi</Text>

    <Image source={require('./assets/snack-icon.png')} style={{ width: '100%', 

      height: 150, marginBottom: 10, padding: 10 }} resizeMode="cover" />

  </View>

  <View>

    <Text> Hi2</Text>

    <Image source={require('./assets/snack-icon.png')} style={{ width: '100%', 

      height: 150, marginBottom: 10, padding: 10 }} resizeMode="cover" />

    <Text> Hello2</Text>

   </View>

</ScrollView>