sergeyshpadyrev/react-native-easy-router

Screen navigation for React Native

react-native-easy-router's Issues

Make default pop animation the animation of screen push

@christianchown asked in reddit comment: Could .pop() be passed the animation object that it was .push(...)ed with? That way a screen could know how to pop itself in reverse.

This seems reasonable. Need to add this feature

Как реализовать свайп бек

Каким образом можно сделать свайп бек для этого роутера like native ios?

Add usage of native driver for animations

@christianchown asked in reddit comment: the main thing that may prevent me adopting your library is the use of react-native-animatable. I have found it far more performant to use Animated.timing/spring and applying transforms on an Animated.View rather than animating a left or top style value, because useNativeDriver can be set to true.

Also he wrote in email: I have found a huge performance advantage by passing {useNativeDriver: true} to Animated.View: you can also add useNativeDriver as a prop for the Animatable view: https://github.com/oblador/react-native-animatable#properties

render = () => {
    const { type, useNativeDriver } = Animation.withDefault(this.props.animation)
    const style = { ...styles.screen, ...Animation.start(type) }
    return (
      <Animatable.View style={style} ref={view => (this.view = view)} useNativeDriver={useNativeDriver}>
        {this.props.children}
      </Animatable.View>
    )
  }

so I can pass {useNativeDriver: true} as an animation property. It works fine with {type: 'fade', useNativeDriver: true}. However you cannot use {useNativeDriver: true} if you are animating top and left:

So it's fine for opacity - but not top or left. However you can use transform, as I did in my own router:

{
  opacity,
  transform: [
    {translateX: left},
    {translateY: top},
  ]
}

so I then changed your animation.js

const types = {
  none: [{}, {}],
  fade: [{ opacity: 0 }, { opacity: 1 }],

  left: [{ transform: [{ translateX: -width }] }, {transform: [{ translateX: 0 }] }],
  right: [{ transform: [{ translateX: width }] }, {transform: [{ translateX: 0 }] }],

  bottom: [{ transform: [{ translateY: height }] }, { transform: [{ translateY: 0 }] }],
  top: [{ transform: [{ translateY: -height }] }, { transform: [{ translateY: 0 }] }]
}

and I can now use {type: 'left', useNativeDriver: true}

What I'd really like is a solution that allows useNativeDriver - and (has it true by default for built-in animations) but also for a user of the library to specify their own custom transforms.

Need to understand it and add this feature

Change examples from expo to bare react native

[v3] typescript definition is missing

[v3] Add onBeforeStackUpdate prop

Hi Sergey - can v3 match the functionality of v2 and add an onBeforeStackUpdate prop?

<Navigator onBeforeStackUpdate={
  (stack, nextStack, transitionProps) => 
    console.log(stack, nextStack, transitionProps)
} />

Use case: being able to synchronise state changes of components with router updates e.g. tabs

Add ability to use custom animations

Add ability to pass useNativeDriver:false as described in #3
Add ability to pass e.g.{type: [{ transform: [{ translateX: -width, translateY: -height }] }, {transform: [{ translateX: 0, translateY: 0 }] }]}

Fork https://github.com/thegamenicorus/react-native-swipe-gestures and substitute dependency

It's dangerous to depend on somebody's repo

Also make link look like this git://github.com/mobilizeio/react-native-linkedin.git#master

Ability to have transparent screens?

Hi there,

First of all, thanks for a great lib. I'm a big proponent of having one thing do just one thing, and not try to do more than it ought to.

Quick question: I've been trying to fade a second screen on top of the first, but have it (or at least parts of it) be transparent. So that one can click through to the underlying first screen. Is this possible? So far, the screens appear as peers in the structure, so whilst adding pointerEvents="none" to screen2 ensures it doesn't get the pointer events, that does not mean screen1 does get them?

Router can be unmounted during a transition, causing a no-op

If you unmount your router component before a transition has completed, you get:

Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Router component.

This comes from the setState()s that occur after async promise resolutions in pop, replace, reset and addScreen.

I suggest replacing these with an _isMounted guard or similar from: https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html

Deprecation warnings

I got two warnings after installing Navigator:

