'How to add images? (React Native)

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:

_{(source: noelshack.com)}

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.

Solution 1:^[1]

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%',
}

Solution 2:^[2]

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

Solution 3:^[3]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	yoongi_s
Solution 3	Suprabha

'How to add images? (React Native)

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]