Lets start with boiler template
/* @flow */
import React, { Component } from 'react';
import {
View,
TouchableOpacity,
Text,
StyleSheet,
PanResponder,
} from 'react-native';
export default class PanResponderDemo extends Component {
state={
debugActions:"Not Touched",
actions:[" ------------- Start ------------- "]
}
componentWillMount(){
this._panResponder = PanResponder.create({
// Ask to be the responder:
onStartShouldSetPanResponder: (evt, gestureState) => {
this.setState({actions: this.state.actions.concat("1) onStartShouldSetPanResponder")})
// return true
},
onStartShouldSetPanResponderCapture: (evt, gestureState) => {
this.setState({actions: this.state.actions.concat("2) onStartShouldSetPanResponderCapture")})
// return true
},
onMoveShouldSetPanResponder: (evt, gestureState) => {
this.setState({debugActions:"3) onMoveShouldSetPanResponder"})
// return true
},
onMoveShouldSetPanResponderCapture: (evt, gestureState) => {
this.setState({actions: this.state.actions.concat("4) onMoveShouldSetPanResponderCapture")})
// return true
},
onPanResponderGrant: (evt, gestureState) => {
// The gesture has started. Show visual feedback so the user knows
// what is happening!
// gestureState.d{x,y} will be set to zero now
},
onPanResponderMove: (evt, gestureState) => {
this.setState({actions: this.state.actions.concat("6) onPanResponderMove")})
// The most recent move distance is gestureState.move{X,Y}
// The accumulated gesture distance since becoming responder is
// gestureState.d{x,y}
},
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => {
this.setState({actions: this.state.actions.concat("7) onPanResponderRelease")})
// The user has released all touches while this view is the
// responder. This typically means a gesture has succeeded
},
onPanResponderTerminate: (evt, gestureState) => {
this.setState({actions: this.state.actions.concat("8) onPanResponderTerminate")})
// Another component has become the responder, so this gesture
// should be cancelled
},
onShouldBlockNativeResponder: (evt, gestureState) => {
this.setState({actions: this.state.actions.concat("9) onShouldBlockNativeResponder")})
// Returns whether this component should block native components from becoming the JS
// responder. Returns true by default. Is currently only supported on android.
return true;
},
});
}
render() {
let {actions} = this.state
if(this.state.actions.length>20){
this.state.actions.shift()
this.setState({actions: this.state.actions});
}
return (
<View style={s.container}>
{/* Pan Responder Item */}
<View style={[s.panItem,]}{...this._panResponder.panHandlers}>
</View>
{/* DEBUG FLOATING CONTAINER */}
<TouchableOpacity onPress={()=>this.setState({actions:[" ------------- Restarted ------------- "]})} style={[{},s.debugContainer]}>
{this.state.actions.map((o,i)=>{
return <Text key={i} style={s.debugActions}>{o}</Text>
})}
</TouchableOpacity>
</View>
);
}
}
const s = StyleSheet.create({
container: {
flex: 1,
justifyContent:"center",alignItems:"center",
},
panItem: {
backgroundColor:"red",
height:50,
width:50,
},
debugContainer:{
position:"absolute",
bottom:25,
right:10,
flex:1,
zIndex:3,
width:null,
height:null,
alignItems:"center",
justifyContent:"center",
backgroundColor:"rgba(0,0,0,.5)"
},
debugActions:{
fontSize: 10,
color:"white",
textAlign: "center",
margin: 0,
},
});
Im referring to each PanResponder Function by Numbers as they are long function names:
- onStartShouldSetPanResponder
- onStartShouldSetPanResponderCapture
- onMoveShouldSetPanResponderCapture
- onPanResponderMove
- onPanResponderRelease
- onPanResponderTerminate
- onShouldBlockNativeResponder
(URL to Imgur Album - http://imgur.com/a/F6abq) Lets first make some observations. Here I have 1,2,3 & 4 returning false
Open in Imgur (New Tab) - https://i.imgur.com/escV7Ol.gif
Result: only calls 1 & 4 when touched
Now Lets make them (1,2,3 & 4) return true
Open in Imgur (New Tab) - http://i.imgur.com/t3aAGRK.gif
Result: calls 1,5,6,8,7 when touched
Creating A Native React Native Module
By The end of this tutorial you will have created a native module that will look like the following in Javascript:
Right Click your apps self titled folder inside your project
RNFabricKit.xcodeproject > RNFabricKit
ThenAdd New File
>Cocoa Touch Class
, Name it, I named mineRNStripe
and whatever you named it will add a.h
and.m
file of that name, in my case it created aRNStripe.h
andRNStripe.m
once done your new.m
file should look like this:Now lets put in our React Native Bridge Boilerplate
In Javascript
RCT_EXPORT_METHOD
This supports all standard JSON object types, such as:
/* USE RCTConvert
The RCTConvert helper functions all accept a JSON value as input and map it to a native Objective-C type or class.
*/
Resources
Blog Guide - http://blog.tylerbuchea.com/how-to-create-a-react-native-ios-native-module/
React Native Docs Walkthrough - http://facebook.github.io/react-native/docs/native-modules-ios.html