Hippy React
Write Hippy cross platform app with React.
Introduction
hippy-react
is the React binding for Hippy, the syntax just like React Native, but advantaged.
- All of components support touch events.
- Recyclable
ListView
is built-in. - Animation is depolyed at once.
How to use
Installation
Create a empty react project with create-react-app,
then enter into the project and install hippy-react
with npm:
npm install hippy-react
Create your first Hippy page
TODO
Debug the app
TODO
Integrate the JS bundle to native app
TODO
Advanced topics
Components and modules usage
See [API Doc]
(TODO).
Custom component
Confirmed the new component name and methods with Native develop, then write new component:
;; Component /** * Method for custom component. * Replace `[METHOD_NAME]` to real method name. */ { /** * Call the native UI Function * * @param * @param * @param */ ; } { return /* * Custom component must define the `nativeName` props, * that mapping to native component name. */ <div nativeName="[NATIVE_COMPONENT_NAME]" ref= thisinstance = ref /> ; }
Custom module
There are two implementation of modules
For the C++ module, the methods are injected into JS enviroment, just call the method.
For the modules implemented by Objective C or Java, use the callNative
for execution.
const callNative callNativeWithPromise from 'hippy-react'; const SomeModule = /** * Method that not need repsonse */ { ; } /** * Method with reponse */ { return ; }
The ModuleName
, MethodName
and arguments must be confirmed with native developers.
Migrate from React Native
The most difference in React Native
and Hippy React
have three points:
- Touch event system
- Animation
- Compoents
Touch event system
The touch event is able to apply to View
component directly, for example the onPress
event:
;; { { console; } return <View> /* `onClick` event is supported to instead of `onPress` */ <View onClick= ><Text>Trigger click event</Text></View> /* But `onPress`still supported for forward compatibility */ <View onPress= ><Text>Trigger click event</Text></View> </View> ;}
FAQ
TODO