How do I get a image link as input and make it appear on the view component below?

Question

class Newsfeed extends React.Component{
    state = {
      text: ''
  };
   render(){
    return (
       <View>

      <Text style={{fontSize: 50}}>Junior Facebook</Text>
      <View style={{flex: 1, flexDirection: "column"}} />
      <View style={{top: 20, marginLeft: 0, width: 300, height: 180, backgroundColor: "lightblue"}}>
      <TextInput
          style={{
            height: 150,
            borderStyle: "solid",
            borderWidth: 2,
            fontSize: 30
          }}
          placeholder="New Post"
        />
        <TouchableOpacity
          style={{ backgroundColor: "green", marginLeft: 220, width: 80, height: 40 }}
        >
          <Text style={{fontSize: 24}}>Enter</Text>

        </TouchableOpacity>

      </View>

      <View style={{marginTop: 30, marginLeft: 0, width: 300, height: 180, backgroundColor: "pink"}} >
      <TouchableOpacity style={{width: 65, height: 45, marginLeft: 260}}><Text>Share</Text></TouchableOpacity>
      <TouchableOpacity style={{width: 65, height: 45, marginLeft: 220, marginTop: -45}}><Text>Like</Text></TouchableOpacity>
      </View>

      <View style={{marginTop: 10, marginLeft: 0, width: 300, height: 130, backgroundColor: "yellow"}} >

      </View>
    </View>
  ) 
  }
}

The above is my current code. When I type in an image link in TextInput, I want the image to appear on the yellow View Component below. I have tried many different ways but it still does not work. How can I do so?

Thank you

Answer 1

@高鵬翔 answer is perfect, but said that you want to display image after clicking on 'enter' button. So here is my solution :

...
...
import { View, Text, Image } from "react-native";
...
...

//state 
this.state = {
  link: "",
  enteredImageUri: "",
};

render() {
  return (
    <View>
      ...
      ...
      <View
        style={{
          top: 20,
          marginLeft: 0,
          width: 300,
          height: 180,
          backgroundColor: "lightblue",
        }}
      >
        <TextInput
          style={{
            height: 150,
            borderStyle: "solid",
            borderWidth: 2,
            fontSize: 30,
          }}
          placeholder="New Post"
          value={this.state.link}
          onChangeText={(link) => this.setState({ link })}
        />
        <TouchableOpacity
          style={{
            backgroundColor: "green",
            marginLeft: 220,
            width: 80,
            height: 40,
          }}
          onPress={() => {
            this.setState({
              enteredImageUri: this.state.link,
            });
          }}
        >
          <Text style={{ fontSize: 24 }}>Enter</Text>
        </TouchableOpacity>
      </View>

      <View>
        {/* Image View */}
        {this.state.enteredImageUri === "" ? (
          <Text>No Image link entered</Text>
        ) : (
          <Image
            source={{ uri: this.state.enteredImageUri }}
            style={{ width: 400, height: 400 }}
          />
        )}
      </View>
      ...
      ...
    </View>
  );
}

As you can see I have just assigned textinput text into the another state variable enteredImageUri, which will be used to display image.

Answer 2

You have to use Image Tag to show image.

Like this:

import {Image} from 'react-native';

...
<Image source={{uri: 'https://reactjs.org/logo-og.png'}}
       style={{width: 400, height: 400}} />

And you have to store the text input as a state to control Image as @Will said. So you have to add a state and the text input should like this:

constructor(props) {
    super(props);
    this.state = { text: '' };
}
<TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      />

And see how you want to control Image view to show something like this, but this may be error if the uri haven't finish? Based on when you pass the correct uri to let it show, but it's an another question:

import {Image} from 'react-native';

...
<Image source={{uri: this.state.text}}
       style={{width: 400, height: 400}} />