plmok61 / react-navigation-transitions Goto Github PK

This is nice. Looking for: fromRight, fromBottom

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

in the last version of react navigation createStackNavigator import from react-navigation-stack and its not match with react-navigation-transitions

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')

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

I want zoomIn animation on navigate() function and zoomOut animation on goBack() function in Android.How to ?

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 make it RTL support so i tried to change your src/index but got some errors...

how can i handle this ?

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.

When my account was compromised a spam issue was created in this repo. I sincerely apologize. Cleaning up such issues via script.

Hello! Thanks for creating this library. I'm using zoomIn(1000) as my transitionConfig and when I call NavigationActions.back() the previous screen "flashes" during the transition. Please see attached files and let me know if you need more info.

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

hello, i use it with createSwitchNavigator, but it doesn't work, but works with others like createSwitchNavigator

It is really ease to add navigation transition. I tried but it is not working and not even any error or warning.

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

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.

I want to go from screen A to screen B while using some transition..How can i achieve that..
Thanks a lot

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)
	}
	))

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 ?