Skip to content

Commit

Permalink
Adds progressViewOffset to RefreshControl
Browse files Browse the repository at this point in the history
Summary:
Add the possibility to define a progress view top offset to RefreshControl on android. As i comment in #6740, contentInset does the trick on IOS.

Looking android documentation seems that exists a possible solution:
http://developer.android.com/reference/android/support/v4/widget/SwipeRefreshLayout.html#setProgressViewOffset(boolean, int, int)

This pull request implement that but keeping it simple, only a top offset.

For example, now we could put navigation bar over the scrollview (or listview) and define a progressViewOffset on RefreshView in order to start behind the navigation. At this point we could make some kind of coordinator layout to hide/show navigation on scroll.

To maintain the default behavior, start point is equal to start point minus progress circle diameter in order to create that progress circle before the start point.
Closes #6759

Differential Revision: D3240664

Pulled By: mkonicek

fb-gh-sync-id: ccf866272e871811c1c6dcc2a34f5c217967feee
fbshipit-source-id: ccf866272e871811c1c6dcc2a34f5c217967feee
  • Loading branch information
UnoDeTantos authored and Facebook Github Bot 9 committed May 9, 2016
1 parent 2953a1a commit f7ce0c1
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 0 deletions.
5 changes: 5 additions & 0 deletions Libraries/Components/RefreshControl/RefreshControl.js
Expand Up @@ -122,6 +122,11 @@ const RefreshControl = React.createClass({
* @platform android * @platform android
*/ */
size: React.PropTypes.oneOf(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE), size: React.PropTypes.oneOf(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE),
/**
* Progress view top offset
* @platform android
*/
progressViewOffset: React.PropTypes.number,
}, },


_nativeRef: (null: any), _nativeRef: (null: any),
Expand Down
6 changes: 6 additions & 0 deletions Libraries/PullToRefresh/PullToRefreshViewAndroid.android.js
Expand Up @@ -48,6 +48,11 @@ var PullToRefreshViewAndroid = React.createClass({
* The background color of the refresh indicator * The background color of the refresh indicator
*/ */
progressBackgroundColor: ColorPropType, progressBackgroundColor: ColorPropType,
/**
* Progress view top offset
* @platform android
*/
progressViewOffset: React.PropTypes.number,
/** /**
* Whether the view should be indicating an active refresh * Whether the view should be indicating an active refresh
*/ */
Expand Down Expand Up @@ -80,6 +85,7 @@ var PullToRefreshViewAndroid = React.createClass({
progressBackgroundColor={this.props.progressBackgroundColor} progressBackgroundColor={this.props.progressBackgroundColor}
ref={NATIVE_REF} ref={NATIVE_REF}
refreshing={this.props.refreshing} refreshing={this.props.refreshing}
progressViewOffset={this.props.progressViewOffset}
size={this.props.size} size={this.props.size}
style={this.props.style}> style={this.props.style}>
{onlyChild(this.props.children)} {onlyChild(this.props.children)}
Expand Down
Expand Up @@ -20,6 +20,7 @@
import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.common.MapBuilder; import com.facebook.react.common.MapBuilder;
import com.facebook.react.common.SystemClock; import com.facebook.react.common.SystemClock;
import com.facebook.react.uimanager.PixelUtil;
import com.facebook.react.uimanager.ThemedReactContext; import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.UIManagerModule; import com.facebook.react.uimanager.UIManagerModule;
import com.facebook.react.uimanager.ViewGroupManager; import com.facebook.react.uimanager.ViewGroupManager;
Expand All @@ -32,6 +33,8 @@
*/ */
public class SwipeRefreshLayoutManager extends ViewGroupManager<ReactSwipeRefreshLayout> { public class SwipeRefreshLayoutManager extends ViewGroupManager<ReactSwipeRefreshLayout> {


public static final float REFRESH_TRIGGER_DISTANCE = 48;

@Override @Override
protected ReactSwipeRefreshLayout createViewInstance(ThemedReactContext reactContext) { protected ReactSwipeRefreshLayout createViewInstance(ThemedReactContext reactContext) {
return new ReactSwipeRefreshLayout(reactContext); return new ReactSwipeRefreshLayout(reactContext);
Expand Down Expand Up @@ -82,6 +85,21 @@ public void run() {
}); });
} }


@ReactProp(name = "progressViewOffset", defaultFloat = 0)
public void setProgressViewOffset(final ReactSwipeRefreshLayout view, final float offset) {
// Use `post` to get progress circle diameter properly
// Otherwise returns 0
view.post(new Runnable() {
@Override
public void run() {
int diameter = view.getProgressCircleDiameter();
int start = Math.round(PixelUtil.toPixelFromDIP(offset)) - diameter;
int end = Math.round(PixelUtil.toPixelFromDIP(offset + REFRESH_TRIGGER_DISTANCE));
view.setProgressViewOffset(false, start, end);
}
});
}

@Override @Override
protected void addEventEmitters( protected void addEventEmitters(
final ThemedReactContext reactContext, final ThemedReactContext reactContext,
Expand Down

0 comments on commit f7ce0c1

Please sign in to comment.