d-a-n / react-native-webbrowser

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

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

   

react-native-webbrowser's Issues

How to import?

My source code:

import Webbrowser from 'react-native-webbrowser'

<Webbrowser
          url="https://google.com"
          hideHomeButton={false}
          hideToolbar={false}
          hideAddressBar={false}
          hideStatusBar={false}
          foregroundColor={'#00efef00'}
          backgroundColor={'#333'}
        />

Got the following error:

Unable to resolve module react-native-webbrowser from xxxxxxxxxxxx

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

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 

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

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

Do you have an idea how to solve it?

this is my package.json

"dependencies": {
    "immutable": "^3.7.6",
    "react-native": "^0.21.0"
  }

Duplicate module Set with react-native

Error when starting. Duplicate module Set with react-native. Android 4.2, RN 4.3.4

Fail to build in react-native run-ios

This is on latest RN 0.22.

[4:05:56 PM] <START> Building Dependency Graph
[4:05:56 PM] <START> Crawling File System
[Hot Module Replacement] Server listening on /hot

React packager ready.

[4:05:57 PM] <END>   Crawling File System (1062ms)
[4:05:57 PM] <START> Building in-memory fs for JavaScript
[4:05:57 PM] <END>   Building in-memory fs for JavaScript (172ms)
[4:05:57 PM] <START> Building in-memory fs for Assets
[4:05:57 PM] <END>   Building in-memory fs for Assets (127ms)
[4:05:57 PM] <START> Building Haste Map
[4:05:57 PM] <START> Building (deprecated) Asset Map
[4:05:57 PM] <END>   Building (deprecated) Asset Map (35ms)
Failed to build DependencyGraph: @providesModule naming collision:
  Duplicate module name: TouchHistoryMath
  Paths: ~/Documents/code/<app>/node_modules/react-native-webbrowser/node_modules/react-native/Libraries/vendor/react/browser/eventPlugins/TouchHistoryMath.js collides with ~/Documents/code/<app>/node_modules/react-native/Libraries/vendor/react/browser/eventPlugins/TouchHistoryMath.js

This error is caused by a @providesModule declaration with the same name accross two different files.
Error: @providesModule naming collision:
  Duplicate module name: TouchHistoryMath
  Paths: ~/Documents/code/<app>/node_modules/react-native-webbrowser/node_modules/react-native/Libraries/vendor/react/browser/eventPlugins/TouchHistoryMath.js collides with ~/Documents/code/<app>/node_modules/react-native/Libraries/vendor/react/browser/eventPlugins/TouchHistoryMath.js

This error is caused by a @providesModule declaration with the same name accross two different files.
    at HasteMap._updateHasteMap (~/Documents/code/<app>/node_modules/node-haste/lib/DependencyGraph/HasteMap.js:160:15)
    at ~/Documents/code/<app>/node_modules/node-haste/lib/DependencyGraph/HasteMap.js:125:25
    at run (~/Documents/code/<app>/node_modules/babel-polyfill/node_modules/core-js/modules/es6.promise.js:89:22)
    at ~/Documents/code/<app>/node_modules/babel-polyfill/node_modules/core-js/modules/es6.promise.js:102:28
    at flush (~/Documents/code/<app>/node_modules/babel-polyfill/node_modules/core-js/modules/_microtask.js:14:5)
    at _combinedTickCallback (node.js:376:9)
    at process._tickCallback (node.js:407:11)
~
Process terminated. Press <enter> to close the window

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

ActivityIndicatorIOS is deprecated

Does not work with react native 0.37

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.

Page won't load just a white screen after the spinner is gone

https://docs.google.com/gview?url=https://vaultedgetemp.storage.googleapis.com/20128af0-98f5-4a5c-b33a-c3fdcc5b0015-view.pdf

tried to open this url in the sample app won't open

SampleApp won't run as is react-native 0.24

Application SampleApp has not been registered. This is either due to a require() error during initialization or failure to call AppRegistry.registerComponet.

This is happening but simple cloning the repo, npm install, and running the iOS via simulator.