Commit Graph

26 Commits

Author SHA1 Message Date
Brent Vatne
3031e7bd80 Update header when screenProps change (Fixes #4271) 2018-06-08 17:35:17 -07:00
Eric Vicenti
4be99b6645 Transitioner: Fix instantaneous transitions (#4404)
* Transitioner: Fix instantaneous transitions

The transitioner will always perform an animation on state change. Instead we should check if the navigation state is requesting a transition with isTransitioning. If not, we follow a similar codepath to transitioning, without any animation.

* Update .eslintrc
2018-06-04 12:46:08 -07:00
Eric Vicenti
ad52caf57b Immediate transition fix, avoid stale render (#3901) 2018-04-05 11:35:16 -07:00
Eric Vicenti
e27ad22c57 [BREAKING] New createNavigator API (#3392)
* New createNavigator and View API

See the RFC here:
https://github.com/react-navigation/rfcs/blob/master/text/0002-navigator-view-api.md

* shattered dreams of flow

* fix export

* Fix tab view issues found by brent
2018-02-27 17:27:58 -08:00
Mike Grabowski
593bc8a648 Improve Header performance a bit (#3556)
* Improve `Header` performance a bit

I have been investigating `<Header />` component performance once again today with `render` cycles in particular. I have observed that during `push` phase, a typical Header in NavigationPlayground re-renders 3 times on iOS and 2 times on Android.

The first time is obvious on both platforms since that's when we add a new scene to an array. Second on iOS was also self-explanatory - we measure title width and other layout parameters in order to provide a better animation. 

What got me thinking was the last render cycle that didn't have a clear origin. After digging around I've found it is caused by a `scenes` array changing when transition finishes. What is surprising, it's just the reference to the object that changes, the content (items inside) stay the same.

I have found out that this is caused by `Transitioner` looping through an array of scenes attempting to remove stale scenes. Since scene becomes stale when you `pop` from it, this is obviously a noop when `pushing` a new route. That, obviously, causes an extra render cycle since `filter` produces same, but with a different pointer, object.

* Update Transitioner.js

* Update Transitioner.js
2018-02-20 15:44:10 -08:00
Eric Vicenti
03fbd98ce4 Fix Transitioner race condition (#3434)
This code was added during the events implementation, but I think we should be able to manage this circumstance from the parent context. In any case, any events bugs that result from this change will be far less insidious than the cardstack transitioner issue we experience now
2018-02-05 10:52:08 -08:00
Brent Vatne
24bfab93b4 Manually unset transitionIsRunning rather than going through _onTransitionEnd after state change 2018-01-26 23:02:02 -08:00
Brent Vatne
f8426bef7e Clean up when transitioner state when bailing out early 2018-01-26 18:55:38 -08:00
Eric Vicenti
0157a4c9e9 Navigation Event Subscriptions (#3345)
* Add fbemitter, keep flow passing

* Begin support for event emitter

- Adds emitter to navigation prop
- Emits top level onAction event
- stub getChildEventSubscriber for child events

* Support navigationState.isNavigating

* Focus and blur events starting to work

- Navigation completion action wired up
- Event chaining logic built in getChildEventSubscriber
- Renamed onAction evt to ‘action’

* Wrap up events progress and testing

* Rename to isTransitioning and COMPLETE_TRANSITION

* rm accidental dependency

* Suppoert event payload type
2018-01-25 00:13:28 -08:00
Brent Vatne
ecfa38bfd2 Remove flow (#3350)
* Remove flow types from src

* Finish removing Flow

* Clear out flow-typed, some flow mentions in docs, website flow usage, and some other config
2018-01-24 17:52:09 -08:00
James Reggio
5cb42bdf5d Await promise from Transitioner onTransitionStart (#2946)
* Await promise from onTransitionStart

* Review feedback

* Update docs for onTransitionEnd
2017-12-01 15:42:53 -06:00
Ashoat Tevosyan
d1c434b54c Update to react-native@0.49 and flow-bin@0.53 (#2845)
* Update root package to react-native@0.49 and flow-bin@0.53

* Update NavigationPlayground package to react-native@0.49 and flow-bin@0.53

* Update ReduxExample package to react-native@0.49 and flow-bin@0.53

* flow-typed update (code-gen)

* Find-and-replace old types with new types

- `React.Element<*>` as the result of a render function is now `React.Node`
- `ReactClass<T>` as the type of a Component is now `React.ComponentType<typeof T>`
- `extends React.Component<DP, P, S>` is now `extends React.Component<P, S>`
- `React.Children<*>` as the type of a children prop is now `React.ChildrenArray<*>`
- Refs are now typed with `React.Ref`

There are also several tiny typo fixes in here.

* Avoid assuming state is NavigationRoute in addNavigationHelpers

For the root, top-level Navigator, the state is a simple `NavigationState` (with no route info) and we still use `addNavigationHelpers` for it. We can't assume `navigation.state.key` is accessible for this type, so we need to do runtime checks here.

* Fix type of NavigationScreenConfig

`navigationOptions` was incorrectly typed

* Give createNavigationContainer's State a type parameter

We want to be able to specifically type this guy so we can use specific NavigationState for things like the Drawer views without having to do runtime assertions about the state type

* Fix typing of NavigationAction

First of all, `NavigationAction` was being used as two different types, so I had to create the new `PossiblyDeprecatedNavigationAction` and add it as a type parameter everywhere. Second of all, generics and implied types were being used far more than they need to be, and they're hard to work with because Flow doesn't really explain things well when they go wrong.

* Make sure children scenes of CardStack have NavigationProp typed with NavigationRoute

CardStack's `NavigationScreenProp` is typed with `NavigationState`, but the children need `NavigationRoute`. Flow gets confused by the spread operator, even if the individual property is replaced later, so we need to explicitly list each property individually (just `dispatch`, actually).

* Allow prevTransitionProps parameter to be nullable

* Allow prevTransitionProps parameter to be nullable

* Narrow down a couple type parameters

* Move NavigationStateRoute cast to within Component.router check in createConfigGetter

* Update withCachedChildNavigation so it's typed correctly with React.ComponentType

* Add a $FlowFixMe for displayName

`React.StatelessFunctionalComponent` is missing `displayName` before Flow 0.54.0

See de37062ea2

* Make TouchableItem's onPress prop optional

`HeaderBackButton` can pass in an undefined onPress, and the React Native `Touchable*` components allow it too

* Simplify withCachedChildNavigation and get rid of generics

The generics don't help us here and they make the types more confusing

* Redefine NavigationComponent as direct intersection

The new type is technically identical to the old type, but Flow is confused by the old type...

* Save router to local var before checking createConfigGetter

Flow seems to think Component.router can change after the check

* Fix DrawerSidebar's navigation prop's type

In order for us to be able to generate a childNavigationProp, the original navigation prop has to have a NavigationState state.

* Colocate action.key check with action.type check in getStateForAction

For some reason, Flow thinks `action` can change sometime after `action.type` is checked. As a result, it's not properly concluding that `action.key` should exist. To avoid this, we pull `action.key` out immediately after doing the `action.type` check.

* Use bounded polymorphism to pass down all props in withCachedChildNavigation

Also makes sure the injected props are specified first in the union

Also removes an unused `eslint-disable-line` in `getScreenForRouteName`

* Make TabRouter's getComponentForState return NavigationComponent

`NavigationScreenComponent` is a subtype of `NavigationComponent`, but it's not clear that `getComponentForState` always returns a `NavigationScreenComponent`, as `getScreenForRouteName` returns `NavigationComponent`

* Define NavigationComponent's props using NavigationNavigatorProps

Right now the types ask Flow to infer the types of `NavigationComponent`'s props. (`NavigationComponent` is the union of `NavigationNavigator` and NavigationScreenComponent.) Instead, we type the props as subtypes of `NavigationNavigatorProps`, so we can properly access those props without type errors. We used bounded polymorphism in `createNavigationContainer` and `createNavigator` to pass down these props. We also explicitly type the action in `createNavigationContainer` so we can properly pass in a `NavigationInitAction` to the dispatch function.

* Parameterize NavigationTabRouterConfig

`NavigationTabRouterConfig` doesn't always take `NavigationTabScreenOptions`; sometimes, it takes `NavigationDrawerScreenOptions`.

* Make all NavigationOptions Exact types

We're seeing weird behavior when these are merged together. By making them Exact types, we make types don't get mangled when they're unioned.

https://flow.org/en/docs/types/unions/#toc-disjoint-unions-with-exact-types

* Silence errors in tests

These errors are unavoidable since we can't type the precise shape of a particular `NavigationState`.

* Include NavigationSetParamsAction in NavigationTabAction

`TabNavigator`'s `getStateForAction` definitely takes `NavigationSetParamsAction`.

* Explicitly list router as void in NavigationScreenComponent

This is so Flow knows that if a `NavigationComponent` has a `router` property, then it is definitely a `NavigationNavigator`.

* Fix website app navigator's type

* Fix createDocPage type in App

In an earlier commit I attempted to fix the types here, but I incorrectly read it as returning a navigator when it just returns a screen. For some reason the error didn't immediately show up.

* Fix NavigationComponent types

Five changes:
1. No longer parameterizing the props of `NavigationComponent`; directly specifying as `NavigationNavigatorProps`
2. Specify the two distinct kinds of route types (leaf and state) directly in `NavigationComponent`
3. Have `SceneView` directly take `NavigationComponent` and allow inferring of `NavigationSceneProp` type
4. Have `CardStack` directly take `NavigationComponent` as well

* Allow Flow to infer `NavigationAction` type in `createNavigator`

* Silence Flow in router code that handles navigator sub-routes

There's no way for us to tell Flow that routes that correspond to navigators should be `NavigationStateRoute`s

* Allow DrawerSidebar to take a null contentComponent

The way `DrawerNavigator` is set up, it's possible to pass in a null `contentComponent` in the config.

If somebody want to do this, we'll just make the `DrawerSidebar` not appear altogether. This is simpler than splitting the types so there's a possibly-unspecified one for the user input, but a definitely-specified one in `DrawerSidebar`.

* Specify missing screenProps prop in DrawerView

* Thread full NavigationStateRoute in to DrawerSidebar

This requiring making `withCachedChildNavigation` use bounded polymorphism to thread the `NavigationStateRoute` through instead of downgrading it to a `NavigationState`

* Make NavigationStateProp's state prop covariant

This means that `NavigationStateProp<NavigationStateRoute>` will be a subtype of `NavigationStateProp<NavigationRoute>` and `NavigationStateProp<NavigationState>`

* Silence Flow's complaints about a route not being a NavigationStateRoute

As mentioned in previous commits and in the comment, there is no way to type a specific navigation state shape, so we have to cast it and silence Flow's complaints.

* Get rid of style prop in CardStack

It looks like at some point, it was possible to specify a `style` prop that got passed all the way down to `Header`, the `TransitionConfig`'s `screenInterpolator`, and `Transitioner`. Doesn't look like we're using it anywhere, and there's a todo saying to remove it, and it's causing a type error.

* Infer type of options instead of using a subtype of {}

I think this has to do with {} allowing for unsealed objects. I'm not 100% sure, but this fixes 4/6 of the remaining errors!

* Fix two type errors in NavigationPlayground

One was just requiring an outdated type (`React.Children` instead of `React.ChildrenArray`), and the other was getting confused regarding types because of a spread operator.

* Use a covariant property to simplify withCachedChildNavigation's InputProps

This doesn't reduce any errors, but it's a bit simpler and cleaner.

* Silence last two Flow errors regarding withCachedChildNavigation injecting childNavigationProps

These are the only two errors I haven't been able to figure out at all. If I had more time I'd try and figure out the simplest case and report it to the Flow team, but I've been working on this for a week already and have to move on.

The issue at hand is that `withCachedChildNavigation` injects `childNavigationProps`, but Flow doesn't see this and thinks it needs to be specified by the view component. We're using the HOC pattern suggested by the Flow docs, and I've tried several other patterns to no avail.

* Use stock react-native instead of Expo's in NavigationPlayground

Expo's causes Flow errors, and apparently this is normal practice because the person who switched us to Expo did this too.

* Silence react-native-gesture-handler Flow errors in NavigationPlayground

Expo requires this package, but it causes Flow errors.

* Fix index check in DrawerSidebar

Silly me, falling for the typical "0 is falsey" problem...

* Rework deprecated action tests

In an earlier commit I moved the `NavigationActions.mapDeprecatedActionAndWarn` out from `getStateForAction` and into `createNavigationContainer`'s `dispatch` function. The tests need to be reworked to support this, as they were previously calling `getStateForAction` directly. I don't imagine any users are calling `getStateForAction` directly.

* Re-record two snapshots

The changes in these snapshots are by design and don't affect anything.

* Infer type of options in NavigationScreenConfig

The issue is that sometimes we include options for different navigators in a single blob.

* Infer types of action and options in createNavigationContainer

Particulary helps with Options. Makes the types more specific and gets rid of an error that only shows up when using the library

* Don't use generics for NavigationState in createNavigationContainer

There's no particular reason for having those generics there, since there's no way we'd be able to get Flow to understand the exact shape of particular navigation states anyways. This fixes a bug when integrating this version of the project into my repo.

* Move ReduxExample to react-native@0.49.3 instead of custom Expo version
2017-10-31 09:41:17 -05:00
Adam Miskiewicz
eb8434a5b6 Clean up some flow types code-base wide, reorganize cardstack views 2017-07-19 12:59:40 -07:00
Adam Miskiewicz
681e1c6e31 Update depenencies, update Prettier 2017-07-19 12:59:40 -07:00
Adam Miskiewicz
9436d03fe8 Update to RN 0.45, fix/improve flow coverage 2017-07-19 12:59:39 -07:00
Gabriel Bull
77b04f342d Removed dependency on fbjs (#1698) 2017-06-03 12:21:08 -07:00
Adam Miskiewicz
f3a958dca1 Update/Fix Prettier + Eslint config for codebase
Run Prettier/Eslint on entire codebase, fix issues
2017-05-14 14:18:09 -07:00
Neo
961cf13268 skip Transitioner animation after swiped back (#1036)
* fix gesture

* add easing

* skip Transitioner animation after swiped back

* Run format
2017-04-27 07:47:57 -07:00
Mike Grabowski
bbe9caff06 Fix eslint issues and turn on prettier by default (#1195)
* Automatically generate prop-types from Flow

* Remove propTypes usage

* Fix flow

* Modify some eslint settings

* Fix flowtype

* Lint tweaks

* use prop-types pkg

* Run prettier

* Fix flow

* Fix few lint issues

* Make eslint pass

* Run lint on tests

* Fix flow

* Fixes

* Alphabetical

* Trailing comma: ES5 for website compat, also fix config/paths

* Apply eslint --fix only to src now

* Fix missing transitionconfig

* Update TypeDefinition.js

* New stuff

* Unstage website and examples

* reformat code

* Update circle.yml
2017-04-24 17:31:22 +05:30
Mike Grabowski
e2f5e7fd49 Automatically generate prop-types from Flow (#1033)
* Automatically generate prop-types from Flow

* Remove propTypes usage

* Fix flow

* Modify some eslint settings

* Fix flowtype

* Lint tweaks

* use prop-types pkg
2017-04-13 15:19:30 -07:00
Mike Grabowski
93976d358e Introducing flat options (#984)
* Initial commit

* Remove HybridExample (#985)

* Remove HybridExample

* Remove last mention of HelloHybrid

* Remove console log

* Fix flow and example

* Fix routers api docs

* Keep options in single place

* chore

* Fix styling

* Organise miscs

* Better flow type for screen options

* Flow test website and add more types to options

* navigationOptions instead of prevOptions makes more sense

* Fixes

* Fix up docs

* Fix

* Update route decl

* Provide error when removed API is used

* Remove lock

* Add validators

* Make StacksOverTabs config valid again

* Do not return

* Fix redbox
2017-04-12 15:49:08 -07:00
Mike Grabowski
49133c3dfe Fix glitches in Header when calling replace (#418)
* Change the way we store computed layout

We cannot store layouts under `index` because when calling `replace`, there are two competing layouts
on the same index, which will cause an infinite loop (are almost infinite) of flickering / jumping title.

* Disable transition at all when index didn't change
2017-02-23 22:19:56 -08:00
Satyajit Sahoo
a7b1243053 Fix flow (#305)
* Fix Flow and Android build

* Enable flow on CI

* Fix and suppress flow errors
2017-02-13 08:26:30 -08:00
Daniel Hood
5501bcdb44 Allow Transitioner to queue single animation (#191)
remove some extra spaces

use navigationScene type

fix index race condition
2017-02-07 14:19:27 -08:00
Mike Grabowski
7a20389e04 Refactor header, tintColor support, redesign iOS back button (#109) 2017-02-02 02:50:12 +05:30
Adam Miskiewicz
c37ad8a0a9 Initial public release of React Navigation 2017-01-26 11:53:33 -08:00