bs-react-native-paper

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": ["bs-react-native-paper"]

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.