44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import React, { useMemo, useCallback } from 'react';
|
|
import { Modal, StyleSheet, View, TouchableOpacity, Text } from 'react-native';
|
|
import { WebView } from 'react-native-webview';
|
|
|
|
type Props = {
|
|
visible: boolean;
|
|
url: string;
|
|
onClose: () => void;
|
|
};
|
|
|
|
const InAppBrowser = ({ visible, url, onClose }: Props) => {
|
|
const webViewSource = useMemo(() => ({ uri: url }), [url]);
|
|
|
|
const handleClose = useCallback(() => {
|
|
onClose();
|
|
}, [onClose]);
|
|
|
|
return (
|
|
<Modal visible={visible} animationType="slide">
|
|
<View style={styles.container}>
|
|
<TouchableOpacity style={styles.closeButton} onPress={handleClose}>
|
|
<Text style={styles.closeText}>Yopish</Text>
|
|
</TouchableOpacity>
|
|
<WebView source={webViewSource} />
|
|
</View>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flex: 1 },
|
|
closeButton: {
|
|
padding: 10,
|
|
backgroundColor: '#28A7E8',
|
|
alignItems: 'center',
|
|
},
|
|
closeText: {
|
|
color: 'white',
|
|
fontSize: 16,
|
|
},
|
|
});
|
|
|
|
export default InAppBrowser;
|