React-native-paper for ReasonML.
bs-react-native-paper
Installation
Use yarn or npm
$ yarn add bs-react-native-paper react-native-paper
Then add bs-react-native-paper
to bsconfig.json
"bs-dependencies":
Example usage
Using theme
/* We provide a helper function called `createTheme` that defaults with DefaultTheme */let theme = Paper.ThemeProvider.( createTheme( ~colors= themeColors( ~primary="#6200EE", ~accent="#03dac4", ~background="#f6f6f6", ~surface="white", ~error="#B00020", ~text="black", ~disabled="rgba(0, 0, 0, 0.26)", ~placeholder="rgba(0, 0, 0, 0.54)", ~backdrop="rgba(0, 0, 0, 0.5)", ), (), ) ); let component = ReasonReact.statelessComponent("AppTheme"); let make = children => { ...component, render: _self => <Paper.ThemeProvider theme> (ReasonReact.array(children)) </Paper.ThemeProvider>,};
Using components
<Paper.Button mode=`contained onPress={_event => self.send(YourAction)}> <Paper.Text> {ReasonReact.string("Click me")} </Paper.Text></Paper.Button>
<Paper.FABGroup actions=Paper.FABGroup.[| fabAction(~icon=Icon.Name("add"), ~onPress=() => Js.log("add"), ()), fabAction(~icon=Icon.Name("star"), ~onPress=() => Js.log("start"), ()), fabAction(~icon=Icon.Name("notifications"), ~onPress=() => Js.log("notifications"), ()), |] onStateChange icon={ Icon.Element( Icon.renderIcon((props: Icon.iconProps) => <RNIcons.MaterialIcons name=`_add size={props.size} /> ), ) }/>
Try it out
Run the example app with Expo to see it in action.
The source code for the examples are under the /example folder.
Documentation
We do not have dedicated documentation for this library, but you can check example usage of components in our example app. It is located in /example directory. Components' api in most cases is very similar or the same as in react-native-paper, but there are cases where we had to implement props differently, so if you encounter problems I would suggest to check the source code of particular binding.
Contributing
Read the contribution guidelines before contributing.