ReasonML / BuckleScript bindings for NativeBase.
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>.
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-baseAdd reason-native-base to bs-dependencies in bsconfig.json
NativeBase components will be available from the NativeBase module.
// 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 />
}
}