Commit Graph

156 Commits

Author SHA1 Message Date
Qiao Liang 993f15d2fe Ensure row key uniqueness for listview with sections
Summary: I encounter issues when using ListView with multiple Sections.
```
...
var ds = new ListView.DataSource({
  rowHasChanged           : (row1, row2) => row1 !== row2,
  sectionHeaderHasChanged : (s1, s2) => s1 !== s2
});
...
  getInitialState: function() {

    var sectionIDs = [0,1,2]
    var rowIDs = [
        [0,1,2],
        [0,1,2],
        [0,1,2]
    ]

    var dataBlob = [
        [blob0,blob1,blob2],
        [blob3,blob4,blob5],
        [blob6,blob7,blob8],
    ]

    return {
      dataSource : ds.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs),
    };

```

the code above would throw error because of duplicate key, as ''sectionID0 + rowID0 === sectionID1 + rowID1'. And I have to do:
```
...
sectionIDs.map((id)=>{
  return id+'';
});

rowIDs.map((sec)=>{
  return sec,map((id)=>{
    return id+'';
  });
});
...
```

ListView with sections does not seem to be documented yet, so I am not sure if this is the intended behaviour or am I missing anything. Co
Closes https://github.com/facebook/react-native/pull/4082

Reviewed By: svcscm

Differential Revision: D2652028

Pulled By: mkonicek

fb-gh-sync-id: a9933bac1a1ae2d6cbc73a11ef6aefde6fcdb35f
2015-11-13 08:15:59 -08:00
Spencer Ahrens a94c2aea37 revert onEndReached change to investigate perf regression
Differential Revision: D2651998

fb-gh-sync-id: 81ef96bbd79a282b5d82b8cc9b0654e7163fbdfb
2015-11-13 06:21:58 -08:00
Christine Abernathy 12488da9cf Left nav shouldn't visible when moved to left
Summary: This issue shows up if you have a really long left nav item. When the navigator is pushed in iOS, the long nav item will be visible alongside the new nav item.

Steps to repro:
1/ Modify Examples/UIExplorer/Navigator/NavigationBarSample.js
2/ In NavigationBarRouteMapper.LeftButton, make the following change

    <Text style={[styles.navBarText, styles.navBarButtonText]}>
      Very Long Title {previousRoute.title}
    </Text>

3/ On iOS, get the UIExplorer project up and navigate to Navigator > Navbar Example > Next (top-right nav item) > Next

You should see the overlap.

<img width="592" alt="leftnavitem_issue" src="https://cloud.githubusercontent.com/assets/691109/11086934/b5b82e26-880a-11e5-9945-13901346a5c5.png">

With these changes the overlap is gone.
Closes https://github.com/facebook/react-native/pull/4067

Reviewed By: svcscm

Differential Revision: D2641934

Pulled By: ericvicenti

fb-gh-sync-id: 962536b97f77a3b7f176423aa11dc94f24f07332
2015-11-11 09:02:57 -08:00
Hedger Wang 1f0566f55f clean up navigator when it's unmounted.
Summary: public

We've noticed that some of the navigator functions are called after the navigator
being unmounted. This diff adds the checks to protect the navigator from throwing
error when it's calling function after be unmounted.

Reviewed By: fkgozali

Differential Revision: D2629484

fb-gh-sync-id: 1cbee02b1a8d2a5d285e7d76f382d2599ed8caed
2015-11-06 23:41:26 -08:00
Spencer Ahrens a4f7aa4853 make onEndReached a little more robust
Summary: public

Now if you scroll up out of the end threshold and then back down into it,
onEndReached will get triggered again.  This closes https://github.com/facebook/react-native/issues/1967

This also resets onEndReached when the data source changes.  This would fix
issues where the data source changes and onEndReached should fire again since
the new data may have more pages, whereas the old data had reached the end and
stopped.

Reviewed By: jingc

Differential Revision: D2610799

fb-gh-sync-id: f6cef513a42d4765514bf4bc55d9e31a760117f1
2015-11-04 11:32:28 -08:00
Hedger Wang 4763f89efa update NavigationContext API.
Summary: 1. Add a new api `top` which returns the root navigator of a nested navigator.
2. Remove the param `context` from the method `addListener` because it's not used and not necessary.

