kiok46

Content of the Gist is from a talk by Peggy Rayzis at Chain React 2017: Chain React 2017: Breaking Down Bridging in React Native by Peggy Rayzis

---

In order for a native code to talk to JS you would need a bridge.

• You need to integrate a third-party SDK.
• High perfomance is crutial
• You are building a brownfiel app
• You need access to a platform to a platform API. (Camera, Gyroscope etc.), You will need to use a opensource library or create a bridge.

kiok46

Action Creators and Reducers.

why action creators? We want to minimize the responsibilities of anyone of our components, We want to make a component as simple and as dumb as possible, so all our compenent is going to do is show the UI. whenever our Component is going to do some logical work we would call the action creator.

Component -> renders the internal components -> need to do some action, let's say handle a button click

kiok46

AsyncStorage

Store information in local machine (Mobile).

import { AsyncStorage } from 'react-native';

import {
	AUTOCOMPLETE_SETTING,
	QUACK_ON_REFRESH_SETTING,

kiok46

Redux Setup

Implementation of redux inside any react.js or react-native application,

• we will create an instance of the redux store.
• We are going to create a provider tag from react redux library
• Then render that provider tag passing in the store as a prop, then any child component to this provider tag will have access to this store through the context system inside of react.
• import { Provider } from ‘react-redux’; // In main.js
• to create a store create one in a separate folder.

kiok46

Native Module in React-Native

To get a great grip on how wo build one, read these blogs.

• https://github.com/peggyrayzis/react-native-create-bridge
• https://shift.infinite.red/beginner-s-guide-to-using-cocoapods-with-react-native-46cb4d372995
• http://moduscreate.com/swift-modules-for-react-native/
• http://browniefed.com/blog/react-native-how-to-bridge-an-objective-c-view-component/
• http://brentvatne.ca/react-native-view-component-1/
• http://brentvatne.ca/react-native-view-component-2/

kiok46

The sidecar pattern

The sidecar pattern is a singlenode pattern made up of two containers. The first is the application container. It con‐ tains the core logic for the application. Without this container, the application would not exist. In addition to the application container, there is a sidecar container. The role of the sidecar is to augment and improve the application container, often without the application container’s knowledge.

Adding HTTPS to a Legacy Service

kiok46

Verify myself: 16697699bc564ae385a4a0758fd4ea44 http://blockchain-devs.xpo.network # 

kiok46

import multipleTapHandler from 'multipleTapHandler';

// Tap Event
const onTap = () => {
  console.log("onTapEvent called.")
}

// Actual user Tap.
tap = multipleTapHandler(() => {onTap()})

kiok46

// Multiple Tap Handler
const multipleTapHandler = (func, wait = 200) => {
	let tapCount = 0
	let handler;
	return function() {
		//console.log(tapCount)
		if (tapCount === 0){
			tapCount++;
			func()
		}

kiok46

import React, { Component } from 'react';
import { TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';
import multipleTapHandler from 'multipleTapHandler';

class Button extends Component {
  render() {
    return (
      <TouchableOpacity
        {...this.props}