fix(ui): view-pager swipe

Author: 32penkin

src/framework/ui/viewPager/viewPager.component.tsx

@@ -89,13 +89,13 @@ export class ViewPager extends React.Component<Props> {
   };
 
   private renderComponentChild = (element: ChildElement, index: number): ChildElement => {
-    const { shouldLoadComponent } = this.props;
+    const { shouldLoadComponent, contentContainerStyle } = this.props;
 
     const contentView: ChildElement | null = shouldLoadComponent(index) ? element : null;
 
     return React.createElement(View, {
       key: index,
-      style: styles.contentViewContainer,
+      style: [styles.contentViewContainer, contentContainerStyle],
     }, contentView);
   };
 
@@ -107,10 +107,12 @@ export class ViewPager extends React.Component<Props> {
     const { contentContainerStyle, children, ...derivedProps } = this.props;
     const componentChildren: ChildElement[] = this.renderComponentChildren(children);
 
+    const widthPercent: number = 100 * componentChildren.length;
+
     return (
       <ScrollView
         bounces={false}
-        contentContainerStyle={[styles.contentContainer, contentContainerStyle]}
+        contentContainerStyle={{ width: `${widthPercent}%` }}
         showsHorizontalScrollIndicator={false}
         {...derivedProps}
         ref={this.scrollViewRef}
@@ -127,10 +129,8 @@ export class ViewPager extends React.Component<Props> {
 }
 
 const styles = StyleSheet.create({
-  contentContainer: {
-    flex: 1,
-  },
   contentViewContainer: {
+    flex: 1,
     width: '100%',
   },
 });

src/playground/src/ui/screen/viewPager.component.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   View,
   Text,
-  Dimensions,
 } from 'react-native';
 import { NavigationScreenProps } from 'react-navigation';
 import {
@@ -36,6 +35,7 @@ class ViewPagerScreen extends React.Component<Props, State> {
     return (
       <ViewPager
         selectedIndex={this.state.selectedIndex}
+        contentContainerStyle={this.props.themedStyle.container}
         onSelect={this.onIndexChange}>
         <View style={this.props.themedStyle.tabContainer}>
           <Text>Tab 1</Text>
@@ -52,10 +52,14 @@ class ViewPagerScreen extends React.Component<Props, State> {
 }
 
 export default withStyles(ViewPagerScreen, (theme: ThemeType) => ({
+  container: {
+    padding: 16,
+  },
   tabContainer: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
+    backgroundColor: 'yellow',
   },
 }));