npmpackage.info

Gathering detailed insights and metrics for react-native-screens

Other packages similar to react-native-screens

@react-navigation/native-stack

7.1.9

Native stack navigator using react-native-screens

@exodus/react-navigation-native-stack

6.6.2-exodus.1

Native stack navigator using react-native-screens

@embrace-io/react-navigation

5.0.2

This is used to track React Native screens with the Embrace SDK

@react-native-embrace/react-navigation

0.2.14

This is used to track React Native screens with Embrace SDK

Gathering detailed insights and metrics for react-native-screens

react-native-screens

Native navigation primitives for your React Native app.

4.3.0

3,108

MIT

TypeScript

157,646,096 3.3

Installations

npm install react-native-screens

Score

61.8

Supply Chain

Quality

93.5

Maintenance

Vulnerability

95.6

License

Pull Requests

Open

49

Total

1,376

Closed

187

Merged

1,140

Issues

Open

74

Total

988

Closed

914

Releases

125

4.3.0

Published on 21 Nov 2024

4.2.0

Published on 19 Nov 2024

4.1.0

Published on 14 Nov 2024

4.0.0

Published on 06 Nov 2024

4.0.0-beta.16

Published on 28 Oct 2024

3.35.0

Published on 25 Oct 2024

View all 125 releases

Developer

software-mansion

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

22.6.0

NPM Version

10.8.2 Statistics

3,108 Stars

1,220 Commits

521 Forks

43 Watching

153 Branches

166 Contributors

Updated on 27 Nov 2024

Languages

TypeScript (40.9%)

Kotlin (21.24%)

Objective-C++ (21%)

C++ (6%)

JavaScript (5.32%)

Objective-C (2.32%)

Java (2.06%)

Ruby (0.44%)

C (0.4%)

CMake (0.28%)

Starlark (0.01%)

Shell (0.01%)

Total Downloads

Cumulative downloads

Total Downloads

157,646,096

Last day

-6.5%

234,073

Compared to previous day

Last week

1,268,098

Compared to previous week

Last month

12%

5,177,709

Compared to previous month

Last year

41.7%

49,486,072

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

react-freeze warn-once

Peer Dependencies

react react-native

Dev Dependencies

Versions

React Native Screens by Software Mansion

This project aims to expose native navigation container components to React Native. It is not designed to be used as a standalone library but rather as a dependency of a full-featured navigation library.

Fabric

To learn about how to use react-native-screens with Fabric architecture, head over to Fabric README. Instructions on how to run Fabric Example within this repo can be found in the FabricExample README.

Supported platforms

Installation

iOS

Installation on iOS is completely handled with auto-linking, if you have ensured pods are installed after adding this module, no other actions are necessary.

Android

On Android the View state is not persisted consistently across Activity restarts, which can lead to crashes in those cases. It is recommended to override the native Android method called on Activity restarts in your main Activity, to avoid these crashes.

For most people using an app built from the react-native template, that means editing MainActivity.java, likely located in android/app/src/main/java/<your package name>/MainActivity.java

You should add this code, which specifically discards any Activity state persisted during the Activity restart process, to avoid inconsistencies that lead to crashes. Please note that the override code should not be placed inside MainActivityDelegate, but rather directly in MainActivity.

Java

1import android.os.Bundle;
2
3public class MainActivity extends ReactActivity {
4
5    //...code
6
7    //react-native-screens override
8    @Override
9    protected void onCreate(Bundle savedInstanceState) {
10        super.onCreate(null);
11    }
12
13    public static class MainActivityDelegate extends ReactActivityDelegate {
14        //...code
15    }
16}

Kotlin

1import android.os.Bundle;
2
3class MainActivity: ReactActivity() {
4
5    //...code
6
7    //react-native-screens override
8    override fun onCreate(savedInstanceState: Bundle?) {
9      super.onCreate(null);
10    }
11}

For people that must handle cases like this, there is a more detailed discussion of the difficulties in a series of related comments.

Need to use a custom Kotlin version?

Since v3.6.0 react-native-screens has been rewritten with Kotlin. Kotlin version used in this library defaults to 1.4.10.