public

Reviewed By: fkgozali

Differential Revision: D2613852

fb-gh-sync-id: 0d5544422ff0be7875824989a4fbefbef9aac986
2015-11-03 19:08:31 -08:00
aleclarsoniv 5dd3b88a81 Use 'visibleLength' if 'contentLength' is less
Summary: This prevents the 'distanceFromEnd' from being negative when 'offset' is zero, for example.
Closes https://github.com/facebook/react-native/pull/3074

Reviewed By: svcscm

Differential Revision: D2610771

Pulled By: sahrens

fb-gh-sync-id: f878f1c1b865063294013c3bb96b90831877d372
2015-11-03 10:13:28 -08:00
Hedger Wang a33fe94dac build nested navigation context based on the hierarchy of navigators.
Reviewed By: zjj010104

Differential Revision: D2598388

fb-gh-sync-id: 9655bcc86021678984e2a29df20ad2496a1762d1
2015-10-30 11:09:28 -07:00
Oleg Lokhvitsky 26e3bf97d3 Revert D2590497
Reviewed By: pvulgaris

Differential Revision: D2597148

fb-gh-sync-id: a8b6e7c3a90a8a1eaefc996d6243c4a171df37c8
2015-10-29 14:35:32 -07:00
Hedger Wang 064de3b338 Replace Navigator with AdsManagerNavigator - step 1
Reviewed By: fkgozali

Differential Revision: D2585102

fb-gh-sync-id: 6f0d51d755e0926f7c6f4d411a026cebf49333a2
2015-10-28 18:27:26 -07:00
Krzysztof Magiera dea4c2ca8e Use onLayout in listview instead of calling measure for every scroll event.
Reviewed By: sahrens

Differential Revision: D2590497

fb-gh-sync-id: 42a8f97dcb43b3a59ba3f0a008fb363f8e8c7200
2015-10-28 12:43:29 -07:00
Hedger Wang ae58fe221b Stop handling animation once Navigator is unmounted.
Summary: public
Navigator subscribes to its internal animation spring that may still
asks navigator to re-render after being unmounted.

This diff clears the listeners of its animation spring once navigator
is unmounted.

Reviewed By: zjj010104

Differential Revision: D2588434

fb-gh-sync-id: 2b3ee65d3a6c3d45e5c6904d1dc65ac5a3e4534a
2015-10-27 18:30:24 -07:00
Hedger Wang 06a154e061 Fix Js error in Navigator
Summary: public

In Navigator, there are several places that mutate `this.state.presentedIndex`
with the express `this.state.presentedIndex = destIndex` instead of calling
`this.setState`, which creates the problem that not all internal states are
updated within the same React update cycle.

One of the symptoms is that over-swiping within the Navigator may throw JS error
due to `this.state.sceneConfigStack` and `this.state.presentedIndex` are not both
updated.

The workaround is to bypass the over-swiping gesture to avoid JS error.

Reviewed By: ericvicenti

Differential Revision: D2557140

fb-gh-sync-id: 1e5c9047ed17c04a63e2a568118848b00723fb1d
2015-10-20 11:04:23 -07:00
Hedger Wang 73b80773ba supports event capturing and bubbling phases in Navigation context.
Summary: Adds the API that enables the navigation events capturing and bubbling which is the feature
that is enabled if the nested navigation contexts is created by the navigator.

This would allow developer to observe or reconcile navigation events within the navigation tree.

public

./Libraries/FBReactKit/jest

Reviewed By: zjj010104

Differential Revision: D2546451

fb-gh-sync-id: dfc9d16defaa563b9e80fd751a20570f6e524b74
2015-10-19 10:06:22 -07:00
Hedger Wang a2524bac33 Support nested navigation context.
Reviewed By: fkgozali

Differential Revision: D2525434

fb-gh-sync-id: 18e7d672b2cbadc318a207c8812f38d8669bad30
2015-10-17 04:25:26 -07:00
Andy Street 28f6eba22d Make removeClippedSubviews default to true on ListView/RecyclingListView
Reviewed By: @satishsampath

Differential Revision: D2536046

