2.13.8-2 • Published 4 years ago

reason-native-base v2.13.8-2

Weekly downloads
3
License
MIT
Repository
github
Last release
4 years ago

reason-native-base

Version

ReasonML / BuckleScript bindings for NativeBase.

Description

This bindings package let you use the NativeBase UI library for ReactNative with ReasonML. It is largely inspired by reason-react-native The package version is of form <native-base-version>-<package-release>.

Getting started

Add reason-react-native to you project.

Add reason-native-base and native-base npm dependencies :

npm install reason-native-base native-base
# or
yarn add install reason-native-base native-base

Add reason-native-base to bs-dependencies in bsconfig.json

NativeBase components will be available from the NativeBase module.

Example

// App.re

open NativeBase;
open ReactNative.Style;

module AppContent {
  [@react.component]
  let make = () => {
    <Container style={viewStyle(~paddingTop=dp(float_of_int(Expo.Constants.statusBarHeight)),())}>
      <Header>
        <Left>
          <Button transparent=true>
            <Icon name="menu" />
          </Button>
        </Left>
        <Body>
          <Title>{React.string("reason-native-base")}</Title>
        </Body>
        <Right />
      </Header>
      <Content>
        <Text>{React.string("This application is using ReasonML and NativeBase !")}</Text>
      </Content>
    </Container>
  };
}

[@react.component]
let make = () => {
  let (loading, setLoading) = React.useState(() => true)
  
    React.useEffect0(() => {
      Expo.Font.loadAsync([
      ("Ionicons", ReactNative.Packager.require("../node_modules/native-base/Fonts/Ionicons.ttf")),
      ("Roboto", ReactNative.Packager.require("../node_modules/native-base/Fonts/Roboto.ttf")),
      ("Roboto_medium", ReactNative.Packager.require("../node_modules/native-base/Fonts/Roboto_medium.ttf")),
    ]) |> Js.Promise.then_(_ => {
      Js.log("Font loaded")
      setLoading(_ => false);
      Js.Promise.resolve()
    }) |> ignore;
    None;
  });

  if (loading) {
    Js.log("Loading");
    <View />
  } else {
    Js.log("Loaded");
    <AppContent />
  }
}