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

ReScript bindings for react-native-safe-area-context
https://github.com/rescript-react-native/safe-area-context

react react-native rescript rescript-react rescript-react-native

Last synced: about 2 months ago
JSON representation

ReScript bindings for react-native-safe-area-context

• Host: GitHub
• URL: https://github.com/rescript-react-native/safe-area-context
• Owner: rescript-react-native
• License: mit
• Created: 2019-12-19T07:37:16.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2024-06-19T00:40:20.000Z (3 months ago)
• Last Synced: 2024-07-05T16:43:05.353Z (3 months ago)
• Topics: react, react-native, rescript, rescript-react, rescript-react-native
• Language: ReScript
• Homepage:
• Size: 729 KB
• Stars: 7
• Watchers: 4
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - safe-area-context - native-safe-area-context | rescript-react-native | 5 | (ReScript)

README

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

[![Build Status](https://github.com/rescript-react-native/safe-area-context/workflows/Build/badge.svg)](https://github.com/rescript-react-native/safe-area-context/actions)

[![Version](https://img.shields.io/npm/v/@rescript-react-native/safe-area-context.svg)](https://www.npmjs.com/@rescript-react-native/safe-area-context)

[![ReScript Forum](https://img.shields.io/discourse/posts?color=e6484f&label=ReScript%20Forum&server=https%3A%2F%2Fforum.rescript-lang.org)](https://forum.rescript-lang.org/)

[ReScript](https://rescript-lang.org) bindings for

[`react-native-safe-area-context`](https://github.com/th3rdwave/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`](https://github.com/th3rdwave/react-native-safe-area-context)

is properly installed & configured by following their installation instructions,

you can install the bindings:

```console

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`:

```diff

{

  //...

  "bs-dependencies": [

    "@rescript/react",

    "rescript-react-native",

    // ...

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

  ],

  //...

}

```

## Usage

### Types

#### `ReactNativeSafeAreaContext.insets`

```rescript

type insets = {

  top: float,

  bottom: float,

  left: float,

  right: float,

};

```

#### `ReactNativeSafeAreaContext.frame`

```rescript

type frame = {

  x: float,

  y: float,

  width: float,

  height: float,

};

```

#### `ReactNativeSafeAreaContext.metrics`

```rescript

type metrics = {

  insets,

  frame,

};

```

### Constants

#### `initialWindowMetrics`

See 

### Methods

#### ``

```rescript

open ReactNative;

open ReactNativeSafeAreaContext;

[@react.component]

let make = () => {

  

    // your app...

    

  ;

}

```

See  for

`initialMetrics`.

#### `ReactNativeSafeAreaContext.useSafeAreaInsets(): insets`

```rescript

open ReactNative;

open ReactNativeSafeAreaContext;

[@react.component]

let make = () => {

  let insets = useSafeAreaInsets();

  ;

}

```

#### `ReactNativeSafeAreaContext.useSafeAreaFrame(): frame`

```rescript

open ReactNative;

open ReactNativeSafeAreaContext;

[@react.component]

let make = () => {

  let frame = useSafeAreaFrame();

  ;

}

```

#### ``

```rescript

open ReactNative;

open ReactNativeSafeAreaContext;

[@react.component]

let make = () => {

  

    // your component, handy for classes

    {insets => }

  ;

}

```

#### ``

```rescript

open ReactNative;

open ReactNativeSafeAreaContext;

[@react.component]

let make = () => {

  

    

  ;

}

```

---

## Changelog

Check the [changelog](./CHANGELOG.md) for more informations about recent

releases.

---

## Contribute

Read the

[contribution guidelines](https://github.com/rescript-react-native/.github/blob/master/CONTRIBUTING.md)

before contributing.

## Code of Conduct

We want this community to be friendly and respectful to each other. Please read

[our full code of conduct](https://github.com/rescript-react-native/.github/blob/master/CODE_OF_CONDUCT.md)

so that you can understand what actions will and will not be tolerated.