A cross-platform (iOS / Android), full-featured, highly customizable web browser module for React Native apps.

Last update: Jul 12, 2022

react-native-webbrowser

A cross-platform (iOS / Android), full-featured in-app web browser component for React Native that is highly customizable. Currently you can hide the address-, status- and toolbar. Additionally the foreground and background colors can be modified.

Install

npm i react-native-webbrowser --save

Usage

Here is an extensive overview of the component usage.

class SampleApp extends Component {
    render() {
        return (
            <View style={{paddingTop:20, flex:1}}>
            
                <Webbrowser
                    url="https://your-url.com"
                    hideHomeButton={false}
                    hideToolbar={false}
                    hideAddressBar={false}
                    hideStatusBar={false}
                    foregroundColor={'#efefef'}
                    backgroundColor={'#333'}
                />
                
            </View>
        );
    }
}

Props

  • url - string required, web address
  • hideAddressBar - bool optional, hides the address bar / address input
  • hideStatusBar - bool optional, hides the status bar / site title
  • hideToolbar - bool optional, hides the toolbar (nav bar)
  • hideHomeButton - bool optional, hides just the home button from the toolbar
  • hideActivityIndicator - booloptional, hides the activity indicator (loading) overlay
  • foregroundColor - string optional, sets the forground color of text and icon elements
  • backgroundColor - string optional, sets the background color
  • onNavigationStateChange - function(navState) optional, url change callback
  • onShouldStartLoadWithRequest - function(event) optional, return false if the request should be stopped

Screenshots

   

GitHub