fb-gh-sync-id: 7e0b4442bb0b3705bba3b5f7bdf873fb348a83f6
2015-10-13 08:06:26 -07:00
James Ide 2c7de35dee Export per-platform NavigatorNavigationBarStyles for consistent styling
Summary: This allows for the iOS-style navigation bar on Android and vice versa in order to simplify design. It is entirely optional in that NavigationBars will continue to defauly to their platform-specific style, but you can override it with the `navigationStyles` prop:

```js
<Navigator.NavigationBar
  navigationStyles={Navigator.NavigationBar.StylesIOS}
/>
```

Fixes #2995.
Closes https://github.com/facebook/react-native/pull/3028

Reviewed By: @​svcscm

Differential Revision: D2527902

Pulled By: @ericvicenti

fb-gh-sync-id: c7b1bfac200b5e03fc0d9dfb8acc8b916c825595
2015-10-10 15:32:46 -07:00
Spencer Ahrens b0bdd4e45d Fix ListView bug where onEndReached wouldn't trigger initially
Summary: @​public

Sometimes we want to load a very small number of rows initially and want the
onEndReached callback to be called immediately to trigger more data to be
loaded without waiting for the  user to scroll at all.  This diff makes that
happen by also checking on mount instead of only when scrolling.

Reviewed By: @vjeux

Differential Revision: D2507184

fb-gh-sync-id: ea8e47667d00387a935a426dd45afe978fd6d8cd
2015-10-05 13:49:00 -07:00
Hedger Wang 200d9af315 Add method `stopPropagation` and `stop` to NavigationEvent
Summary: @​public

Add method `stopPropagation` and `stop` to NavigationEvent so we can stop event easily once event bubbling and capturing is supported.

Reviewed By: @fkgozali

Differential Revision: D2471903
2015-09-24 08:19:52 -07:00
Elia Grady 88b101bb3e Fixed typo
Summary: _setRenderSceneToHarwareTextureAndroid was changed to _setRenderSceneToHardwareTextureAndroid.
Closes https://github.com/facebook/react-native/pull/2869

Reviewed By: @​svcscm

Differential Revision: D2472438

Pulled By: @vjeux
2015-09-23 19:29:14 -07:00
Hedger Wang b2049e3ccb Hierarchical event bubbling - 1
Reviewed By: @fkgozali

Differential Revision: D2469495
2015-09-23 19:28:56 -07:00
Alex Coco 12a0045412 Fix typo in cloneWithRows comments
Summary: `s/informatoin/information/`
Closes https://github.com/facebook/react-native/pull/2532

Reviewed By: @​svcscm

Differential Revision: D2469067

Pulled By: @vjeux
2015-09-22 17:02:27 -07:00
Jan Kassens 9486642322 Prop routeMapper of Navigator.NavigationBar is required
Summary: The component will crash if the prop is not provided. This helps with a better
error message in the console output.
Closes https://github.com/facebook/react-native/pull/2894

Reviewed By: @​svcscm

Differential Revision: D2461752

Pulled By: @ericvicenti
2015-09-22 14:44:28 -07:00
Tamara Woodson 4447bff976 Fix minor grammatical error in documentation
Summary: No code changes; comments/documentation only.
Closes https://github.com/facebook/react-native/pull/2083

Reviewed By: @​svcscm

Differential Revision: D2468024

Pulled By: @vjeux
2015-09-22 14:25:25 -07:00
Eric Vicenti c962251900 Fix crash when touch terminates without active gesture
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
2015-09-15 13:12:05 -07:00
Yamill Vallecillo f8f75ff612 Navigator.NavigationBar Landscape Fix
Summary: NavigationBar items are fixed to Portrait when Device is in Landscape.

This supplements that fix by removing the `width` properties and just using `left` and `right` positioning respectively.

<strong>Before:</strong>

