plmok61 / react-navigation-transitions Goto Github PK
View Code? Open in Web Editor NEWCustom transitions for react-navigation
License: MIT License
Custom transitions for react-navigation
License: MIT License
Hi,
I'm using SafeAreaView
from react-navigation
and when I'm trying to add custom transition using this library the SafeAreaView
is not taking into account on iOS devices.
Please help.
When we add fadeIn animation to our stackNavigator for several screens, sometime we have issue that our animation applied in both ways of navigating. We solved it by adding isActive.
// Custom transitions go there
if (prevScene
&& prevScene.route.routeName === 'ScreenA'
&& nextScene.route.routeName === 'ScreenB'
&& nextScene.isActive) {
return fadeIn();
}
return null;
}
I hope this solution will help those who want to use navigation only in one direction.
hello, i use it with createSwitchNavigator, but it doesn't work, but works with others like createSwitchNavigator
i want make it RTL support so i tried to change your src/index but got some errors...
how can i handle this ?
So, I'm building an app with a DrawerNavigator nested in a StackNavigator.
Transitions work like a charm from stack route to stack route, stack route to to drawer route, from drawer route to drawer route.
But no way to use transitions from drawer route to drawer route
Code for stackNav
const handleCustomTransition = ({ scenes }) => {
const prevScene = scenes[scenes.length - 2];
const nextScene = scenes[scenes.length - 1];
// Custom transitions go there
if(prevScene){
console.log(nextScene.route.routeName || 'undifined prevScreen');
if ( nextScene.route.routeName === 'AuthHome') {
return zoomIn();
}
else if ( nextScene.route.routeName === 'DrawerNavigator') {
console.log('RIGHT')
return fromRight();
}
else if ( nextScene.route.routeName === 'Page3') {
return fromRight();
}
}
return fadeIn();
}
export default createAppContainer(createStackNavigator(
{
Disclaimer,
AuthHome,
Page1,
DrawerNavigator,
},
{
headerMode:"none",
transitionConfig: (nav) => handleCustomTransition(nav)
}
))
Code for DrawerNav
const handleCustomTransition = ({ scenes }) => {
const prevScene = scenes[scenes.length - 2];
const nextScene = scenes[scenes.length - 1];
// Custom transitions go there
if(prevScene){
console.log(nextScene.route.routeName || 'undifined prevScreen');
if ( nextScene.route.routeName === 'AuthHome') {
return zoomIn();
}
else if ( nextScene.route.routeName === 'DrawerNavigator') {
console.log('DrawerRIGHT')
return fromRight();
}
else if ( nextScene.route.routeName === 'Page3') {
return fromRight();
}
}
return fadeIn();
}
export default createAppContainer(createDrawerNavigator(
{
Page2, Page3
},
{
transitionConfig: (nav) => handleCustomTransition(nav)
}
))
When my account was compromised a spam issue was created in this repo. I sincerely apologize. Cleaning up such issues via script.
Hi,
Thank you for the work you have been putting into this, it works awesomely. I would like to ask you if there is a way to do different transitions for different screens. For example I would like that a screen 'About' is accessed by swiping to the right (i.e fromRight), and the user can get back to the 'Welcome' screen by swiping to the left (i.e fromLeft). Excuse my inexperience in react, but is there a way where I could do that ?
in the last version of react navigation createStackNavigator import from react-navigation-stack and its not match with react-navigation-transitions
This is nice. Looking for: fromRight, fromBottom
I tried to fadeIn My screens while navigating. But it not works for the screens inside the create Stack navigator and it only works for mainScreens.
transitionConfig: () => fadeIn(),
It moving from leftTo right
It is really ease to add navigation transition. I tried but it is not working and not even any error or warning.
I get the following error using flipX or flipY while going back on navigation (on iOS works correctly):
Error while updating property 'backfaceVisibility' of a view managed by: RCTView
null
Attempt to invoke virtual method 'boolean java.lang.String.equals(java.lang.Object)' on a null object reference
updateViewProp
ViewManagersPropertyCache.java:95
setProperty
ViewManagerPropertyUpdater.java:132
updateProps
ViewManagerPropertyUpdater.java:51
updateProperties
ViewManager.java:37
updateProperties
NativeViewHierarchyManager.java:136
execute
UIViewOperationQueue.java:95
run
UIViewOperationQueue.java:917
flushPendingBatches
UIViewOperationQueue.java:1025
access$2600
UIViewOperationQueue.java:46
doFrameGuarded
UIViewOperationQueue.java:1085
doFrame
GuardedFrameCallback.java:29
doFrame
ReactChoreographer.java:166
doFrame
ChoreographerCompat.java:84
run
Choreographer.java:947
doCallbacks
Choreographer.java:761
doFrame
Choreographer.java:693
run
Choreographer.java:935
handleCallback
Handler.java:873
dispatchMessage
Handler.java:99
loop
Looper.java:193
main
ActivityThread.java:6669
invoke
Method.java
run
RuntimeInit.java:493
main
ZygoteInit.java:858
hi when add transtion in splash screen next home page screen with
this.props.navigation.replace('Login')
not work. but only work in
this.props.navigation.push('Login')
Is there a way I can implement this to a specific route? Right now it only works like this:
const MainNavigator = StackNavigator({
mainPages: { screen: MainPages },
loginPage: { screen: new StackNavigator({
usersLoginScreen: { screen: LoginPage },
}, { headerMode: 'screen' }) },
signupPage: { screen: new StackNavigator({
usersSignupScreen: { screen: SignupPage },
}, { headerMode: 'screen' }) },
forgotPassword: { screen: new StackNavigator({
usersForgotPassScreen: { screen: ForgotPasswordPage },
}, { headerMode: 'screen' }) },
}, {
headerMode: 'none',
transitionConfig: () => fromLeft() // HERE I ADDED IT
});
It does not work when I added it to a specific route like:
const MainNavigator = StackNavigator({
mainPages: { screen: MainPages },
loginPage: { screen: new StackNavigator({
usersLoginScreen: { screen: LoginPage },
}, { headerMode: 'screen', transitionConfig: () => fromLeft() }) }, // HERE ON THE LOGIN
signupPage: { screen: new StackNavigator({
usersSignupScreen: { screen: SignupPage },
}, { headerMode: 'screen' }) },
forgotPassword: { screen: new StackNavigator({
usersForgotPassScreen: { screen: ForgotPasswordPage },
}, { headerMode: 'screen' }) },
}, {
headerMode: 'none',
});
Please help
When a ScreenA does not have a header and ScreenB has one, transition from bottom, animates different for screen and different for header. Screen transitions from bottom, but header from right to left.
I want to go from screen A to screen B while using some transition..How can i achieve that..
Thanks a lot
I want zoomIn animation on navigate() function and zoomOut animation on goBack() function in Android.How to ?
Hi,
I'm new in React-Native.
I'm using the FlipY effect on my application.
Everythings running ok on Android version.
But when I tried to run on Ios version, when I navigate to the third page.
The page will keep blinking.
Example: Home Page > Login Page > Verification Page.
If I remove the effect, the page will not be blinking.
May I know how to solve this issue?
Thanks a lot
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.