fattomhk / react-native-webview-with-refresh

A simple webview with pull to refresh function.

react-native-webview-with-refresh

Getting started

$ npm install react-native-webview-with-refresh --save

Mostly automatic installation

$ react-native link react-native-webview-with-refresh

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-webview-with-refresh and add RNWebviewWithRefresh.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNWebviewWithRefresh.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.reactlibrary.RNWebviewWithRefreshPackage; to the imports at the top of the file
• Add new RNWebviewWithRefreshPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-webview-with-refresh'
   project(':react-native-webview-with-refresh').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-webview-with-refresh/android')
   

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-webview-with-refresh')
   

Parameters

Parameter	Usage
url	the url loaded
matchCondition	regex; would call onUrlMatch if the url meet this condition
onUrlMatch	the callback when the url meet the condition
onStartLoad	the callback when the url start to load
OnFinishLoad	the callback when the url loading is committed

Usage

import RNWebviewWithRefresh from "react-native-webview-with-refresh";
export default class App extends Component {
  onUrlChange = event => {
    alert(event.url);
    alert(event.condition);
  };

  onStartLoad = event => {
    console.warn("onStartLoad: %s", event.url);
  };

  onFinishLoad = event => {
    console.warn("onFinishLoad: %s", event.url);
  };

  render() {
    return (
      <View style={styles.container}>
        <WebViewWithRefresh
          url="https://www.google.com/"
          matchCondition="(http|https)://starfans.info"
          onUrlMatch={this.onUrlChange}
          onStartLoad={this.onStartLoad}
          onFinishLoad={this.onFinishLoad}
          style={styles.webview}
          ref="webview"
        />
      </View>
    );
  }
}

Warnning

For iOS, this lib accept all SSL cert as the WKWebview seems being rude to https://google.com/

ChangeLog

1.1 switch to WKWebview for better performance; add onStartLoad and onFinishLoad callbacks.