Summary: When the touch gets terminated, it is not guaranteed that there is an active gesture. It looks like this was causing crashes
@public
Reviewed By: @chaceliang
Differential Revision: D2441469
Summary:
When mutation of a stack happens, we'd like to compute the diff of the stacks (before and after) so that
we can know which routes are removed in the new stack.
This diff adds a new method `substract` which does what we need.
Summary:
Disabling the scene this way would make the scene height go to zero and mess up the scroll position. By setting the bottom to the same distance, the view does not get resized and the scroll position is preserved through a scene disable cycle.
Summary:
# Summary
Add a method `keyOf` to NavigationRouteStack.
The method `keyOf` returns a key that is associated with the route.
The a route is added to a stack, the stack creats an unique key for it and
will keep the key for the route until the route is rmeoved from the stack.
The stack also passes the keys to its derived stack (the new stack created by the
mutation API such as `push`, `pop`...etc).
The key for the route persists until the initial stack and its derived stack no longer
contains this route.
# Why Do We Need This?
Navigator has needs to use an unique key to manage the scenes rendered.
The problem is that `route` itself isn't a very reliable thing to be used as the key.
Consider this example:
```
// `scene_1` animates into the viewport.
navigator.push('scene_1');
setTimeout(() => {
// `scene_1` animates off the viewport.
navigator.pop();
}, 100);
setTimeout(() => {
// Should we bring in a new scene or bring back the one that was previously popped?
navigator.push('scene_1');
}, 200);
```
Because we currently use `route` itself as a key for the scene, we'd have to block a route
until its scene is completely off the components tree even the route itself is no longer
in the stack otherwise we'd see strange animation of jumping scenes.
# What's Next
We're hoping that we can build pure reactive view for NavigationRouteStack easily.
The naive implementation of NavigationRouteStackView may look like this:
```
class NavigationRouteStackView {
constructor() {
this.state = {
staleScenes: {},
};
}
componentWillReceiveProps(nextProps) {
if (nextProps.stack !== this.props.stack) {
var stale;
var staleScenes = {...this.state.staleScenes};
this.props.stack.forEach((route, index, key) => {
if (nextProps.stack.keyOf(route) !== key) {
stale = true;
staleScenes[key] = {route, index, key, stale};
}
});
if (stale) {
this.setState({
staleScenes,
});
}
}
}
render() {
var scenes = [];
this.props.stack.forEach((route, index, key) => {
scenes.push({route, index, key});
});
Object.keys(this.state.staleScenes).forEach(key => {
scenes.push(this.state.staleScenes[key]);
});
scenes.sort(stableSortByIndex);
return <View>{scenes.map(renderScene)}</View>;
}
}
```
Summary:
If user taps the back button quickly, the app crashes becuase "pop"
internally only checks `this.state.presentedIndex` which does not
always update when transtion happens.
This diff addresses this issue.
Summary:
Hides disabled scenes using `top` instead of `left`, which fixes a bug with the native UITabBar. When the UITabBar's width is zeroed because the scene has `left: SCREEN_WIDTH, right: 0` applied, this triggers a bug with the kerning of the tab titles. Instead, zeroing the height by setting `top: SCREEN_HEIGHT` avoids the bug.
Also applies `pointerEvents="none"` to disabled scenes so that views in the off-screen scenes definitely don't receive touches, which was occurring before.
Fixes#1401, fixes#2011
Closes https://github.com/facebook/react-native/pull/2104
Github Author: James Ide <ide@jameside.com>
Summary:
Re-landing D2229686 after fixing bugs mentioned in D2250586
onItemRef is old and no longer needed now that the parent renders the scenes. This removes it from Navigator and all of our clients.
This is a breaking change to users of Navigator, but it is easy to transition to a ref in renderScene instead
Summary:
While adeveloper requests the emitter to emit an event, the emitter
may not emit the event immediately instead of putting the request
into a queue and process it later.
This diff allows the developer to provide a callback which will be called
when the event has been emitted.
For instance:
```
class NavigationContext {
push(nextRoute) {
var nextStack = this._stack.push(nextRoute);
this.emit(
'change',
{
reason: 'push',
nextStack: nextStack,
nextRoute: nextRoute,
},
this._onPush
);
}
_onPush(event){
if (event.defaultPrevented) {
return;
}
this._stack = event.nextStack;
this.emit('change');
}
}
```
Summary:
idStack is going away soon. This removes all references to it. Looking at the internal state of navigator will make you have a bad time.
The biggest change is switching to the new component-freezing techinique in the navigation bars. This way we avoid dependence on the idStack to provide a scalar ID for each route.
Summary:
Infinite scrolling in horizontal ListViews. Rather than just using height and Y offset to determine when to load more rows, it checks `props.horizontal` and switches between width/height and offset X/Y accordingly.
This changed required some renaming. However, the only change external to `ListView.js` is exporting `contentSize` instead of `contentHeight` from the `getMetrics()` function. (This is not part of the API, but is used "for perf investigations or analytics" and isn't reference in the repo).
I believe this change works as expected (and the xcode tests pass) though it's possible that there may more complexity in this issue that I have overlooked.
Closes https://github.com/facebook/react-native/pull/1786
Github Author: Mr Speaker <mrspeaker@gmail.com>
Summary:
onItemRef is old and no longer needed now that the parent renders the scenes. This removes it from Navigator and all of our clients.
This is a breaking change to users of Navigator, but it is easy to transition to a ref in renderScene instead
Summary:
When composing scroll views, `this.refs[SCROLLVIEW_REF]` may refer to another higher-order scroll component instead of a ScrollView. This can cause issues if you expect to need it to be a ScrollView backed by an RCTScrollView.
The solution is to call `getScrollResponder()` - as long as all higher-order scroll components implement this method, it will make its way down to the true ScrollView, which is what ListView wants here.
Closes https://github.com/facebook/react-native/pull/1927
Github Author: James Ide <ide@jameside.com>
Summary:
Introducing the data structure NavigationRouteStack that focused on managing
navigation routes stack.
The goal is to make <Navigatior /> thinner by moving stack management logic into
its own class and make sure it's well-tested.
Teh next step will be cleaning up <Navigatior /> and add `NavigationRouteStack` to
`NavigationContext`.
Summary:
A minor improvement suggestion: `Navigator.getCurrentRoutes()` probably shouldn't return its `routeStack` backing array as-is, because the caller may mutate it, causing the internal state of the navigator to go out of sync. Instead a shallow copy of the routes should be returned.
I stumbled on this problem in my app by attempting to read the navigator state as follows:
```
let routes = Navigator.getCurrentRoutes();
let current = routes.pop();
let previous = routes.pop();
```
Which led to an exception at next navigation event.
CLA signed.
Closes https://github.com/facebook/react-native/pull/1888
Github Author: Jani Evakallio <jani.evakallio@gmail.com>
Summary:
This enables code like:
```js
<ListView renderScrollView={() => <CustomScrollView />} />
```
where CustomScrollView might be inverted or support pull-to-refresh, etc.
Closes https://github.com/facebook/react-native/pull/785
Github Author: James Ide <ide@jameside.com>
Summary: At the moment the `ListView.js` `_childFrames` variable is only updated on scroll. As a consequence, `onChangeVisibleRows` won't get triggered for the initial render, nor any future render not trigered by scroll events. To fix this we need to make sure native and JS have the child frames in sync.
Summary:
When `UIManager.measure` is called from `componentDidMount` it causes the error "Attempted to measure layout but offset or dimensions were NaN". Deferring the layout by one frame solves this problem. Layout measurement is already asynchronous anyway, so I believe adding the `requestAnimationFrame` call doesn't affect the program's correctness.
Fixes#1749
Closes https://github.com/facebook/react-native/pull/1750
Github Author: James Ide <ide@jameside.com>
Test Plan:
Load UIExplorer and no longer get a redbox that says "Attempted to measure layout but offset or dimensions were NaN".
Summary:
This makes sure to call willFocus before new scenes get mounted. This fixes cases where the keyboard is dismissed on willfocus events which incorrectly happens *after* the autofocus in a new scene. The keyboard was opening and getting immediately closed
@public
Test Plan: Test keyboard autofocus in new nav scenes on iOS
Summary:
Updating range is too complicated. We can keep cached versions of the previously rendered scenes in a map.
@public
Test Plan: Verify that the active scene is the only thing that get re-rendered, and that rendering doesn't happen during transitions or gestures. Test navigation thouroughly in AdsManager
Summary:
@public
If something changes in the list view that should trigger more loads, it
wouldn't. Example case is tap to load more - only the first new row would load,
but it wouldn't trigger a re-measure and subsequent layout of additional new
rows.
Test Plan: View More in Events works.
Summary:
@public
The current getter for `navigationContext` always return a static
context, and it should return an instance-based one, instead.
Test Plan:
Use console.log() in inspect that two different navigators do
have their own `navigationContext` created.
of the navigator component.
Summary:
Per offline discussion with @evv, we'd like to deprecate the `onDidFocus` and `onWillFocus`
API that makes it really hard for the descendent children of a navigator to observe its focus
change events.
@public
Since for now the descendent children do have access to the navigator via `this.props.navigator`,
this diff makes it easy to observe the focus change event by doing:
```
this.props.navigator.addListener('willfocus', this._onFocus);
```
The goal is to make the event system in navigator more useful and maintainable.
Test Plan:
Test Video: https://www.facebook.com/pxlcld/mrzS
1. jest: ./Libraries/FBReactKit/js/runTests.js NavigationEventEmitter
2. Load UI Explorer: <Navigator />, see console logs that shows the focus change events fires.
Summary:
When a new data source is provided, update `curRenderedRowsCount` in addition to `prevRenderedRowsCount`. What was happening is that I had an empty data source, so `curRenderedRowsCount` and `prevRenderedRowsCount` both settled at zero after the first few frames and `curRenderedRowsCount` wasn't getting increased when the data source was updated.
I also changed the `setState` calls to use the transactional API since several of the new state values are computed from the old ones.
Maybe fixes#1547
Closes https://github.com/facebook/react-native/pull/1612
Github Author: James Ide <ide@jameside.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Eric Vicenti
Yamill Vallecillo
Emily Janzer
Hedger Wang
Rui Chen
James Ide
Martin Konicek
Ben Alpert
Matheus Santos
Martín Bigio
Kevin Gozali
Mr Speaker
Spencer Ahrens
Jani Evakallio
Alex Kotliarskyi
