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 } }) 
