Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ViewPager] Add setPageWithoutAnimation #3621

Closed
wants to merge 3 commits into from
Closed

[ViewPager] Add setPageWithoutAnimation #3621

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7a8e206
[ViewPager] Add setPageWithoutAnimation and make it imperative like S…
brentvatne Nov 7, 2015
455ed92
[ViewPager] Make initialPage work again and update the example
brentvatne Nov 8, 2015
ce19b2d
[ViewPager] Inline receiveCommand and getCommandsMap
brentvatne Nov 8, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 34 additions & 5 deletions Examples/UIExplorer/ViewPagerAndroidExample.android.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,23 +96,39 @@ var ViewPagerAndroidExample = React.createClass({
description: 'Container that allows to flip left and right between child views.'
},
getInitialState: function() {
return {page: 0, progress: {position: 0, offset: 0}};
return {
page: 0,
animationsAreEnabled: true,
progress: {
position: 0,
offset: 0,
},
};
},

onPageSelected: function(e) {
this.setState({page: e.nativeEvent.position});
},

onPageScroll: function(e) {
this.setState({progress: e.nativeEvent});
},

move: function(delta) {
var page = this.state.page + delta;
this.viewPager && this.viewPager.setPage(page);
this.setState({page});
this.go(page);
},

go: function(page) {
this.viewPager && this.viewPager.setPage(page);
if (this.state.animationsAreEnabled) {
this.viewPager.setPage(page);
} else {
this.viewPager.setPageWithoutAnimation(page);
}

this.setState({page});
},

render: function() {
var pages = [];
for (var i = 0; i < PAGES; i++) {
Expand All @@ -131,7 +147,7 @@ var ViewPagerAndroidExample = React.createClass({
</View>
);
}
var page = this.state.page;
var { page, animationsAreEnabled } = this.state;
return (
<View style={styles.container}>
<ViewPagerAndroid
Expand All @@ -142,6 +158,19 @@ var ViewPagerAndroidExample = React.createClass({
ref={viewPager => { this.viewPager = viewPager; }}>
{pages}
</ViewPagerAndroid>
<View style={styles.buttons}>
{ animationsAreEnabled ?
<Button
text="Turn off animations"
enabled={true}
onPress={() => this.setState({animationsAreEnabled: false})}
/> :
<Button
text="Turn animations back on"
enabled={true}
onPress={() => this.setState({animationsAreEnabled: true})}
/> }
</View>
<View style={styles.buttons}>
<Button text="Start" enabled={page > 0} onPress={() => this.go(0)}/>
<Button text="Prev" enabled={page > 0} onPress={() => this.move(-1)}/>
Expand Down
68 changes: 41 additions & 27 deletions Libraries/Components/ViewPager/ViewPagerAndroid.android.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,24 @@
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ViewPagerAndroid
* @flow
*/
'use strict';

var NativeModules = require('NativeModules');
var NativeMethodsMixin = require('NativeMethodsMixin');
var React = require('React');
var ReactElement = require('ReactElement');
var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
var ReactPropTypes = require('ReactPropTypes');

var RCTUIManager = NativeModules.UIManager;

var createReactNativeComponentClass = require('createReactNativeComponentClass');
var dismissKeyboard = require('dismissKeyboard');

var VIEWPAGER_REF = 'viewPager';

var ViewPagerValidAttributes = {
selectedPage: true,
};

/**
* Container that allows to flip left and right between child views. Each
* child view of the `ViewPagerAndroid` will be treated as a separate page
Expand Down Expand Up @@ -97,17 +97,17 @@ var ViewPagerAndroid = React.createClass({
]),
},

getInitialState: function() {
return {
selectedPage: this.props.initialPage,
};
componentDidMount: function() {
if (this.props.initialPage) {
this.setPageWithoutAnimation(this.props.initialPage);
}
},

getInnerViewNode: function() {
getInnerViewNode: function(): ReactComponent {
return this.refs[VIEWPAGER_REF].getInnerViewNode();
},

_childrenWithOverridenStyle: function() {
_childrenWithOverridenStyle: function(): Array {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not great with flow -- what should I put here as the return type @mkonicek?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question. Try Array<ReactElement> and run flow from the root of the repo and see if that works.

Doesn't look like the React codebase uses Flow and not sure how the Flow handles the boundaries between code that uses Flow and code that doesn't.

If Array<ReactElement> doesn't work I'd go for Array or Array<Object>. It's a private function you're using just in this file.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is no longer required to override styles this way here. We did this initially because we didn't have view flattening on android back then. Now that view flattening is there we should just wrap children in views positioned absolutely and with collapsable=false similarly to how we do it here: https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/RecyclerViewBackedScrollView.android.js#L95

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kmagiera It's a good point and looked into doing that when open sourcing the view pager but decided not to (don't remember the exact reason anymore). I think changing this is outside the scope of Brent's PR though. I'll pull this in as it looks good otherwise.

// Override styles so that each page will fill the parent. Native component
// will handle positioning of elements, so it's not important to offset
// them correctly.
Expand All @@ -134,34 +134,51 @@ var ViewPagerAndroid = React.createClass({
return ReactElement.createElement(child.type, newProps);
});
},
_onPageScroll: function(event) {

_onPageScroll: function(e: Event) {
if (this.props.onPageScroll) {
this.props.onPageScroll(event);
this.props.onPageScroll(e);
}
if (this.props.keyboardDismissMode === 'on-drag') {
dismissKeyboard();
}
},
_onPageSelected: function(event) {
var selectedPage = event.nativeEvent.position;
this.setState({
selectedPage,
});

_onPageSelected: function(e: Event) {
if (this.props.onPageSelected) {
this.props.onPageSelected(event);
this.props.onPageSelected(e);
}
},
setPage: function(selectedPage) {
this.setState({
selectedPage,
});

/**
* A helper function to scroll to a specific page in the ViewPager.
* The transition between pages will be animated.
*/
setPage: function(selectedPage: number) {
RCTUIManager.dispatchViewManagerCommand(
React.findNodeHandle(this),
RCTUIManager.AndroidViewPager.Commands.setPage,
[selectedPage],
);
},

/**
* A helper function to scroll to a specific page in the ViewPager.
* The transition between pages will be *not* be animated.
*/
setPageWithoutAnimation: function(selectedPage: number) {
RCTUIManager.dispatchViewManagerCommand(
React.findNodeHandle(this),
RCTUIManager.AndroidViewPager.Commands.setPageWithoutAnimation,
[selectedPage],
);
},

render: function() {
return (
<NativeAndroidViewPager
ref={VIEWPAGER_REF}
style={this.props.style}
selectedPage={this.state.selectedPage}
onPageScroll={this._onPageScroll}
onPageSelected={this._onPageSelected}
children={this._childrenWithOverridenStyle()}
Expand All @@ -171,10 +188,7 @@ var ViewPagerAndroid = React.createClass({
});

var NativeAndroidViewPager = createReactNativeComponentClass({
validAttributes: {
...ReactNativeViewAttributes.UIView,
...ViewPagerValidAttributes,
},
validAttributes: ReactNativeViewAttributes.UIView,
uiViewClassName: 'AndroidViewPager',
});

Expand Down
12 changes: 6 additions & 6 deletions ReactAndroid/src/main/java/com/facebook/react/views/viewpager/ReactViewPager.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,12 @@ public boolean onInterceptTouchEvent(MotionEvent ev) {
return false;
}

public void setCurrentItemFromJs(int item, boolean animated) {
mIsCurrentItemFromJs = true;
setCurrentItem(item, animated);
mIsCurrentItemFromJs = false;
}

/*package*/ void addViewToAdapter(View child, int index) {
getAdapter().addView(child, index);
}
Expand All @@ -148,10 +154,4 @@ public boolean onInterceptTouchEvent(MotionEvent ev) {
/*package*/ View getViewFromAdapter(int index) {
return getAdapter().getViewAt(index);
}

/*package*/ void setCurrentItemFromJs(int item) {
mIsCurrentItemFromJs = true;
setCurrentItem(item);
mIsCurrentItemFromJs = false;
}
}
47 changes: 40 additions & 7 deletions ReactAndroid/src/main/java/com/facebook/react/views/viewpager/ReactViewPagerManager.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,24 @@

import android.view.View;

import com.facebook.infer.annotation.Assertions;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.common.MapBuilder;
import com.facebook.react.uimanager.ReactProp;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.ViewGroupManager;

import javax.annotation.Nullable;

/**
* Instance of {@link ViewManager} that provides native {@link ViewPager} view.
*/
public class ReactViewPagerManager extends ViewGroupManager<ReactViewPager> {

private static final String REACT_CLASS = "AndroidViewPager";

public static final int COMMAND_SET_PAGE = 1;
public static final int COMMAND_SET_PAGE_WITHOUT_ANIMATION = 2;

@Override
public String getName() {
return REACT_CLASS;
Expand All @@ -35,12 +41,6 @@ protected ReactViewPager createViewInstance(ThemedReactContext reactContext) {
return new ReactViewPager(reactContext);
}

@ReactProp(name = "selectedPage")
public void setSelectedPage(ReactViewPager view, int page) {
// TODO(8496821): Handle selectedPage property cleanup correctly, now defaults to 0
view.setCurrentItemFromJs(page);
}

@Override
public boolean needsCustomLayoutForChildren() {
return true;
Expand All @@ -54,6 +54,39 @@ public Map getExportedCustomDirectEventTypeConstants() {
);
}

@Override
public Map<String,Integer> getCommandsMap() {
return MapBuilder.of(
"setPage",
COMMAND_SET_PAGE,
"setPageWithoutAnimation",
COMMAND_SET_PAGE_WITHOUT_ANIMATION);
}

@Override
public void receiveCommand(
ReactViewPager viewPager,
int commandType,
@Nullable ReadableArray args) {
Assertions.assertNotNull(viewPager);
Assertions.assertNotNull(args);
switch (commandType) {
case COMMAND_SET_PAGE: {
viewPager.setCurrentItemFromJs(args.getInt(0), true);
return;
}
case COMMAND_SET_PAGE_WITHOUT_ANIMATION: {
viewPager.setCurrentItemFromJs(args.getInt(0), false);
return;
}
default:
throw new IllegalArgumentException(String.format(
"Unsupported command %d received by %s.",
commandType,
getClass().getSimpleName()));
}
}

@Override
public void addView(ReactViewPager parent, View child, int index) {
parent.addViewToAdapter(child, index);
Expand Down