If you need to use a different Kotlin version, set kotlinVersion ext property in your project's android/build.gradle and the library will use this version accordingly:

buildscript {
    ext {
        ...
        kotlinVersion = "1.4.10"
    }
}

Disclaimer: react-native-screens requires Kotlin 1.3.50 or higher.

Windows

Installation on Windows should be completely handled with auto-linking when using React Native Windows 0.63+. For earlier versions, you must manually link the native module.

How can I take advantage of that?

Screens are already integrated with the React Native's most popular navigation library react-navigation and Expo.

Supported react-native version

Support for Paper

Paper is the default rendering system for React Native versions prior to 0.76.

library version	react-native version
3.33.0+	0.72.0+
3.32.0+	0.71.0+
3.30.0+	0.68.0+
3.14.0+	0.64.0+
3.0.0+	0.62.0+
2.0.0+	0.60.0+

Support for Fabric

Fabric is React Native's new rendering system.

Here's a table with summary of supported react-native versions when Fabric is turned on.

library version	react-native version
3.35.0+	0.76.0+
3.33.0+	0.75.0+
3.32.0+	0.74.0+
3.28.0+	0.73.0+
3.21.0+	0.72.0+
3.19.0+	0.71.0+
3.18.0+	0.70.0+
3.14.0+	0.69.0+

Usage with react-navigation

[!CAUTION] JS API of the native stack has been moved from react-native-screens/native-stack to @react-navigation/native-stack since version v6. Currently, native stack v5 (imported from react-native-screens/native-stack) is deprecated and will be removed in the upcoming minor release. react-native-screens v4 will support only @react-navigation/native-stack v7.

Screens support is built into react-navigation starting from version 2.14.0 for all the different navigator types (stack, tab, drawer, etc).

To configure react-navigation to use screens instead of plain RN Views for rendering screen views, simply add this library as a dependency to your project:

1# bare React Native project
2yarn add react-native-screens
3
4# if you use Expo managed workflow
5npx expo install react-native-screens

Just make sure that the version of react-navigation you are using is 2.14.0 or higher.

You are all set 🎉 – when screens are enabled in your application code react-navigation will automatically use them instead of relying on plain React Native Views.

Experimental support for `react-freeze`

You have to use React Native 0.68 or higher, react-navigation 5.x or 6.x and react-native-screens >= v3.9.0

Since v3.9.0, react-native-screens comes with experimental support for react-freeze. It uses the React Suspense mechanism to prevent parts of the React component tree from rendering, while keeping its state untouched.

To benefit from this feature, enable it in your entry file (e.g. App.js) with this snippet:

1import { enableFreeze } from 'react-native-screens';
2
3enableFreeze(true);

Want to know more? Check out react-freeze README

Found a bug? File an issue here or directly in react-freeze repository.

Disabling `react-native-screens`

If, for whatever reason, you'd like to disable native screens support and use plain React Native Views add the following code in your entry file (e.g. App.js):

1import { enableScreens } from 'react-native-screens';
2
3enableScreens(false);

You can also disable the usage of native screens per navigator with detachInactiveScreens.

Using `createNativeStackNavigator` with React Navigation

To take advantage of the native stack navigator primitive for React Navigation that leverages UINavigationController on iOS and Fragment on Android, please refer:

for React Navigation >= v6 to the Native Stack Navigator part of React Navigation documentation

`FullWindowOverlay`

Native iOS component for rendering views straight under the Window. Based on RCTPerfMonitor. You should treat it as a wrapper, providing full-screen, transparent view which receives no props and should ideally render one child View, being the root of its view hierarchy. For the example usage, see https://github.com/software-mansion/react-native-screens/blob/main/apps/src/tests/Test1096.tsx

Interop with react-native-navigation

React-native-navigation library already uses native containers for rendering navigation scenes so wrapping these scenes with <ScreenContainer> or <Screen> component does not provide any benefits. Yet if you would like to build a component that uses screens primitives under the hood (for example a view pager component) it is safe to use <ScreenContainer> and <Screen> components for that as these work out of the box when rendered on react-native-navigation scenes.

Interop with other libraries

This library should work out of the box with all existing react-native libraries. If you experience problems with interoperability please report an issue.

