title: How can I get a popup and type in image link in there and make my image appear on the box below?
body: <pre><code>import React, {useState} from "react";
  import {StyleSheet, Text, View, StatusBar, Dimensions, TextInput, Platform, ScrollView,TouchableOpacity, Button } from 'react-native';
  import { AppLoading } from "expo";
  import { createStackNavigator } from '@react-navigation/stack';
  import { NavigationContainer } from '@react-navigation/native';
  const { height, width } = Dimensions.get("window");
  import Display from "./display";
  import Modal from "react-native-modal";
  
  const Stack = createStackNavigator();
  
  function HomeScreen({ navigation }) {
  
    return(
      &lt;View style={styles0.container}&gt;
        &lt;StatusBar barStyle= "light-content" /&gt;
        &lt;Text style={styles0.title}&gt;Junior Facebook&lt;/Text&gt;
        &lt;View style={styles0.mainwhite}&gt;
          &lt;View style={styles0.first}&gt;
            &lt;TextInput 
            style={styles0.input1}
            placeholder = "Enter your email" 
            /&gt;
            &lt;TextInput 
            style={styles0.input1}
            placeholder = "Enter your password"
            /&gt;
          &lt;/View&gt;
          &lt;View style={styles0.second}&gt;
            &lt;TouchableOpacity 
            style={styles0.button}
            onPress={()=&gt;navigation.navigate("Newsfeed")}
            &gt;
              &lt;Text&gt;SignUp&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
            &lt;TouchableOpacity&gt;
              &lt;Text&gt;Log In&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    )
  }
  
  
  function Member({navigation}) {
    return (
       &lt;View style={{alignItems: "center", backgroundColor: "lightgreen", flex: 1}}&gt;
        &lt;Text&gt;Junior Facebook&lt;/Text&gt;
          &lt;TextInput placeholder="Email" style={{width: 200, height: 60, borderStyle: "solid", borderWidth: 2}}/&gt;
          &lt;TextInput placeholder="Password" style={{width: 200, height: 60, borderStyle: "solid", borderWidth: 2}}/&gt;
          &lt;TextInput placeholder="Confirm Password" style={{width: 200, height: 60, borderStyle: "solid", borderWidth: 2}}/&gt;
          &lt;TextInput placeholder="Name" style={{width: 200, height: 60, borderStyle: "solid", borderWidth: 2}}/&gt;
          &lt;TextInput placeholder="Gender" style={{width: 200, height: 60, borderStyle: "solid", borderWidth: 2}}/&gt;
          &lt;TextInput placeholder="Location" style={{width: 200, height: 60, borderStyle: "solid", borderWidth: 2}}/&gt;
          &lt;TextInput placeholder="Alma Mater" style={{width: 200, height: 60, borderStyle: "solid", borderWidth: 2}}/&gt;
          &lt;Button style={{width: 100, height: 30}}title="Meeting"
          onPress={()=&gt;navigation.navigate("Meeting")}
          &gt;Meeting&lt;/Button&gt;
      &lt;/View&gt;
    );
  }
  
  
  
  
  export default class App extends React.Component{
      render(){
          return (
            &lt;NavigationContainer&gt;
              &lt;Stack.Navigator initialRouteName="Home"&gt;
                &lt;Stack.Screen name="Home" component={HomeScreen} /&gt;
                &lt;Stack.Screen name="Member" component={Member} /&gt;
                &lt;Stack.Screen name="Newsfeed" component={Newsfeed} /&gt;
              &lt;/Stack.Navigator&gt;
            &lt;/NavigationContainer&gt;
          )
      }
  }
  
  
  const styles0 = StyleSheet.create({
    container:{
      flex:1,
      backgroundColor : "#FFD6ED",
      alignItems : "center"
    },
    title: {
      color: "white",
      marginTop : 100,
      fontSize : 30,
      fontWeight: "bold"
    },
    mainwhite:{
      backgroundColor : "white",
      width : width -65,
      marginTop : 50,
      borderRadius: 20
    },
    input1:{
      borderStyle: "solid",
      borderWidth: 2,
      width: 300,
      height: 50,
      padding: 10,
      marginVertical: 25,
    },
    input2:{},
    first:{
      marginVertical: 40,
      alignItems : "center"
    },
    second: {
      alignItems : "center",
      marginVertical: 20,
    },
    button : {
      marginBottom : 30
    }
  })
  
  
  
  class Newsfeed extends React.Component{
    render(){
      return(
  
        &lt;View style={styles1.container}&gt;
          &lt;StatusBar barStyle= "light-content" /&gt;
          &lt;View style={styles1.title}&gt;
            &lt;Text style={styles1.title}&gt;Junior Facebook&lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={styles1.first}&gt;
            &lt;TouchableOpacity style={styles1.profile}&gt;
              &lt;Text&gt;프로필&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
            &lt;View style={styles1.allinput}&gt;
              &lt;TouchableOpacity&gt;
                &lt;TextInput 
                style={styles1.input}
                placeholder = "글 입력"
                /&gt;
              &lt;/TouchableOpacity&gt;
              &lt;View style={styles1.button}&gt;
                &lt;TouchableOpacity &gt;
                &lt;Text style={styles1.picturebutton}&gt;사진&lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
                &lt;TouchableOpacity&gt;
                &lt;Text style={styles1.pushbutton}&gt;입력&lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
            &lt;/View&gt;
          &lt;/View&gt;
          &lt;View style={styles1.second}&gt;
            &lt;ScrollView&gt;
              &lt;Display/&gt;
            &lt;/ScrollView&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      )
    }
  }
  const styles1 = StyleSheet.create({
    container:{
      flex:1,
      backgroundColor : "#FFD6ED",
      alignItems:"center",
    },
    title: {
      color: "white",
      marginTop : 5,
      fontSize : 18,
      fontWeight: "bold",
      marginBottom : 5,
      alignItems:"center",
    },
    first :{
      flex:1,
      flexDirection : "row",
      borderBottomWidth : StyleSheet.hairlineWidth,
      marginLeft: 40
    },
    second:{
      flex:3,
    },
    profile:{
      backgroundColor : "white",
      borderStyle: "solid",
      borderWidth: 2,
      width: 90,
      height : 110,
      marginTop : 3
    },
    allinput: {
      flexDirection : "column",
      alignItems:'flex-end',
      borderBottomColor: "black",
      padding : 3,
    },
    input:{
      borderStyle: "solid",
      borderWidth: 2,
      width: 200,
      height: 110,
      padding: 10,
      marginLeft : 5,
      backgroundColor : "white",
    },
    button:{
      flexDirection : "row"
    },
    picturebutton:{
      fontSize: 24,
      width: 60,
      height:40,
      borderStyle: "solid",
      borderWidth: 1,
      backgroundColor : "white",
      marginVertical : 10,
      marginHorizontal : 0
    },
    pushbutton:{
      fontSize: 24,
      width: 60,
      height:40,
      borderStyle: "solid",
      borderWidth: 1,
      marginLeft : 5,
      backgroundColor : "white",
      marginVertical : 10
    }
  })
  </code></pre>
  
  <p>and my Display component is as follows</p>
  
  <pre><code>import React from "react";
  import {View, Text, TextInput, Button, StyleSheet, ScrollView, TouchableOpacity} from "react-native";
  
  
  export default class Display extends React.Component{
      render(){
          const {text} = this.props;
          return (
              &lt;View style={styles.pushtext}&gt;
                  &lt;Text&gt;일단 한개&lt;/Text&gt;
              &lt;/View&gt;
          )
      }
  }
  
  const styles = StyleSheet.create({
      pushtext: {
          backgroundColor : "white",
          width: 300,
          height: 50,
          marginTop: 30
      }
  })
  </code></pre>
  
  <p>When I click the "Enter" TouchableOpacity, a popup should appear. And I should be able to type in an image link in the popup. And when I type in image link in there and click the "enter" text, an image from that link should appear below. How can I do so?</p>
  
  <p>Please help me out here</p>
  
  <p>Thank you so much!</p>