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

    2.0.2 • Public • Published

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

    ⚠️ This library is deprecated. It is no longer used in React Navigation and it has been succeeded by the excellent react-native-safe-area-context. Please use react-native-safe-area-context instead, or you are likely to have a bad time.

    ➡️ https://github.com/rescript-react-native/safe-area-context


    Build Status Version ReScript Forum

    ReScript bindings for react-native-safe-area-view.

    Exposed as ReactNativeSafeAreaView module.

    @rescript-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 @rescript-react-native/safe-area-view
    # or
    yarn add @rescript-react-native/safe-area-view

    @rescript-react-native/safe-area-view should be added to bs-dependencies in your bsconfig.json:

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

    Install

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

    DownloadsWeekly Downloads

    2

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    7.36 kB

    Total Files

    6

    Last publish

    Collaborators

    • moox