Skip to content
This repository was archived by the owner on Nov 27, 2022. It is now read-only.

Support horizontal bounces for PagerScoll to make it looks like iOS component#722

Merged
satya164 merged 7 commits intosatya164:1.0from
azurechen:1.0
May 7, 2019
Merged

Support horizontal bounces for PagerScoll to make it looks like iOS component#722
satya164 merged 7 commits intosatya164:1.0from
azurechen:1.0

Conversation

@azurechen
Copy link

@azurechen azurechen commented Mar 21, 2019

Motivation

Currently the Pager bounce is disabled and it looks like an Android Pager not iOS scrollview.
Support horizontal bounces for PagerScoll to make it looks like an iOS component.

bouncesEnabled props is default false to avoid affecting existing users.

This PR is for v1.0 because most developers are still using this version.
I will create another PR for v2.0 as soon as possible.

ezgif com-video-to-gif (10)

Test plan

Copy link
Owner

@satya164 satya164 left a comment

Choose a reason for hiding this comment

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

Thanks for the PR. Can you rename bouncesEnabled to just bounces to be consistent with RN's ScrollView naming?

export type PagerCommonProps<T> = {
animationEnabled?: boolean,
swipeEnabled?: boolean,
bouncesEnabled?: boolean,
Copy link
Owner

Choose a reason for hiding this comment

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

I think this should be in PagerScroll's props because it's not a common prop. We also need to add it to the propTypes

Copy link
Author

@azurechen azurechen Mar 21, 2019

Choose a reason for hiding this comment

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

I have added bounces prop to PropTypes file. But I can't only set bounces type for PagerScroll because this prop should be able to be use for TabView.

TabView's type is

type Props<T> = PagerCommonProps<T> &
  PagerExtraProps & {
    navigationState: NavigationState<T>,
    onIndexChange: (index: number) => mixed,
    initialLayout?: Layout,
    renderPager: (props: *) => React.Node,
    renderScene: (props: SceneRendererProps<T> & Scene<T>) => React.Node,
    renderTabBar: (props: SceneRendererProps<T>) => React.Node,
    tabBarPosition: 'top' | 'bottom',
    useNativeDriver?: boolean,
    style?: ViewStyleProp,
  };

And PagerScoll's type is

type Props<T> = PagerRendererProps<T>

export type PagerRendererProps<T> = PagerCommonProps<T> & {
  layout: Layout & {
    measured: boolean,
  },
  navigationState: NavigationState<T>,
  panX: Animated.Value,
  offsetX: Animated.Value,
  jumpTo: (key: string) => mixed,
  useNativeDriver: boolean,
  children: Node,
};

The shared type of TabView and PagerScroll is PagerCommonProps. I can only set bounces type in PagerCommonProps to pass flowtype validation.

But PagerAndroid will not be affect because bounces is optional and no effect on Android.

@azurechen
Copy link
Author

hi @satya164 . should I need to update the branch? And is this PR ready to be merged?

@satya164 satya164 merged commit f6d7cfd into satya164:1.0 May 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants