Untitled

import React, { useState, useContext, } from 'react';
import {
    SafeAreaView,
    View,
    FlatList,
    Image,
    Text,
    TouchableOpacity,
    ScrollView,
    Alert,
    ActivityIndicator,
} from 'react-native';
import * as Color from '../constants/Color';

import {
    widthPercentageToDP as wp,
    heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
import { Context as AuthContext } from '../context/AuthContext';
import { Context as ShopContext } from '../context/ShopContext';
import { WebView } from 'react-native-webview';

const WebviewScreen = ({ navigation, route }) => {
    var [url, setUrl] = useState(route.params.url);
    const [loader, setLoader] = useState(false);



    return (
        <SafeAreaView style={styles.safeAreaStyle}>
            <WebView
                source={{
                    uri: url,
                }}
                style={{ flex: 1 }}
                onLoadStart={() => setLoader(true)}
                onLoadEnd={() => setLoader(false)}
                onNavigationStateChange={(navState) => {
                    // Keep track of going back navigation within component
                    if (navState.url === 'https://example.com/return') {
                        console.log("return url");
                        // showAlert();
                        navigation.navigate('VTabStack', { screen: 'VShopScreen', params: { accountAdded: true } });
                    } else {
                        console.log("another url");
                    }
                }}
            />
            {loader &&
                <View style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, backgroundColor: 'transparent', alignItems: 'center', justifyContent: 'center' }}>
                    <View style={{ backgroundColor: Color.colorAccent, padding: 8, borderRadius: 8, }}>
                        <ActivityIndicator size={'large'} color='black' />
                    </View>
                </View>
            }


        </SafeAreaView>

    );
};

const styles = {
    safeAreaStyle: {
        width: '100%',
        height: '100%',
        backgroundColor: Color.colorBackground,
    },
    containerStyle: {
        flex: 1,
        backgroundColor: 'white',
        marginTop: 16,
        borderTopLeftRadius: 32,
        borderTopRightRadius: 32,
        // paddingTop: 30
    },
    headerViewStyle: {
        flexDirection: 'row',
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center',
        paddingHorizontal: 32
    },

};

export default WebviewScreen;