1. compnentWillReceiveProps is deprecated (in withAnimatable(View))
2. componentWillMount is deprecated (in Navigator by its own)
   Any suggestions or upcoming updates? Thanks

Fade transition does not remove fade out old (/first) screen?

If I have two screens, and push from screenA to screenB with a fade animation, then the screenA does not fade out.

If my screenB is (semi) transparent, this becomes problematic

Prevent navigation actions during transitions

@christianchown asked in reddit comment: Can you prevent navigation actions during transitions? If I have a button that performs a .pop(...), I can press it while the screen is animating, and pop past the stack to get a white screen.

This really looks like a bug. Need to fix.

Incorporate React Native Screens

It looks like this is a library to hook into the native navigation containers - could be a performance booster?

There's a guide here... https://github.com/kmagiera/react-native-screens#guide-for-navigation-library-authors

Navigator from ref doesn't have stack

Add info about passing parameters to readme

[v3] ability to change screenStyle

would be awesome to be able to change screenStyle

or maybe use transparent background instead?

Make ability to pop on ios with swipe/pan gesture

[v3] Add ability to apply transition to bottom screen

Hi Sergey - looking for another bit of v2 functionality to be added to v3, something like #30.

I'm thinking of an API like

<Navigator animations={{
  fadeRight: {
      start: { opacity: 0, transform: [{ translateX: windowWidth }] },
      end: { opacity: 1, transform: [{ translateX: 0 }] },
      push: { opacity: 0, transform: [{ translateX: -windowWidth / 3 }] },
      pop: { opacity: 1, transform: [{ translateX: 0 }] },
  }
}}/>

Where push and pop are optional, but get applie:

• (push) to stack[stack.length-1] as the end position when a push/replace/reset happens, and to
• (pop) to stack[stack.length-2] as the end position when a pop happens

Can't think of good names for them though... (bottomPush/bottomPop ? topPush/topPop?)

push()ing during first render causes "TypeError: undefined is not an object"

Hi Sergey, here's a minimal reproducable case (RN 0.59.0+ needed, for hooks).

Screen1 (which is the initialRoute) immediately does router.push.Screen2(). It looks like this.state.stack isn't properly set up at this point...

import React, { useEffect } from "react";
import { StyleSheet, Text, View } from "react-native";
import Router from "react-native-easy-router";

function Screen1({ router }) {
  useEffect(() => {
    router.push.Screen2(); // immediately push Screen2
  }, []);
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Screen 1</Text>
    </View>
  );
}

function Screen2() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Screen 2</Text>
    </View>
  );
}

const routes = { Screen1, Screen2 };

export default function App() {
  return <Router routes={routes} initialRoute="Screen1" />;
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  text: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

Desired output

Screen2 getting pushed on top of Screen1

Actual output

Allow screen access to animation

Maybe this is already possible, but I couldn't find a way to do it.

I'd like to animate individual components inside a particular screen as the screen is pushed and/or popped off the stack. As far as I can see, the screens only have access to the router methods (push, pop, reset), but no way to be notified when they are being pushed on to or off of the stack?

Allow router to be initialised with a complete stack, for rehydration

Hi @sergeyshpadyrev, would it be possible for a router to be initialised with a complete stack? Maybe initialRoute could take an array?

<EasyRouter
  initialRoute={[
    {
      id: 'screen1',
      route: 'Screen1',
      params: {},
      animation: { type: 'none' }
    },
    {
      id: 'screen2',
      route: 'Screen2',
      params: { lol: 'wut' },
      animation: { type: 'fade', duration: 900 }
    },
    {
      id: 'screen3',
      route: 'Screen2',
      params: { foo: 'bar' },
      animation: { type: 'left', duration: 700 }
    }
  ]}
/>

This means I can store an exact navigation state via onStackChange, and then rehydrate it when my app restarts.

It could be (crudely) done at the moment by pushing all the screens with animation: {type: 'none'}, but then any .pop()s won't have the correct animation.

Make previous screen fade in black while transitioning

Base it on @christianchown ideas from #7

Add on screen appeared and disappeared handlers

How to update current screen when props are changes ???.....How to make forceUpdate?