fullNativeCode.js

import React, { PureComponent } from 'react'
import { StyleSheet, Platform, WebView } from 'react-native'
import WebViewIOS from 'react-native-wkwebview-reborn'

import { LoginManager, GraphRequest, GraphRequestManager } from 'react-native-fbsdk'

const
  webviewRef = 'WEBVIEW',
  styles = StyleSheet.create({
    webview: {
      flex: 1,
    },
  })

export default class App extends PureComponent {
  state = {
    injectedNativeMessage: false,
  }

  handleNavigationStateChange({ loading }) {
    if(!loading && !this.state.injectedNativeMessage) {
      if(Platform.OS === 'ios') {
        this.refs[webviewRef].evaluateJavaScript('var isNative = "ios"')
      } else {
        this.refs[webviewRef].injectJavaScript('var isNative = "android"')
      }

      this.setState({
        injectedNativeMessage: true
      })

      console.log('isNative var injected')
    }
  }

  postMessage(message) {
    message = JSON.stringify(message)
    console.log('posting message', message)

    const finalMessage = 'window.onMessage(' + message + ')'

    if(Platform.OS === 'ios') {
      this.refs[webviewRef].evaluateJavaScript(finalMessage)
    } else {
      this.refs[webviewRef].injectJavaScript(finalMessage)
    }

    console.log('message posted')
  }

  loginFacebook() {
    console.log('facebook login called')

    LoginManager
      .logInWithReadPermissions(['public_profile'])
      .then(({ isCancelled, declinedPermissions }) => {
        if(isCancelled || (declinedPermissions && declinedPermissions.length)) {
          console.log('user denined access')
        } else {

          new GraphRequestManager()
            .addRequest(new GraphRequest(
              '/me?fields=picture,name,email',
              null,
              (error, result) => {
                if(error) {
                  return console.error(error)
                }

                this.postMessage.call(this, result)
              },
            ))
            .start()
        }
      })
      .catch(console.error)
  }

  is(type, { nativeEvent, body }) {
    return body === type || (nativeEvent && nativeEvent.data === type)
  }

  handleMessage(args) {
    if(this.is('loginFacebook', args)) {
      console.log('calling facebook login')

      this.loginFacebook()
    }
  }

  webviewProps = {
    ref: webviewRef,
    onNavigationStateChange: this.handleNavigationStateChange.bind(this),
    onMessage: this.handleMessage.bind(this),
    style: styles.webview,
    javaScriptEnabled: true,
    source: {
      uri: 'https://yourloginurl.com',
    }
  }

  render() {
    return (
      Platform.OS === 'ios' ?
      <WebViewIOS {...this.webviewProps} /> :
      <WebView {...this.webviewProps} />
    )
  }
}