Skip to content
React Native Paper bindings for BS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Add circleci configuration Feb 28, 2018
.github
assets feat: add bindings for banner component. (#73) Oct 23, 2018
example
re
.gitignore fix: example folder following namespace update (#76) Apr 24, 2019
CODE_OF_CONDUCT.md feat: add contributing guide and code of conduct. (#70) Oct 16, 2018
CONTRIBUTING.md
LICENSE Initial commit Feb 27, 2018
README.md
bsconfig.json fix: typo in bsconfig.json (#75) Mar 21, 2019
package.json chore: 5.1.0 release Apr 30, 2019
yarn.lock feat: add example app with snackbar example. (#52) Oct 3, 2018

README.md

react-native-paper react-native-paper

React-native-paper for ReasonML.


Build Status Version MIT License PRs Welcome Chat

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.

You can’t perform that action at this time.