CODEWITHSUNDEEP
androidreactjsreact-native
varad
varad

Reputation: 8029

make browsers with react native

I have a mobile site and I want to make an android browser app where I want to open my site.

I have tried and react-native-browser. Something like..

import {
  processColor, // make sure to add processColor to your imports if you want to use hex colors as shown below 
} from 'react-native';

// at the top of your file near the other imports 
var Browser = require('react-native-browser');

class SampleApp extends Component {
    render() {
        return (
            <View style={{paddingTop:20, flex:1}}>

                {Browser.open('https://google.com/')}

            </View>
        );
    }
}

But got no success...

I just want to make a browser that opens my mobile site..

Is there any better way of doing this or if someone has any idea how to use react-native-browser ?

Thanks in advance

Upvotes: 1

Views: 1801

Answers (4)

Dori Aviram
Dori Aviram

Reputation: 322

You can use https://www.npmjs.com/package/react-native-webbrowser

Install: 

npm i react-native-webbrowser --save

Use:

class SampleApp extends Component {
    render() {
        return (
            <View style={{paddingTop:20, flex:1}}>

                <Webbrowser
                    url="https://your-url.com"
                    hideHomeButton={true}
                    hideToolbar={true}
                    hideAddressBar={true}
                    hideStatusBar={true}
                    foregroundColor={'#efefef'}
                    backgroundColor={'#333'}
                />

            </View>
        );
    }

Set all the hide's props to true to make your app display only the site

Upvotes: 0

bennygenel
bennygenel

Reputation: 24660

Why are you trying to look for an external library while there is a WebView Component already integrated with react-native itself?

WebView renders web content in a native view. You can use this component to navigate back and forth in the web view's history and configure various properties for the web content.

You can just add a WebView and open up the desired web url.

Example

import React, { Component } from 'react';
import { WebView } from 'react-native';

class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{uri: 'https://github.com/facebook/react-native'}}
        style={{marginTop: 20}}
      />
    );
  }
}

Upvotes: 0

Martin Chinome
Martin Chinome

Reputation: 429

you must search in this web https://js.coach/react-native?search=browser for example https://github.com/d-a-n/react-native-webbrowser

Upvotes: 0

Petter Hesselberg
Petter Hesselberg

Reputation: 5498

Looking at the source code, it seems this browser is only available on iOS.

Upvotes: 1

Related Questions