Refer

https://facebook.github.io/react-native/docs/modal.html

No Image, No Truth

Full Codes

import React, { Component } from 'react';
import {
    Button,
	Modal,
    Image,
    Keyboard,
    NativeModules,
    Platform,
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    View,
    WebView,
} from 'react-native';

const { WeChat } = NativeModules;

const SHARE_TO_WXTIMELINE = 0;
const SHARE_TO_WXSESSION = 1;
const webview = "webview";
const HOME_URL = "https://errong.win";

export default class App extends Component<{}> {

  componentWillMount () {
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {this.keyboardDidHide()});
  }

  componentWillUnmount () {
    this.keyboardDidHideListener.remove();
  }

  keyboardDidHide () {
    console.log( this.urlText );
    if (this.urlText != null) {
      this.setState({url:this.urlText});
    }
  }

  constructor(props) {
    super(props);
    this.state = {shareModalVisible : false, url : HOME_URL, urlBarVisible : true};
  }

  setShareModalVisible(visible) {
    this.setState({shareModalVisible : visible});
  }

  onShare(scene) {
    this.setShareModalVisible(false);
	this.scene = scene;
    if (this.shareMsg == null)
      return;
    if (WeChat.shareToTimeline)
      WeChat.shareToTimeline(this.shareMsg, this.scene, null);
  }

  onWebViewMessage(event) {
    console.warn(event.nativeEvent.data);
    let msg;
    try {
      msg = JSON.parse(event.nativeEvent.data);
    } catch (err) {
      console.warn(err);
      return;
    }
    if (msg.id == "ABSTRACT_FETCHED")
      this.shareMsg = msg;
  }

  genAbstractJS() {
    const genAbstractFunction = function() {
      try {
        let title;
        let description;
        let imageUrl;
        let msg;
        let n = document.querySelector('head title');
        if (n)
            title = n.innerText;
        n = document.querySelector('p');
        if (n)
            description = n.innerText;
        n = document.querySelector('p img');
        if (n)
            imageUrl = n.src;
        if (description && imageUrl) {
            msg = { 'id' : 'ABSTRACT_FETCHED',
                    'type' : 'textimage',
                    'description' : description,
                    'imageUrl': imageUrl
                  };
        } else {
           msg = { 'id' : 'ABSTRACT_FETCHED',
                   'type' : 'news',
                   'webpageUrl' : window.location.href
                 };
        }
        window.postMessage(JSON.stringify(msg), "*");
      } catch (err) {
        console.warn(err);
      }
    }
    let js = "(" + String(genAbstractFunction) + ")();";
    console.log(js);
    return js;
  }

  onLoadEnd() {
    this.refs[webview].injectJavaScript(this.genAbstractJS());
  }

  onUrlBar() {
  }

  renderUrlBar() {
    if (this.state.urlBarVisible) {
      return (
        <TouchableOpacity style={styles.urlbar} onPress={() => {this.onUrlBar()}}>
          <TextInput
            style={styles.urlentry}
            placeholder="search or input url"
            onChangeText={(text) => {this.urlText = text}}
          />
        </TouchableOpacity>
      )
    } else {
      return null;
    }
  }

  render() {
    return (
    <View style={{flex:1}}>
      {this.renderUrlBar()}
      <WebView
        ref={webview}
        style={{flex:1}}
        javaScriptEnabled={true}
        onMessage={(event) => {this.onWebViewMessage(event)}}
        onLoadEnd={this.onLoadEnd.bind(this)}
        source={{uri:this.state.url}}
      />
      <Button
        onPress={() => {this.setShareModalVisible(true)}}
        title="Share"
        color="#841584"
        accessibilityLabel="Social Share"
      />
	  <Modal
		transparent={true}
		visible={this.state.shareModalVisible}
		>
		<View style={styles.sgc}>
          <View style={styles.sharegroup}>
            <TouchableOpacity style={styles.sharebutton} onPress={() => {this.onShare(SHARE_TO_WXTIMELINE)}}>
              <Image
                source={require('./res/img/wxtimeline.png')}
              />
            </TouchableOpacity>
            <TouchableOpacity style={styles.sharebutton} onPress={() => {this.onShare(SHARE_TO_WXSESSION)}}>
              <Image
                source={require("./res/img/wxsession.png")}
              />
            </TouchableOpacity>
          </View>
		</View>
	  </Modal>
    </View>
    );
  }
}

const styles = StyleSheet.create({
  urlbar:{
  	backgroundColor:'#fafad2',
    borderTopLeftRadius:4,
    borderTopRightRadius:4,
    borderBottomLeftRadius:4,
    borderBottomRightRadius:4,
    boderColor : '#C0C0C0',
    borderWidth: 1
  },
  urlentry:{
    height: 40
  },
  sgc:{
  	height:100,
    width:300,
    borderTopLeftRadius:10,
    borderTopRightRadius:10,
    borderBottomLeftRadius:10,
    borderBottomRightRadius:10,
    alignSelf: 'center',
  	top:400,
  	backgroundColor:'#fafad2'
  },
  sharegroup: {
  	flex:1,
	flexDirection: 'row',
  	alignItems: 'center',
  	justifyContent: 'space-around',
  },
  sharebutton: {
    width:64,
    height:64
  }
})