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

    3.1.2 • 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.

    Install

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

    DownloadsWeekly Downloads

    86

    Version

    3.1.2

    License

    MIT

    Unpacked Size

    14.3 kB

    Total Files

    6

    Last publish

    Collaborators

    • moox