Guide for navigation library authors

If you are building a navigation library you may want to use react-native-screens to have control over which parts of the React component tree are attached to the native view hierarchy. To do that, react-native-screens provides you with the components documented here.

Common problems

Problems with header on iOS

Solution

Use ScrollView with prop contentInsetAdjustmentBehavior=“automatic” as a main container of the screen and set headerTranslucent: true in screen options.

Problem	Solution
SVG component becomes transparent when goBack	related PRs
Memory leak while moving from one screen to another in the same stack	explanation
LargeHeader stays small after pop/goBack/swipe gesture on iOS 14+	potential fix
`onScroll` and `onMomentumScrollEnd` of previous screen triggered in bottom tabs	explanation

Contributing

There are many ways to contribute to this project. See CONTRIBUTING guide for more information. Thank you for your interest in contributing!

License

React native screens library is licensed under The MIT License.

Credits

This project has been build and is maintained thanks to the support from Shopify, Expo.io, and Software Mansion.

React Native Screens is created by Software Mansion

Since 2012 Software Mansion is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

6

Binary-Artifacts

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

3

Code-Review

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

0

CII-Best-Practices

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

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-build-test-fabric.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/android-build-test-fabric.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-build-test-fabric.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/android-build-test-fabric.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-build-test-fabric.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/android-build-test-fabric.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-build-test.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/android-build-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-build-test.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/android-build-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-build-test.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/android-build-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-e2e-test.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/android-e2e-test.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/android-e2e-test.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/android-e2e-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-e2e-test.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/android-e2e-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-e2e-test.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/android-e2e-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-e2e-test.yml:68: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/android-e2e-test.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/android-e2e-test.yml:76: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/android-e2e-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/android-e2e-test.yml:88: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/android-e2e-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-archs-consistency.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/check-archs-consistency.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-archs-consistency.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/check-archs-consistency.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/close-when-stale.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/close-when-stale.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/close-when-stale.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/close-when-stale.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs-check.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/docs-check.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/docs-check.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/docs-check.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ios-build-test-fabric.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/ios-build-test-fabric.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ios-build-test-fabric.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/ios-build-test-fabric.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ios-build-test-fabric.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/ios-build-test-fabric.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ios-build-test.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/ios-build-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ios-build-test.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/ios-build-test.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ios-build-test.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/ios-build-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ios-e2e-test.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/ios-e2e-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ios-e2e-test.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/ios-e2e-test.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ios-e2e-test.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/ios-e2e-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ios-e2e-test.yml:62: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/ios-e2e-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/needs-more-info.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/needs-more-info.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/needs-more-info.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/needs-more-info.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/needs-repro.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/needs-repro.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/needs-repro.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/needs-repro.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/platforms.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/platforms.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/platforms.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/platforms.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tv-os-build-test.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/tv-os-build-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tv-os-build-test.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/software-mansion/react-native-screens/tv-os-build-test.yml/main?enable=pin
Info: 0 out of 33 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 6 third-party GitHubAction dependencies pinned

0

Branch-Protection

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

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.3

/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

Other packages similar to react-native-screens

Other packages similar to react-native-screens

react-native-screens

Installations

Score

Pull Requests

49

1,376

187

1,140

Issues

74

988

914

Releases

Developer

Developer Guide

CommonJS

Yes

22.6.0

10.8.2

Statistics

Languages

Total Downloads

157,646,096

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Fabric

Supported platforms

Installation

iOS

Android

Windows

How can I take advantage of that?

Supported react-native version

Support for Paper

Support for Fabric

Usage with react-navigation

Experimental support for react-freeze

Disabling react-native-screens

Using createNativeStackNavigator with React Navigation

FullWindowOverlay

Interop with react-native-navigation

Interop with other libraries

Guide for navigation library authors

Common problems

Problems with header on iOS

Solution

Other problems

Contributing

License

Credits

React Native Screens is created by Software Mansion

10

10

10

6

3

0

0

0

0

0

0

0

0

3.3

/10

Experimental support for `react-freeze`

Disabling `react-native-screens`

Using `createNativeStackNavigator` with React Navigation

`FullWindowOverlay`