How to add a top bar in react-native-webview

Question

I have a simple webview app

import * as React from "react";
import { Button } from "react-native";
import { WebView } from "react-native-webview";

export default class App extends React.Component {
  render() {
    return (
      <WebView source={{ uri: 'https://www.google.com' }} style={{ marginTop: 20 }} />
    );
  }
}

How to add a top bar with a text, like this:

Answer 1

You can wrap your WebView in a parent View

import * as React from "react";
import { Button, SafeView, View, Text, StyleSheet } from "react-native";
import { WebView } from "react-native-webview";

export default class App extends React.Component {
  render() {
    return (
       <SafeView>
         <View style={styles.container}>
           <Text style={{padding: 10}}>Hello</Text>
           <WebView source={{ uri: 'https://www.google.com' }} style={{ marginTop: 20 }} />
         </View>
       </SafeView>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 0,
    margin: 0
  },
}