Home » Php » javascript – Display an image from json format from a local file in react native

javascript – Display an image from json format from a local file in react native

Posted by: admin February 25, 2020 Leave a comment

Questions:

I am new to react native and creating a app that takes information from json and displays it as text and image.

I have stored the information in a mysql database and I am using php in order to get this information from a query (as shown below)

<?php
include 'DBConfig.php';

$sql = "SELECT * FROM EventsTable";

$result = $con->query($sql);

if($result->num_rows >0){
    while($row[] = $result->fetch_assoc()) {
        $item = $row;
        $json = json_encode($item);
    }
} else {
    echo "No Results Found!";
}
echo $json;
$con->close();

?>

I am then using react native to convert the information to json format (as shown below)

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true, 
      //ImageHolder: ''
    }
  }
  webCall= () => {
       fetch('http://10dbc1bd.ngrok.io/events.php', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        }, 
      }).then((response) => response.json())
      .then((responseJson) => {
      
      this.setState({
        isLoading: false,
        dataSource: responseJson
      },
      console.log( JSON.stringify(this.state.dataSource)),
      () => {
     
      });
    }).catch((error) => {
    console.error(error);
  });
  }
   componentDidMount(){
 
    this.webCall();
   
   }

I then display the information in a flatlist (as shown below)

render() {
    if (this.state.isLoading){
      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ActivityIndicator />
        </View>
      );
    }
    return (
      <View style={styles.MainContainer}>
           <Text style={styles.MainText}>Events</Text>
         </ImageBackground>
        <FlatList style={{paddingTop: 30}}
          data={this.state.dataSource}
          ItemSeparatorComponent = {this.FlatListItemSeparator}
          renderItem= {this._renderItem}
          keyExtractor={(item, index) => index.toString()}
          />         

      </View>
    );
  }
     _renderItem = ({item}) => {
     {
      console.log(item.eventImage);
      return(
          <View style={styles.eventContainer}>
              <Image source={item.eventImage}
              style={{ width: 100, height: 100, paddingBottom: 10 }}
            />
          <View>
              <Text style={styles.rowViewContainer}>{item.name}</Text>
              <Text style={styles.SermonByText}>{item.eventDate} - {item.eventTime}</Text>
          </View>
          </View>
      );
    }
     }
    }

I try to display the image using the following line.

<Image source={item.eventImage}
              style={{ width: 100, height: 100, paddingBottom: 10 }}
            />

When I run my app in iOS using an xcode iPhone simulator the images do not display and I am given the following error.

message

Here is my json format

[{"id":"1","name":"Meeting","eventDate":"Tuesday","eventTime":"7:30pm","eventImage":"require('./youth.png')"}
How to&Answers: