@reason-react-native/safe-area-view
v2.0.1
Published
ReScript bindings for react-native-safe-area-view.
Downloads
6
Readme
@reason-react-native/safe-area-view
ReScript / Reason bindings for
react-native-safe-area-view
.
Exposed as ReactNativeSafeAreaView
module.
@reason-react-native/safe-area-view
X.y.* means it's compatible with
react-native-safe-area-view
X.y.*
Installation
When
react-native-safe-area-view
is properly installed & configured by following their installation instructions,
you can install the bindings:
npm install @reason-react-native/safe-area-view
# or
yarn add @reason-react-native/safe-area-view
@reason-react-native/safe-area-view
should be added to bs-dependencies
in
your bsconfig.json
:
{
//...
"bs-dependencies": [
"reason-react",
"reason-react-native",
// ...
+ "@reason-react-native/safe-area-view"
],
//...
}
Usage
⚠️ In order to avoid name collision (SafeAreaView
is already defined in React
Native), the components are scoped in SafeArea
. Checkout this example :
open ReactNative
open ReactNativeSafeAreaView;
module MyApp = {
let styles = Style.(
StyleSheet.create({
"safeAreaView": viewStyle(~flex=1., ())
})
);
[@react.component]
let make = () => {
<SafeArea.View style=styles##safeAreaView>
<View>
<Text>
"Hello world"->React.string
</Text>
</View>
</SafeArea.View>
}
};
[@react.component]
let make = () => {
<SafeArea.Provider>
<MyApp />
</SafeArea.Provider>
};
Usage with forceInset
open ReactNative
open ReactNativeSafeAreaView;
[@react.component]
let make = () => {
<SafeArea.View forceInset=SafeArea.View.inset(~top=`always, ())>
<View>
<Text>
"Hello world"->React.string
</Text>
</View>
</SafeArea.View>
};
Changelog
Check the changelog for more informations about recent releases.
Contribute
Read the contribution guidelines before contributing.
Code of Conduct
We want this community to be friendly and respectful to each other. Please read our full code of conduct so that you can understand what actions will and will not be tolerated.