![ios simulator screen shot sep 8 2015 1 27 02 pm](https://cloud.githubusercontent.com/assets/755943/9743817/3e6b858a-5636-11e5-80e8-81e62b46c46e.png)

<strong>After:</strong>

![ios simulator screen shot sep 8 2015 1 29 21 pm](https://cloud.githubusercontent.com/assets/755943/9743822/43e7d4b4-5636-11e5-8e1c-9f13bdc492b2.png)

Closes https://github.com/facebook/react-native/pull/2606

Reviewed By: @vjeux

Differential Revision: D2426942

Pulled By: @ericvicenti
2015-09-10 14:00:26 -07:00
Emily Janzer 4b28a847e6 [android] fix crash if breadcrumb refs don't exist 2015-08-20 19:08:16 -07:00
Hedger Wang 8463625bd9 [Navigation]: Add a method to map the stack routes to an array.
Summary:
Add a method to map the stack routes to an array.
2015-08-06 02:01:59 -08:00
Hedger Wang 222594cb44 [Navigator] A method `subtract` to compute the diff between stack mutation.
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.
2015-08-04 16:16:17 -08:00
Eric Vicenti 41dd6fe6ea [ReactNative][Navigator] Fix disabled scene height change
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.
2015-07-30 12:58:45 -08:00
Hedger Wang 4b16e4d550 [Navigator]: Add a method `keyOf` to NavigationRouteStack.
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>;
  }
}

```
2015-07-29 16:55:21 -08:00
Hedger Wang 809a2dc1d6 [Navigator: Prevent user from over-popping the routes.
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.
2015-07-29 11:42:34 -08:00
Rui Chen 842ce51099 [Treehouse RN] Make smoothScrollTo works by not calling it twice 2015-07-27 11:25:28 -08:00
Hedger Wang ea5276ed24 [Navigator] Port navigation APIs from Navigator to NavigationContext 2015-07-24 17:10:41 -08:00
James Ide bf7e2a85d0 [Navigator] Vertically hide disabled scenes and use pointerEvents="none"
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>
2015-07-24 14:45:19 -08:00
Martin Konicek d10e4dbf0f [ReactNative] Use ASCII double quotes
Summary:
We mix ASCII double quotes with left and right quotes: https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/ListView/ListView.js#L13

Let's be consistent.
2015-07-24 13:16:25 -08:00
Rui Chen accf6f12e4 Make the scrollResponderScrollNativeHandleToKeyboard works on Android 2015-07-23 18:14:43 -08:00
Ben Alpert e01f90784f [ReactNative] Update core RN modules to work with React 0.14-beta1 2015-07-23 18:07:59 -08:00
Hedger Wang 8dd1256c25 [Navigation] Implements NavigationContextFuture 2015-07-22 10:50:51 -08:00
Hedger Wang 280347d66a [Navigator]: Add method `indexOf` and `slice` to NavigationRouteStack 2015-07-22 10:46:57 -08:00
Eric Vicenti 35aa9f3b97 [ReactNative] Remove idStack from Navigator
Summary:
We want to transition to NavigationRouteStack, so we need to simplify and remove all uses of idStack
2015-07-21 13:25:42 -08:00
Eric Vicenti 4f904b5d68 [ReactNative] Remove Navigator onItemRef
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
2015-07-21 09:28:29 -08:00
Hedger Wang 6e2f07fb81 [Navigator] Add a callback that is called after emitting an event.
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');
  }
}
```
2015-07-20 21:49:58 -08:00
Matheus Santos 6213950334 Added transitions 'VerticalUpSwipeJump' and 'VerticalDownSwipeJump' in…
Summary:
… NavigatorSceneConfigs
Closes https://github.com/facebook/react-native/pull/1822
Github Author: Matheus Santos <matheus.santos@struct.com.br>
2015-07-20 12:53:54 -08:00
Martín Bigio 95dc38929c [rn] revert D2201593 2015-07-20 11:48:08 -08:00
Martín Bigio 0d91b93aba [LAUNCH-BLOCKER] Revert JS callsite of D2201593 2015-07-20 11:48:07 -08:00
Eric Vicenti c28d33f3a2 [ReactNative] Remove dependencies on Navigator idStack
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.
2015-07-17 15:28:57 -08:00
Kevin Gozali 77a0cf27f2 [ReactNative] Revert onItemRef removal 2015-07-16 17:49:56 -08:00
Kevin Gozali 5ec60effea [ReactNative] revert 'unbreak navigation due to onItemRef removal' 2015-07-16 17:49:56 -08:00
Hedger Wang 326a66ba07 [ReactNative][Navigation]: Add method `preventDefault()` to `NavigationEvent` 2015-07-16 17:35:21 -08:00