How can i show web page in a modal using react native WebView?

Question

i want to show the web page in a modal, I am using this line of code but it is showing me blank modal.

<WebView source={{uri: 'https://github.com/facebook/react-native'}}/>

Wheres the code for your modal? – Guruparan Giritharan Jul 16 '20 at 04:09 — Guruparan Giritharan, Jul 16 '20 at 04:09

Chanuka Sandeepa · Accepted Answer · 2020-07-16T17:41:36.637

You should have provided more from code then it could help to fix the bug on your code self. However format of the code should be right below.

import React from 'react';
import { View, Button, Modal, StyleSheet, ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';

class TestClass extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            showModal : false
        }
    }



    ActivityIndicatorLoadingView() {
       return (
         <ActivityIndicator
            color="#009688"
            size="large"
            style={styles.ActivityIndicatorStyle}
         /> 
       );
    }

    render(){
        return(
            <View style={{flex : 1, justifyContent : 'center', alignItems: 'center'}}>
                <Button title="Press" onPress={() => this.setState({showModal : !this.state.showModal})}/>
                <Modal  visible={this.state.showModal}>
                    <View style={styles.modal}>
                        <View style={styles.modalContainer}>
                            <WebView 
                                style={{ flex : 1 }} 
                                source={{uri: 'https://github.com/facebook/react-native'}}/>
                                renderLoading={this.ActivityIndicatorLoadingView}
                        </View>
                    </View>
                </Modal>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    modal : {
        flex : 1,
        justifyContent : 'center',
        alignItems : 'center',
        backgroundColor: 'rgba(0,0,0,0.5)'
    },
    modalContainer : {
        backgroundColor : 'white',
        width : '90%',
        height : '90%',
    },
    ActivityIndicatorStyle: {
        flex: 1,
        justifyContent: 'center',
    },
})
export default TestClass

this is working well but i am unable to go back or cancel even using phone back button and when i reload the app it is not reloading. can you give me a solution for that. — Bilal Yaqoob, Jul 16 '20 at 17:09
How do you want to go back? is it to be canceled the Modal when press back button or going back in the webview? — Chanuka Sandeepa, Jul 16 '20 at 17:23
ok done i remove the modal, can i add a loader before loading the page in modal — Bilal Yaqoob, Jul 16 '20 at 17:33
Okay now have a look. You could use BackHandler with hardwareBackPress event as well to close your modal when press back button. — Chanuka Sandeepa, Jul 16 '20 at 17:43

score 3 · Answer 2 · answered Jul 16 '20 at 05:45

3

I developed nice package for this. If you want you can examine or use it. The link of the package is https://github.com/ilkerkesici/react-native-beauty-webview.

answered Jul 16 '20 at 05:45

İlker

476
3
5

How can i show web page in a modal using react native WebView?

2 Answers2