Removing Search Bar

Question

I've been working with React-Native and Expo lately. I need a button to open a website in the browser but the search bar (top) and the icon bar should not appear either. Here is a picture to make everything a bit more understandable:

Heres the Code i used:

import React, { Component } from 'react';
import { Button, Text, View } from 'react-native';
import * as WebBrowser from 'expo-web-browser';

export default class App extends Component {
  state = {
    result: null,
  };

  render() {
    return (
      <View>
        <Button title="Open WebBrowser" onPress={this._handlePressButtonAsync} />
        <Text>{this.state.result && JSON.stringify(this.state.result)}</Text>
      </View>
    );
  }

  _handlePressButtonAsync = async () => {
    let result = await WebBrowser.openBrowserAsync('https://expo.io');
    this.setState({ result });
  };
}

Your English is fine, but you could have either looked at the `expo` documentation or searched here (Stack Overflow): https://stackoverflow.com/questions/47155181/hide-toolbar-in-expo-app — emerson.marini, Sep 29 '20 at 09:44
Does this answer your question? [Hide toolbar in expo app](https://stackoverflow.com/questions/47155181/hide-toolbar-in-expo-app) — emerson.marini, Sep 29 '20 at 09:44

score 3 · Accepted Answer · answered Apr 13 '21 at 04:11

If you're asking to remove the url-bar on top and bottom navigation from SFSafariViewController, then it is not possible. The native safari-view-controller is supposed to let the user know that they are on a web-browser with the familiar safari UI.

If you really want to just show a webpage with no controlls, just use react-native-webview. You can render this on any react-native view and will not have the navigation bar or the top search bar.

score 0 · Answer 2 · answered Sep 29 '20 at 09:46

0

As shown in the documentation, you can hide it like so:

 static navigationOptions = {
    header: null,
  };

answered Sep 29 '20 at 09:46

PatricNox

3,306
1
17
25

Removing Search Bar

2 Answers2