Button on top of a Webview react native

Friends, I would like to overlay a button on a webview in react native to redirect routes manually. The react native buttons should be invisible on top of the webview buttons The following image shows the buttons on the web page and below the react native buttons. 1

another problem is that the keyboard does not open when clicking on an input within the webview

here's my code:

const App = () => {
  const deviceHeight = Dimensions.get('window').height;
  const deviceWidth = Dimensions.get('window').width
  const [url, setUrl] = useState('https://rootroute.com.br/');

  return (
    
    <KeyboardAvoidingView
    behavior={ Platform.OS === 'ios' ? 'padding' : undefined }
    style={styles.keyboardAvoidingView}
   
  >
    <View style={{ flex: 1}}>
      <WebView
        source={{ uri: url }}
        onError={syntheticEvent => {
          const { nativeEvent } = syntheticEvent;
          Alert.alert('WebView error: ', "" + nativeEvent);
        }}
        onHttpError={syntheticEvent => {
          const { nativeEvent } = syntheticEvent;
          console.warn(
            'WebView received error status code: ',
            nativeEvent.statusCode,
          );
        }}
        mixedContentMode={'always'}
        geolocationEnabled={true}
        ignoreSslError={true}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        scalesPageToFit={true}
        startInLoadingState={false}
        style={{ flex: 1, width: deviceWidth, height: deviceHeight, marginTop: 15 }}
      />
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button
            onPress={() => setUrl('https://rootroute.com.br/1')}
            title="Home"
          />
        </View>
        <View style={styles.buttonContainer}>
        <Button
          onPress={() => setUrl('https://rootroute.com.br/2')}
          title="Alerta"
        />
        </View>
        <View style={styles.buttonContainer}>
        <Button
          onPress={() => setUrl('https://rootroute.com.br/3')}
          title="Explore"
        />
        </View>
        <View style={styles.buttonContainer}>
        <Button
          onPress={() => setUrl('https://rootroute.com.br/4')}
          title="Carrinho"
        />
        </View>
        <View style={styles.buttonContainer}>
        <Button
          onPress={() => setUrl('https://rootroute.com.br/5')}
          title="Conta"
        />
        </View>
      </View>

    </View>
    </KeyboardAvoidingView>
  );
};


const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 50
  },
  buttonContainer: {
    flex: 1,
  },
  keyboardAvoidingView: { flexGrow: 1, flexShrink: 1 },
});

export default App; ```