Search code examples
javascriptreact-nativeexposearchbar

Removing Search Bar

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 });
  };
}
Solution

  • 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.