Is there a way of adding a navigation / status bar to a react.native WebView?

Question

        <Modal transparent={false} animationType={"slide"} visible={this.props.isVisible}>
            <WebView
                source={this.getLandingUri()}
                scrollEnabled={true}
                startInLoadingState={true}
                onLoad={this.getLoadingIndicator}
                onNavigationStateChange={this.onNavigationStateChange}
            />
        </Modal>

I have been using a react.native WebView to prompt the user a login page, and now I would like to add a navigation / status bar that provides the user with a "Done" button, plus the current domain.

Here are two screenshots showing what I currently have (l) and what I would like to have (r).

.

I couldn't find any relevant props on the WebView for rendering a status bar. Is this possible at all?

https://stackoverflow.com/questions/42599850/how-to-prevent-layout-from-overlapping-with-ios-status-bar — iPatel, Aug 04 '17 at 11:33

score 0 · Answer 1 · answered Aug 06 '17 at 00:22

You might want consider using react-navigation library, you can easily config the header title and the left, right element you want to place in the header with their StackNavigator.

Download the expo app and Try out here: https://expo.io/@react-navigation/NavigationPlayground, in your case, you can wrap your webview within a page under a StackNavigator and config its navigationOptions

Is there a way of adding a navigation / status bar to a react.native WebView?

1 Answers1