Gathering detailed insights and metrics for @reactrondev/react-navigation-fluid-transitions
Gathering detailed insights and metrics for @reactrondev/react-navigation-fluid-transitions
Fluid Transitions for React Navigation
Installations
npm install @reactrondev/react-navigation-fluid-transitionsDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Languages
4
JavaScript
Objective-C
Java
Python
JavaScript (94.02%)
Objective-C (2.97%)
Java (1.69%)
Python (1.32%)
Developer
reactrondev
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
689 Commits
28 Branches
Updated on Sep 26, 2019
Maintainers
2
Package Meta Information
Latest Version
0.3.4
Package Id
@reactrondev/react-navigation-fluid-transitions@0.3.4
Unpacked Size
121.82 kB
Size
26.97 kB
File Count
62
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
4
Fluid Transitions for React Navigation
Introduction
This project aims to implement a simple yet powerful set of constructs for building fluid transitions between elements when navigating with React Navigation.
The library is JavaScript only - no linking required.
The 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.
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.
Medium article
React Native Animation Challenge #1
Installation
To install the library into your project, run yarn or npm:
yarn add react-navigation-fluid-transitions
or
npm i -S react-navigation-fluid-transitions
Compatible versions with react-navigation:
| react-navigation-fluid-transitions | react-navigation |
|---|---|
| 0.3.x | 3.x |
| 0.2.x | 2.x |
| 0.1.x | 1.x |
Future improvements and development will be on react-navigation-fluid-transitions@0.3.x.
Examples
Examples are included in the project and should be runnable from the root of the project folder.
To start the example run the following commands from the terminal:
npm i or yarn
To start the project run
react-native run-ios or react-native run-android
Shared Element Transitions
This 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.
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.
1const Screen1 = (props) => ( 2 <View style={styles.container}> 3 <Text>Screen 1</Text> 4 <View style={styles.screen1}> 5 <Transition shared='circle'> 6 <View style={styles.circle}/> 7 </Transition> 8 </View> 9 <Button 10 title='Next' 11 onPress={() => props.navigation.navigate('screen2')} 12 /> 13 </View> 14); 15 16const Screen2 = (props) => ( 17 <View style={styles.container}> 18 <Text>Screen 2</Text> 19 <View style={styles.screen2}> 20 <Transition shared='circle'> 21 <View style={styles.circle2}/> 22 </Transition> 23 </View> 24 <Button 25 title='Back' 26 onPress={() => props.navigation.goBack()} 27 /> 28 </View> 29); 30 31const Navigator = createFluidNavigator({ 32 screen1: { screen: Screen1 }, 33 screen2: { screen: Screen2 }, 34}); 35
Transitions
The library also supports transitions for elements wrapped in the Transition component. You can provide appear/disappear transitions that will be animated during navigation.
The 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.
1<Transition appear='scale' disappear='bottom'> 2 <View style={styles.circle}/> 3</Transition>
Transition Types
| Name | Description |
|---|---|
| scale | Scales the element in and out |
| top | Translates the element in/out from the top of the screen |
| bottom | Translates the element in/out from the bottom of the screen |
| left | Translates the element in/out from the left of the screen |
| right | Translates the element in/out from the right of the screen |
| horizontal | Translates the element in/out from the left/right of the screen |
| vertical | Translates the element in/out from the top/bottom of the screen |
| flip | Flips the element in/out |
Custom transitions
It 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:
1<Transition appear={myCustomTransitionFunction}> 2 <View style={styles.circle}/> 3</Transition> 4 5myCustomTransitionFunction = (transitionInfo) => { 6 const { progress, start, end } = transitionInfo; 7 const scaleInterpolation = progress.interpolate({ 8 inputRange: [0, start, end, 1], 9 outputRange: [88, 80, 1, 1], 10 }); 11 return { transform: [{ scale: scaleInterpolation }] }; 12}
Read more about the parameters and functionality for building custom transitions.
Native driver support
For 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.
API
Credit
Some of the concepts in the library builds on ideas from @lintonye's pull request and suggestion found here: Shared element transition #941.
Contributors
Christian Falch (@chrfalch), Yuuki Arisawa (@uk-ar), Joe Goodall (@joegoodall1), sonaye, David Chavez, muhaimincs, KingTayTay, pedrobullo, Nathan James, Filip Engberg, DadImScared, fabriziogiordano, kelset, rewieer, Dan Alloway, Alexander Zizzo, Monica He, Avi Patel, Julian Hundeloh, Luong Dang Hai, Peter Henderson
Publishing new version
In order to publish new version, cd into the lib directory and type yarn publish there.
Sponsors
Fram X - a cross platform app company from Norway.
No vulnerabilities found.
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
binaries present in source code
Details
- Warn: binary detected: android/gradle/wrapper/gradle-wrapper.jar:1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/27 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'develop'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 6 are checked with a SAST tool
Reason
82 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3gx7-xhv7-5mx3
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6
- Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
- Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
- Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
- Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
- Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
- Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
- Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
- Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
- Warn: Project is vulnerable to: GHSA-f9cm-qmx5-m98h
- Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
- Warn: Project is vulnerable to: GHSA-gwg9-rgvj-4h5j
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
- Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-gff7-g5r8-mg8m
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
- Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
- Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
- Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
- Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
1.6
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More