TouchableOpacity not displaying image

Question

I have an Image nested in a TouchableOpacity. When pressed, it allows me to select an image (profile picture) and it should then change it's icon to the selected picture. When I load the page the TouchableOpacity is there, but the placeholder Image does not load. When I press the TouchableOpacity and select an Image, the selected image will be shown..

import React, {Component} from 'react'
import {View,Text,Image,Button,ImageBackground,TextInput,TouchableOpacity} from 'react-native'
import styles from "./styles"
import { Provider as PaperProvider } from 'react-native-paper';
var ImagePicker = require('react-native-image-picker');
var RNFS = require('react-native-fs');

class CharacterCreate extends Component{

    constructor() {
        super()
        this.state = {
            name:"",
            class:"",
            skills:[],
            filePath:"@assets/tinycam.jpg",
            skills:[]
        }
    }
    static navigationOptions = {
        header: null
    }


    choosePicture() {
        const options = {
            title: 'Select avatar',
            mediaType: 'photo',
            maxHeight:100,
            maxWidth:100
        }
        ImagePicker.showImagePicker(options, (response) => {
            //console.warn(response)
            if (response.didCancel){

            } else if (response.error) {
                console.warn("Error with this")
            } else {
                let source = response.uri
                //console.warn(source)
                this.setState({
                    filePath: source, 
                })
            }
        })
    }

    processData() {
        //TODO:
        //write to file return to previous page
        var path=RNFS.DocumentDirectoryPath+'/character.json'
        RNFS.writeFile(path,JSON.stringify(this.state),'utf8')
            .then((success) => {
                this.props.navigation.goBack()
            })
            .catch((err) => {
                console.warn(err.message)
            })

    }

    createTable() {
        let table = []
    }

    render() {
        return(
            <PaperProvider>
                <ImageBackground source={require("@assets/background.jpg")} style={styles.backgroundStyle}>
                    <View style={styles.viewTitle}>
                        <TouchableOpacity style={{alignItems:'center',justifyContent:'center'}} onPress={() => this.choosePicture()}>
                            <Image style={{width:75,height:75,resizeMode:'cover'}} source={{uri:this.state.filePath}} ></Image>
                        </TouchableOpacity>
                        <TextInput style={styles.textStyle} placeholder="Name" underlineColorAndroid="black" onChangeText = {() => this.setState({name:text})}></TextInput>
                        <TextInput style={styles.textStyle} placeholder="Class" underlineColorAndroid="black" onChangeText = {() => this.setState({class:text})}></TextInput>
                        <TextInput style={styles.textStyle} placeholder="Add a skill" underlineColorAndroid="black"></TextInput>
                        <Button title="Done" onPress={() => this.processData()}/>
                    </View>
                </ImageBackground>
            </PaperProvider>
        )
    }
}

export default CharacterCreate

Answer 1

You need to load static image using require syntax like this:

this.state = {
    filePath: require("@assets/tinycam.jpg")
}

and to show local file or network image use "uri" of prop source:

let source = response.uri
this.setState({
    filePath: { uri: source} 
})

so now your image component will look like this:

<Image style={{width:75,height:75,resizeMode:'cover'}} source={this.state.filePath} ></Image>

You can read more about images here: https://facebook.github.io/react-native/docs/images