Repository files navigation

Great that you want to use Reason with React Native! To get everything running are just a couple of steps.Let's assume that you already have a React Native project. Otherwise follow the React Nativeinstructions until you have your app running.

1. InstallBucklescript (the Reason -> JS compiler),Reason-React andbs-react-native:

# substitute yarn with npm if you preferyarn add bs-platform reason-react bs-react-native

2. Create are folder (there will be your Reason code)
3. Create absconfig.json with the following content file in your project root

{"name":"my-awesome-app","reason": {"react-jsx":2    },"bsc-flags": ["-bs-super-errors"],"bs-dependencies": ["bs-react-native","reason-react"],"sources": [{"dir":"re"    }],"refmt":3}

4. You are nearly done, the last configuration before we get to the fun stuff. In yourpackage.json add to the"scripts" section two scripts:

"scripts": {..."build":"bsb -make-world -clean-world","watch":"bsb -make-world -clean-world -w"}

5. Now you can build all your (so far nonexsisting) Reason in two modes:

• yarn build performs a single build
• yarn watch enters the watch mode

6. Now we come to the fun stuff! Create a new filere/app.re and make it look like this:

openBsReactNative;letapp=()=>  <View style=Style.(style([flex(1.), justifyContent(Center), alignItems(Center)]))>    <Text value="Reason is awesome!" />  </View>;

and start the watcher withyarn run watch if you haven't done it yet.

7. We are nearly done! We now have to adopt theindex.ios.js /index.android.js to look like this

import{app}from"./lib/js/re/app.js";importReactfrom"react";import{AppRegistry}from'react-native';AppRegistry.registerComponent('MyAwesomeProject',()=>app);

Note: Make sure that the first argument toAppRegistry.registerComponent isyour correct project name.

If you are usingreact-native-scripts, then you will need to modifyApp.js to be like this

import{app}from"./lib/js/re/app.js";exportdefaultapp;

8. Now go to a new tab and start your app withreact-native run-ios orreact-native run-android.

9. Great you are all set up! Check the source ofbs-react-native to find out more about the implemented APIs and Components. If you get stuck just ask on ourDiscord Server! Happy Hacking!

Here are some more things which will be probably useful for you:

• Reason-React Documentation
• Bucklescript Manual

Yes! Check out theSeattle JS Conf App for a real world App written with Reason.

There are some components and APIs missing. You can find an overview of the implemented components and APIshere. Contributions of Components and APIs are very welcome! The bindings are targeted to React Native0.46+.

Since we have a proper type system we can make stylestypesafe! Therefore styles are a little bit different declared than in #"auto" data-snippet-clipboard-copy-content="open BsReactNative;/* inline styles */<View style=( Style.style([ Style.flexDirection(Column), Style.backgroundColor("#6698FF"), Style.marginTop(Pt(5.)) ]) )/>;/* inline styles with a local open */<View style=Style.(style([flexDirection(Column), backgroundColor("#6698FF"), marginTop(Pt(5.))])) />;/* StyleSheets with a local open */let styles = StyleSheet.create( Style.({"wrapper": style([flexDirection(Column), backgroundColor("#6698FF"), marginTop(Pt(5.))])}) );<View style=styles##wrapper />;">

openBsReactNative;/* inline styles*/<View  style=(Style.style([Style.flexDirection(Column),Style.backgroundColor("#6698FF"),Style.marginTop(Pt(5.))])  )/>;/* inline styles with a local open*/<View style=Style.(style([flexDirection(Column), backgroundColor("#6698FF"), marginTop(Pt(5.))])) />;/* StyleSheets with a local open*/letstyles=StyleSheet.create(Style.({"wrapper": style([flexDirection(Column), backgroundColor("#6698FF"), marginTop(Pt(5.))])})  );<View style=styles##wrapper />;

Animations

openBsReactNative;[...]typestate= {animatedValue:Animated.Value.t};letcomponent=ReasonReact.reducerComponent("Example");initialState:()=> {animatedValue:Animated.Value.create((-100.))},/* Start animation in method*/Animated.CompositeAnimation.start(Animated.Timing.animate(    ~value=state.animatedValue,    ~toValue=`raw(0.),()  ),());[...]/* Styles with an animated value*/<Animated.View  style=Style.(style([flexDirection(Column), backgroundColor("#6698FF"), top(Animated(state.animatedValue))]))  )/>;

Troubleshooting

Native module cannot be null with create-react-native-app

/* bsconfig.json */{/* ... */"package-specs": [    {"module":"commonjs"    }  ]}