npmpackage.info

Gathering detailed insights and metrics for react-native-safe-area

react-native-safe-area

React Native module to retrieve safe area insets for iOS 11 or later.

0.5.1

113

MIT

JavaScript

1,837,305 1.9

Installations

npm install react-native-safe-area

Score

Supply Chain

Quality

75.9

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

16

Total

29

Closed

6

Merged

7

Issues

Open

7

Total

11

Closed

4

Releases

Add withSafeArea.

v0.3.0

Published on 16 May 2018

Support safeAreaInsetsDidChange for root view.

v0.2.0

Published on 06 Oct 2017

View all 2 releases

Developer

miyabi

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

8.12.0

NPM Version

6.4.1 Statistics

113 Stars

82 Commits

23 Forks

3 Watching

16 Branches

8 Contributors

Updated on 17 Jan 2023

Languages

JavaScript (61.55%)

Objective-C (34.42%)

Ruby (4.04%)

Total Downloads

Cumulative downloads

Total Downloads

1,837,305

Last day

58.6%

1,784

Compared to previous day

Last week

4.5%

6,870

Compared to previous week

Last month

37.9%

27,064

Compared to previous month

Last year

-18.6%

296,712

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@types/react

Dev Dependencies

babel-eslint babel-preset-flow babel-preset-react-native eslint eslint-plugin-flowtype eslint-plugin-react flow-bin react react-native

Versions

react-native-safe-area

React Native module to handle safe area insets natively for iOS 11 or later.

rnsf

Installation

1. Install library from `npm`

1npm install --save react-native-safe-area

2. Link native code

You can link native code in the way you prefer:

CocoaPods

Add line to your project target section in your Podfile:

1target 'YourProjectTarget' do
2
3+   pod 'react-native-safe-area', path: '../node_modules/react-native-safe-area'
4
5end

If you received error jest-haste-map: Haste module naming collision: Duplicate module name: react-native, add lines below to your Podfile and reinstall pods.

1target 'YourProjectTarget' do
2
3+   rn_path = '../node_modules/react-native'
4+   pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
5+   pod 'React', path: rn_path
6
7  pod 'react-native-safe-area', path: '../node_modules/react-native-safe-area'
8
9end
10
11+ post_install do |installer|
12+   installer.pods_project.targets.each do |target|
13+     if target.name == "React"
14+       target.remove_from_project
15+     end
16+   end
17+ end

react-native link

Run command below:

1react-native link react-native-safe-area

Usage

Work with views

Use withSafeArea to apply safe area insets to views automatically.

1import { withSafeArea } from 'react-native-safe-area'

withSafeArea(component[, applyTo][, direction])

A higher-order component which applies safe area insets automatically to the wrapped component.

component : Component - Wrapped component.
applyTo : string - (Optional) Specify property to apply safe area insets.
- margin - style.margin. (Default)
- padding - style.padding.
- absolutePosition - style.top, style.bottom, style.left and style.right.
- contentInset - contentInset and contentOffset for scroll views.
direction : string - (Optional) Specify direction to apply safe area insets.
- top - Apply to top.
- bottom - Apply to bottom.
- left - Apply to left.
- right - Apply to right.
- topAndLeft - top + left.
- topAndRight - top + right.
- bottomAndLeft - bottom + left.
- bottomAndRight - bottom + right.
- horizontal - left + right.
- horizontalAndTop - horizontal + top.
- horizontalAndBottom - horizontal + bottom.
- vertical - top + bottom.
- verticalAndLeft - vertical + left.
- verticalAndRight - vertical + right.
- all - horizontal + vertical. (Default)

Simple view example

1const SafeAreaView = withSafeArea(View, 'margin', 'all')
2
3class App extends Component<{}> {
4  render() {
5    return (
6      <SafeAreaView>
7        <View />
8      </SafeAreaView>
9    )
10  }
11}

ScrollView example

1const SafeAreaScrollView = withSafeArea(ScrollView, 'contentInset', 'vertical')
2
3class App extends Component<{}> {
4  render() {
5    return (
6      <SafeAreaScrollView>
7        <View />
8      </SafeAreaScrollView>
9    )
10  }
11}

You can also apply safe area insets to FlatList and SectionList.

Enhanced component's APIs

get `wrappedRef` : ref

Returns wrapped component's ref.

get `currentSafeAreaInsets` : SafeAreaInsets

Returns current safe area insets.

Handle safe area manually

1import SafeArea from 'react-native-safe-area'

If you want to use SafeAreaInsets type, you can import it like below:

1import SafeArea, { type SafeAreaInsets } from 'react-native-safe-area'

Retrieve safe area insets for root view

1SafeArea.getSafeAreaInsetsForRootView()
2  .then((result) => {
3    console.log(result)
4    // { safeAreaInsets: { top: 44, left: 0, bottom: 34, right: 0 } }
5  })

Handle safe area insets changed event

1class App extends Component<{}> {
2  // To keep the context of 'this'
3  onSafeAreaInsetsForRootViewChange = this.onSafeAreaInsetsForRootViewChange.bind(this)
4
5  componentDidMount() {
6    // Add event listener
7    SafeArea.addEventListener('safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsForRootViewChange)
8  }
9
10  componentWillUnmount() {
11    // Remove event listener
12    SafeArea.removeEventListener('safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsForRootViewChange)
13  }
14
15  onSafeAreaInsetsForRootViewChange(result) {
16    // Called every time that safe area insets changed
17    console.log(result)
18    // { safeAreaInsets: { top: 0, left: 44, bottom: 21, right: 44 } }
19  }
20}

Examples

A simple example project is here.

No vulnerabilities found.

10

License

Determines if the project has defined a license.

9

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

92 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-j4mr-9xw3-c9jx
Warn: Project is vulnerable to: GHSA-7p89-p6hx-q4fw
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-rq8g-5pc5-wrhr
Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-hr2v-3952-633q
Warn: Project is vulnerable to: GHSA-h6ch-v84p-w6p9
Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
Warn: Project is vulnerable to: GHSA-9qj9-36jm-prpv
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c
Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6
Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
Warn: Project is vulnerable to: GHSA-f9cm-qmx5-m98h
Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-wrvr-8mpx-r7pp
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-gwg9-rgvj-4h5j
Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f
Warn: Project is vulnerable to: GHSA-7mc5-chhp-fmc3
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
Warn: Project is vulnerable to: GHSA-6394-6h9h-cfjg
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877
Warn: Project is vulnerable to: GHSA-gqgv-6jq5-jjj9
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4
Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-gff7-g5r8-mg8m
Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3
Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7
Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-5v72-xg48-5rpm
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

1.9

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

react-native-safe-area

Installations

Score

Pull Requests

16

29

6

7

Issues

7

11

4

Releases

Developer

miyabi

Developer Guide

CommonJS

Yes

8.12.0

6.4.1

Statistics

Languages

Total Downloads

1,837,305

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

react-native-safe-area

Installation

1. Install library from npm

2. Link native code

CocoaPods

react-native link

Usage

Work with views

withSafeArea(component[, applyTo][, direction])

Simple view example

ScrollView example

Enhanced component's APIs

get wrappedRef : ref

get currentSafeAreaInsets : SafeAreaInsets

Handle safe area manually

Retrieve safe area insets for root view

Handle safe area insets changed event

Examples

10

9

2

0

0

0

0

0

0

0

1.9

/10

1. Install library from `npm`

get `wrappedRef` : ref

get `currentSafeAreaInsets` : SafeAreaInsets