{"_id":"react-navigation-shared-element","_rev":"19-bf2f0722f6b6ee2748cd374a4a0840a7","name":"react-navigation-shared-element","dist-tags":{"latest":"3.1.3","next":"5.0.0-alpha1","prerelease":"3.1.0"},"versions":{"0.5.0":{"name":"react-navigation-shared-element","version":"0.5.0","description":"Experimental react-native-shared-element bindings for React Navigation","main":"lib/commonjs/index.js","module":"lib/module/index.js","react-native":"lib/module/index.js","types":"lib/typescript/index.d.ts","sideEffects":false,"scripts":{"test":"jest","lint":"eslint --ext .js,.ts,.tsx .","typescript":"tsc --noEmit","prepare":"bob build","release":"release-it","example":"yarn --cwd example","bootstrap":"yarn example && yarn","version":"conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"keywords":["react-native-component","react-component","react-native","ios","android","shared-element"],"repository":{"type":"git","url":"git+https://github.com/IjzerenHein/react-navigation-shared-element.git"},"author":"","license":"MIT","bugs":{"url":"https://github.com/IjzerenHein/react-navigation-shared-element/issues"},"homepage":"https://github.com/IjzerenHein/react-navigation-shared-element#readme","dependencies":{"hoist-non-react-statics":"^3.3.0"},"devDependencies":{"@babel/core":"^7.5.5","@commitlint/config-conventional":"^8.1.0","@react-native-community/bob":"^0.7.0","@react-native-community/eslint-config":"^0.0.5","@react-navigation/core":"^3.5.0","@react-navigation/native":"^3.6.2","@release-it/conventional-changelog":"^1.1.0","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.18","@types/react":"^16.9.2","@types/react-native":"^0.60.8","@types/react-test-renderer":"^16.9.0","commitlint":"^8.1.0","conventional-changelog-cli":"^2.0.23","eslint":"^6.2.2","eslint-config-prettier":"^6.1.0","eslint-plugin-prettier":"^3.1.0","eslint-plugin-react":"^7.14.2","eslint-plugin-react-native":"^3.7.0","husky":"^3.0.4","jest":"^24.9.0","prettier":"^1.18.2","react":"16.9.0","react-dom":"16.9.0","react-native":"~0.60.5","react-native-shared-element":"^0.5.1","react-test-renderer":"16.9.0","release-it":"^12.3.6","scheduler":"^0.15.0","typescript":"^3.5.3"},"peerDependencies":{"@react-navigation/core":"^3.0.0","react":"*","react-native":"*","react-native-shared-element":"*"},"jest":{"preset":"react-native","testEnvironment":"node","setupFiles":["/jest-setup.js"],"coveragePathIgnorePatterns":["jest-setup.js"],"modulePathIgnorePatterns":["/example/","/lib/"],"transformIgnorePatterns":["node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator|@react-navigation/core|@react-navigation/native)"],"testRegex":"/__tests__/.*\\.(test|spec)\\.(js|tsx?)$","transform":{"^.+\\.(js|ts|tsx)$":"babel-jest"}},"prettier":{"trailingComma":"es5","singleQuote":true},"husky":{"hooks":{"pre-commit2":"yarn typescript && yarn lint && yarn test","commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"@react-native-community/bob":{"source":"src","output":"lib","targets":["commonjs","module","typescript"]},"gitHead":"8012866120d2bf526d3b0439fc53d723d77e8351","_id":"react-navigation-shared-element@0.5.0","_nodeVersion":"8.16.0","_npmVersion":"6.11.2","dist":{"integrity":"sha512-RNIxqEGFYTKTR65FGHz+wP6DrdynbQHooy48irQBjygzPYgr1qBw48zJu6UV/STmFy1Iu/279JPZ+dm+hH36lg==","shasum":"b384dbf323dc2491c3e58b3aae1bb82054096ae0","tarball":"https://registry.npmjs.org/react-navigation-shared-element/-/react-navigation-shared-element-0.5.0.tgz","fileCount":76,"unpackedSize":193727,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcldcCRA9TVsSAnZWagAACTUQAJm7V4MP1yeT0kBXCBaA\nuCKoEGTKH1Mt/jtpXbsUPjalapen4ZVlaKpfHH6o9bOXBh5GROF03BxvqIsx\nE14/i4tnTLdDh7tqTXfq4m7Jb4KC453qjOV1AXpL+diHx249THUx1Y3efJBs\nzEUru5t2gxpopGT9WbhR/OW1aW2r/mbgbV4T87oh6Dtu3JYG2Ex56fjuNpuS\nAcmg3AGBCH/jo353LsiWqpfDXVl3AXO/+n7vpPe81f9+EidEs52m1kyzc3Td\n7Z2BAcA+wPEQF1AnrL/Mko1asSiE9TxOYrmXeOD9G2a5XYYPq4NOPUccYIv2\n+JjO9jMDYagTg++GmHAmrR2slmNQhwLtCixgjAqEkosJOfwb82Cg88sN4vME\nLy6MzqdtY9wy5YgqMJEmJi5Ex8Vi9q9WKErwfs9RBqjt23TMMuV66JBZ4cxb\nk6wmAI/cFVzSG3N+jzEu1SowCdQtmycz0DoMWY1CmgT+ztouUrO/KRYma+Mg\nqhcAy5FB7r/+saKjJDpceeGfUFuFUTPqZH++iz8YEF6JBn7oeA2b5TeecDeb\naUfgUvI/DYfIhgU2qqAgWBheGJlxXS2Fxg+x89ocVzgUM2VQUOJa4hgoTeRz\neh2AJ3Gk288u52ynmTDJEJubsUmNyAGmL50HC84jQwC5zZ+DIrxGxGGK1/5E\noBj7\r\n=9a0Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfiFuvUVwXOTE7iHihjVSeuHCKkbHwoJQxBZ6NQcIDvAIgJlH6X8JAaZTPNgT55z8qldk3Q026Pg2tV3axeCgLr1g="}]},"maintainers":[{"name":"ijzerenhein","email":"hrutjes@gmail.com"}],"_npmUser":{"name":"ijzerenhein","email":"hrutjes@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-navigation-shared-element_0.5.0_1567774555582_0.8774450069495072"},"_hasShrinkwrap":false},"1.0.0":{"name":"react-navigation-shared-element","version":"1.0.0","description":"Experimental react-native-shared-element bindings for React Navigation","main":"lib/commonjs/index.js","module":"lib/module/index.js","react-native":"lib/module/index.js","types":"lib/typescript/index.d.ts","sideEffects":false,"scripts":{"test":"jest","lint":"eslint --ext .js,.ts,.tsx .","typescript":"tsc --noEmit","prepare":"bob build","release":"release-it","example":"yarn --cwd example","bootstrap":"yarn example && yarn","version":"conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"keywords":["react-native-component","react-component","react-native","ios","android","shared-element"],"repository":{"type":"git","url":"git+https://github.com/IjzerenHein/react-navigation-shared-element.git"},"author":"","license":"MIT","bugs":{"url":"https://github.com/IjzerenHein/react-navigation-shared-element/issues"},"homepage":"https://github.com/IjzerenHein/react-navigation-shared-element#readme","dependencies":{"hoist-non-react-statics":"^3.3.1"},"devDependencies":{"@babel/core":"^7.5.5","@commitlint/config-conventional":"^8.1.0","@react-native-community/bob":"^0.8.0","@react-native-community/eslint-config":"^0.0.6","@react-navigation/core":"^3.5.1","@react-navigation/native":"^3.6.2","@release-it/conventional-changelog":"^1.1.0","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.9.0","@types/react":"^16.9.2","@types/react-native":"^0.60.8","@types/react-test-renderer":"^16.9.0","commitlint":"^8.3.5","conventional-changelog-cli":"^2.0.31","eslint":"^6.2.2","eslint-config-prettier":"^6.1.0","eslint-plugin-prettier":"^3.1.0","eslint-plugin-react":"^7.14.2","eslint-plugin-react-native":"^3.7.0","husky":"^4.0.10","jest":"^24.9.0","prettier":"^1.18.2","react":"16.9.0","react-dom":"16.9.0","react-native":"^0.61.5","react-native-shared-element":"^0.5.5","react-test-renderer":"16.9.0","release-it":"^12.4.3","scheduler":"^0.18.0","typescript":"^3.7.4"},"peerDependencies":{"@react-navigation/core":"^3.0.0","react":"*","react-native":"*","react-native-shared-element":"*"},"jest":{"preset":"react-native","testEnvironment":"node","setupFiles":["/jest-setup.js"],"coveragePathIgnorePatterns":["jest-setup.js"],"modulePathIgnorePatterns":["/example/","/lib/"],"transformIgnorePatterns":["node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator|@react-navigation/core|@react-navigation/native)"],"testRegex":"/__tests__/.*\\.(test|spec)\\.(js|tsx?)$","transform":{"^.+\\.(js|ts|tsx)$":"babel-jest"}},"prettier":{"trailingComma":"es5","singleQuote":true},"husky":{"hooks":{"pre-commit2":"yarn typescript && yarn lint && yarn test","commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"@react-native-community/bob":{"source":"src","output":"lib","targets":["commonjs","module","typescript"]},"gitHead":"efab60db02faf1f26e6b5eab0e8dd5cfd7168601","_id":"react-navigation-shared-element@1.0.0","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-2Cw+2X25+hdrWyhuQ/L1ZAjwz63ZlAM6hDaiPEYQ92T2+izhlDZyxDFoovOe0twYc428gfHgRKOWF8DdfsZUDg==","shasum":"6c521dd88a5909e3be76b9ec760f12d6455f1d3f","tarball":"https://registry.npmjs.org/react-navigation-shared-element/-/react-navigation-shared-element-1.0.0.tgz","fileCount":76,"unpackedSize":194013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeLZ1FCRA9TVsSAnZWagAAvP4QAJVvJ+xHr6zIziPyn7JM\nQHM+4kpW6PDf1hNDoZvvQiFsJ8q0t5iQuoDvYthDCJe3T+F1gjwikLEKEKwz\n1Cbq8upVKw5FtUXWvhOB8stSNQoXnow8cB8gZhx3qqV2pvBKy1NLMjXKcWMN\n6Cqu3dm+CjWWEq0r/0mWQj70gQsfNRnqx344o8qa8Y9dQdvxM/Lc0GSLeN5S\niyEQMxT30/sxyaiOUxNYb79b1mMQ+0bs/XzQIxHjysA929CIZ9b83a8LdoUa\n40MUugz3bvJHnD1CHTOyIX22CAy1V3XzMNbq+kHUbtLKhjaml5dzt3Z5Lmly\nl9Ex30zJLFIobQBwxdZE45N8WHhC7LyNpZztFAdvKiXhn0GPGqA4ys9JyheY\nm3gHcMiiOo0uuzrfhFkPWG5u2SghcC1FGTLSewzcF2G6uC/lelktYpQh8omf\nM+hlFKgJrX3/KgK7J1IMvsnXl8WBJghUBGiW/j6ISIX84VcgkgwPVB2C15Ll\nYcB+2Xwlhp2I2CCEgEj6UqORRec8L3kd0rz29kGC/UiZ37DYNSs/DP3Pc17v\nqA0Q6oT8nnl0CQmZEIuo3Rv2gQl556tO8880ukTYta3LxSgXYQvPPD66uCqT\nxT/erJR6ebMz+LlQgLFK+8GvcwcIAZynyZ/8MpuvSG5F0zlrYCYCjpDfNDIy\nWD/3\r\n=A2Fi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHPqZngXWB4RjXqX6YFKmFg2FWyyv1YziLrdOtVYxSNjAiAck4hM5XLAuTNPhQnHC4XZ8sAnyV0X58KWZ0WasOh0aw=="}]},"maintainers":[{"name":"ijzerenhein","email":"hrutjes@gmail.com"}],"_npmUser":{"name":"ijzerenhein","email":"hrutjes@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-navigation-shared-element_1.0.0_1580047684541_0.8259321185245125"},"_hasShrinkwrap":false},"2.0.0-alpha0":{"name":"react-navigation-shared-element","version":"2.0.0-alpha0","description":"Experimental react-native-shared-element bindings for React Navigation","main":"lib/commonjs/index.js","module":"lib/module/index.js","react-native":"lib/module/index.js","types":"lib/typescript/index.d.ts","sideEffects":false,"scripts":{"test":"jest","lint":"eslint --ext .js,.ts,.tsx .","typescript":"tsc --noEmit","prepare":"bob build","release":"release-it","example":"yarn --cwd example","bootstrap":"yarn example && yarn","version":"conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"keywords":["react-native-component","react-component","react-native","ios","android","shared-element"],"repository":{"type":"git","url":"git+https://github.com/IjzerenHein/react-navigation-shared-element.git"},"author":"","license":"MIT","bugs":{"url":"https://github.com/IjzerenHein/react-navigation-shared-element/issues"},"homepage":"https://github.com/IjzerenHein/react-navigation-shared-element#readme","dependencies":{"hoist-non-react-statics":"^3.3.1"},"devDependencies":{"@babel/core":"^7.5.5","@commitlint/config-conventional":"^8.1.0","@react-native-community/bob":"^0.8.0","@react-native-community/eslint-config":"^0.0.6","@react-navigation/core":"^3.5.1","@react-navigation/native":"^3.6.2","@release-it/conventional-changelog":"^1.1.0","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.9.0","@types/react":"^16.9.2","@types/react-native":"^0.60.8","@types/react-test-renderer":"^16.9.0","commitlint":"^8.3.5","conventional-changelog-cli":"^2.0.31","eslint":"^6.2.2","eslint-config-prettier":"^6.1.0","eslint-plugin-prettier":"^3.1.0","eslint-plugin-react":"^7.14.2","eslint-plugin-react-native":"^3.7.0","husky":"^4.0.10","jest":"^24.9.0","prettier":"^1.18.2","react":"16.9.0","react-dom":"16.9.0","react-native":"^0.61.5","react-native-shared-element":"^0.5.5","react-navigation-stack":"^2","react-test-renderer":"16.9.0","release-it":"^12.4.3","scheduler":"^0.18.0","typescript":"^3.7.4"},"peerDependencies":{"@react-navigation/core":"^3.0.0","react":"*","react-native":"*","react-native-shared-element":"*","react-navigation-stack":"^2"},"jest":{"preset":"react-native","testEnvironment":"node","setupFiles":["/jest-setup.js"],"coveragePathIgnorePatterns":["jest-setup.js"],"modulePathIgnorePatterns":["/example/","/lib/"],"transformIgnorePatterns":["node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator|@react-navigation/core|@react-navigation/native)"],"testRegex":"/__tests__/.*\\.(test|spec)\\.(js|tsx?)$","transform":{"^.+\\.(js|ts|tsx)$":"babel-jest"}},"prettier":{"trailingComma":"es5","singleQuote":true},"husky":{"hooks":{"pre-commit2":"yarn typescript && yarn lint && yarn test","commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"@react-native-community/bob":{"source":"src","output":"lib","targets":["commonjs","module","typescript"]},"readme":"# React Navigation Shared Element \n\nReact Navigation bindings for [react-native-shared-element](https://github.com/IjzerenHein/react-native-shared-element) 💫\n\n## Current status\n\nThis library currently only supports `react-navigation@4` and `react-navigation-stack@1`.\nThe master branch is being rewritten to support `react-navigation-stack@2` and `react-navigation@5`. Master contains a somewhat working version of stack@2, while navigation@5 is still further away.\n\n[Check out this page if you are interesting in testing the v2 branch](./README_v2.md).\n\n\n## Index \n\n- [Current status](#current-status)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Documentation](#documentation)\n - [createSharedElementStackNavigator](#createsharedelementstacknavigator)\n - [SharedElement](#sharedelement)\n - [sharedElements config](#sharedelements-config)\n- [Demo App](#demo-app)\n- [License](#license)\n\n## Installation\n\nOpen a Terminal in your project's folder and run,\n\n```sh\n$ yarn add react-navigation-shared-element react-native-shared-element\n```\n\nEnure that [react-native-shared-element](https://github.com/IjzerenHein/react-native-shared-element) is also linked into your project.\n\nFinally, make sure that the compatible react-navigation dependencies are installed:\n\n```sh\n$ yarn add react-navigation@4 react-navigation-stack@1\n```\n\n## Usage\n\nIn order to enable shared element transitions, the following steps need to be performed\n\n- Wrap stack-navigator with `createSharedElementStackNavigator`\n- Wrap your component with `` and provide a unique `id`\n- Define a static `sharedElements` config on the Screen that you want to animate\n\n```jsx\nimport { createStackNavigator } from 'react-navigation';\nimport { createSharedElementStackNavigator } from 'react-navigation-shared-element';\n\nconst stackNavigator = createSharedElementStackNavigator(\n createStackNavigator,\n {\n List: ListScreen,\n Detail: DetailScreen,\n },\n {\n initialRouteName: 'List',\n }\n);\n\nconst AppContainer = createAppContainer(stackNavigator);\n```\n\n```jsx\n// ListScreen.js\nimport { SharedElement } from 'react-navigation-shared-element';\n\nclass ListScreen extends React.Component {\n renderItem(item) {\n const { navigation } = this.props;\n return (\n navigation.push('Detail', { item })}>\n \n \n \n \n );\n }\n}\n```\n\n```jsx\n// DetailScreen.js\nconst DetailScreen = (props) => {\n const item = props.navigation.getParam('item');\n return (\n \n \n \n );\n};\n\nDetailScreen.sharedElements = (navigation, otherNavigation, showing) => {\n const item = navigation.getParam('item');\n return [`item.${item.id}.photo`];\n};\n```\n\n## Documentation\n\n### createSharedElementStackNavigator\n\nThe `createSharedElementStackNavigator` function wraps an existing stack-navigator and enables shared element transitions for it.\n\nIt performs the following actions\n\n- Creates a top-level renderer to host the shared element transitions\n- Wraps each route with a shared element scene\n- Detects route changes and trigger shared element transitions\n\n**Arguments**\n\n| Argument | Type | Description |\n| ---------------------- | ---------- | ------------------------------------ |\n| `createStackNavigator` | `function` | The stack-navigator function to wrap |\n| `routeConfig` | `object` | Routes-config |\n| `stackNavigatorConfig` | `object` | Stack navigator config |\n\n### SharedElement\n\nThe `` component accepts a single child and a _\"shared\"_ id. The child is the element that is made available for doing shared element transitions. It can be any component, like a ``, `` or ``. In case the wrapped view is an ``, special handling is performed to deal with image loading and resizing.\n\nThis component is synonymous for the `` component as defined in `react-native-shared-element`. Instead of a `node` it uses an `id` to create a higher lever API which automatically ties in with the scenes created by `createSharedElementStackNavigator`.\n\n**Props**\n\n| Property | Type | Description |\n| --------------- | --------- | ------------------------------------------------------------------------------------ |\n| `children` | `element` | A single child component, which must map to a real view in the native view hierarchy |\n| `id` | `string` | Unique id of the shared element |\n| `View props...` | | Other props supported by View |\n\n### sharedElements config\n\nIn order to trigger shared element transitions between screens, a static `sharedElements` config needs to be defined on one of the two screens. For\neach screen transition, both screens are evaluated and checked whether they have a `sharedElements` config. The screen that is being shown is **evaluated first**, followed by the screen that is being hidden. If `undefined` is returned, evaluation continues at the other screen.\n\nThe `sharedElements` function receives 3 arguments\n\n| Argument | Type | Description |\n| ----------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `navigation` | `NavigationProp` | Navigation prop of the current screen. You can use this to get the params of the screen using `getParam`, or the route-name using `state.routeName` |\n| `otherNavigation` | `NavigationProp` | The navigation-prop of the other screen. You can use this to get the params of that screen using `getParam`, or the route-name using `state.routeName` |\n| `showing` | `boolean` | `true` when this screen is being shown, and `false` when this screen is being hidden. | |\n\nThe return value should be either `undefined` or an array of shared-element configs or identifiers. Specifying a string-identifier is shorthand for `{id: 'myid'}`.\n\n**Basic example**\n\n```js\nclass DetailScreen extends Component {\n static sharedElements = (navigation, otherNavigation, showing) => {\n // Transition element `item.${item.id}.photo` when either\n // showing or hiding this screen (coming from any route)\n const item = navigation.getParam('item');\n return [`item.${item.id}.photo`];\n }\n\n render() {...}\n}\n```\n\n**Only transition when coming from a specific route**\n\nIf you only want to show a transition when pushing from a particular screen, then use the route-name and `showing` argument.\n\n```js\nclass DetailScreen extends Component {\n static sharedElements = (navigation, otherNavigation, showing) => {\n if ((otherNavigation.state.routeName === 'List') && showing) {\n const item = navigation.getParam('item');\n return [`item.${item.id}.photo`];\n }\n }\n ...\n}\n```\n\n**Customize the animation**\n\nIf the source- and target elements are visually distinct, the consider using a cross-fade animation.\n\n```js\nclass DetailScreen extends Component {\n static sharedElements = (navigation, otherNavigation, showing) => {\n const item = navigation.getParam('item');\n return [{\n id: `item.${item.id}.photo`,\n animation: 'fade'\n // resize: 'clip'\n // align: ''left-top'\n }];\n }\n ...\n}\n```\n\nThe following fields can be specified in a config item\n\n| Field | Type | Description |\n| ----------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id` | `string` | Id that corresponds to the `id` specified in the `` component |\n| `otherId` | `string` | Optional id that corresponds to the `id` specified in the other screen. |\n| `animation` | `move` \\| `fade` | Type of animation to perform (default = `move`), [see SharedElementAnimation](https://github.com/IjzerenHein/react-native-shared-element#sharedelementanimation) |\n| `resize` | `auto` \\| `stretch` \\| `clip` \\| `none` | Resize behavior of the transition (default = `auto`), [see SharedElementResize](https://github.com/IjzerenHein/react-native-shared-element#sharedelementresize) |\n| `align` | `auto` \\| `top-left` \\| `...` | Align behavior of the transition (default = `auto`), [see SharedElementAlign](https://github.com/IjzerenHein/react-native-shared-element#sharedelementalign) | |\n\n## Demo App\n\n- [react-navigation-shared-element-rn60demo](https://github.com/IjzerenHein/react-navigation-shared-element-rn60demo)\n\n## License\n\nReact navigation shared element library is licensed under [The MIT License](./LICENSE.md).\n","readmeFilename":"README.md","gitHead":"44cb5f15920dcedfe6c06f278d9b5c6b17276872","_id":"react-navigation-shared-element@2.0.0-alpha0","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-sAwHD6BI5HsBhEDsnUWsz2r39GSNgddx/TB1Z2b/xS3VYYVjdNdrQSYHYzPJ3AMIPgUoD+pj1pZDm8Q+OvwnkA==","shasum":"f987b151213b37ca575d64e3d8e95030ebfeffb0","tarball":"https://registry.npmjs.org/react-navigation-shared-element/-/react-navigation-shared-element-2.0.0-alpha0.tgz","fileCount":76,"unpackedSize":220179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeLaAvCRA9TVsSAnZWagAAKJYP/jEuiKuFT6f7l93F+tM6\nDpCIkMYE8bPj6ncbw4zuTfIFu1YnF9tI3EardMEYjX65fxTZAHZnpTcuj2Mh\nLFy2Rs/eHOZKmyQ9b4SwGziZhsk9Fb/VJyFl+9TC/Zhds70+8LwMyTHXB27v\npmZody7ix3NGwjBQbKMYRpUsWujafkp6G0Zb8d/NVnmOIdt89cy05PYFGni1\nANpe46fmdCzZsC+7vNY7gaofZk+LcXjg0X9hWt6p92dDVXqKS7ri4zNIlBEx\n7Ig+XmEaQSI9Vflh0t4HVyuhw2A0ApLCK9B/+oRm/SMsT5OtU3WOz+fjSaCh\nXaraSeiQzfD6xHIyuGKCgBfzVPRjdZ4BLn2pkonYOUXxSBA4lZgAV0sbuN+S\nVnI42vS5QE/ektBoWOui0jaFschwlplEN7cYs0m5a0hLGiE2fHIX1Rh2/aZc\nq3qxhzs95kT67QIdTF2MoYff8L+es5TIBM9y9hKPHNuwcsZW85hsuqr6gbaM\nJ0tiqlaoIe8E9PSMniKru0OoQDpMhOfuI98mbED4hO2EhORPeR3djYp8U8qm\n/XgkB/bwHKRfc+RlcLkm8rjgVk4bFSShSlXh3/ytHSmyX4hWD5/6av9Jkf0T\nOn2buXUviAl7xo6DviHH46zhQ8noV/6dGrje676GLcdCp+ugimYLRjCLmrkx\nOMfB\r\n=Ne/0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuzeBXCMtcK+PXCFkpGvZ/NNgzcFRRIjCYV6pVg5u0OAIhAOrUHb37PyuTkHDrkxOnB+JMAvpYkgmo+JZMXFMn1DNb"}]},"maintainers":[{"name":"ijzerenhein","email":"hrutjes@gmail.com"}],"_npmUser":{"name":"ijzerenhein","email":"hrutjes@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-navigation-shared-element_2.0.0-alpha0_1580048431148_0.747855250123191"},"_hasShrinkwrap":false},"2.0.0":{"name":"react-navigation-shared-element","version":"2.0.0","description":"Experimental react-native-shared-element bindings for React Navigation","main":"lib/commonjs/index.js","module":"lib/module/index.js","react-native":"lib/module/index.js","types":"lib/typescript/index.d.ts","sideEffects":false,"scripts":{"test":"jest","lint":"eslint --ext .js,.ts,.tsx .","typescript":"tsc --noEmit","prepare":"bob build","release":"release-it","example":"yarn --cwd example","bootstrap":"yarn example && yarn","version":"conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"keywords":["react-native-component","react-component","react-native","ios","android","shared-element"],"repository":{"type":"git","url":"git+https://github.com/IjzerenHein/react-navigation-shared-element.git"},"author":"","license":"MIT","bugs":{"url":"https://github.com/IjzerenHein/react-navigation-shared-element/issues"},"homepage":"https://github.com/IjzerenHein/react-navigation-shared-element#readme","dependencies":{"hoist-non-react-statics":"^3.3.1"},"devDependencies":{"@babel/core":"^7.5.5","@commitlint/config-conventional":"^8.1.0","@react-native-community/bob":"^0.8.0","@react-native-community/eslint-config":"^0.0.6","@react-navigation/core":"^3.5.1","@react-navigation/native":"^3.6.2","@release-it/conventional-changelog":"^1.1.0","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.9.0","@types/react":"^16.9.2","@types/react-native":"^0.60.8","@types/react-test-renderer":"^16.9.0","commitlint":"^8.3.5","conventional-changelog-cli":"^2.0.31","eslint":"^6.2.2","eslint-config-prettier":"^6.1.0","eslint-plugin-prettier":"^3.1.0","eslint-plugin-react":"^7.14.2","eslint-plugin-react-native":"^3.7.0","husky":"^4.0.10","jest":"^24.9.0","prettier":"^1.18.2","react":"16.9.0","react-dom":"16.9.0","react-native":"^0.61.5","react-native-shared-element":"^0.5.5","react-navigation-stack":"^2","react-test-renderer":"16.9.0","release-it":"^12.4.3","scheduler":"^0.18.0","typescript":"^3.7.4"},"peerDependencies":{"@react-navigation/core":"^3.0.0","react":"*","react-native":"*","react-native-shared-element":"*","react-navigation-stack":"^2"},"jest":{"preset":"react-native","testEnvironment":"node","setupFiles":["/jest-setup.js"],"coveragePathIgnorePatterns":["jest-setup.js"],"modulePathIgnorePatterns":["/example/","/lib/"],"transformIgnorePatterns":["node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator|@react-navigation/core|@react-navigation/native)"],"testRegex":"/__tests__/.*\\.(test|spec)\\.(js|tsx?)$","transform":{"^.+\\.(js|ts|tsx)$":"babel-jest"}},"prettier":{"trailingComma":"es5","singleQuote":true},"husky":{"hooks":{"pre-commit2":"yarn typescript && yarn lint && yarn test","commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"@react-native-community/bob":{"source":"src","output":"lib","targets":["commonjs","module","typescript"]},"readme":"# React Navigation Shared Element \n\nReact Navigation bindings for [react-native-shared-element](https://github.com/IjzerenHein/react-native-shared-element) 💫\n\n## Compatibility \n\nThis library is currently undergoing development to support the latest react-navigation & stack versions.\n\nSupported are:\n\n- [X] react-navigation 4 & 3\n- [X] react-navigation-stack 2 \n- [X] react-navigation-stack 1 [(use react-navigation-shared-element@1)](https://github.com/IjzerenHein/react-navigation-shared-element/tree/v1)\n\nNot yet supported:\n\n- [ ] [react-navigation 5](https://github.com/IjzerenHein/react-navigation-shared-element/issues/2)\n\nUnlikely to be supported:\n\n- [ ] [react-native-screens/createNativeStackNavigator](https://github.com/IjzerenHein/react-navigation-shared-element/issues/14)\n\n\n## Index \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Documentation](#documentation)\n - [createSharedElementStackNavigator](#createsharedelementstacknavigator)\n - [SharedElement](#sharedelement)\n - [sharedElements config](#sharedelements-config)\n- [Demo App](#demo-app)\n- [License](#license)\n\n## Installation\n\nOpen a Terminal in your project's folder and run,\n\n```sh\n$ yarn add react-navigation-shared-element react-native-shared-element\n```\n\nEnure that [react-native-shared-element](https://github.com/IjzerenHein/react-native-shared-element) is also linked into your project.\n\nFinally, make sure that the compatible react-navigation dependencies are installed:\n\n```sh\n$ yarn add react-navigation@4 react-navigation-stack@2\n```\n\n> react-navigation@5 is not supported yet, so don't bother..\n\n## Usage\n\nIn order to enable shared element transitions, the following steps need to be performed\n\n- Create a stack-navigator using `createSharedElementStackNavigator`\n- Wrap your component with `` and provide a unique `id`\n- Define a static `sharedElements` config on the Screen that you want to animate\n\n```jsx\nimport { createSharedElementStackNavigator } from 'react-navigation-shared-element';\n\nconst stackNavigator = createSharedElementStackNavigator(\n {\n List: ListScreen,\n Detail: DetailScreen,\n },\n {\n initialRouteName: 'List',\n }\n);\n\nconst AppContainer = createAppContainer(stackNavigator);\n```\n\n```jsx\n// ListScreen.js\nimport { SharedElement } from 'react-navigation-shared-element';\n\nclass ListScreen extends React.Component {\n renderItem(item) {\n const { navigation } = this.props;\n return (\n navigation.push('Detail', { item })}>\n \n \n \n \n );\n }\n}\n```\n\n```jsx\n// DetailScreen.js\nconst DetailScreen = (props) => {\n const item = props.navigation.getParam('item');\n return (\n \n \n \n );\n};\n\nDetailScreen.sharedElements = (navigation, otherNavigation, showing) => {\n const item = navigation.getParam('item');\n return [`item.${item.id}.photo`];\n};\n```\n\n## Documentation\n\n### createSharedElementStackNavigator\n\nThe `createSharedElementStackNavigator` function wraps an existing stack-navigator and enables shared element transitions for it.\n\nIt performs the following actions\n\n- Creates a top-level renderer to host the shared element transitions\n- Wraps each route with a shared element scene\n- Detects route changes and trigger shared element transitions\n\n**Arguments**\n\n| Argument | Type | Description |\n| ---------------------- | -------- | ---------------------- |\n| `routeConfig` | `object` | Routes-config |\n| `stackNavigatorConfig` | `object` | Stack navigator config |\n\n### SharedElement\n\nThe `` component accepts a single child and a _\"shared\"_ id. The child is the element that is made available for doing shared element transitions. It can be any component, like a ``, `` or ``. In case the wrapped view is an ``, special handling is performed to deal with image loading and resizing.\n\nThis component is synonymous for the `` component as defined in `react-native-shared-element`. Instead of a `node` it uses an `id` to create a higher lever API which automatically ties in with the scenes created by `createSharedElementStackNavigator`.\n\n**Props**\n\n| Property | Type | Description |\n| --------------- | --------- | ------------------------------------------------------------------------------------ |\n| `children` | `element` | A single child component, which must map to a real view in the native view hierarchy |\n| `id` | `string` | Unique id of the shared element |\n| `View props...` | | Other props supported by View |\n\n### sharedElements config\n\nIn order to trigger shared element transitions between screens, a static `sharedElements` config needs to be defined on one of the two screens. For\neach screen transition, both screens are evaluated and checked whether they have a `sharedElements` config. The screen that is being shown is **evaluated first**, followed by the screen that is being hidden. If `undefined` is returned, evaluation continues at the other screen.\n\nThe `sharedElements` function receives 3 arguments\n\n| Argument | Type | Description |\n| ----------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `navigation` | `NavigationProp` | Navigation prop of the current screen. You can use this to get the params of the screen using `getParam`, or the route-name using `state.routeName` |\n| `otherNavigation` | `NavigationProp` | The navigation-prop of the other screen. You can use this to get the params of that screen using `getParam`, or the route-name using `state.routeName` |\n| `showing` | `boolean` | `true` when this screen is being shown, and `false` when this screen is being hidden. | |\n\nThe return value should be either `undefined` or an array of shared-element configs or identifiers. Specifying a string-identifier is shorthand for `{id: 'myid'}`.\n\n**Basic example**\n\n```js\nclass DetailScreen extends Component {\n static sharedElements = (navigation, otherNavigation, showing) => {\n // Transition element `item.${item.id}.photo` when either\n // showing or hiding this screen (coming from any route)\n const item = navigation.getParam('item');\n return [`item.${item.id}.photo`];\n }\n\n render() {...}\n}\n```\n\n**Only transition when coming from a specific route**\n\nIf you only want to show a transition when pushing from a particular screen, then use the route-name and `showing` argument.\n\n```js\nclass DetailScreen extends Component {\n static sharedElements = (navigation, otherNavigation, showing) => {\n if ((otherNavigation.state.routeName === 'List') && showing) {\n const item = navigation.getParam('item');\n return [`item.${item.id}.photo`];\n }\n }\n ...\n}\n```\n\n**Customize the animation**\n\nIf the source- and target elements are visually distinct, the consider using a cross-fade animation.\n\n```js\nclass DetailScreen extends Component {\n static sharedElements = (navigation, otherNavigation, showing) => {\n const item = navigation.getParam('item');\n return [{\n id: `item.${item.id}.photo`,\n animation: 'fade'\n // resize: 'clip'\n // align: ''left-top'\n }];\n }\n ...\n}\n```\n\nThe following fields can be specified in a config item\n\n| Field | Type | Description |\n| ----------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id` | `string` | Id that corresponds to the `id` specified in the `` component |\n| `otherId` | `string` | Optional id that corresponds to the `id` specified in the other screen. |\n| `animation` | `move` \\| `fade` | Type of animation to perform (default = `move`), [see SharedElementAnimation](https://github.com/IjzerenHein/react-native-shared-element#sharedelementanimation) |\n| `resize` | `auto` \\| `stretch` \\| `clip` \\| `none` | Resize behavior of the transition (default = `auto`), [see SharedElementResize](https://github.com/IjzerenHein/react-native-shared-element#sharedelementresize) |\n| `align` | `auto` \\| `top-left` \\| `...` | Align behavior of the transition (default = `auto`), [see SharedElementAlign](https://github.com/IjzerenHein/react-native-shared-element#sharedelementalign) | |\n\n## Demo App\n\n- [react-navigation-shared-element-rn60demo](https://github.com/IjzerenHein/react-navigation-shared-element-rn60demo)\n\n## License\n\nReact navigation shared element library is licensed under [The MIT License](./LICENSE.md).\n","readmeFilename":"README.md","gitHead":"d836088e563203a82615133d740024356bbdffbc","_id":"react-navigation-shared-element@2.0.0","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-YFixTh9w75Xl/jtoqaIGE3F7SrHbyQaMP9bUSshA/pKKxvSSwtavXFszhWrQ7PQN9AQixeishU2GKSydZQkhnQ==","shasum":"9f95da998afa491c9b618fb8d4eb80412c90a92e","tarball":"https://registry.npmjs.org/react-navigation-shared-element/-/react-navigation-shared-element-2.0.0.tgz","fileCount":76,"unpackedSize":223550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQDhtCRA9TVsSAnZWagAA508P/2rs6GMnrivh1bhvIANc\nh29dbqk4vFgdYIxCZwHBFccQ34dA9oiVXej2xLmLmCoSqFtUiFMKIXhHfIDq\nTx9rojccscIi5U+Iv/j2+zClvvjNVPeOeD9P7lxwoIfOlw62aRu4gvvQwRjH\nQfkRjANucFp8XgKQ+sSS93nD35jXEw2bvAz1XMiPT8VASciiGF0MdCoTU6Ql\nSlIf18RL5GHXxs9j+P5xAhBWxtHXhXo1FOzQfEDuU9gTADMjlO+mi91NBwbK\nA5CdTy1Z+BBABneamUiFJ0HVyMbV8UyRFama2E3cow8Dtaad5Epb+UF8iNRB\nOb6n2tNQtyPimD5hmqCyChWUb45E44x5dKgg7gFvQegfkS6EwzispPQUnoAg\nwnkOU3plT8/ezx9g1dQxyRvro7V6i0bMHjl7NAVFzWkM+uEuuvj8UpTZxc0F\n8+ZKxLmdxDg/lFk/yt4cTosV+7xASgrJG+Acxh6Ys4WO5zC4KmAsKHi7Sl7f\ng42wHQeA5oTRSqrUCYXxzYZs6KCqaNnzPzuFJTz4OfP+4vlB3HFjw+uFyK08\ni8A7VbIiEKXIY6qzxFk4M+m+plBvNTmwAI+yAsjp9bQhzfeLYDsz1TWG6Jzb\nhJuHGWVjsmeSTK81OjT6HX8Z2Rke3k8YNi8MFBkYL0pWdS7epxfm+ePjEMjs\n26Z2\r\n=Pgfq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICes3Pct0g/hfgj2exkOPMNDM0iRgUx7UudUE3REEnIBAiEAsMwFJkC8U5OMlNn/XixkbdVsvZTP3heC5aVRmQ574Js="}]},"maintainers":[{"name":"ijzerenhein","email":"hrutjes@gmail.com"}],"_npmUser":{"name":"ijzerenhein","email":"hrutjes@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-navigation-shared-element_2.0.0_1581267053345_0.02983977361767165"},"_hasShrinkwrap":false},"2.0.1":{"name":"react-navigation-shared-element","version":"2.0.1","description":"react-native-shared-element bindings for React Navigation","main":"lib/commonjs/index.js","module":"lib/module/index.js","react-native":"lib/module/index.js","types":"lib/typescript/index.d.ts","sideEffects":false,"scripts":{"test":"jest","lint":"eslint --ext .js,.ts,.tsx .","typescript":"tsc --noEmit","prepare":"bob build","release":"release-it","example":"yarn --cwd example","bootstrap":"yarn example && yarn","version":"conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"keywords":["react-native-component","react-component","react-native","ios","android","shared-element"],"repository":{"type":"git","url":"git+https://github.com/IjzerenHein/react-navigation-shared-element.git"},"author":"","license":"MIT","bugs":{"url":"https://github.com/IjzerenHein/react-navigation-shared-element/issues"},"homepage":"https://github.com/IjzerenHein/react-navigation-shared-element#readme","dependencies":{"hoist-non-react-statics":"^3.3.1"},"devDependencies":{"@babel/core":"^7.5.5","@commitlint/config-conventional":"^8.1.0","@react-native-community/bob":"^0.8.0","@react-native-community/eslint-config":"^0.0.6","@react-navigation/core":"^3.5.1","@react-navigation/native":"^3.6.2","@release-it/conventional-changelog":"^1.1.0","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.9.0","@types/react":"^16.9.2","@types/react-native":"^0.60.8","@types/react-test-renderer":"^16.9.0","commitlint":"^8.3.5","conventional-changelog-cli":"^2.0.31","eslint":"^6.2.2","eslint-config-prettier":"^6.1.0","eslint-plugin-prettier":"^3.1.0","eslint-plugin-react":"^7.14.2","eslint-plugin-react-native":"^3.7.0","husky":"^4.0.10","jest":"^24.9.0","prettier":"^1.18.2","react":"16.9.0","react-dom":"16.9.0","react-native":"^0.61.5","react-native-shared-element":"^0.5.5","react-navigation-stack":"^2","react-test-renderer":"16.9.0","release-it":"^12.4.3","scheduler":"^0.18.0","typescript":"^3.7.4"},"peerDependencies":{"@react-navigation/core":"^3.0.0","react":"*","react-native":"*","react-native-shared-element":"*","react-navigation-stack":"^2"},"jest":{"preset":"react-native","testEnvironment":"node","setupFiles":["/jest-setup.js"],"coveragePathIgnorePatterns":["jest-setup.js"],"modulePathIgnorePatterns":["/example/","/lib/"],"transformIgnorePatterns":["node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator|@react-navigation/core|@react-navigation/native)"],"testRegex":"/__tests__/.*\\.(test|spec)\\.(js|tsx?)$","transform":{"^.+\\.(js|ts|tsx)$":"babel-jest"}},"prettier":{"trailingComma":"es5","singleQuote":true},"husky":{"hooks":{"pre-commit2":"yarn typescript && yarn lint && yarn test","commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"@react-native-community/bob":{"source":"src","output":"lib","targets":["commonjs","module","typescript"]},"gitHead":"ba9952e74cbc91862df8f914ca68aca4f09ef8f8","_id":"react-navigation-shared-element@2.0.1","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-PVMQQdwhXNg3ytKJzxqbr731CVRhb3ChGCbo+MHKRv7DP2E9iEsT4d3DWspjbnFQgzPVlk5ufxEbE/FPUIMLSg==","shasum":"a9c81c6e1b7bf4ba7e119ead57010bf7559b71f4","tarball":"https://registry.npmjs.org/react-navigation-shared-element/-/react-navigation-shared-element-2.0.1.tgz","fileCount":76,"unpackedSize":222335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQEDNCRA9TVsSAnZWagAABaEP/0yiQVCM95gWe78QhIlY\nK/JtLW/LCHfVKbTKJ436+g5hobcQWristKjhXbFbO7Oweiu6kTYYRhWIrR8p\ncgur3XdS03jhFftdoh9JWIMRBYyL+9PJCgPrC2MS12LnI24fcC1rkq4riwdf\nUK1NKQ9ty0fwX/FgA6UftY7lbQzfiLCswVvL4FZeUaTeObo2z2TOqq22b1P5\n1DXSGrIU0HBxIElkycCtYstDBjACBxNUHkvCCuGyKDfO50+qbNgM/u5a7TWL\nrI4jPFEUTacoH8E3AwB2D2W7SKO9ZINWft+UnSK9cEPiXXBbdLjMSRf/dhtY\ne2gpqgRkKSv/R195jJVBlmw1vMIiNbTu8clCZ4dn4Ep7ziPvvYui70MMY5uJ\nKo71LT3Ia6sIfx3OknfphXXKpCTFUumlWmZD6Wf6qH3jYBCzwdEEvN1IgsfB\nBwg8zWy3pYDCkruQx93RRnKruogpEnwb58sCNSCnEIFf++6y41PjtO8FDR4o\n/ej605OM7566S+0202LOCSM7fOiDtqd5c+4wCLXG5ygvVlUUyoXTWHWaJk9+\nQJqykbR6Kpwqn99BCQ1HuxB7ynWiqgwo9FvSZ1YymmBgl0D7JhcyW4+DF9qM\ncNOFT+bIMM+7jl9bEl6hQjoBPimrVN9aEwTQvRqcPliEmzdStNVXeXbzWAdN\nhCKc\r\n=Fs7o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBT3jMobhd7wzkVfxNxury7rajBCVAKJ+W7zyHtGBAbAAiBaPUijfDaYF84esFTLo78CNW44C2LnngjolxzUbH9SBQ=="}]},"maintainers":[{"name":"ijzerenhein","email":"hrutjes@gmail.com"}],"_npmUser":{"name":"ijzerenhein","email":"hrutjes@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-navigation-shared-element_2.0.1_1581269197379_0.9124318499680417"},"_hasShrinkwrap":false},"2.0.2":{"name":"react-navigation-shared-element","version":"2.0.2","description":"react-native-shared-element bindings for React Navigation","main":"lib/commonjs/index.js","module":"lib/module/index.js","react-native":"lib/module/index.js","types":"lib/typescript/index.d.ts","sideEffects":false,"scripts":{"test":"jest","lint":"eslint --ext .js,.ts,.tsx .","typescript":"tsc --noEmit","prepare":"bob build","release":"release-it","example":"yarn --cwd example","bootstrap":"yarn example && yarn","version":"conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"keywords":["react-native-component","react-component","react-native","ios","android","shared-element"],"repository":{"type":"git","url":"git+https://github.com/IjzerenHein/react-navigation-shared-element.git"},"author":"","license":"MIT","bugs":{"url":"https://github.com/IjzerenHein/react-navigation-shared-element/issues"},"homepage":"https://github.com/IjzerenHein/react-navigation-shared-element#readme","dependencies":{"hoist-non-react-statics":"^3.3.1"},"devDependencies":{"@babel/core":"^7.5.5","@commitlint/config-conventional":"^8.1.0","@react-native-community/bob":"^0.8.0","@react-native-community/eslint-config":"^0.0.6","@react-navigation/core":"^3.5.1","@react-navigation/native":"^3.6.2","@release-it/conventional-changelog":"^1.1.0","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.9.0","@types/react":"^16.9.2","@types/react-native":"^0.60.8","@types/react-test-renderer":"^16.9.0","commitlint":"^8.3.5","conventional-changelog-cli":"^2.0.31","eslint":"^6.2.2","eslint-config-prettier":"^6.1.0","eslint-plugin-prettier":"^3.1.0","eslint-plugin-react":"^7.14.2","eslint-plugin-react-native":"^3.7.0","husky":"^4.0.10","jest":"^24.9.0","prettier":"^1.18.2","react":"16.9.0","react-dom":"16.9.0","react-native":"^0.61.5","react-native-shared-element":"^0.5.5","react-navigation-stack":"^2","react-test-renderer":"16.9.0","release-it":"^12.4.3","scheduler":"^0.18.0","typescript":"^3.7.4"},"peerDependencies":{"@react-navigation/core":"^3.0.0","react":"*","react-native":"*","react-native-shared-element":"*","react-navigation-stack":"^2"},"jest":{"preset":"react-native","testEnvironment":"node","setupFiles":["/jest-setup.js"],"coveragePathIgnorePatterns":["jest-setup.js"],"modulePathIgnorePatterns":["/example/","/lib/"],"transformIgnorePatterns":["node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator|@react-navigation/core|@react-navigation/native)"],"testRegex":"/__tests__/.*\\.(test|spec)\\.(js|tsx?)$","transform":{"^.+\\.(js|ts|tsx)$":"babel-jest"}},"prettier":{"trailingComma":"es5","singleQuote":true},"husky":{"hooks":{"pre-commit2":"yarn typescript && yarn lint && yarn test","commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"@react-native-community/bob":{"source":"src","output":"lib","targets":["commonjs","module","typescript"]},"gitHead":"40eeb65f51855d801a79f7505088ee96d7df4fa3","_id":"react-navigation-shared-element@2.0.2","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-GdW9tRiOnZKIDdUGbhNHkgFHHZdqqO0PomqUyobBPqq1seJ0T8FD3k/POOs0L3qvNMi9tWbcDE+o+TDejKhJEQ==","shasum":"4c501806d9a4acf60ab840ba61ef1e3ee6dc05ee","tarball":"https://registry.npmjs.org/react-navigation-shared-element/-/react-navigation-shared-element-2.0.2.tgz","fileCount":76,"unpackedSize":223460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRQo+CRA9TVsSAnZWagAAQskP/2xrIdPYYzl2oOOZGHcf\ne/LH2O3xd7A1x/PnbySQ5y4MwxPY4WtN6+KkrIX206/FGR5MUFiwT5htTeAQ\naXwZH6jGLU6P0U+Pk0oR61gTxgkVT+GWxdDgOkMevd6G0RvopXEkDisNtftL\nsz7ItWfrtHPzTRjGixs4wm5o4jwjOi7G/z8+RhyPWUDeQMSIc8EaZ8I0h7N9\n4Fhqr0cQY0Xe5vCm+ScJbBxghGKBOrpFyRZMX+f0BmxwYKfXUA2cyUe4b4BK\nSMbXc0ijA4hISljtgoMIHigU7OQJdmJnhh6Lei6w19Tq8J/BK0VAQoQY2jIT\ncUY5DppX2/+1bua6YBBohAsWb3UCo6GcDfkupzL1SF3pdiEnkj4AktD49bSJ\nxmNASu1ilDy7h6Hh2dI5i/dOPetD6+7hbUnTzreieZbnR8MzbegIFSdhdUI/\nE3nFygfoGOl+JnQoQ5LJohVDuKbqTnrLlM3xbNzNKzLl5AMdH0N+0Kwy53u/\n/cMiLRFl5K529XJHNt5luCQOuoSwMWajhybf8ZVaJwx5R4KDC6tdROkIBfRq\nZdNn0d/TPmqPnAgPcFNoah98nFYptYiUDlX8ig5tKhZWhD66HLAYTARjOjPo\n+/4tl6P2KoR7MRrPgPKpgxl9EMufWS5F7J0QK6PqVRHKrr4s61+1CFluSjtC\nuIQD\r\n=ESQD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDw2JFMrO7hSHo+YbbI2j+zOC3XyUKaHohPjxFGjKorWgIgItV/kkroqNCe8/0F1OCK7Pyxx3N53FuOBHpG2ZFaBvQ="}]},"maintainers":[{"name":"ijzerenhein","email":"hrutjes@gmail.com"}],"_npmUser":{"name":"ijzerenhein","email":"hrutjes@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-navigation-shared-element_2.0.2_1581582910021_0.22975795939783272"},"_hasShrinkwrap":false},"2.1.0":{"name":"react-navigation-shared-element","version":"2.1.0","description":"react-native-shared-element bindings for React Navigation","main":"lib/commonjs/index.js","module":"lib/module/index.js","react-native":"lib/module/index.js","types":"lib/typescript/index.d.ts","sideEffects":false,"scripts":{"test":"jest","lint":"eslint --ext .js,.ts,.tsx .","typescript":"tsc --noEmit","prepare":"bob build","release":"release-it","example":"yarn --cwd example","bootstrap":"yarn example && yarn","version":"conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"keywords":["react-native-component","react-component","react-native","ios","android","shared-element"],"repository":{"type":"git","url":"git+https://github.com/IjzerenHein/react-navigation-shared-element.git"},"author":"","license":"MIT","bugs":{"url":"https://github.com/IjzerenHein/react-navigation-shared-element/issues"},"homepage":"https://github.com/IjzerenHein/react-navigation-shared-element#readme","dependencies":{"hoist-non-react-statics":"^3.3.1"},"devDependencies":{"@babel/core":"^7.5.5","@commitlint/config-conventional":"^8.1.0","@react-native-community/bob":"^0.8.0","@react-native-community/eslint-config":"^0.0.6","@react-navigation/core":"^3.5.1","@react-navigation/native":"^3.6.2","@release-it/conventional-changelog":"^1.1.0","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.9.0","@types/react":"^16.9.2","@types/react-native":"^0.60.8","@types/react-test-renderer":"^16.9.0","commitlint":"^8.3.5","conventional-changelog-cli":"^2.0.31","eslint":"^6.2.2","eslint-config-prettier":"^6.1.0","eslint-plugin-prettier":"^3.1.0","eslint-plugin-react":"^7.14.2","eslint-plugin-react-native":"^3.7.0","husky":"^4.0.10","jest":"^24.9.0","prettier":"^1.18.2","react":"16.9.0","react-dom":"16.9.0","react-native":"^0.61.5","react-native-shared-element":"^0.5.5","react-navigation-stack":"^2","react-test-renderer":"16.9.0","release-it":"^12.4.3","scheduler":"^0.18.0","typescript":"^3.7.4"},"peerDependencies":{"@react-navigation/core":"^3.0.0","react":"*","react-native":"*","react-native-shared-element":"*","react-navigation-stack":"^2"},"jest":{"preset":"react-native","testEnvironment":"node","setupFiles":["/jest-setup.js"],"coveragePathIgnorePatterns":["jest-setup.js"],"modulePathIgnorePatterns":["/example/","/lib/"],"transformIgnorePatterns":["node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator|@react-navigation/core|@react-navigation/native)"],"testRegex":"/__tests__/.*\\.(test|spec)\\.(js|tsx?)$","transform":{"^.+\\.(js|ts|tsx)$":"babel-jest"}},"prettier":{"trailingComma":"es5","singleQuote":true},"husky":{"hooks":{"pre-commit2":"yarn typescript && yarn lint && yarn test","commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"@react-native-community/bob":{"source":"src","output":"lib","targets":["commonjs","module","typescript"]},"gitHead":"44f003b909048360b9f800ba7ce9727b9f896ee4","_id":"react-navigation-shared-element@2.1.0","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-g4NpI0o1WMJvbvZYDHsN0n1T8OcOQXEfmvqhirqlgn4B3HJ19wmcLda0Cbv1X3PtgkxgLTEu+p+yeh3hvAbNQQ==","shasum":"e78b08b505c3ef9d8e70c725aca63f7c972a292f","tarball":"https://registry.npmjs.org/react-navigation-shared-element/-/react-navigation-shared-element-2.1.0.tgz","fileCount":76,"unpackedSize":239897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUUGZCRA9TVsSAnZWagAAQN0P/j0FRJivfSAlMKHzSnGJ\n1BSMkaaV6lEDajrDae4pvxS3eU8TRjo3iBiX1WE+DNvzv95BGXXQQNIXSYWk\ni4mIY/xjNJ18F+cKrRwId4L7xQV+aa4H1jodfrLoBItcoGQvStJIgSx12WMa\n3Y64FPBTYuGY/glayGwp9GUX/ps4rNtgurzesDyo8nYzky486bTGiZgNuT81\naptldfJVfjOfGs4YwcVbR4WSq0DdMvK7cToW5UC1UPdGGvA0PWww4mZWny3F\nfIJeyAbH4ErhI/aHtmyf4amIy428sUke2rY+6iYaaD0u5hp/Nr8jlTD3TSdV\nez9uaacXeiHbTbGo8iy1/BvCLH9YR6K8CnF1+kmq0iJ68ciwIyBHhk0u3L01\nMsUxFNR/ZkA8maRbaTr79A7zGKeczUC1mdPq2nVOYaeYyuw/4e1FK82o5Mpm\n52iVrApCgS3QTWvzKOrY55ko3SLpNg+XfpWSKNXSU2qJR6SYy0YyvR7KSBLS\n6bexhzOkIoQO87fvIgYyJPaazyg9R65g6rR7ma1v1gmYSo/1hlM+A4Lr1weg\nY+uMw47iqnJfMI117uQII6qTvzBWmQWhqTNqKyIbbl4ljc74PCLftcEdVNkw\nphT6GeMAc07WLbiYhvnzxMCRITMyvdtslM5J3y/phtaRsTHYBRycEwqAxENE\nZ2ga\r\n=9a2L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNU5Lj1Q4lkVAi3Ybs9ltgoxGvcuJVaJF0rJstYE5qHAIgapMobajtk7OSquNQf9MPGBlE13MAUMTE2yZeqgMRPow="}]},"maintainers":[{"name":"ijzerenhein","email":"hrutjes@gmail.com"}],"_npmUser":{"name":"ijzerenhein","email":"hrutjes@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-navigation-shared-element_2.1.0_1582383513158_0.33305594553845785"},"_hasShrinkwrap":false},"2.2.0":{"name":"react-navigation-shared-element","version":"2.2.0","description":"react-native-shared-element bindings for React Navigation","main":"lib/commonjs/index.js","module":"lib/module/index.js","react-native":"lib/module/index.js","types":"lib/typescript/index.d.ts","sideEffects":false,"scripts":{"test":"jest","lint":"eslint --ext .js,.ts,.tsx .","typescript":"tsc --noEmit","prepare":"bob build","release":"release-it","example":"yarn --cwd example","bootstrap":"yarn example && yarn","version":"conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"keywords":["react-native-component","react-component","react-native","ios","android","shared-element"],"repository":{"type":"git","url":"git+https://github.com/IjzerenHein/react-navigation-shared-element.git"},"author":"","license":"MIT","bugs":{"url":"https://github.com/IjzerenHein/react-navigation-shared-element/issues"},"homepage":"https://github.com/IjzerenHein/react-navigation-shared-element#readme","dependencies":{"hoist-non-react-statics":"^3.3.2"},"devDependencies":{"@babel/core":"^7.8.7","@commitlint/config-conventional":"^8.3.4","@react-native-community/bob":"^0.10.0","@react-native-community/eslint-config":"^0.0.7","@react-navigation/core":"^3.5.1","@react-navigation/native":"^3.6.2","@release-it/conventional-changelog":"^1.1.0","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^25.1.4","@types/react":"^16.9.23","@types/react-native":"^0.61.22","@types/react-test-renderer":"^16.9.2","commitlint":"^8.3.5","conventional-changelog-cli":"^2.0.31","eslint":"^6.8.0","eslint-config-prettier":"^6.10.0","eslint-plugin-prettier":"^3.1.2","eslint-plugin-react":"^7.19.0","eslint-plugin-react-native":"^3.8.1","husky":"^4.2.3","jest":"^25.1.0","prettier":"^1.19.1","react":"^16.13.0","react-dom":"^16.13.0","react-native":"^0.61.5","react-native-shared-element":"^0.5.5","react-navigation-stack":"^2","react-test-renderer":"^16.13.0","release-it":"^13.1.1","scheduler":"^0.19.0","typescript":"^3.8.3"},"peerDependencies":{"@react-navigation/core":"^3.0.0","react":"*","react-native":"*","react-native-shared-element":"*","react-navigation-stack":"^2"},"jest":{"preset":"react-native","testEnvironment":"node","setupFiles":["/jest-setup.js"],"coveragePathIgnorePatterns":["jest-setup.js"],"modulePathIgnorePatterns":["/example/","/lib/"],"transformIgnorePatterns":["node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator|@react-navigation/core|@react-navigation/native)"],"testRegex":"/__tests__/.*\\.(test|spec)\\.(js|tsx?)$","transform":{"^.+\\.(js|ts|tsx)$":"babel-jest"}},"prettier":{"trailingComma":"es5","singleQuote":true},"husky":{"hooks":{"pre-commit2":"yarn typescript && yarn lint && yarn test","commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"@react-native-community/bob":{"source":"src","output":"lib","targets":["commonjs","module","typescript"]},"gitHead":"836e6470c095d639af738dd85be7668d7ccf57af","_id":"react-navigation-shared-element@2.2.0","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-0favWJAgiwx6qKrT7qdrLNcAMZhkMgkscoXxHuR7gUECdKhGl7qu+AuzxHaRcZkJ72DGsTbcP7hDxP+5lm3Idw==","shasum":"4835c76aad5be895e55f32853c806968cabce1ad","tarball":"https://registry.npmjs.org/react-navigation-shared-element/-/react-navigation-shared-element-2.2.0.tgz","fileCount":76,"unpackedSize":253103,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJebjn4CRA9TVsSAnZWagAA6vQP/i8z4xwRwHajQqiiULKZ\n/K1oyAlv5YFHaL7Lv0t0itwZzcGw4frxyZtf776nvSZtd+9XqbT5ePztFB0E\nxpo0DeHLyUjtxzz8qvTzLy3f2Zs+0KknyQhB5sstvr82k1RIm/fNz6fvtxQt\n1ipADaiSj/3onJS4p41eBKqVvmyGILEuHh5uvGAIWKl7RL7wOCWtTVzqf224\nY9el4kS5tU51fhcZRI35fpbyJoilXsRyG7QaE9iJrsEDA2U1I+PUZrvSWxoR\n7yaiaw5/5Sz+BNs/n4RdIxYiPKe/8NYLHV9rd/5sAxKI5yjAfyS55EiG0Ad5\nVDNrV7M3FW0e67mv6iGp9NvroIHhwfLV+l+xuC2be6cUFl71ruUoe58++vu8\nXPe/lBgE2wZbHfMTSyuoZYRMrr28OGR/wZga7Y1n937WW4v9epfwK+kyqw9y\ng3S2YIYwud+kJE+jcplEM63nKd4XFWnqYi3JrVwXBFpJdBLhLN8tbMMSuEO9\nX0hTwgwXBclTMTT9NGnMhsDN6TTORgWK9VnD4E6z/zJ4NOhDwHNCDlQaPn27\nJToorgMReE7NLHr7lL7do48ZMqIh1QH/WlK+p9EqJU3RJqVoANFDbvzbZXhl\nB7rl8a8W+1aJ9GglAJBjLLLlqlfwwPaRtcBAI45FeFaBV1l06jeRUTIkxWNj\nSBrR\r\n=1ekJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEWb/aYMI5LqsZnkZGD5a3nuU+UEC9dpmT4VOOBi8MONAiEA1vSgDXaTphfmOl6fJ2QX7nJuxhnvx15oJ6oS+gEIQmk="}]},"maintainers":[{"name":"ijzerenhein","email":"hrutjes@gmail.com"}],"_npmUser":{"name":"ijzerenhein","email":"hrutjes@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-navigation-shared-element_2.2.0_1584282103887_0.1684031726115196"},"_hasShrinkwrap":false},"5.0.0-alpha0":{"name":"react-navigation-shared-element","version":"5.0.0-alpha0","description":"react-native-shared-element bindings for React Navigation","main":"lib/commonjs/index.js","module":"lib/module/index.js","react-native":"lib/module/index.js","types":"lib/typescript/index.d.ts","sideEffects":false,"scripts":{"test":"jest","lint":"eslint --ext .js,.ts,.tsx .","typescript":"tsc --noEmit","prepare":"bob build","release":"release-it","example":"yarn --cwd example","bootstrap":"yarn example && yarn","version":"conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"keywords":["react-native-component","react-component","react-native","ios","android","shared-element"],"repository":{"type":"git","url":"git+https://github.com/IjzerenHein/react-navigation-shared-element.git"},"author":"","license":"MIT","bugs":{"url":"https://github.com/IjzerenHein/react-navigation-shared-element/issues"},"homepage":"https://github.com/IjzerenHein/react-navigation-shared-element#readme","dependencies":{"hoist-non-react-statics":"^3.3.2"},"devDependencies":{"@babel/core":"^7.8.7","@commitlint/config-conventional":"^8.3.4","@react-native-community/bob":"^0.10.0","@react-native-community/eslint-config":"^0.0.7","@react-navigation/core":"^5.2.0","@react-navigation/native":"^5.0.9","@react-navigation/stack":"^5.1.1","@release-it/conventional-changelog":"^1.1.0","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^25.1.4","@types/react":"^16.9.23","@types/react-native":"^0.61.22","@types/react-test-renderer":"^16.9.2","commitlint":"^8.3.5","conventional-changelog-cli":"^2.0.31","eslint":"^6.8.0","eslint-config-prettier":"^6.10.0","eslint-plugin-prettier":"^3.1.2","eslint-plugin-react":"^7.19.0","eslint-plugin-react-native":"^3.8.1","husky":"^4.2.3","jest":"^25.1.0","prettier":"^1.19.1","react":"^16.13.0","react-dom":"^16.13.0","react-native":"^0.61.5","react-native-shared-element":"^0.5.6","react-test-renderer":"^16.13.0","release-it":"^13.1.1","scheduler":"^0.19.0","typescript":"^3.8.3"},"peerDependencies":{"@react-navigation/core":"^5.2.0","@react-navigation/native":"^5.0.9","@react-navigation/stack":"^5.1.1","react":"*","react-native":"*","react-native-shared-element":"*"},"jest":{"preset":"react-native","testEnvironment":"node","setupFiles":["/jest-setup.js"],"coveragePathIgnorePatterns":["jest-setup.js"],"modulePathIgnorePatterns":["/example/","/lib/"],"transformIgnorePatterns":["node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator|@react-navigation/core|@react-navigation/native)"],"testRegex":"/__tests__/.*\\.(test|spec)\\.(js|tsx?)$","transform":{"^.+\\.(js|ts|tsx)$":"babel-jest"}},"prettier":{"trailingComma":"es5","singleQuote":true},"husky":{"hooks":{"pre-commit2":"yarn typescript && yarn lint && yarn test","commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"@react-native-community/bob":{"source":"src","output":"lib","targets":["commonjs","module","typescript"]},"readme":"# React Navigation Shared Element \n\nReact Navigation bindings for [react-native-shared-element](https://github.com/IjzerenHein/react-native-shared-element) 💫\n\n## Compatibility \n\nThis library is currently undergoing development to support the latest react-navigation & stack versions.\n\nSupported are:\n\n- [x] react-navigation 5 (v3)\n- [x] react-navigation 4 & 3 (use react-navigation-shared-element@2)\n- [x] react-navigation-stack 2 (use react-navigation-shared-element@2)\n- [x] react-navigation-stack 1 [(use react-navigation-shared-element@1)](https://github.com/IjzerenHein/react-navigation-shared-element/tree/v1)\n\nUnlikely to be supported:\n\n- [ ] [react-native-screens/createNativeStackNavigator](https://github.com/IjzerenHein/react-navigation-shared-element/issues/14)\n\n## Index \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Documentation](#documentation)\n - [createSharedElementStackNavigator](#createsharedelementstacknavigator)\n - [SharedElement](#sharedelement)\n - [sharedElements config](#sharedelements-config)\n- [Demo App](#demo-app)\n- [Videos](#videos)\n- [License](#license)\n\n## Installation\n\nOpen a Terminal in your project's folder and run,\n\n```sh\n$ yarn add react-navigation-shared-element react-native-shared-element\n```\n\nEnsure that [react-native-shared-element](https://github.com/IjzerenHein/react-native-shared-element) is also linked into your project.\n\nFinally, make sure that the compatible react-navigation dependencies are installed:\n\n```sh\n$ yarn add @react-navigation/core@^5.2.0 @react-navigation/native@^5.0.9 @react-navigation/stack@^5.1.1\n```\n\n## Usage\n\nIn order to enable shared element transitions, the following steps need to be performed\n\n- Create a stack-navigator using `createSharedElementStackNavigator`\n- Wrap your component with `` and provide a unique `id`\n- Define a `sharedElementsConfig` config on the Screen that you want to animate\n\n```jsx\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createSharedElementStackNavigator } from 'react-navigation-shared-element';\n\nconst Stack = createSharedElementStackNavigator();\n\nconst App = () => {\n return (\n \n \n \n {\n const { item } = route.params;\n return [`item.${item.id}.photo`];\n }}\n />\n \n \n );\n};\n```\n\n```jsx\n// ListScreen.js\nimport { SharedElement } from 'react-navigation-shared-element';\n\nclass ListScreen extends React.Component {\n renderItem(item) {\n const { navigation } = this.props;\n return (\n navigation.push('Detail', { item })}>\n \n \n \n \n );\n }\n}\n```\n\n```jsx\n// DetailScreen.js\nconst DetailScreen = props => {\n const { item } = props.route.params;\n return (\n \n \n \n );\n};\n```\n\n## Documentation\n\n### createSharedElementStackNavigator\n\nThe `createSharedElementStackNavigator` function wraps an existing stack-navigator and enables shared element transitions for it.\n\nIt performs the following actions\n\n- Creates a top-level renderer to host the shared element transitions\n- Wraps each route with a shared element scene\n- Detects route changes and trigger shared element transitions\n\n### SharedElement\n\nThe `` component accepts a single child and a _\"shared\"_ id. The child is the element that is made available for doing shared element transitions. It can be any component, like a ``, `` or ``. In case the wrapped view is an ``, special handling is performed to deal with image loading and resizing.\n\nThis component is synonymous for the `` component as defined in `react-native-shared-element`. Instead of a `node` it uses an `id` to create a higher lever API which automatically ties in with the scenes created by `createSharedElementStackNavigator`.\n\n**Props**\n\n| Property | Type | Description |\n| --------------- | --------- | ------------------------------------------------------------------------------------ |\n| `children` | `element` | A single child component, which must map to a real view in the native view hierarchy |\n| `id` | `string` | Unique id of the shared element |\n| `View props...` | | Other props supported by View |\n\n### sharedElementsConfig\n\nIn order to trigger shared element transitions between screens, a `sharedElementsConfig` function needs to be defined on one of the two screens. For\neach screen transition, both screens are evaluated and checked whether they have a `sharedElementsConfig`. The screen that is being shown is **evaluated first**, followed by the screen that is being hidden. If `undefined` is returned, evaluation continues at the other screen.\n\nThe `sharedElements` function receives 3 arguments\n\n| Argument | Type | Description |\n| ------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `route` | `Route` | Route prop of the current screen. You can use this to get the params of the screen using `route.params`, or the route-name using `route.name` |\n| `otherRoute` | `Route` | The route prop of the other screen. You can use this to get the params of that screen using `route.params`, or the route-name using `route.name` |\n| `showing` | `boolean` | `true` when this screen is being shown, and `false` when this screen is being hidden. | |\n\nThe return value should be either `undefined` or an array of shared-element configs or identifiers. Specifying a string-identifier is shorthand for `{id: 'myid'}`.\n\n**Basic example**\n\n```js\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createSharedElementStackNavigator } from 'react-navigation-shared-element';\n\nconst Stack = createSharedElementStackNavigator();\n\nconst App = () => {\n return (\n \n \n \n {\n const { item } = route.params;\n return [`item.${item.id}.photo`];\n }}\n />\n \n \n );\n};\n```\n\n**Only transition when coming from a specific route**\n\nIf you only want to show a transition when pushing from a particular screen, then use the route-name and `showing` argument.\n\n```js\n {\n if (otherRoute.name === 'List' && showing) {\n const { item } = route.params;\n return [`item.${item.id}.photo`];\n }\n }}\n/>\n```\n\n**Customize the animation**\n\nIf the source- and target elements are visually distinct, the consider using a cross-fade animation.\n\n```js\n {\n const { item } = route.params;\n return [\n {\n id: `item.${item.id}.photo`,\n animation: 'fade',\n // resize: 'clip'\n // align: ''left-top'\n },\n ];\n }}\n/>\n```\n\n**TypeScript**\n\nThe `createSharedElementStackNavigator` has a generic parameter which allows you to statically type the screens and route params just like with `createStackNavigator`:\n\n```tsx\ntype SharedStackParams = {\n List: undefined;\n Details: {\n id: number;\n src: string;\n };\n};\n\nconst { Navigator, Screen } = createSharedElementStackNavigator();\n\nexport default () => (\n \n \n \n \n);\n```\n\n**Static shared elements config**\n\nA `sharedElements` function can also be defined on the component itself, instead of the `Screen`, but this is no longer considered good practice.\n\n```js\nclass DetailScreen extends Component {\n static sharedElements = (route, otherRoute, showing) => {\n const { item } = route.params;\n return [`item.${item.id}.photo`];;\n }\n\n render() {...}\n}\n```\n\nThe following fields can be specified in a config item\n\n| Field | Type | Description |\n| ----------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id` | `string` | Id that corresponds to the `id` specified in the `` component |\n| `otherId` | `string` | Optional id that corresponds to the `id` specified in the other screen. |\n| `animation` | `move` \\| `fade` | Type of animation to perform (default = `move`), [see SharedElementAnimation](https://github.com/IjzerenHein/react-native-shared-element#sharedelementanimation) |\n| `resize` | `auto` \\| `stretch` \\| `clip` \\| `none` | Resize behavior of the transition (default = `auto`), [see SharedElementResize](https://github.com/IjzerenHein/react-native-shared-element#sharedelementresize) |\n| `align` | `auto` \\| `top-left` \\| `...` | Align behavior of the transition (default = `auto`), [see SharedElementAlign](https://github.com/IjzerenHein/react-native-shared-element#sharedelementalign) | |\n\n## Demo App\n\n- [react-navigation-shared-element-demo](https://github.com/IjzerenHein/react-navigation-shared-element-demo)\n\n## Videos\n\n- [Airbnb Shared Transition - “Can it be done in React Native?”](https://www.youtube.com/watch?v=83GNiMp-qq0)\n\n## License\n\nReact navigation shared element library is licensed under [The MIT License](./LICENSE.md).\n","readmeFilename":"README.md","gitHead":"32fa46bd55b6a01003e6e99f8c4d1c0eb07ec813","_id":"react-navigation-shared-element@5.0.0-alpha0","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-Dgp1egdGklk4QIJwjE3F/E7VstjbUnE4ZR4XwketiqIGXyVFTbVE+rkXaqHnen76tUx5eJclFZTttoPFw3ayVg==","shasum":"386a47854db88ae557ed0e40b3d87b797b180321","tarball":"https://registry.npmjs.org/react-navigation-shared-element/-/react-navigation-shared-element-5.0.0-alpha0.tgz","fileCount":76,"unpackedSize":260718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecoElCRA9TVsSAnZWagAActAP/0sR8erjBsEaCxQDm0cD\nm8xcj6ugKpQ+QXFFRgngZlwd/yyQBTpJQyYp6Yip1ERRRdpqXPoxxmfmNfse\nrvsqjRq3PPqtV9xXEBghAI68QyrxOL1nKD/WO9MKbcjrfOvDtKfh6rvH/BaA\nJI0KdUp23VoLH8sw+e6m4c3kkYLQlA/TEm/4fpn6Q/dt7DCWPZE7McKP1/ch\nuUENHXRvBujoSdPmRaC27aI5MZw3VAIFy2pBLpzl5HaW2LlS+tgGBpbmdoT3\noGpaAijdDk3/ZbNTsLknnE/jv/fe2KAersz9QJJIj3JDyRrIt8/C14LIGggo\nhKGnAPz5saR9ZkCqouMlxV6Q6pwAwz0Uhb+ihW0YbihWlWt+C9beYrxnfWvL\naqys8hP8afeVUiSVkdsp41C9hotAsrmM2rjUHNGcvo++AmHjwhFKgTidmHot\nMrf1fqp7fIrOTeEEjjf4Hae+ad630NKqN04FOfEhwnY+r2xgJNWGFmCW6zqN\n5NitCK+P5i4suflKjc7BtjIeqsqc+i0gzc02BoEZdoR+Y5ygYu1/XiwFsMrT\nTHsEIeyDnwnHIHDgJRMmUl6higi2b3UseqZlH0uNoMHZNP5DnDevmAgx8wPr\nGlKWlM7wgd0sQr3cIdHWy46u/xZyrl2MCNIKrzQqmB2AwGKnt6KtEmeGPW8u\n1dIf\r\n=RRiR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFY7Oo2LpShWc84SBkIloetZ+WLs04njLBwtzuK3klrzAiA/CwyG5G0ZQkV6ImOyUzC1kRfDecDr52mdfhy2KvdW1w=="}]},"maintainers":[{"name":"ijzerenhein","email":"hrutjes@gmail.com"}],"_npmUser":{"name":"ijzerenhein","email":"hrutjes@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-navigation-shared-element_5.0.0-alpha0_1584562469448_0.5521644524438183"},"_hasShrinkwrap":false},"5.0.0-alpha1":{"name":"react-navigation-shared-element","version":"5.0.0-alpha1","description":"react-native-shared-element bindings for React Navigation","main":"lib/commonjs/index.js","module":"lib/module/index.js","react-native":"lib/module/index.js","types":"lib/typescript/index.d.ts","sideEffects":false,"scripts":{"test":"jest","lint":"eslint --ext .js,.ts,.tsx .","typescript":"tsc --noEmit","prepare":"bob build","release":"release-it","example":"yarn --cwd example","bootstrap":"yarn example && yarn","version":"conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"keywords":["react-native-component","react-component","react-native","ios","android","shared-element"],"repository":{"type":"git","url":"git+https://github.com/IjzerenHein/react-navigation-shared-element.git"},"author":"","license":"MIT","bugs":{"url":"https://github.com/IjzerenHein/react-navigation-shared-element/issues"},"homepage":"https://github.com/IjzerenHein/react-navigation-shared-element#readme","dependencies":{"hoist-non-react-statics":"^3.3.2"},"devDependencies":{"@babel/core":"^7.8.7","@commitlint/config-conventional":"^8.3.4","@react-native-community/bob":"^0.10.0","@react-native-community/eslint-config":"^0.0.7","@react-navigation/native":"^5.0.9","@react-navigation/stack":"^5.1.1","@release-it/conventional-changelog":"^1.1.0","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^25.1.4","@types/react":"^16.9.23","@types/react-native":"^0.61.22","@types/react-test-renderer":"^16.9.2","commitlint":"^8.3.5","conventional-changelog-cli":"^2.0.31","eslint":"^6.8.0","eslint-config-prettier":"^6.10.0","eslint-plugin-prettier":"^3.1.2","eslint-plugin-react":"^7.19.0","eslint-plugin-react-native":"^3.8.1","husky":"^4.2.3","jest":"^25.1.0","prettier":"^1.19.1","react":"^16.13.0","react-dom":"^16.13.0","react-native":"^0.61.5","react-native-shared-element":"^0.5.6","react-test-renderer":"^16.13.0","release-it":"^13.1.1","scheduler":"^0.19.0","typescript":"^3.8.3"},"peerDependencies":{"@react-navigation/native":"^5.0.9","@react-navigation/stack":"^5.1.1","react":"*","react-native":"*","react-native-shared-element":"*"},"jest":{"preset":"react-native","testEnvironment":"node","setupFiles":["/jest-setup.js"],"coveragePathIgnorePatterns":["jest-setup.js"],"modulePathIgnorePatterns":["/example/","/lib/"],"transformIgnorePatterns":["node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator|@react-navigation/core|@react-navigation/native)"],"testRegex":"/__tests__/.*\\.(test|spec)\\.(js|tsx?)$","transform":{"^.+\\.(js|ts|tsx)$":"babel-jest"}},"prettier":{"trailingComma":"es5","singleQuote":true},"husky":{"hooks":{"pre-commit2":"yarn typescript && yarn lint && yarn test","commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"@react-native-community/bob":{"source":"src","output":"lib","targets":["commonjs","module","typescript"]},"readme":"# React Navigation Shared Element \n\nReact Navigation bindings for [react-native-shared-element](https://github.com/IjzerenHein/react-native-shared-element) 💫\n\n## react-navigation 5 \n\n**This is the development branch for `react-navigation@5`.**\n\n*If you wish to use an earlier version of react-navigation, [please checkout the master branch](https://github.com/IjzerenHein/react-navigation-shared-element).*\n\n\n## Index \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Documentation](#documentation)\n - [createSharedElementStackNavigator](#createsharedelementstacknavigator)\n - [SharedElement](#sharedelement)\n - [sharedElementsConfig](#sharedelementsconfig)\n- [Demo App](#demo-app)\n- [Videos](#videos)\n- [License](#license)\n\n## Installation\n\nOpen a Terminal in your project's folder and run,\n\n```sh\n$ yarn add react-navigation-shared-element@next react-native-shared-element\n```\n\nEnsure that [react-native-shared-element](https://github.com/IjzerenHein/react-native-shared-element) is also linked into your project.\n\nFinally, make sure that the compatible react-navigation dependencies are installed:\n\n```sh\n$ yarn add @react-navigation/native@^5.0.9 @react-navigation/stack@^5.1.1\n```\n\n## Usage\n\nIn order to enable shared element transitions, the following steps need to be performed\n\n- Create a stack-navigator using `createSharedElementStackNavigator`\n- Wrap your component with `` and provide a unique `id`\n- Define a `sharedElementsConfig` config on the Screen that you want to animate\n\n```jsx\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createSharedElementStackNavigator } from 'react-navigation-shared-element';\n\nconst Stack = createSharedElementStackNavigator();\n\nconst App = () => {\n return (\n \n \n \n {\n const { item } = route.params;\n return [`item.${item.id}.photo`];\n }}\n />\n \n \n );\n};\n```\n\n```jsx\n// ListScreen.js\nimport { SharedElement } from 'react-navigation-shared-element';\n\nclass ListScreen extends React.Component {\n renderItem(item) {\n const { navigation } = this.props;\n return (\n navigation.push('Detail', { item })}>\n \n \n \n \n );\n }\n}\n```\n\n```jsx\n// DetailScreen.js\nconst DetailScreen = props => {\n const { item } = props.route.params;\n return (\n \n \n \n );\n};\n```\n\n## Documentation\n\n### createSharedElementStackNavigator\n\nThe `createSharedElementStackNavigator` function wraps an existing stack-navigator and enables shared element transitions for it.\n\nIt performs the following actions\n\n- Creates a top-level renderer to host the shared element transitions\n- Wraps each route with a shared element scene\n- Detects route changes and trigger shared element transitions\n\n### SharedElement\n\nThe `` component accepts a single child and a _\"shared\"_ id. The child is the element that is made available for doing shared element transitions. It can be any component, like a ``, `` or ``. In case the wrapped view is an ``, special handling is performed to deal with image loading and resizing.\n\nThis component is synonymous for the `` component as defined in `react-native-shared-element`. Instead of a `node` it uses an `id` to create a higher lever API which automatically ties in with the scenes created by `createSharedElementStackNavigator`.\n\n**Props**\n\n| Property | Type | Description |\n| --------------- | --------- | ------------------------------------------------------------------------------------ |\n| `children` | `element` | A single child component, which must map to a real view in the native view hierarchy |\n| `id` | `string` | Unique id of the shared element |\n| `View props...` | | Other props supported by View |\n\n### sharedElementsConfig\n\nIn order to trigger shared element transitions between screens, a `sharedElementsConfig` function needs to be defined on one of the two screens. For\neach screen transition, both screens are evaluated and checked whether they have a `sharedElementsConfig`. The screen that is being shown is **evaluated first**, followed by the screen that is being hidden. If `undefined` is returned, evaluation continues at the other screen.\n\nThe `sharedElements` function receives 3 arguments\n\n| Argument | Type | Description |\n| ------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `route` | `Route` | Route prop of the current screen. You can use this to get the params of the screen using `route.params`, or the route-name using `route.name` |\n| `otherRoute` | `Route` | The route prop of the other screen. You can use this to get the params of that screen using `route.params`, or the route-name using `route.name` |\n| `showing` | `boolean` | `true` when this screen is being shown, and `false` when this screen is being hidden. | |\n\nThe return value should be either `undefined` or an array of shared-element configs or identifiers. Specifying a string-identifier is shorthand for `{id: 'myid'}`.\n\n**Basic example**\n\n```js\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createSharedElementStackNavigator } from 'react-navigation-shared-element';\n\nconst Stack = createSharedElementStackNavigator();\n\nconst App = () => {\n return (\n \n \n \n {\n const { item } = route.params;\n return [`item.${item.id}.photo`];\n }}\n />\n \n \n );\n};\n```\n\n**Only transition when coming from a specific route**\n\nIf you only want to show a transition when pushing from a particular screen, then use the route-name and `showing` argument.\n\n```js\n {\n if (otherRoute.name === 'List' && showing) {\n const { item } = route.params;\n return [`item.${item.id}.photo`];\n }\n }}\n/>\n```\n\n**Customize the animation**\n\nIf the source- and target elements are visually distinct, the consider using a cross-fade animation.\n\n```js\n {\n const { item } = route.params;\n return [\n {\n id: `item.${item.id}.photo`,\n animation: 'fade',\n // resize: 'clip'\n // align: ''left-top'\n },\n ];\n }}\n/>\n```\n\n**TypeScript**\n\nThe `createSharedElementStackNavigator` has a generic parameter which allows you to statically type the screens and route params just like with `createStackNavigator`:\n\n```tsx\ntype SharedStackParams = {\n List: undefined;\n Details: {\n id: number;\n src: string;\n };\n};\n\nconst { Navigator, Screen } = createSharedElementStackNavigator();\n\nexport default () => (\n \n \n \n \n);\n```\n\n**Static shared elements config**\n\nA `sharedElements` function can also be defined on the component itself, instead of the `Screen`, but this is no longer considered good practice.\n\n```js\nclass DetailScreen extends Component {\n static sharedElements = (route, otherRoute, showing) => {\n const { item } = route.params;\n return [`item.${item.id}.photo`];;\n }\n\n render() {...}\n}\n```\n\nThe following fields can be specified in a config item\n\n| Field | Type | Description |\n| ----------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id` | `string` | Id that corresponds to the `id` specified in the `` component |\n| `otherId` | `string` | Optional id that corresponds to the `id` specified in the other screen. |\n| `animation` | `move` \\| `fade` | Type of animation to perform (default = `move`), [see SharedElementAnimation](https://github.com/IjzerenHein/react-native-shared-element#sharedelementanimation) |\n| `resize` | `auto` \\| `stretch` \\| `clip` \\| `none` | Resize behavior of the transition (default = `auto`), [see SharedElementResize](https://github.com/IjzerenHein/react-native-shared-element#sharedelementresize) |\n| `align` | `auto` \\| `top-left` \\| `...` | Align behavior of the transition (default = `auto`), [see SharedElementAlign](https://github.com/IjzerenHein/react-native-shared-element#sharedelementalign) | |\n\n## Demo App\n\n- [react-navigation-shared-element-demo](https://github.com/IjzerenHein/react-navigation-shared-element-demo)\n\n## Videos\n\n- [Airbnb Shared Transition - “Can it be done in React Native?”](https://www.youtube.com/watch?v=83GNiMp-qq0)\n\n## License\n\nReact navigation shared element library is licensed under [The MIT License](./LICENSE.md).\n","readmeFilename":"README.md","gitHead":"53f1a98c1a1789c29a62c60722b0254ce47e2e4f","_id":"react-navigation-shared-element@5.0.0-alpha1","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-zPlpvUV6RGsZv3lTDanIN3ARvqABHDrqIOKcD6NpUKXarua8F2kukJ0MqD0Py+oZR3e5ksjDHAISDU05iGmPwQ==","shasum":"29f2090d3f0eef626df93b8572ce5c192d5c46f2","tarball":"https://registry.npmjs.org/react-navigation-shared-element/-/react-navigation-shared-element-5.0.0-alpha1.tgz","fileCount":76,"unpackedSize":259359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecokCCRA9TVsSAnZWagAAAagP/3AOA2extLGaMpG1lfBE\n/F1OIxupIIn//bcxV2FhYge1lqAWG69wIYqKpK0YDasqr+IxPDqb6et7aTee\nHNIWtPhJXrhqMvLY7QxOzhgYHcrwaIQD1ZirwgX+/ptOZHeJmPnMMA9YiRXT\nc15fcR5cTj/quLh7XT+3jk1VL6xdFo6ef8TsZpfVi7MpbdtDSommNhaWgRfC\n/75AMtTg68U0I7GdFQzxjWzF7EgSs8IEFN6wxyu8OIeOELADF10d1l+X+E4U\nfKlouCJoqd3jNUxLbSotqra+u7qyILuoXuU3KQsOCytqLMmm8Tkm8wKdTi68\n5w54rAIqbR0y51ZYrOK2BOoJLHdCtDmAO97zWrflKUwknJmSZqFWImcQrnPu\n2iBQGGTEWkkjl8LxzAkNP8xl/C+94nAJGDcVMSlaUm+00o6KVqVEK6bynI+o\njKUlOyCylTkT6ehm5KcqSKxS+9EwzaVtyv2WcBcol1X/x82gSfbp4a3NJzZL\njE16RkcgeK8DwuK3Cm/3Wp24SiClHjqwLDXglmldcheKG5ABnLgDe8OOJFUo\ndIa695nb+Y4xtmFJdKU7AuPwMscayFPgFmqGHQa7d4JxeCOmF0JaFcg/IjXf\nCtGMZd+1P52ZOypYKGvQVOiwL6iUEs2iicohPeuvpRHZercKRyBhlH7e9/cj\n6xD0\r\n=vNz3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGig7kU4cX341GvUGt3HQ4TFvcNfYDbpd+12RXo2Zz+mAiA1R9kh5XhHeRk+hvqmvNJWM3xkbhOynH0YdkQdYp2efg=="}]},"maintainers":[{"name":"ijzerenhein","email":"hrutjes@gmail.com"}],"_npmUser":{"name":"ijzerenhein","email":"hrutjes@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-navigation-shared-element_5.0.0-alpha1_1584564481894_0.2550504271683349"},"_hasShrinkwrap":false},"2.3.0":{"name":"react-navigation-shared-element","version":"2.3.0","description":"react-native-shared-element bindings for React Navigation","main":"build/index.js","types":"build/index.d.ts","sideEffects":false,"scripts":{"build":"expo-module build","clean":"expo-module clean","lint":"expo-module lint","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module","changelog":"conventional-changelog -p angular -i CHANGELOG.md -s"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"keywords":["react-navigation-shared-element","navigation-shared-element","navigation","shared-element"],"repository":{"type":"git","url":"git+https://github.com/IjzerenHein/react-navigation-shared-element.git"},"author":{"name":"IjzerenHein","email":"hrutjes@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/IjzerenHein/react-navigation-shared-element/issues"},"homepage":"https://github.com/IjzerenHein/react-navigation-shared-element#readme","dependencies":{"hoist-non-react-statics":"^3.3.2"},"devDependencies":{"@commitlint/config-conventional":"^8.3.4","@types/react":"^16.9.23","@types/react-native":"^0.61.17","commitlint":"^8.3.5","conventional-changelog-cli":"^2.0.31","eslint":"^6.8.0","expo-module-scripts":"^1.2.0","prettier":"^1.19.1","react-native-shared-element":"^0.6.1","react-navigation":"^4.3.7","react-navigation-stack":"^2.3.11"},"peerDependencies":{"react":"*","react-native":"*","react-native-shared-element":"*"},"gitHead":"f163d4ce1516835871342b5b7eb4cdd8f95ae0f0","_id":"react-navigation-shared-element@2.3.0","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-fbZnipN8FjaA1sGhhaK1izGsG/GYEHCf7B7cT5lDO75MdFHmOlM7CNkuSq36RBP3I7s8P6pao0xyNI+15//k4w==","shasum":"d64a150cb7300c064233af210875cfa82506cd60","tarball":"https://registry.npmjs.org/react-navigation-shared-element/-/react-navigation-shared-element-2.3.0.tgz","fileCount":52,"unpackedSize":151388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelHYnCRA9TVsSAnZWagAAa6sP/Redepvkpsfj84DgbHBb\njKkaMDGTD2rGNDHSpbDRSUiR+Gla11eTAtDS4XG2VEzizkKo/jleoRjf6Mma\nRP0/m906CHNkXBXVZsHAWsPxP8ytRHy6nqg/gf8/pCSwaPlsBld3OGkGUFvC\nFLNjfRAUuckuX6fY8ZDW7smBxAA9b94XI6wpj5RoVbWpQKF/7S4lnCzmObhB\nOM7kyj1A/eo2U/QKR/gzFwss/KyO8FdwQ7S1mazXX3sItKa4ugARpEAKom4K\nLa2bF/sYQSsnpOzlEqkc4L9q/PAdGZy1uPMhs9kN8zlaJdiugqWbqex+Ae5q\nE/yx6Y/mR2aooTFBMX8YYvEPbQSBieoiqJfz/g+gitsOi3RfYbdsVFwlUFHr\n3sn+PX/oHFUzaGmvbARaS4xqqkZPIpMeDWUogvcQguTzCFW5E7MHk2tPuKGO\nxxeWBgSzluvPV3WSVf/PSdW4EnTYMUCfUTuuH/5/BFZfdtY6brlRSSDc9+Ub\nl3g8J9l5y4rilbUkSqIeM22agdjsuGHTM+5NiMCshnbTT6lRGlAM1m0fNFcq\nW9eKKHZdPPzF2VgUXzIB7LxNlCgNxz3ahdQNUz2xEbDitf6oWFPr453kP3cf\nI9sSH9zpBl+S2gmXBUnu8Navryi/ziXPg34TTPtxjpv+Wun5MTiO0eO3mbme\n1sVy\r\n=dyjN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmsoafnSYrCyh4eY1kPThZf4JEoAUFKAo6OLkSwnTC6gIgUit71c3LmCIe8o1SunZrebjYe/mjcc1Bwmg9N+9xgx4="}]},"maintainers":[{"name":"ijzerenhein","email":"hrutjes@gmail.com"}],"_npmUser":{"name":"ijzerenhein","email":"hrutjes@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-navigation-shared-element_2.3.0_1586787879090_0.13159106320927316"},"_hasShrinkwrap":false},"3.0.0":{"name":"react-navigation-shared-element","version":"3.0.0","description":"react-native-shared-element bindings for React Navigation","main":"build/index.js","types":"build/index.d.ts","sideEffects":false,"scripts":{"build":"expo-module build","clean":"expo-module clean","lint":"expo-module lint","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module","changelog":"conventional-changelog -p angular -i CHANGELOG.md -s"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"keywords":["react-navigation-shared-element","navigation-shared-element","navigation","shared-element"],"repository":{"type":"git","url":"git+https://github.com/IjzerenHein/react-navigation-shared-element.git"},"author":{"name":"IjzerenHein","email":"hrutjes@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/IjzerenHein/react-navigation-shared-element/issues"},"homepage":"https://github.com/IjzerenHein/react-navigation-shared-element#readme","dependencies":{"hoist-non-react-statics":"^3.3.2"},"devDependencies":{"@commitlint/config-conventional":"^8.3.4","@react-navigation/bottom-tabs":"^5.3.3","@react-navigation/material-top-tabs":"^5.1.14","@react-navigation/native":"^5.4.3","@react-navigation/stack":"^5.4.0","@types/react":"^16.9.23","@types/react-native":"^0.61.17","commitlint":"^8.3.5","conventional-changelog-cli":"^2.0.31","eslint":"^7.1.0","expo-module-scripts":"^1.2.0","prettier":"^2.0.5","react-native-shared-element":"^0.7.0","react-navigation":"^4.3.7","react-navigation-stack":"^2.3.11"},"peerDependencies":{"react":"*","react-native":"*","react-native-shared-element":"*"},"gitHead":"ab925f95b8da83c74cda097004bbec1d710b9b72","_id":"react-navigation-shared-element@3.0.0","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-nSmbgf4+hKSZU1Rzi5Bm1Is5mt0Z+xY5sXeTx4t5KMnmNW4lz5M83p9oTW6mKDoXUeCocUfeVwbCmsAjlyTLQw==","shasum":"3dfa6a71f138e4ceb457a91aea3ef2a8ab2a6a32","tarball":"https://registry.npmjs.org/react-navigation-shared-element/-/react-navigation-shared-element-3.0.0.tgz","fileCount":76,"unpackedSize":218209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeypYSCRA9TVsSAnZWagAATU8P/j4jfPvL/pY7b5tailVQ\neH3Zssmo2s5c1AwYJ8LHZUJBOEqAXJqFjit625j5rJ7rF4p1AjCViFizJn2h\n2wg8CwYALSCOLy7rAVCMaD9sbftdUzEmkHcJRCEcB/gBLOxaJhw00NffJR7i\nR71LBYHTYRQYjVAwmmB9gyRT8FMsm/SzcojYAFloJDnkNX11EYMAR0g6iCNR\nRTls7/BTyYq2sBL8TmNVdLzzycLX9rAHR1uOznFj30jdIV0NA3COkOkBjTBe\naT4MZaRn8axtZ7br7QXOy/btDjU2NobisdZAJpEH7KO41BgGg7EccbvOLJDs\nH+btBNB0BhwBi7ugEMEt7LwJGennDML3H7rI+zN1VvbuGLY7g2oD9+ngghv7\nq71yh6jWtVN4kljIqblrStOJrbEZSrn1YIhhfVPCRgAH9p9YHhM0SCkHIT8m\nEDy5shL+9SNTRTAYG6XjxzjzIz/IoyPRrAyLET/VyvUFYFkckejXkHZAFqkE\n4k7y17Xeo9lvkeZCTMlOaC7fe/eWytFnuUs0J2oyhaftnL9QxR/114PG2/Wd\nfal/erZrcf/exPU6Q/KCMm43FiyLnCyfAvA5G7/M+8jjPlL20MdzcI6DJDBz\nQo1xXy07b8rdwwPJ3Z1rvsaa0W0r5kldy058lYEgkfc7qMuQPgmnHeCK+Ood\nNL8u\r\n=UISr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyClR/80Bka2sLwY5EiM89i+D9oDtLmQ5TvHlvLt+HIQIgERFhwZFwTN5fZ7YAu7p2vHxh7v4r6FbcCco0meqK8+c="}]},"maintainers":[{"name":"ijzerenhein","email":"hrutjes@gmail.com"}],"_npmUser":{"name":"ijzerenhein","email":"hrutjes@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-navigation-shared-element_3.0.0_1590334993574_0.9324105791217141"},"_hasShrinkwrap":false},"2.3.1":{"name":"react-navigation-shared-element","version":"2.3.1","description":"react-native-shared-element bindings for React Navigation","main":"build/index.js","types":"build/index.d.ts","sideEffects":false,"scripts":{"build":"expo-module build","clean":"expo-module clean","lint":"expo-module lint","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module","changelog":"conventional-changelog -p angular -i CHANGELOG.md -s"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"keywords":["react-navigation-shared-element","navigation-shared-element","navigation","shared-element"],"repository":{"type":"git","url":"git+https://github.com/IjzerenHein/react-navigation-shared-element.git"},"author":{"name":"IjzerenHein","email":"hrutjes@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/IjzerenHein/react-navigation-shared-element/issues"},"homepage":"https://github.com/IjzerenHein/react-navigation-shared-element#readme","dependencies":{"hoist-non-react-statics":"^3.3.2"},"devDependencies":{"@commitlint/config-conventional":"^8.3.4","@types/react":"^16.9.23","@types/react-native":"^0.61.17","commitlint":"^8.3.5","conventional-changelog-cli":"^2.0.31","eslint":"^6.8.0","expo-module-scripts":"^1.2.0","prettier":"^1.19.1","react-native-shared-element":"^0.6.1","react-navigation":"^4.3.7","react-navigation-stack":"^2.3.11"},"peerDependencies":{"react":"*","react-native":"*","react-native-shared-element":"*"},"gitHead":"f163d4ce1516835871342b5b7eb4cdd8f95ae0f0","_id":"react-navigation-shared-element@2.3.1","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-MA2xDn9urQkgAiAhGttCtaoTW6VaseYpCB7f1CmXaj9ROYojznWxlKZuT94riGFzuiFxDMMKWFgLM6JMUf6ELA==","shasum":"35a3ac2f42a3e8c55e60609344443725c793a9b7","tarball":"https://registry.npmjs.org/react-navigation-shared-element/-/react-navigation-shared-element-2.3.1.tgz","fileCount":52,"unpackedSize":151388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJez3NOCRA9TVsSAnZWagAAFu8QAImfP1/uIva2qlHBoKZ4\nDZplS3ur5jAoe2ZJ96iuR93KxwKybVPGgU56NrlJMr+wlEf/sLjMLbU3f6W+\n05oDS6seLtBvL9ADQmwY/QhrOvS5N3fh91te/YrEbQQedAQaIPdHxwpIK5PU\n61RNkyxAXs5llhFQt6zBGYCqS/+15WmYVRC+YPZuKmT4cZDMdRMdizm+8Q2C\nT8ScALYm+aKBPBR26QWoTDvlwedmoHC0XqOaETyLpAM2qhzcWruxFKgH1Kq7\nOUAbuLp9qrrPIrBzK8gEj5qLhBh10sTL29GZyD5U5eKwRTxPqRRLmQR3jNYl\n8uRWGDvk4aIhEUvwtiqv6j/W4GbBVZC9AzZsT8vJnF5tUYPZ94pzjY3XgTiw\nzehytFBI8BvBf9+WLeTAN7vAt/kxieVyLiycIyLJXVf9xczs9Na3HWEedQZR\nbhFWHS9QYqRF0+vpM/9I3Gb4ZMwHHk2ALyiepvhPuGjeMCVqsoWuyH9bXgao\nJkpMtYPcw6V0n3YQD54t2BxnB6sbkX5TOmaZBMlNutKJv1w3nZtWiw1QalwV\nvVzaSuVMjIy7G8cu5u8Bn4fTCbYnU2mzS8HCZdMB2rjzHvAkCynNThnMaMHH\nEZS1LmDo9/VcnYsFRzo+iWNGdjaWhrb+ZfpYcDfqV07txlF6xj5/eSYQ3Q+G\nH9WY\r\n=GTbL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnQzQxI984hiFvKgj1n/YcDecSEMWqskjO4gxYu0JwLgIgQlSiNzkQTCJ5zCQWbEhn+/u4+ZrxN5zWsIoopC8Yc6I="}]},"maintainers":[{"name":"ijzerenhein","email":"hrutjes@gmail.com"}],"_npmUser":{"name":"ijzerenhein","email":"hrutjes@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-navigation-shared-element_2.3.1_1590653773866_0.8932638827063026"},"_hasShrinkwrap":false},"3.1.0":{"name":"react-navigation-shared-element","version":"3.1.0","description":"react-native-shared-element bindings for React Navigation","main":"build/index.js","types":"build/index.d.ts","sideEffects":false,"scripts":{"build":"expo-module build","clean":"expo-module clean","lint":"expo-module lint","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module","changelog":"conventional-changelog -p angular -i CHANGELOG.md -s"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"keywords":["react-navigation-shared-element","navigation-shared-element","navigation","shared-element"],"repository":{"type":"git","url":"git+https://github.com/IjzerenHein/react-navigation-shared-element.git"},"author":{"name":"IjzerenHein","email":"hrutjes@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/IjzerenHein/react-navigation-shared-element/issues"},"homepage":"https://github.com/IjzerenHein/react-navigation-shared-element#readme","dependencies":{"hoist-non-react-statics":"^3.3.2"},"devDependencies":{"@commitlint/config-conventional":"^13.1.0","@react-navigation/bottom-tabs":"^6.0.5","@react-navigation/material-top-tabs":"^6.0.2","@react-navigation/native":"^6.0.2","@react-navigation/stack":"^6.0.7","@types/react":"^17.0.15","@types/react-native":"^0.64.12","commitlint":"^13.1.0","conventional-changelog-cli":"^2.1.1","eslint":"^7.32.0","expo-module-scripts":"^2.0.0","prettier":"^2.3.2","react-native-shared-element":"0.8.2","react-navigation":"^4.4.4","react-navigation-stack":"^2.10.4","react-navigation-tabs":"^2.11.1"},"peerDependencies":{"react":"*","react-native":"*","react-native-shared-element":"*"},"readme":"# React Navigation Shared Element \n\nReact Navigation bindings for [react-native-shared-element](https://github.com/IjzerenHein/react-native-shared-element) 💫\n\n## Compatibility \n\nSupported by latest stable version (2.x):\n\n- [X] react-navigation 4 & 3\n- [X] react-navigation-stack 2 \n- [X] react-navigation-stack 1 [(use react-navigation-shared-element@1)](https://github.com/IjzerenHein/react-navigation-shared-element/tree/v1)\n\n[V3 prerelease](./README-prerelease.md) (supports both react-navigation API 4.x and 5.x from a single codebase)\n\n- [X] react-navigation 5\n- [X] react-navigation 4 & 3\n- [X] react-navigation-stack 2 \n\nUnlikely to be supported:\n\n- [ ] [react-native-screens/createNativeStackNavigator](https://github.com/IjzerenHein/react-navigation-shared-element/issues/14)\n\n\n## Index \n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Documentation](#documentation)\n - [createSharedElementStackNavigator](#createsharedelementstacknavigator)\n - [Debugging shared element transitions](#debugging-shared-element-transitions)\n - [SharedElement](#sharedelement)\n - [sharedElements config](#sharedelements-config)\n- [Demo App](#demo-app)\n- [Videos](#videos)\n- [License](#license)\n\n## Installation\n\nOpen a Terminal in your project's folder and run,\n\n```sh\n$ yarn add react-navigation-shared-element react-native-shared-element\n```\n\nEnure that [react-native-shared-element](https://github.com/IjzerenHein/react-native-shared-element) is also linked into your project.\n\nFinally, make sure that the compatible react-navigation dependencies are installed:\n\n```sh\n$ yarn add react-navigation@4 react-navigation-stack@2\n```\n\n> react-navigation@5 is not supported yet, so don't bother..\n\n## Usage\n\nIn order to enable shared element transitions, the following steps need to be performed\n\n- Create a stack-navigator using `createSharedElementStackNavigator`\n- Wrap your component with `` and provide a unique `id`\n- Define a static `sharedElements` config on the Screen that you want to animate\n\n```jsx\nimport { createSharedElementStackNavigator } from 'react-navigation-shared-element';\n\nconst stackNavigator = createSharedElementStackNavigator(\n {\n List: ListScreen,\n Detail: DetailScreen,\n },\n {\n initialRouteName: 'List',\n }\n);\n\nconst AppContainer = createAppContainer(stackNavigator);\n```\n\n```jsx\n// ListScreen.js\nimport { SharedElement } from 'react-navigation-shared-element';\n\nclass ListScreen extends React.Component {\n renderItem(item) {\n const { navigation } = this.props;\n return (\n navigation.push('Detail', { item })}>\n \n \n \n \n );\n }\n}\n```\n\n```jsx\n// DetailScreen.js\nconst DetailScreen = (props) => {\n const item = props.navigation.getParam('item');\n return (\n \n \n \n );\n};\n\nDetailScreen.sharedElements = (navigation, otherNavigation, showing) => {\n const item = navigation.getParam('item');\n return [`item.${item.id}.photo`];\n};\n```\n\n## Documentation\n\n### createSharedElementStackNavigator\n\nThe `createSharedElementStackNavigator` function wraps an existing stack-navigator and enables shared element transitions for it.\n\nIt performs the following actions\n\n- Creates a top-level renderer to host the shared element transitions\n- Wraps each route with a shared element scene\n- Detect route changes and trigger shared element transitions\n\n**Arguments**\n\n| Argument | Type | Description |\n| --------------------- | -------- | ----------------------------------------------------------------------- |\n| `routeConfig` | `object` | Routes-config |\n| `stackConfig` | `object` | Optional stack navigator config |\n| `sharedElementConfig` | `object` | Optional [shared element config](#debugging-shared-element-transitions) |\n\n#### Debugging shared element transitions\n\nWhen transitions aren't working as expected, you can enable debug-mode\nto log scene transitions and shared-element id's to the console. The\nlog output is useful for understanding scene changes and for reporting issues.\n\n```jsx\nconst stackNavigator1 = createSharedElementStackNavigator(\n { ... }, // routeConfig\n { ... } // stackConfig\n {\n name: 'MyStackNav',\n debug: true\n }\n);\n```\n\n\n### SharedElement\n\nThe `` component accepts a single child and a _\"shared\"_ id. The child is the element that is made available for doing shared element transitions. It can be any component, like a ``, `` or ``. In case the wrapped view is an ``, special handling is performed to deal with image loading and resizing.\n\nThis component is synonymous for the `` component as defined in `react-native-shared-element`. Instead of a `node` it uses an `id` to create a higher lever API which automatically ties in with the scenes created by `createSharedElementStackNavigator`.\n\n**Props**\n\n| Property | Type | Description |\n| --------------- | --------- | ------------------------------------------------------------------------------------ |\n| `children` | `element` | A single child component, which must map to a real view in the native view hierarchy |\n| `id` | `string` | Unique id of the shared element |\n| `View props...` | | Other props supported by View |\n\n### sharedElements config\n\nIn order to trigger shared element transitions between screens, a static `sharedElements` config needs to be defined on one of the two screens. For\neach screen transition, both screens are evaluated and checked whether they have a `sharedElements` config. The screen that is being shown is **evaluated first**, followed by the screen that is being hidden. If `undefined` is returned, evaluation continues at the other screen.\n\nThe `sharedElements` function receives 3 arguments\n\n| Argument | Type | Description |\n| ----------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `navigation` | `NavigationProp` | Navigation prop of the current screen. You can use this to get the params of the screen using `getParam`, or the route-name using `state.routeName` |\n| `otherNavigation` | `NavigationProp` | The navigation-prop of the other screen. You can use this to get the params of that screen using `getParam`, or the route-name using `state.routeName` |\n| `showing` | `boolean` | `true` when this screen is being shown, and `false` when this screen is being hidden. | |\n\nThe return value should be either `undefined` or an array of shared-element configs or identifiers. Specifying a string-identifier is shorthand for `[{id: 'myid'}]`.\n\n**Basic example**\n\n```js\nclass DetailScreen extends Component {\n static sharedElements = (navigation, otherNavigation, showing) => {\n // Transition element `item.${item.id}.photo` when either\n // showing or hiding this screen (coming from any route)\n const item = navigation.getParam('item');\n return [`item.${item.id}.photo`];\n }\n\n render() {...}\n}\n```\n\n**Only transition when coming from a specific route**\n\nIf you only want to show a transition when pushing from a particular screen, then use the route-name and `showing` argument.\n\n```js\nclass DetailScreen extends Component {\n static sharedElements = (navigation, otherNavigation, showing) => {\n if ((otherNavigation.state.routeName === 'List') && showing) {\n const item = navigation.getParam('item');\n return [`item.${item.id}.photo`];\n }\n }\n ...\n}\n```\n\n**Customize the animation**\n\nIf the source- and target elements are visually distinct, the consider using a cross-fade animation.\n\n```js\nclass DetailScreen extends Component {\n static sharedElements = (navigation, otherNavigation, showing) => {\n const item = navigation.getParam('item');\n return [{\n id: `item.${item.id}.photo`,\n animation: 'fade'\n // resize: 'clip'\n // align: ''left-top'\n }];\n }\n ...\n}\n```\n\nThe following fields can be specified in a config item\n\n| Field | Type | Description |\n| ----------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id` | `string` | Id that corresponds to the `id` specified in the `` component |\n| `otherId` | `string` | Optional id that corresponds to the `id` specified in the other screen. |\n| `animation` | `move` \\| `fade` | Type of animation to perform (default = `move`), [see SharedElementAnimation](https://github.com/IjzerenHein/react-native-shared-element#sharedelementanimation) |\n| `resize` | `auto` \\| `stretch` \\| `clip` \\| `none` | Resize behavior of the transition (default = `auto`), [see SharedElementResize](https://github.com/IjzerenHein/react-native-shared-element#sharedelementresize) |\n| `align` | `auto` \\| `top-left` \\| `...` | Align behavior of the transition (default = `auto`), [see SharedElementAlign](https://github.com/IjzerenHein/react-native-shared-element#sharedelementalign) | |\n\n## Demo App\n\n- [./example](./example)\n- [react-navigation-shared-element-demo](https://github.com/IjzerenHein/react-navigation-shared-element-demo)\n\n## Videos\n\n- [Snapchat Shared Transitions - “Can it be done in React Native?” (with react-navigation v5)](https://www.youtube.com/watch?v=NJZfRXs7nZs)\n- [Airbnb Shared Transition - “Can it be done in React Native?” (with react-navigation v4)](https://www.youtube.com/watch?v=83GNiMp-qq0)\n\n## License\n\nReact navigation shared element library is licensed under [The MIT License](./LICENSE.md).\n","readmeFilename":"README.md","gitHead":"63f6fe4d692b1a2dc32910deb09854811bd6b407","_id":"react-navigation-shared-element@3.1.0","_nodeVersion":"12.22.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-Zt+IcC5HjccIKkS8u2AXX3Q1L4w1gyYpqRised0P6Ea5jiWxOzq5P5fE+LM2cOMnuY2XobrffIxxdVgHVdPEow==","shasum":"9167e041fd69e07283e6149e70cbb43de3c4e1be","tarball":"https://registry.npmjs.org/react-navigation-shared-element/-/react-navigation-shared-element-3.1.0.tgz","fileCount":80,"unpackedSize":256899,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHSGfCRA9TVsSAnZWagAAnJgP/ipVAL0Z2sLxi7o+crTm\nbnCp9w4qT2T6ZyDP5hDW0FLd/nOEwIxXjIgIk5wV6fnlKzexJ6s93yJ0lxKY\nHqg6IKKy3kzJqKdXpCQM7W9nhJASTROj9GqOAeU9uiQpGXOHvLwSp+lsWGR0\n6P9xtL7hkXSVSyi8OT8UflCEuMGahs4NJ/tBDzQ66pITB0vk167R+w/JY3pV\nbHpUrcneOnK45hM920tXgVIhZAwcpSF+f+AlnEXEOWaUuy5w9cpnRiungmUV\nUeyWi9PUVJ2L/BoIuGSzn0lCSAViqKi9zstPzo8FSayxHMy0FIbonFuUtK+q\ne3hG89Hohp1kLmJP9VL/2PZTKEM6Sx4QGTkbhY/BWKWdMOlicOyOumGpZFOJ\nXxwU9Q34cm58OtkocH90IoAmgNXJQ9FAAOWI8SRhcXxow5qkobQQg7ZR7j/K\nLOo4SmcjqOQr4k3n+qSspntKVIRS3KqvEl0dEekq31X5mZa9EsnsAKrBPAQP\nKxpcNKNHzgMsMy1xKIIwSdNiwEkqjpYR870ZjayeoRg78TQ9PaDGtedd3yiA\nHhAI/cAlvTEfRKv+Q3l4fVyHUcYos6cHldvm+nbi1HGKa9c6hpnKmeHFM5mV\npOWNyTCYqqUPOMkT5W/4n8S0ebXm39Nly9yBtgLU1q36kxDzaTh0TSW6DmNj\nZSRS\r\n=LhR9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJo3loVtBwkcoEEvVDIgH8150u2gYf7jeM1U8O6xHKqgIhALZI09Xn0zyAkvIzXd1xvnbmRP6+8CmScJ1SdqVGeuHE"}]},"_npmUser":{"name":"ijzerenhein","email":"hrutjes@gmail.com"},"directories":{},"maintainers":[{"name":"ijzerenhein","email":"hrutjes@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-navigation-shared-element_3.1.0_1629299103067_0.9814627845069497"},"_hasShrinkwrap":false},"3.1.1":{"name":"react-navigation-shared-element","version":"3.1.1","description":"react-native-shared-element bindings for React Navigation","main":"build/index.js","types":"build/index.d.ts","sideEffects":false,"scripts":{"build":"expo-module build","clean":"expo-module clean","lint":"expo-module lint","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module","changelog":"conventional-changelog -p angular -i CHANGELOG.md -s"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"keywords":["react-navigation-shared-element","navigation-shared-element","navigation","shared-element"],"repository":{"type":"git","url":"git+https://github.com/IjzerenHein/react-navigation-shared-element.git"},"author":{"name":"IjzerenHein","email":"hrutjes@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/IjzerenHein/react-navigation-shared-element/issues"},"homepage":"https://github.com/IjzerenHein/react-navigation-shared-element#readme","dependencies":{"hoist-non-react-statics":"^3.3.2"},"devDependencies":{"@commitlint/config-conventional":"^13.1.0","@react-navigation/bottom-tabs":"^6.0.5","@react-navigation/material-top-tabs":"^6.0.2","@react-navigation/native":"^6.0.2","@react-navigation/stack":"^6.0.7","@types/react":"^17.0.15","@types/react-native":"^0.64.12","commitlint":"^13.1.0","conventional-changelog-cli":"^2.1.1","eslint":"^7.32.0","expo-module-scripts":"^2.0.0","prettier":"^2.3.2","react-native-shared-element":"0.8.2","react-navigation":"^4.4.4","react-navigation-stack":"^2.10.4","react-navigation-tabs":"^2.11.1"},"peerDependencies":{"react":"*","react-native":"*","react-native-shared-element":"*"},"gitHead":"b12b17c971af25d222849bf4c813b2b187d9ffcc","_id":"react-navigation-shared-element@3.1.1","_nodeVersion":"12.22.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-zAJksGRm+e/WFzhuQdnD8/UkbjFAc/UC0cCDlrOCVS3olDaBcO/kDrccUFbBWyPP2OKly6aeVWEJ0psUEKxZcA==","shasum":"90cb72ac0caad02d906ac9c98453ed249caba6ba","tarball":"https://registry.npmjs.org/react-navigation-shared-element/-/react-navigation-shared-element-3.1.1.tgz","fileCount":80,"unpackedSize":249003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHhm8CRA9TVsSAnZWagAAhwAP/1mj1bQMNEayU23PrYcv\ntqowO4CkJbd7+JhhxzNs66u5m0tI3mQGjgMGRhQfkkSZBnNh0pirs8OI0fpu\nRt/O7hygNE5961eHVW9rpjFXP/Q8nzGV17uyCMQ/YJNS5/m5oG6C/JeRL37T\nXqJRxrOvIMIepncl4owpXjrvvqLasKUGj2m1giSbRTSS06gWLakcADX6QE9Y\nslrP1fXun3bXYIW3arYJsKo8EAuTplsdm2+Hk1Y0vFiXWqqKm+Xtq2izyLoT\n+aRMfgGCE9HlNId2hgaDfjv61p4MDqijDr/b1QcvNlUiOQYMb5vMFeKNxRVP\nxyMg8JCqTALsZKxCN6qIB7XHpLkvppCJ1GuKeIwo8Ab6rRgoyEyI6RkeYuTY\nOv+y3NprM/IVS8rohcjw68sJNKjlp+U0qSGDQsWLyUYgbhnS+rtclrDvxdSk\nc0i9IoztkiDvgd7LooEZztxkAofmFJzaPvZ9P9RZ1i7k9JGxEbNaeb8EuH7X\nXKXSSGuyy5IDZkLyF0VIJloL3+sEmdAL2F0szdkUieV7ubASttom3aV9dxsj\nCKepp7eDJfQZmJe1Jl5Oz9g2cL0wJdVjgGGUnYvbHi8y6q1M/ZKpclFzCn4z\nI1o4zNNQ1bTWj7OUtM2oUbdjNwgSyA5tUjmWvKz/jPh1+EOvekqIHWTa5TLz\nuCLU\r\n=y/DT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBls7j2VN4howuxUWBeD549rfJE0/2XgicTgwlyLpxQyAiEAk1fQeCb6/0yPsetw10gy+mG5uRbLJbbDiE6ekVgl7og="}]},"_npmUser":{"name":"ijzerenhein","email":"hrutjes@gmail.com"},"directories":{},"maintainers":[{"name":"ijzerenhein","email":"hrutjes@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-navigation-shared-element_3.1.1_1629362620295_0.11886806965702101"},"_hasShrinkwrap":false},"3.1.2":{"name":"react-navigation-shared-element","version":"3.1.2","description":"react-native-shared-element bindings for React Navigation","main":"build/index.js","types":"build/index.d.ts","sideEffects":false,"scripts":{"build":"expo-module build","clean":"expo-module clean","lint":"expo-module lint","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module","changelog":"conventional-changelog -p angular -i CHANGELOG.md -s"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"keywords":["react-navigation-shared-element","navigation-shared-element","navigation","shared-element"],"repository":{"type":"git","url":"git+https://github.com/IjzerenHein/react-navigation-shared-element.git"},"author":{"name":"IjzerenHein","email":"hrutjes@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/IjzerenHein/react-navigation-shared-element/issues"},"homepage":"https://github.com/IjzerenHein/react-navigation-shared-element#readme","dependencies":{"hoist-non-react-statics":"^3.3.2"},"devDependencies":{"@commitlint/config-conventional":"^13.1.0","@react-navigation/bottom-tabs":"^6.0.5","@react-navigation/material-top-tabs":"^6.0.2","@react-navigation/native":"^6.0.2","@react-navigation/stack":"^6.0.7","@types/react":"^17.0.15","@types/react-native":"^0.64.12","commitlint":"^13.1.0","conventional-changelog-cli":"^2.1.1","eslint":"^7.32.0","expo-module-scripts":"^2.0.0","prettier":"^2.3.2","react-native-shared-element":"0.8.2","react-navigation":"^4.4.4","react-navigation-stack":"^2.10.4","react-navigation-tabs":"^2.11.1"},"peerDependencies":{"react":"*","react-native":"*","react-native-shared-element":"*"},"gitHead":"7b72fa4c478df6d928dc0c2f20c9184c0c3e6ac5","_id":"react-navigation-shared-element@3.1.2","_nodeVersion":"12.22.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-TQ7WEjgoJZMqK4gCzQN/PcuoPEuiAKBjyAW6qmy5HONXx1HkXJ4JK1n20FYchidJWuHRjhheHpdyCuilSMCPcg==","shasum":"9e79c141ebb3a56ab01227c25cbf12a66d360c27","tarball":"https://registry.npmjs.org/react-navigation-shared-element/-/react-navigation-shared-element-3.1.2.tgz","fileCount":80,"unpackedSize":249518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHilBCRA9TVsSAnZWagAAYhkP/jV3mUWTF9Mzt/fHM6JU\nRXaaiPIJjKPQ+x0j0fjyUixwHWInTaJfg4z59HQmUxM1l7G8Gf28rVY53CK3\n3nlSPD202owWJFJfhj/ZDgZWo2A9zL0p8KoHhuDGxDsy+czpluqLjGcxU3wb\nS5CoqsqmP0T0RqGoedGr7YucEpCPiEBvmqtqT8lCrDieXHogAOGKsXK8dkbQ\npp598shmXEGp18jkRFHXcB3NN/4/Lx5nMqQOhomjXAMzx/XzqgkWhdGzSNWe\nV0h8KABP22SLDwTl62eDr7UVDCOZ7REdvFyK4tL0eDRMPZaUi/pYK6mdvlM3\n6Ck5QvToJJ5WuvG0478cTP9Nt/8cKcRpJ55FQ7xtTpbtXvVL4AsIbFOn0To0\n8r8CGwsqP2deSzH2mb2JnAj2dQ6/FpRH3lPuzSUdcjccOm9shCh71mz2Disr\noMIxnoiyh7SUp06YVFzxth9OOpkGoFytpMJX8xMZBwmXdbsqFNqeAMz1Sr5r\nJA1csvfYHWE81FWr3wjgDuBJD3DR2gSPrNZwLAsVp3bL+vD2IFXmCiJhYlH1\n1jsGV810MYOuOruuiaH97wmUb6JSg+ff3gZgsLX0spMvLuwLVgmdDWy0O+Ps\njucmXhXvUG+MaUikELbQpsEKbldyFu4UqIiFU3hXUK9Dfuz54wr3fhzUX3/z\nOKFP\r\n=ArPC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6sZtOHDsR+CNq5wXXMvgsjJreRP1d+LuPdx08Xt0+UQIgXEzWNgpCYAJMyTioHF2ppeMepJIR5vsWAk5Ez19kZXo="}]},"_npmUser":{"name":"ijzerenhein","email":"hrutjes@gmail.com"},"directories":{},"maintainers":[{"name":"ijzerenhein","email":"hrutjes@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-navigation-shared-element_3.1.2_1629366593688_0.880206747976203"},"_hasShrinkwrap":false},"3.1.3":{"name":"react-navigation-shared-element","version":"3.1.3","description":"react-native-shared-element bindings for React Navigation","main":"build/index.js","types":"build/index.d.ts","sideEffects":false,"scripts":{"build":"expo-module build","clean":"expo-module clean","lint":"expo-module lint","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module","changelog":"conventional-changelog -p angular -i CHANGELOG.md -s","install:5":"yarn add --dev @react-navigation/bottom-tabs@5 @react-navigation/material-top-tabs@5 @react-navigation/native@5 @react-navigation/stack@5"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"keywords":["react-navigation-shared-element","navigation-shared-element","navigation","shared-element"],"repository":{"type":"git","url":"git+https://github.com/IjzerenHein/react-navigation-shared-element.git"},"author":{"name":"IjzerenHein","email":"hrutjes@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/IjzerenHein/react-navigation-shared-element/issues"},"homepage":"https://github.com/IjzerenHein/react-navigation-shared-element#readme","dependencies":{"hoist-non-react-statics":"^3.3.2"},"devDependencies":{"@commitlint/config-conventional":"^13.1.0","@react-navigation/bottom-tabs":"^6.0.5","@react-navigation/material-top-tabs":"^6.0.2","@react-navigation/native":"^6.0.2","@react-navigation/stack":"^6.0.7","@types/react":"^17.0.15","@types/react-native":"^0.64.12","commitlint":"^13.1.0","conventional-changelog-cli":"^2.1.1","eslint":"^7.32.0","expo-module-scripts":"^2.0.0","prettier":"^2.3.2","react-native-shared-element":"0.8.2","react-navigation":"^4.4.4","react-navigation-stack":"^2.10.4","react-navigation-tabs":"^2.11.1"},"peerDependencies":{"react":"*","react-native":"*","react-native-shared-element":"*"},"gitHead":"1df1e5f6ca71a246cda57efc5422b206949a7a5b","_id":"react-navigation-shared-element@3.1.3","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-U1BZp7dEdcTNHggfkq3WEBlJeg4HwFhFdj7a0i0Uql/7mg2IHQg/bZaqM2jQvJITkABge6Hz5fZixIF8jyzpkg==","shasum":"c75084ca8cab09063297a39ff1110de0dc732aab","tarball":"https://registry.npmjs.org/react-navigation-shared-element/-/react-navigation-shared-element-3.1.3.tgz","fileCount":80,"unpackedSize":253745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL5kwCRA9TVsSAnZWagAAX0kP/R2phL1h1K+Sw+AeXbYr\ngx5bpjfEJpTURTgM9mNwcjXThWA83R9Yo4NQITb14DhFHycozLRUs4lxiq8V\n7mNDCvleIDEJN2ba+FeMigd3eI+Kfw0FiIPSSQawvQGzgb7GypBPkKP5aeap\nwN3r6KTlqcM3fA5cpxR6p6f7swxH6iuk++o4/hUheQn4qQ52Ge0m7ze/1oly\n9Am7wAHs62qhTHSFtmlSu++P+xzv5u/5URVISe+iPwos8ajbm8zj8byTjTrj\nOQZ9gX2JeBt3r6Cm+ZQcPoth+G+EuumtldM1EkfBhy5/5lcHdcQyaTqjEXLo\ng2peanoeaiyAWOUn4a4jtRhnhcDF0oHXA9isKiRvoeP5JGfecpDubV6zMH/k\nT78reJ4lR+zyszRAOg6I6bTw/ovYcR1pLsTXyEwq/caF86ep9NifutrNHRPg\nPON/Jipw8kqLh5EvM8CKMjTPhNVNVrFxYFrJKbad4PtzxS2zb9hiAEaO5L4/\n8OKDlBeNRpQiKyjQr8r8geIzPF8vz2thpICCwr03QgDYMu76H39Lw6XCZ8ty\nc11+BWPh2I1LDyTZCnHKFTVcp2VljfTyMmtqSR1cEi4pdg/eSPEorLPrHVKN\n+ZofRVUjhwYT4D7qqYMK1mWeorrE/Wt9s9tSyUE0Ii9bIg5uqyK5P3xHo6NR\nOumn\r\n=7z2Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvWTZ7E2YtvQFRP7PzrNHQ+El3mz2Ad7xPW5z/p3dNSgIgXJZr2aWd6eCqMErC6SfYP+Qk25wle9DJLJu81eQtFM4="}]},"_npmUser":{"name":"ijzerenhein","email":"hrutjes@gmail.com"},"directories":{},"maintainers":[{"name":"ijzerenhein","email":"hrutjes@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-navigation-shared-element_3.1.3_1630509360766_0.7789375865079584"},"_hasShrinkwrap":false}},"time":{"created":"2019-09-06T12:55:55.581Z","0.5.0":"2019-09-06T12:55:55.686Z","modified":"2023-04-03T09:41:36.254Z","1.0.0":"2020-01-26T14:08:04.731Z","2.0.0-alpha0":"2020-01-26T14:20:31.308Z","2.0.0":"2020-02-09T16:50:53.537Z","2.0.1":"2020-02-09T17:26:37.524Z","2.0.2":"2020-02-13T08:35:10.146Z","2.1.0":"2020-02-22T14:58:33.276Z","2.2.0":"2020-03-15T14:21:44.023Z","5.0.0-alpha0":"2020-03-18T20:14:29.548Z","5.0.0-alpha1":"2020-03-18T20:48:02.026Z","2.3.0":"2020-04-13T14:24:39.211Z","3.0.0":"2020-05-24T15:43:13.732Z","2.3.1":"2020-05-28T08:16:13.998Z","3.1.0":"2021-08-18T15:05:03.235Z","3.1.1":"2021-08-19T08:43:40.466Z","3.1.2":"2021-08-19T09:49:53.870Z","3.1.3":"2021-09-01T15:16:00.917Z"},"maintainers":[{"email":"hrutjes@gmail.com","name":"ijzerenhein"},{"email":"desmurs.linczewska@gmail.com","name":"p-syche"}],"description":"react-native-shared-element bindings for React Navigation","homepage":"https://github.com/IjzerenHein/react-navigation-shared-element#readme","keywords":["react-navigation-shared-element","navigation-shared-element","navigation","shared-element"],"repository":{"type":"git","url":"git+https://github.com/IjzerenHein/react-navigation-shared-element.git"},"bugs":{"url":"https://github.com/IjzerenHein/react-navigation-shared-element/issues"},"license":"MIT","readme":"# React Navigation Shared Element \n\nReact Navigation bindings for [react-native-shared-element](https://github.com/IjzerenHein/react-native-shared-element) 💫\n\n![react-navigation-shared-element-gif-iOS](rnse-ios.gif)\n![react-navigation-shared-element-gif-Android](rnse-android.gif)\n\n## Documentation\n\n- [Shared element for the React Navigation 5/6 API](./docs/API.md)\n- [Shared element for the React Navigation 4 API](./docs/Navigation4.md)\n- [Migration guide](./docs/Migration.md)\n\n## Compatibility \n\nThe following versions or react-navigation and the stack navigator are supported.\n\n| Version | React-Navigation | Comments |\n| ----------------------------------------------------------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 3.x | 4, 5 & 6 | Import from `react-navigation-shared-element/build/v4` to use it with 4.x. |\n| [2.x](https://github.com/IjzerenHein/react-navigation-shared-element/tree/v2) | 3 & 4 | This version is compatible with `react-navigation-stack@2`. |\n| [1.x](https://github.com/IjzerenHein/react-navigation-shared-element/tree/v1) | 3 & 4 | This version is compatible with `react-navigation-stack@1`. |\n\n## Things to know\n\n- `react-navigation-shared-element` uses the [JS based Stack Navigator](https://reactnavigation.org/docs/stack-navigator). The [Native Stack Navigator](https://reactnavigation.org/docs/native-stack-navigator) is not yet supported and it is not yet clear whether this can be supported in the future.\n- [React Navigation 6 `Group` components](https://reactnavigation.org/docs/group/) are not yet supported.\n- On [detaching inactive screens](https://reactnavigation.org/docs/stack-navigator/#detachinactivescreens) a blink may occur on Android. Because of this `detachInactiveScreens` is set to `false` by default on Android.\n\n## Demo App\n\n- [./example](./example)\n- [react-navigation-shared-element-demo](https://github.com/IjzerenHein/react-navigation-shared-element-demo)\n\n## Videos\n\n- [Snapchat Shared Transitions - “Can it be done in React Native?” (with react-navigation v5)](https://www.youtube.com/watch?v=NJZfRXs7nZs)\n- [Airbnb Shared Transition - “Can it be done in React Native?” (with react-navigation v4)](https://www.youtube.com/watch?v=83GNiMp-qq0)\n\n## License\n\nReact navigation shared element library is licensed under [The MIT License](./LICENSE.md).\n","readmeFilename":"README.md","author":{"name":"IjzerenHein","email":"hrutjes@gmail.com"}}