React native : Display image using map on an array of paths doesn't work

Question

I'm a beginner with react native and i'm trying to display the first three photos of an array of path.

import React from 'react';
import { View, Image, StyleSheet, FlatList, Dimensions, Text } from 'react-native';
import ToolBar from '../components/blocs/ToolBar'
import HeaderBlock from '../components/blocs/Header'

let pictures = require('../assets/pictures.json');
let { width: screenWidth } = Dimensions.get('window')

interface State { // Added this interface for props
    My_photo: []
}
export class Photos extends React.Component<{}, State>{
    constructor(props) {
        super(props);
        this.state = {
            My_photo: []
        }
    }
    GetFirstPicture(Pictures) {
        let tab = []
        for (let i = 0; i < Pictures.length; i++) {
            if (i < 3) {
                tab.push(Pictures[i].path)
            }
            else { break; }
        }
        return tab
    }

    UNSAFE_componentWillMount() {
        let tab
        tab = this.GetFirstPicture(pictures[0])

        this.setState({
            My_photo: tab
        })
    }

    render() {
        const { My_photo } = this.state
        return (
            <View>
                <HeaderBlock />
                <Text style={styles.title}>Mes photos</Text>
                {console.log(My_photo)}
                <View style={styles.photo_container}>
                    {My_photo.map((picturePath) => {
                        <Image source={{ uri: picturePath }} style={{
                            height: screenWidth / 3,
                            width: screenWidth / 3,
                        }} />
                    })}
                </View>
                <Text style={styles.title2}>Photos partagées avec moi</Text>
            </View>
        );
    }

}

export default Photos;

Here is my picture.json file :

[
    [
        {
            "id": 0,
            "owner": "Jeremy",
            "path": "https://pixnio.com/free-images/2017/03/07/2017-03-07-09-18-21.jpg"
        },
        {
            "id": 1,
            "owner": "Basile",
            "path": "https://pixnio.com/free-images/2017/08/30/2017-08-30-07-06-43-1000x666.jpg"
        },
        {
            "id": 2,
            "owner": "Deb",
            "path": "https://img.fotocommunity.com/paysage-dautomne-c3f5aa2f-5592-44ed-9d00-e3a6b96a6b58.jpg?height=1080"
        },
        {
            "id": 3,
            "owner": "Basile",
            "path": "https://pixnio.com/free-images/2017/08/30/2017-08-30-07-06-43-1000x666.jpg"
        },
        {
            "id": 4,
            "owner": "Jeremy",
            "path": "https://pixnio.com/free-images/2017/03/07/2017-03-07-09-18-21.jpg"
        }
    ],
    [
        {
            "id": 0,
            "owner": "Jeremy",
            "path": "https://pixnio.com/free-images/2017/03/07/2017-03-07-09-18-21.jpg"
        },
        {
            "id": 1,
            "owner": "Basile",
            "path": "https://pixnio.com/free-images/2017/08/30/2017-08-30-07-06-43-1000x666.jpg"
        },
        {
            "id": 2,
            "owner": "Deb",
            "path": "https://img.fotocommunity.com/paysage-dautomne-c3f5aa2f-5592-44ed-9d00-e3a6b96a6b58.jpg?height=1080"
        }
    ]

]

The problem is, the map function on My_photo doesn't display the images as it should.

Any idea please ?

Thank you

PS : If you have an idea how replace the depreciated componentwillmount i'll take it too :D

Answer 1

Your map function has an error and isn't returning any values, using arrow notation you should either remove the curly braces or add a return to it.

Either:

{My_photo.map((picturePath) => (
    <Image 
        source={{ uri: picturePath }} 
        style={{
            height: screenWidth / 3,
            width: screenWidth / 3,
        }} 
    />
))}

or:

{My_photo.map((picturePath) => {
    return (
        <Image 
            source={{ uri: picturePath }} 
            style={{
                height: screenWidth / 3,
                width: screenWidth / 3,
            }} 
        />
    );  
})}