https://github.com/d-a-n/react-native-webbrowser
Comments
  • 1. Error after install the module

    Hello, I love your module but when i tried to installed it on mac project i'm getting this error

    screen shot 2016-03-12 at 5 00 37 pm

    Do you have an idea how to solve it?

    this is my package.json

    "dependencies": {
        "immutable": "^3.7.6",
        "react-native": "^0.21.0"
      }
    
    Reviewed by santomegonzalo at 2016-03-12 22:06
  • 2. Getting too many error while install the module

    When I run this command npm i react-native-webbrowser I'm getting errors mentioned below.

    fatal error: too many errors emitted, stopping now [-ferror-limit=]
    5 warnings and 20 errors generated.
    make: *** [Release/obj.target/validation/src/validation.o] Error 1
    gyp ERR! build error 
    gyp ERR! stack Error: `make` failed with exit code: 2
    gyp ERR! stack     at ChildProcess.onExit (/Users/alirehman/.nvm/versions/node/v14.17.1/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
    gyp ERR! stack     at ChildProcess.emit (events.js:375:28)
    gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12)
    gyp ERR! System Darwin 20.1.0
    gyp ERR! command "/Users/alirehman/.nvm/versions/node/v14.17.1/bin/node" "/Users/alirehman/.nvm/versions/node/v14.17.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
    gyp ERR! cwd /Users/alirehman/Desktop/React Native Projects/TravelRP/FoodE/Food_E_Clone/node_modules/utf-8-validate
    gyp ERR! node -v v14.17.1
    gyp ERR! node-gyp -v v5.1.0
    gyp ERR! not ok 
    
    Reviewed by alirehmanappcrates at 2021-07-28 06:00
  • 3. Error: ENOENT: no such file or directory

    I am using "react-native": "0.47.1",

    Getting following error after installing react-native-webbrowser

    Error: ENOENT: no such file or directory, open 'F:\projects\reactnative\All Recipes Made Easy\React\AllRecipesMadeEasy\node_modules\react-native-webbrowser\node_modules\react-native\Libraries\Utilities\BackAndroid.android.js'
        at Object.fs.openSync (fs.js:584:18)
        at Object.fs.readFileSync (fs.js:491:33)
        at Module._readSourceCode (F:\projects\reactnative\All Recipes Made Easy\React\AllRecipesMadeEasy\node_modules\metro-bundler\src\node-haste\Module.js:205:29)
        at Module._getCacheProps (F:\projects\reactnative\All Recipes Made Easy\React\AllRecipesMadeEasy\node_modules\metro-bundler\src\node-haste\Module.js:395:29)
        at Module._readFromTransformCache (F:\projects\reactnative\All Recipes Made Easy\React\AllRecipesMadeEasy\node_modules\metro-bundler\src\node-haste\Module.js:345:29)
        at Module.readCached (F:\projects\reactnative\All Recipes Made Easy\React\AllRecipesMadeEasy\node_modules\metro-bundler\src\node-haste\Module.js:332:19)
        at ResolutionRequest.preprocessModule (F:\projects\reactnative\All Recipes Made Easy\React\AllRecipesMadeEasy\node_modules\metro-bundler\src\node-haste\DependencyGraph\ResolutionRequest.js:306:27)
        at ResolutionRequest._preprocessPotentialDependencies (F:\projects\reactnative\All Recipes Made Easy\React\AllRecipesMadeEasy\node_modules\metro-bundler\src\node-haste\DependencyGraph\ResolutionRequest.js:290:27)
        at ResolutionRequest.getOrderedDependencies (F:\projects\reactnative\All Recipes Made Easy\React\AllRecipesMadeEasy\node_modules\metro-bundler\src\node-haste\DependencyGraph\ResolutionRequest.js:142:12)
        at DependencyGraph.getDependencies (F:\projects\reactnative\All Recipes Made Easy\React\AllRecipesMadeEasy\node_modules\metro-bundler\src\node-haste\DependencyGraph.js:284:442
    
    Reviewed by sachinwak at 2017-09-04 07:11
  • 4. Seems you're trying to access 'ReactNative.Component' from the 'react-native' package. Perhaps you meant to access 'React.Component' from the 'react' package instead

    Seems you're trying to access 'ReactNative.Component' from the 'react-native' package. Perhaps you meant to access 'React.Component' from the 'react' package instead? For example, instead of: import React, { Component, View } from 'react-native'; You should now do: import React, { Component } from 'react'; import { View } from 'react-native'; Check the release notes on how to upgrade your code - https://github.com/facebook/react-native/releases/tag/v0.25.1

    Reviewed by engmsaleh at 2017-07-09 18:07
  • 5. UnableToResolveError

    I've the following error:

    bundling: UnableToResolveError: Unable to resolve module `LinkedStateMixin` from `/home/fabio/Área de Trabalho/react-apps/Boilerplate/node_modules/react-native-webbrowser/node_modules/react-native/Libraries/react-native/react-native.js`: Module does not exist in the module map or in these directory
    
    Reviewed by 1fabiopereira at 2017-05-24 18:00
  • 6. Why so much dependency?

    This is how it looked when I zoomed-out on the dependencies of this single module. I don't see the purpose of a childbrowser having so many dependencies, unless it was a full-fledged browser app itself. image

    Reviewed by scazzy at 2017-01-23 12:34
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-selector A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sect

Jul 28, 2022
React Native template for a quick start with React Navigation5 and TypeScript. It's cross-platform runs on Android, iOS, and the web.

对此项目的规划 出于兴趣把自己做 android、ios 开发过程中经验积累沉淀一下,此工程架构会定期更新升级依赖到最新版本,并不断的积累 App 中常用组件和基础页面功能,也会不断优化代码组织架构 此项目对以下情形会有帮助 想用前端技术做 app 开发却无从下手 想在项目中运用 typescrip

May 13, 2022
Cross Platform Material Alert and Prompt Dialogs for React Native. Imperative API, Android, IOS, Web
Cross Platform Material Alert and Prompt Dialogs for React Native. Imperative API, Android, IOS, Web

React Native Paper Alerts Cross Platform Material Alert and Prompt for React Native. It tries to follow the API and function signature of React Native

Aug 2, 2022
A React Native library provides Image blur shadows, highly customizable and mutable component. Supports Android, iOS and Web.
A React Native library provides Image blur shadows, highly customizable and mutable component. Supports Android, iOS and Web.

A React Native library provides Image Blur Shadows, highly customizable and mutable component. Supports Android, iOS and Web.

May 31, 2022
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.

react-native-actions-sheet A highly customizable cross platform ActionSheet for react native. Screenshots Features Cross Platform (iOS and Android) Na

Aug 5, 2022
A cross-platform (iOS / Android) single and multiple-choice React Native component.
A cross-platform (iOS / Android) single and multiple-choice React Native component.

react-native-multiple-choice A cross-platform (iOS / Android) single and multiple-choice React Native component. Install npm i react-native-multiple-c

Jul 5, 2022
An awesome and cross-platform React Native date picker and calendar component for iOS and Android
An awesome and cross-platform React Native date picker and calendar component for iOS and Android

react-native-common-date-picker An awesome and cross-platform React Native date picker and calendar component for iOS and Android. This package is des

Jul 27, 2022
A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

Jul 30, 2022
A react native modals library. Swipeable. Highly customizable. Support multi modals & Support custom animation. For IOS & Android.
A react native modals library. Swipeable. Highly customizable. Support multi modals & Support custom animation. For IOS & Android.

React Native Modals React Native Modals Library for iOS & Android. How to thank me ? Just click on ⭐️ button ?? Try it with Exponent BREAKING CHANGE A

Jul 30, 2022
react-native-select is a highly customizable dropdownlist for android and ios.

rect-native-select react-native-select is a highly customizable dropdownlist for android and ios.

Dec 21, 2021
A react native module to show toast like android, it works on iOS and Android.
A react native module to show toast like android, it works on iOS and Android.

react-native-easy-toast A react native module to show toast like android, it works on iOS and Android. Content Installation Demo Getting started API C

Jul 18, 2022
Simple, performant & type-safe cross platform navigation in React Native / React Native Web
Simple, performant & type-safe cross platform navigation in React Native / React Native Web

Simple and performant cross platform navigation on iOS, Android and the web with simple and type-safe api for React 18 (alpha)

Mar 9, 2022
A react native android module to control the android statusbar.

Status bar for React Native Android A react native android module to control the android statusbar. Setup There are five steps in the setup process in

Nov 24, 2021
React Native Android module to use Android's AlertDialog - same idea of AlertIOS

react-native-simpledialog-android React Native Android module to use Android's AlertDialog - same idea of AlertIOS Installation npm install react-nati

Mar 1, 2020
📆 React Native Module for iOS and Android Calendar Events

React Native Calendar Events A React Native module to help access and save events to iOS and Android calendars. Getting started This package assumes t

Aug 6, 2022
React Native Picker Module Android & IOS
React Native Picker Module Android & IOS

React Native Picker Module for Android & IOS With this package you can easily use picker with onPress function. Using react-native-modal and @react-na

Apr 30, 2022
react-native-wheel-picker ★190 - React native cross platform picker.
react-native-wheel-picker ★190 - React native cross platform picker.

react-native-wheel-picker Introduction Cross platform Picker component based on React-native. Since picker is originally supported by ios while Androi

Jul 26, 2022
Tailwindcss-react-native: Use Tailwindcss in your cross platform React Native applications

tailwindcss-react-native Use Tailwindcss in your cross platform React Native applications. This library is currently stabilising for a v1 release. Fol

Aug 7, 2022