{"_id":"@anarock/react-native-screens","_rev":"7-9443672f895cec86cc23a917be1757d9","name":"@anarock/react-native-screens","dist-tags":{"latest":"1.0.0-alpha.14"},"versions":{"1.0.0-alpha.14":{"name":"@anarock/react-native-screens","version":"1.0.0-alpha.14","author":{"name":"Krzysztof Magiera","email":"krzys.magiera@gmail.com"},"license":"MIT","_id":"@anarock/react-native-screens@1.0.0-alpha.14","maintainers":[{"name":"developer_anarock","email":"developer@anarock.com"},{"name":"pranjal-jain","email":"pranjal.bitspilani@gmail.com"},{"name":"ritz078","email":"rkritesh078@gmail.com"}],"homepage":"https://github.com/kmagiera/react-native-screens#readme","bugs":{"url":"https://github.com/kmagiera/react-native-screens/issues"},"dist":{"shasum":"599ccb3e3c3a033af3d0d45274bda262ebffcfc4","tarball":"https://registry.npmjs.org/@anarock/react-native-screens/-/react-native-screens-1.0.0-alpha.14.tgz","fileCount":21,"integrity":"sha512-ckk+1D5cr9wiyN5CmyfX+JNqR7b72yg1CuYH+aSAe18RylxX0mfL38kwEwCT+9NNFFGR15F0yGnhaKZscIX0Jg==","signatures":[{"sig":"MEYCIQDHqvyP2ciRMmP8ESvi/xrj1mFtD8lhCFkxrl7U2QvFcwIhAJgAep9Kj32+7vIDGaHCMfsQswOwzkk1ASy/FEL64xNE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbvHjkCRA9TVsSAnZWagAAVFoP/1k/XiIhoA/fM8Yb2xWF\nRKndp6Z+t38Ie5eiWa8sbdO0bLF1mzz0xlcR/UpLxyld1NgFRwn4R0GQJLV7\nWonbOAEQP5zOipP113bNB9var2Ap8dnEsx5ukFeBOmh0Brm+q70xNEFivawb\n/M4UZPNfLEa80RJNpF3NVcpAScP2mzvHKktUxMwZJVPqukEoWpiX36rQ30ua\n5lniXXBPUElAPWQgRhQGYBsHk2gTWOXt2573pvzr6sshPml38pQV/T4xAiwH\ntrZta3wtZN1g7YSriIol18wIreHEhYoVQpgsVxUp4WvCDcxs/R7H3GVH7alV\n343lUMgkHr/HNelfXyqtPrweVFYFR8A97WqCjqxDOY829C9pyGDfyaUh7fz1\nwhccecWEzGGXRY1XWmZWuPKBtgyIbM0vRlRx8rOPE/PUYo+b6HBQ6UpnXeTR\nx45+JyP+ICkUr9kOIkPmemku0PJG+vNnLoZByElSS50RYSSASjfzJu+HACLa\nkAJ3ObIYOfjWCfSu2T9PVwO7RauFHcQkr2DI+fppf9wLv8kQDwBBpSIMu+r5\ng1+Xm+J3sar0qKvtaEAB/aRN9d7EQkqutq2l4BWTT9h2Tc3vgE7bS9dntC2q\nT+FRUPkuoA6qpGJ93WXAJczbz3NVR8FkCstFgD3HWOjMczHaSh4qIeXND4xc\n1BhJ\r\n=oDyB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/screens","types":"src/screens.d.ts","gitHead":"77b61a39464a33a761eea6cc9e3d47c829b49a4e","scripts":{"lint":"eslint --fix './src/**/*.js'","test":"npm run format && npm run lint && npm run test:unit","start":"node node_modules/react-native/local-cli/cli.js start","format":"prettier --write --list-different './src/**/*.js'","precommit":"lint-staged","test:unit":"jest"},"_npmUser":{"name":"pranjal-jain","email":"pranjal.bitspilani@gmail.com"},"repository":{"url":"git+https://github.com/kmagiera/react-native-screens.git","type":"git"},"_npmVersion":"5.5.1","description":"First incomplete navigation solution for your react-native app.","directories":{},"lint-staged":{"*.js":["prettier --write","git add"]},"_nodeVersion":"9.3.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"jest":"23.1.0","husky":"^0.14.3","react":"^16.0.0-alpha.12","eslint":"^4.19.1","prettier":"^1.13.4","react-dom":"^16.0.0-beta.5","babel-jest":"23.0.1","lint-staged":"^7.1.3","babel-eslint":"^8.2.3","react-native":"^0.56.0","jest-react-native":"18.0.0","eslint-plugin-jest":"^21.22.0","eslint-plugin-node":"^6.0.1","eslint-plugin-react":"^7.9.1","react-test-renderer":"^16.0.0-alpha.12","eslint-plugin-import":"^2.12.0","eslint-plugin-promise":"^3.8.0","eslint-config-prettier":"^2.9.0","eslint-config-standard":"^11.0.0","eslint-plugin-flowtype":"^2.50.0","eslint-plugin-standard":"^3.1.0","babel-preset-react-native":"4.0.0","eslint-plugin-react-native":"^3.2.1"},"peerDependencies":{"react":"*","react-native":"*"},"_npmOperationalInternal":{"tmp":"tmp/react-native-screens_1.0.0-alpha.14_1539078372165_0.9018679991557517","host":"s3://npm-registry-packages"}}},"time":{"created":"2018-10-09T09:46:12.004Z","modified":"2026-02-14T15:44:49.298Z","1.0.0-alpha.14":"2018-10-09T09:46:12.363Z"},"bugs":{"url":"https://github.com/kmagiera/react-native-screens/issues"},"author":{"name":"Krzysztof Magiera","email":"krzys.magiera@gmail.com"},"license":"MIT","homepage":"https://github.com/kmagiera/react-native-screens#readme","repository":{"url":"git+https://github.com/kmagiera/react-native-screens.git","type":"git"},"description":"First incomplete navigation solution for your react-native app.","maintainers":[{"email":"developer@anarock.com","name":"developer_anarock"},{"email":"zibbu.shirsh@gmail.com","name":"zhirzh"},{"email":"venkat.bennabhaktula@anarock.com","name":"venky-0710"}],"readme":"# react-native-screens\n\nThis 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](https://github.com/react-navigation/react-navigation).\n\n## How can I take advantage of that?\n\nScreens are already integrated with the React Native's most popular navigation library [react-navigation](https://github.com/react-navigation/react-navigation) and [Expo](https://expo.io).\nRead usage guide depending on if you are [using Expo](#usage-in-expo-with-react-navigation) or [not](#usage-with-react-navigation-without-expo).\n\n## Usage with [react-navigation](https://github.com/react-navigation/react-navigation) (without Expo)\n\nScreens support is built into [stack navigator](https://reactnavigation.org/docs/en/stack-navigator.html) starting from version [2.14.0](https://github.com/react-navigation/react-navigation/releases/tag/2.14.0) of [react-navigation](https://github.com/react-navigation/react-navigation). We plan on adding it to other navigators in near future.\n\nTo enable stack navigator to use screens instead of plain RN Views for rendering stack cards follow the steps below:\n\n1. Add this library as a depedency to your project:\n```\nyarn add react-native-screens\n```\n\n2. Link native modules this library ships with into your app:\n```\nreact-native link react-native-screens\n```\n\n > If you are not familiar with the concept of linking libraries [read on here](https://facebook.github.io/react-native/docs/linking-libraries-ios).\n\n3. Enable screens support before any of your navigation screen renders. Add the following code to your main application file (e.g. App.js):\n```js\nimport { useScreens } from 'react-native-screens';\n\nuseScreens();\n```\n\nNote that the above code need to execute before first render of a navigation screen. You can check Example's app [App.js](https://github.com/kmagiera/react-native-screens/blob/master/Example/App.js#L16) file as a reference.\n\n4. On Android change your main activity class to extend [`ReactFragmentActivity`](https://github.com/facebook/react-native/blob/0.57-stable/ReactAndroid/src/main/java/com/facebook/react/ReactFragmentActivity.java). The file you'll have to change is likely called `MainActivity.java` unless you customized it after creating your project:\n```diff\n-import com.facebook.react.ReactActivity;\n+import android.os.Bundle;\n+import com.facebook.react.ReactFragmentActivity;\n import com.facebook.react.ReactActivityDelegate;\n\n-public class MainActivity extends ReactActivity {\n+public class MainActivity extends ReactFragmentActivity {\n+\n+    @Override\n+    protected void onCreate(Bundle savedInstanceState) {\n+        super.onCreate(null);\n+    }\n\n     @Override\n     protected String getMainComponentName() {\n```\n\n5. Make sure that the version of [react-navigation](https://github.com/react-navigation/react-navigation) you are using is 2.14.0 or higher\n\n5. 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.\n\n## Usage in Expo with [react-navigation](https://github.com/react-navigation/react-navigation)\n\nScreens support is built into Expo [SDK 30](https://blog.expo.io/expo-sdk-30-0-0-is-now-available-e64d8b1db2a7) and react-navigation starting from [2.14.0](https://github.com/react-navigation/react-navigation/releases/tag/2.14.0). Make sure your app use these versions before you start.\n\n1. Add screens library as dependency to your project – you can skip this step when using snack as the dependency will be imported when you import it in one of the JS files\n```\nyarn add react-native-screens\n```\n\n2. Open your App.js file and add the following snippet somewhere near the top of the file (e.g. right after import statements):\n```\nimport { useScreens } from 'react-native-screens';\n\nuseScreens();\n```\n\n3. That's all 🎉 – enjoy faster navigation in your Expo app. Keep in mind screens are in pretty early phase so please report if you discover some issues.\n\n## Interop with [react-native-navigation](https://github.com/wix/react-native-navigation)\n\nReact-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.\n\n## Interop with other libraries\n\nThis library should work out of the box with all existing react-native libraries. If you expirience problems with interoperability please [report an issue](https://github.com/kmagiera/react-native-screens/issues).\n\n\n## Guide for navigation library authors\n\nIf you are building navigation library you may want to use react-native-screens to have a control which parts of the react component tree are attached to the native view hierarchy.\nTo do that react-native-screens provides you with two components documented below:\n\n### `<ScreenContainer/>`\n\nThis component is a container for one or more `Screen` components.\nIt does not accept other component types are direct children.\nThe role of container is to control which of its children screens should be attached to the view hierarchy.\nIt does that by monitoring `active` property of each of its children.\nIt it possible to have as many `active` children as you'd like but in order for the component to be the most effictent we should keep the number of active screens to the minimum.\nIn a case of stack navigator or tabs navigator we only want to have one active screen (the top most view on a stack or the selected tab).\nThen for the time of transitioning between views we may want to activate a second screen for the duration of transition, and then go back to just one active screen.\n\n### `<Screen/>`\n\nThis component is a container for views we want to display on a navigation screen.\nIt is designed to only be rendered as a direct child of `ScreenContainer`.\nIn addition to plain React Native [View props](http://facebook.github.io/react-native/docs/view#props) this component only accepts a single additional property called `active`.\nWhen `active` is set to `0`, the parent container will detach its views from the native view hierarchy.\nOtherwise the views will be attached as long as the parent container is attached too.\n\n### Example\n\n```js\n<ScreenContainer>\n  <Screen>{tab1}</Screen>\n  <Screen active={1}>{tab2}</Screen>\n  <Screen>{tab3}</Screen>\n</ScreenContainer>\n```\n\n## Guide for native component authors\n\nIf you are adding a new native component to be used from the React Native app, you may want it to respond to navigation lifecycle events.\n\nGood example is a map component that shows current user location. When component is on the top-most screen it should register for location updates and display users location on the map. But if we navigate away from a screen that has a map, e.g. by pushing new screen on top of it or if it is in one of a tabs and user just switched to the previous app, we may want to stop listening to location updates.\n\nIn order to achieve that we need to know at the native component level when our native view goes out of sight. With react-native-screens you can do that in the following way:\n\n### Navigation lifecycle on iOS\n\nIn order for your native view on iOS to be notified when its parent navigation container goes into background override `didMoveToWindow` method:\n\n```objective-c\n- (void)didMoveToWindow\n{\n  [super didMoveToWindow];\n  BOOL isVisible = self.superview && self.window;\n  if (isVisible) {\n    // navigation container this view belongs to became visible\n  } else {\n    // we are in a background\n  }\n}\n```\n\nYou can check our example app for a fully functional demo see [RNSSampleLifecycleAwareView.m](https://github.com/kmagiera/react-native-screens/blob/master./Example/ios/RNSSampleLifecycleAwareView.m) for more details.\n\n### Navigation lifecycle on Android\n\nOn Android you can use [LifecycleObserver](https://developer.android.com/reference/android/arch/lifecycle/LifecycleObserver) interface which is a part of Android compat library to make your view handle lifecycle events.\nCheck [LifecycleAwareView.java](https://github.com/kmagiera/react-native-screens/blob/master/Example/android/app/src/main/java/com/swmansion/rnscreens/example/LifecycleAwareView.java) from our example app for more details on that.\n\nIn addition to that you will need to register for receiving these updates. This can be done using [`LifecycleHelper.register`](https://github.com/kmagiera/react-native-screens/blob/master/android/src/main/java/com/swmansion/rnscreens/LifecycleHelper.java#L50).\nRemember to call [`LifecycleHelper.unregister`](https://github.com/kmagiera/react-native-screens/blob/master/android/src/main/java/com/swmansion/rnscreens/LifecycleHelper.java#L59) before the view is dropped.\nPlease refer to [SampleLifecycleAwareViewManager.java](https://github.com/kmagiera/react-native-screens/blob/master/Example/android/app/src/main/java/com/swmansion/rnscreens/example/SampleLifecycleAwareViewManager.java) from our example app to see what are the best ways of using the above methods.\n\n## License\n\nGesture handler library is licensed under [The MIT License](LICENSE).\n\n## Credits\n\nThis project is supported by amazing people from [Expo.io](https://expo.io) and [Software Mansion](https://swmansion.com)\n\n[![expo](https://avatars2.githubusercontent.com/u/12504344?v=3&s=100 \"Expo.io\")](https://expo.io)\n[![swm](https://avatars1.githubusercontent.com/u/6952717?v=3&s=100 \"Software Mansion\")](https://swmansion.com)\n","readmeFilename":"README.md"}