@reason-react-native/safe-area-context
ReasonML /
BuckleScript bindings for
react-native-safe-area-context.
Exposed as ReactNativeSafeAreaContext module.
@reason-react-native/safe-area-context X.y._ means it's compatible with
react-native-safe-area-context X.y._
Installation
When
react-native-safe-area-context
is properly installed & configured by following their installation instructions,
you can install the bindings:
npm install @reason-react-native/safe-area-context
# or
yarn add @reason-react-native/safe-area-context@reason-react-native/safe-area-context should be added to bs-dependencies in
your bsconfig.json. Something like
{
//...
"bs-dependencies": [
"reason-react",
"reason-react-native",
// ...
+ "@reason-react-native/safe-area-context"
],
//...
}Usage
Types
ReactNativeSafeAreaContext.insets
type insets = {
top: float,
bottom: float,
left: float,
right: float,
};ReactNativeSafeAreaContext.frame
type frame = {
x: float,
y: float,
width: float,
height: float,
};ReactNativeSafeAreaContext.metrics
type metrics = {
insets,
frame,
};Constants
initialWindowMetrics
See https://github.com/th3rdwave/react-native-safe-area-context#optimization
Methods
<ReactNativeSafeAreaContext.SafeAreaProvider>
open ReactNative;
open ReactNativeSafeAreaContext;
[@react.component]
let make = () => {
<SafeAreaProvider /*initialMetrics={...}*/>
// your app...
<View />
<SafeAreaProvider>;
}See https://github.com/th3rdwave/react-native-safe-area-context#web-ssr for
initialMetrics.
ReactNativeSafeAreaContext.useSafeAreaInsets(): insets
open ReactNative;
open ReactNativeSafeAreaContext;
[@react.component]
let make = () => {
let insets = useSafeAreaInsets();
<View style=Style.(style(~paddingTop=insets.top, ())) />;
}ReactNativeSafeAreaContext.useSafeAreaFrame(): frame
open ReactNative;
open ReactNativeSafeAreaContext;
[@react.component]
let make = () => {
let frame = useSafeAreaFrame();
<View style=Style.(style(~height=frame.height, ())) />;
}<ReactNativeSafeAreaContext.SafeAreaInsetsContext.Consumer>
open ReactNative;
open ReactNativeSafeAreaContext;
[@react.component]
let make = () => {
<SafeAreaInsetsContext.Consumer>
// your component, handy for classes
{insets => <View style=Style.(style(~paddingTop=insets##top, ())) />}
<SafeAreaInsetsContext.Consumer>;
}<ReactNativeSafeAreaContext.SafeAreaView>
open ReactNative;
open ReactNativeSafeAreaContext;
[@react.component]
let make = () => {
<SafeAreaView>
<View />
<SafeAreaView>;
}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.
