ReScript bindings for react-native-safe-area-context.
Exposed as ReactNativeSafeAreaContext module.
@rescript-react-native/safe-area-context X.y.* means it's compatible with react-native-safe-area-context X.y.*
When react-native-safe-area-context is properly installed & configured by following their installation instructions, you can install the bindings:
npm install @rescript-react-native/safe-area-context # or yarn add @rescript-react-native/safe-area-context@rescript-react-native/safe-area-context should be added to bs-dependencies in your rescript.json:
{ //... "bs-dependencies": [ "@rescript/react", "rescript-react-native", // ... + "@rescript-react-native/safe-area-context" ], //... }type insets = { top: float, bottom: float, left: float, right: float, };type frame = { x: float, y: float, width: float, height: float, };type metrics = { insets, frame, };See https://github.com/th3rdwave/react-native-safe-area-context#optimization
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.
open ReactNative; open ReactNativeSafeAreaContext; @react.component let make = () => { let insets = useSafeAreaInsets(); <View style=Style.(style(~paddingTop=insets.top, ())) />; }open ReactNative; open ReactNativeSafeAreaContext; @react.component let make = () => { let frame = useSafeAreaFrame(); <View style=Style.(style(~height=frame.height, ())) />; }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>; }open ReactNative; open ReactNativeSafeAreaContext; @react.component let make = () => { <SafeAreaView> <View /> <SafeAreaView>; }Check the changelog for more informations about recent releases.
Read the contribution guidelines before contributing.
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.