Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
8 changes: 4 additions & 4 deletions example/ViewPagerExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { Image,
SafeAreaView,
} from 'react-native'

import ViewPagerAndroid from '@react-native-community/viewpager';
import ViewPager from '@react-native-community/viewpager';
import { PAGES, BGCOLOR, IMAGE_URIS, createPage } from "./utils";
import { Button } from "./src/component/Button";
import { LikeCount } from "./src/component/LikeCount";
Expand All @@ -39,7 +39,7 @@ type State = {

export default class ViewPagerExample extends React.Component<*, State> {

viewPager: React.Ref<typeof ViewPagerAndroid>;
viewPager: React.Ref<typeof ViewPager>;

constructor(props: any) {
super(props);
Expand Down Expand Up @@ -113,7 +113,7 @@ export default class ViewPagerExample extends React.Component<*, State> {
const {page, pages, animationsAreEnabled} = this.state;
return (
<SafeAreaView style={styles.container}>
<ViewPagerAndroid
<ViewPager
style={styles.viewPager}
initialPage={0}
scrollEnabled={this.state.scrollEnabled}
Expand All @@ -127,7 +127,7 @@ export default class ViewPagerExample extends React.Component<*, State> {
transitionStyle="scroll"
ref={this.viewPager}>
{ pages.map( page => this.renderPage(page)) }
</ViewPagerAndroid>
</ViewPager>
<View style={styles.buttons}>
<Button
enabled={true}
Expand Down
16 changes: 8 additions & 8 deletions js/ViewPagerAndroid.js → js/ViewPager.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const dismissKeyboard = require('react-native/Libraries/Utilities/dismissKeyboar

import {childrenWithOverriddenStyle} from "./utils";

const NativeAndroidViewPager = require('./AndroidViewPagerNativeComponent');
const NativeViewPager = require('./ViewPagerNativeComponent');

const VIEW_PAGER_REF = 'viewPager';
const VIEW_MANAGER_NAME = Platform.OS === 'android' ? 'AndroidViewPager' : 'RNCViewPager';
Expand All @@ -42,8 +42,8 @@ function getViewManagerConfig(viewManagerName) {

/**
* Container that allows to flip left and right between child views. Each
* child view of the `ViewPagerAndroid` will be treated as a separate page
* and will be stretched to fill the `ViewPagerAndroid`.
* child view of the `ViewPager` will be treated as a separate page
* and will be stretched to fill the `ViewPager`.
*
* It is important all children are `<View>`s and not composite components.
* You can set style properties like `padding` or `backgroundColor` for each
Expand All @@ -54,7 +54,7 @@ function getViewManagerConfig(viewManagerName) {
* ```
* render: function() {
* return (
* <ViewPagerAndroid
* <ViewPager
* style={styles.viewPager}
* initialPage={0}>
* <View style={styles.pageStyle} key="1">
Expand All @@ -63,7 +63,7 @@ function getViewManagerConfig(viewManagerName) {
* <View style={styles.pageStyle} key="2">
* <Text>Second page</Text>
* </View>
* </ViewPagerAndroid>
* </ViewPager>
* );
* }
*
Expand All @@ -82,7 +82,7 @@ function getViewManagerConfig(viewManagerName) {
* ```
*/

class ViewPagerAndroid extends React.Component<ViewPagerProps> {
class ViewPager extends React.Component<ViewPagerProps> {
componentDidMount() {
// On iOS we do it directly on the native side
if (Platform.OS === 'android') {
Expand Down Expand Up @@ -149,7 +149,7 @@ class ViewPagerAndroid extends React.Component<ViewPagerProps> {

render() {
return (
<NativeAndroidViewPager
<NativeViewPager
{...this.props}
ref={VIEW_PAGER_REF}
style={this.props.style}
Expand All @@ -162,4 +162,4 @@ class ViewPagerAndroid extends React.Component<ViewPagerProps> {
}
}

module.exports = ViewPagerAndroid;
module.exports = ViewPager;
File renamed without changes.
2 changes: 1 addition & 1 deletion js/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,4 @@ export type PageSelectedEvent = _PageSelectedEvent;
export type TransitionStyle = _TransitionStyle;
export type Orientation = _Orientation;

module.exports = require('./ViewPagerAndroid');
module.exports = require('./ViewPager');
16 changes: 8 additions & 8 deletions typings/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import * as React from "react";
import * as ReactNative from "react-native";

export interface ViewPagerAndroidOnPageScrollEventData {
export interface ViewPagerOnPageScrollEventData {
position: number;
offset: number;
}

export interface ViewPagerAndroidOnPageSelectedEventData {
export interface ViewPagerOnPageSelectedEventData {
position: number;
}

export interface ViewPagerAndroidProps extends ReactNative.ViewProps {
export interface ViewPagerProps extends ReactNative.ViewProps {
/**
* Index of initial page that should be selected. Use `setPage` method to
* update the page, and `onPageSelected` to monitor page changes
Expand All @@ -32,15 +32,15 @@ export interface ViewPagerAndroidProps extends ReactNative.ViewProps {
* Value x means that (1 - x) fraction of the page at "position" index is
* visible, and x fraction of the next page is visible.
*/
onPageScroll?: (event: ReactNative.NativeSyntheticEvent<ViewPagerAndroidOnPageScrollEventData>) => void;
onPageScroll?: (event: ReactNative.NativeSyntheticEvent<ViewPagerOnPageScrollEventData>) => void;

/**
* This callback will be called once ViewPager finish navigating to selected page
* (when user swipes between pages). The `event.nativeEvent` object passed to this
* callback will have following fields:
* - position - index of page that has been selected
*/
onPageSelected?: (event: ReactNative.NativeSyntheticEvent<ViewPagerAndroidOnPageSelectedEventData>) => void;
onPageSelected?: (event: ReactNative.NativeSyntheticEvent<ViewPagerOnPageSelectedEventData>) => void;

/**
* Function called when the page scrolling state has changed.
Expand All @@ -66,9 +66,9 @@ export interface ViewPagerAndroidProps extends ReactNative.ViewProps {
pageMargin?: number;
}

declare class ViewPagerAndroidComponent extends React.Component<ViewPagerAndroidProps> {}
declare const ViewPagerAndroidBase: ReactNative.Constructor<ReactNative.NativeMethodsMixin> & typeof ViewPagerAndroidComponent;
export default class ViewPagerAndroid extends ViewPagerAndroidBase {
declare class ViewPagerComponent extends React.Component<ViewPagerProps> {}
declare const ViewPagerBase: ReactNative.Constructor<ReactNative.NativeMethodsMixin> & typeof ViewPagerComponent;
export default class ViewPager extends ViewPagerBase {
/**
* A helper function to scroll to a specific page in the ViewPager.
* The transition between pages will be animated.
Expand Down