{"id":13431906,"url":"https://github.com/fram-x/FluidTransitions","last_synced_at":"2025-03-16T22:32:42.377Z","repository":{"id":41258224,"uuid":"122218992","full_name":"fram-x/FluidTransitions","owner":"fram-x","description":"Fluid Transitions for React Navigation","archived":false,"fork":false,"pushed_at":"2022-12-09T08:30:25.000Z","size":9342,"stargazers_count":2933,"open_issues_count":76,"forks_count":194,"subscribers_count":40,"default_branch":"develop","last_synced_at":"2025-03-14T14:23:18.292Z","etag":null,"topics":["animation","react-native","react-navigation","shared-element-transition","transition"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fram-x.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-20T15:47:07.000Z","updated_at":"2025-03-05T06:52:50.000Z","dependencies_parsed_at":"2023-01-25T20:46:01.412Z","dependency_job_id":null,"html_url":"https://github.com/fram-x/FluidTransitions","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fram-x%2FFluidTransitions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fram-x%2FFluidTransitions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fram-x%2FFluidTransitions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fram-x%2FFluidTransitions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fram-x","download_url":"https://codeload.github.com/fram-x/FluidTransitions/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243944946,"owners_count":20372885,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","react-native","react-navigation","shared-element-transition","transition"],"created_at":"2024-07-31T02:01:06.928Z","updated_at":"2025-03-16T22:32:42.370Z","avatar_url":"https://github.com/fram-x.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Fluid Transitions for React Navigation\n\n\u003ca href=\"https://www.npmjs.com/package/react-navigation-fluid-transitions\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/react-navigation-fluid-transitions.svg?style=flat-square\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg\"\u003e\u003c/a\u003e\n\n## Introduction\nThis project aims to implement a simple yet powerful set of constructs for building fluid transitions between elements when navigating with [React Navigation](https://reactnavigation.org). \n\nThe library is JavaScript only - no linking required.\n\n\u003cimg src=\"https://github.com/fram-x/FluidTransitions/raw/develop/docs/example.gif\" width=\"200\"\u003e\n\u003ca href=\"https://snack.expo.io/@chrfalch/onboarding-example\"\u003e\u003cimg src=\"https://github.com/fram-x/FluidTransitions/raw/develop/docs/final.gif\" alt=\"Snack\" width=\"200\"\u003e\u003c/a\u003e\n\nThe library implements a new navigator component called `FluidNavigator` with the same interface and routing configuration as the `StackNavigator`. The library has a component called `Transition` which can be used to build different types of transitions that will automatically be run when navigating between screens using the regular navigation actions.\n\n\u003e The Navigator's API is identical to the StackNavigator except that it does not support a header component. It can easily be integrated with redux and your existing navigation setups.\n\n[Medium article](https://medium.com/@christian.falch/fluid-transitions-with-react-navigation-a049d2f71494)\u003cbr/\u003e\n[React Native Animation Challenge #1](https://medium.com/@christian.falch/react-native-animation-challenge-1-7022e48a226)\n\n## Installation\n\nTo install the library into your project, run yarn or npm:\n\n`yarn add react-navigation-fluid-transitions`\n\nor\n\n`npm i -S react-navigation-fluid-transitions`\n\nCompatible versions with `react-navigation`:\n\n| react-navigation-fluid-transitions        | react-navigation |\n| ----------------------------------------- |:----------------:|\n| 0.3.x                                     | 3.x              |\n| 0.2.x                                     | 2.x              |\n| 0.1.x                                     | 1.x              |\n\n\u003e Future improvements and development will be on react-navigation-fluid-transitions@0.3.x.\n\n## Examples\nExamples are included in the project and should be runnable from the root of the project folder.\n\nTo start the example run the following commands from the terminal:\n\n`npm i` or `yarn`\n\nTo start the project run\n\n`react-native run-ios` or `react-native run-android`\n\n### Shared Element Transitions\nThis example shows how two elements can be set up to automatically transition between each other when navigating between screens. A more detailed edition of this example can be found in the file [SharedElements.js](./Examples/SharedElements.js).\n\n\u003e Note that a shared transition happens between two elements that looks the same. The library animates position and scale between the two hence using different styles and content between the two elements will result in strange transitions.\n\n```javascript\nconst Screen1 = (props) =\u003e (\n  \u003cView style={styles.container}\u003e\n    \u003cText\u003eScreen 1\u003c/Text\u003e\n    \u003cView style={styles.screen1}\u003e\n      \u003cTransition shared='circle'\u003e\n        \u003cView style={styles.circle}/\u003e\n      \u003c/Transition\u003e\n    \u003c/View\u003e\n    \u003cButton\n      title='Next'\n      onPress={() =\u003e props.navigation.navigate('screen2')}\n    /\u003e\n  \u003c/View\u003e\n);\n\nconst Screen2 = (props) =\u003e (\n  \u003cView style={styles.container}\u003e\n    \u003cText\u003eScreen 2\u003c/Text\u003e\n    \u003cView style={styles.screen2}\u003e\n      \u003cTransition shared='circle'\u003e\n        \u003cView style={styles.circle2}/\u003e\n      \u003c/Transition\u003e\n    \u003c/View\u003e\n    \u003cButton\n      title='Back'\n      onPress={() =\u003e props.navigation.goBack()}\n    /\u003e\n  \u003c/View\u003e\n);\n\nconst Navigator = createFluidNavigator({\n  screen1: { screen: Screen1 },\n  screen2: { screen: Screen2 },\n});\n\n```\n\n### Transitions\nThe library also supports transitions for elements wrapped in the `Transition` component. You can provide appear/disappear transitions that will be animated during navigation.\n\nThe `Transition` element supports appear and disappear transitions (appear will be used if disappear is not set), and these can either be one of the predefined transitions - or functions where you provide your own transitions.\n\n```javascript\n\u003cTransition appear='scale' disappear='bottom'\u003e\n  \u003cView style={styles.circle}/\u003e\n\u003c/Transition\u003e\n```\n\n#### Transition Types\n\n| Name        | Description | \n| ----------  | ------------- | \n| scale      \t| Scales the element in and out | \n| top      \t| Translates the element in/out from the top of the screen | \n| bottom | Translates the element in/out from the bottom of the screen | \n| left | Translates the element in/out from the left of the screen | \n| right | Translates the element in/out from the right of the screen | \n| horizontal | Translates the element in/out from the left/right of the screen | \n| vertical | Translates the element in/out from the top/bottom of the screen | \n| flip | Flips the element in/out | \n\n#### Custom transitions\nIt is easy to provide custom transitions - just add the transition function to your component's appear or disappear property. The following example creates a transition that will scale in from 88 times the original size of the wrapped component:\n\n```javascript\n\u003cTransition appear={myCustomTransitionFunction}\u003e\n  \u003cView style={styles.circle}/\u003e\n\u003c/Transition\u003e\n\nmyCustomTransitionFunction = (transitionInfo) =\u003e {\n  const { progress, start, end } = transitionInfo;\n  const scaleInterpolation = progress.interpolate({\n    inputRange: [0, start, end, 1],\n    outputRange: [88, 80, 1, 1],\n  });\n  return { transform: [{ scale: scaleInterpolation }] };\n}\n```\n\nRead more about the parameters and functionality for building [custom transitions](./docs/CustomTransition.md).\n\n### Native driver support\nFor achieving the best experience it's vital to get rid of JS evaluation during animation run. React-native Animated API allows for scaling in both axis using native drivers, but it's not possible to resize width and height (which calls for a layout computation). Thus the native driver is used only when the ratio of source and target component are the same and it's recommended for the best quality of animations. \n\n### API\n\n[FluidNavigator](./docs/FluidNavigator.md)  \n\n[Transition](./docs/Transition.md)\n\n### Credit\nSome of the concepts in the library builds on ideas from [@lintonye](https://github.com/lintonye)'s pull request and suggestion found here: [Shared element transition #941](https://github.com/react-navigation/react-navigation/pull/941).\n\n### Contributors\nChristian Falch (@chrfalch), Yuuki Arisawa (@uk-ar), Joe Goodall (@joegoodall1), [sonaye](https://github.com/sonaye), [David Chavez](https://github.com/dcvz), [muhaimincs](https://github.com/muhaimincs), [KingTayTay](https://github.com/KingTayTay),  [pedrobullo](https://github.com/pedrobullo), [Nathan James](https://github.com/nsjames), [Filip Engberg](https://github.com/reekris), [DadImScared](https://github.com/DadImScared), [fabriziogiordano](https://github.com/fabriziogiordano), [kelset](https://github.com/kelset), [rewieer](https://github.com/rewieer), [Dan Alloway](https://github.com/danalloway), [Alexander Zizzo](https://github.com/elzii), [Monica He](https://github.com/ehacinom), [Avi Patel](https://github.com/avipatel91), [Julian Hundeloh](https://github.com/jaulz), [Luong Dang Hai](https://github.com/jarvisluong), [Peter Henderson](https://github.com/PeterH139)\n\n### Sponsors\n[Fram X](https://framx.no) - a cross platform app company from Norway. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffram-x%2FFluidTransitions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffram-x%2FFluidTransitions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffram-x%2FFluidTransitions/lists"}