@rescript-react-native/safe-area-context

4.0.0 • Public • Published

@rescript-react-native/safe-area-context

Build Status Version ReScript Forum

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.*

Installation

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 bsconfig.json:

{
  //...
  "bs-dependencies": [
    "@rescript/react",
    "rescript-react-native",
    // ...
+    "@rescript-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.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 4.0.0
    0
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 4.0.0
    0
  • 3.1.2
    0

Package Sidebar

Install

npm i @rescript-react-native/safe-area-context

Weekly Downloads

0

Version

4.0.0

License

MIT

Unpacked Size

14.3 kB

Total Files

6

Last publish

Collaborators

  • moox