{"id":13726571,"url":"https://github.com/rescript-react-native/safe-area-context","last_synced_at":"2025-06-11T17:05:02.031Z","repository":{"id":42033318,"uuid":"229000882","full_name":"rescript-react-native/safe-area-context","owner":"rescript-react-native","description":"ReScript bindings for react-native-safe-area-context","archived":false,"fork":false,"pushed_at":"2024-11-19T19:13:25.000Z","size":511,"stargazers_count":7,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-01T23:04:29.806Z","etag":null,"topics":["react","react-native","rescript","rescript-react","rescript-react-native"],"latest_commit_sha":null,"homepage":"","language":"ReScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rescript-react-native.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["MoOx"]}},"created_at":"2019-12-19T07:37:16.000Z","updated_at":"2024-11-03T15:18:32.000Z","dependencies_parsed_at":"2023-02-08T06:31:28.323Z","dependency_job_id":"d371e973-9c11-4a05-9074-a1355e6f2e00","html_url":"https://github.com/rescript-react-native/safe-area-context","commit_stats":{"total_commits":34,"total_committers":5,"mean_commits":6.8,"dds":"0.32352941176470584","last_synced_commit":"7a8b0cf4509abbc0e21675b02819971b2d776b9c"},"previous_names":["reason-react-native/safe-area-context"],"tags_count":10,"template":false,"template_full_name":"rescript-react-native/__template__","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rescript-react-native%2Fsafe-area-context","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rescript-react-native%2Fsafe-area-context/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rescript-react-native%2Fsafe-area-context/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rescript-react-native%2Fsafe-area-context/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rescript-react-native","download_url":"https://codeload.github.com/rescript-react-native/safe-area-context/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248610338,"owners_count":21132921,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-native","rescript","rescript-react","rescript-react-native"],"created_at":"2024-08-03T01:03:13.266Z","updated_at":"2025-04-13T12:08:49.250Z","avatar_url":"https://github.com/rescript-react-native.png","language":"ReScript","funding_links":["https://github.com/sponsors/MoOx"],"categories":["ReScript"],"sub_categories":[],"readme":"# `@rescript-react-native/safe-area-context`\n\n[![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)\n[![Version](https://img.shields.io/npm/v/@rescript-react-native/safe-area-context.svg)](https://www.npmjs.com/@rescript-react-native/safe-area-context)\n[![ReScript Forum](https://img.shields.io/discourse/posts?color=e6484f\u0026label=ReScript%20Forum\u0026server=https%3A%2F%2Fforum.rescript-lang.org)](https://forum.rescript-lang.org/)\n\n[ReScript](https://rescript-lang.org) bindings for\n[`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context).\n\nExposed as `ReactNativeSafeAreaContext` module.\n\n`@rescript-react-native/safe-area-context` X.y.\\* means it's compatible with\n`react-native-safe-area-context` X.y.\\*\n\n## Installation\n\nWhen\n[`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context)\nis properly installed \u0026 configured by following their installation instructions,\nyou can install the bindings:\n\n```console\nnpm install @rescript-react-native/safe-area-context\n# or\nyarn add @rescript-react-native/safe-area-context\n```\n\n`@rescript-react-native/safe-area-context` should be added to `bs-dependencies` in\nyour `rescript.json`:\n\n```diff\n{\n  //...\n  \"bs-dependencies\": [\n    \"@rescript/react\",\n    \"rescript-react-native\",\n    // ...\n+    \"@rescript-react-native/safe-area-context\"\n  ],\n  //...\n}\n```\n\n## Usage\n\n### Types\n\n#### `ReactNativeSafeAreaContext.insets`\n\n```rescript\ntype insets = {\n  top: float,\n  bottom: float,\n  left: float,\n  right: float,\n};\n```\n\n#### `ReactNativeSafeAreaContext.frame`\n\n```rescript\ntype frame = {\n  x: float,\n  y: float,\n  width: float,\n  height: float,\n};\n```\n\n#### `ReactNativeSafeAreaContext.metrics`\n\n```rescript\ntype metrics = {\n  insets,\n  frame,\n};\n```\n\n### Constants\n\n#### `initialWindowMetrics`\n\nSee \u003chttps://github.com/th3rdwave/react-native-safe-area-context#optimization\u003e\n\n### Methods\n\n#### `\u003cReactNativeSafeAreaContext.SafeAreaProvider\u003e`\n\n```rescript\nopen ReactNative;\nopen ReactNativeSafeAreaContext;\n\n@react.component\nlet make = () =\u003e {\n  \u003cSafeAreaProvider /*initialMetrics={...}*/\u003e\n    // your app...\n    \u003cView /\u003e\n  \u003cSafeAreaProvider\u003e;\n}\n```\n\nSee \u003chttps://github.com/th3rdwave/react-native-safe-area-context#web-ssr\u003e for\n`initialMetrics`.\n\n#### `ReactNativeSafeAreaContext.useSafeAreaInsets(): insets`\n\n```rescript\nopen ReactNative;\nopen ReactNativeSafeAreaContext;\n\n@react.component\nlet make = () =\u003e {\n  let insets = useSafeAreaInsets();\n  \u003cView style=Style.(style(~paddingTop=insets.top, ())) /\u003e;\n}\n```\n\n#### `ReactNativeSafeAreaContext.useSafeAreaFrame(): frame`\n\n```rescript\nopen ReactNative;\nopen ReactNativeSafeAreaContext;\n\n@react.component\nlet make = () =\u003e {\n  let frame = useSafeAreaFrame();\n  \u003cView style=Style.(style(~height=frame.height, ())) /\u003e;\n}\n```\n\n#### `\u003cReactNativeSafeAreaContext.SafeAreaInsetsContext.Consumer\u003e`\n\n```rescript\nopen ReactNative;\nopen ReactNativeSafeAreaContext;\n\n@react.component\nlet make = () =\u003e {\n  \u003cSafeAreaInsetsContext.Consumer\u003e\n    // your component, handy for classes\n    {insets =\u003e \u003cView style=Style.(style(~paddingTop=insets##top, ())) /\u003e}\n  \u003cSafeAreaInsetsContext.Consumer\u003e;\n}\n```\n\n#### `\u003cReactNativeSafeAreaContext.SafeAreaView\u003e`\n\n```rescript\nopen ReactNative;\nopen ReactNativeSafeAreaContext;\n\n@react.component\nlet make = () =\u003e {\n  \u003cSafeAreaView\u003e\n    \u003cView /\u003e\n  \u003cSafeAreaView\u003e;\n}\n```\n\n---\n\n## Changelog\n\nCheck the [changelog](./CHANGELOG.md) for more informations about recent\nreleases.\n\n---\n\n## Contribute\n\nRead the\n[contribution guidelines](https://github.com/rescript-react-native/.github/blob/master/CONTRIBUTING.md)\nbefore contributing.\n\n## Code of Conduct\n\nWe want this community to be friendly and respectful to each other. Please read\n[our full code of conduct](https://github.com/rescript-react-native/.github/blob/master/CODE_OF_CONDUCT.md)\nso that you can understand what actions will and will not be tolerated.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frescript-react-native%2Fsafe-area-context","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frescript-react-native%2Fsafe-area-context","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frescript-react-native%2Fsafe-area-context/lists"}