ViewPagerPOC/App.js at master · Nitish33/ViewPagerPOC · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import React, {Component} from 'react';
import {
  Text,
  View,
  SafeAreaView,
  StyleSheet,
  Animated,
  Button,
  TouchableOpacity,
  Alert,
} from 'react-native';
import ViewPager from './src/ViewPager';
import TransitionManager from './src/PagerTransitionManager/TransitionManager';
import FadeInFadeOutTransitionStyle from './src/PagerTransitionManager/FadeInFadeOut';
import ScaleTransition from './src/PagerTransitionManager/ScaleTransition';
import DepthTransition from './src/PagerTransitionManager/DepthTransition';
import ClockTransition from './src/PagerTransitionManager/ClockTransition';
import ZoomOut from './src/PagerTransitionManager/ZoomoutTransition';
import VerticalFlipTransition from './src/PagerTransitionManager/VerticalFlipTransition';
import Page from './src/Page';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.transitionManager = new VerticalFlipTransition();
  }

  render() {
    return (
      <SafeAreaView style={{flex: 1}}>
        <View style={{flex: 1}}>
          <View
            style={{
              width: '100%',
              overflow: 'scroll',
            }}>
            <ViewPager transitionManager={new ScaleTransition()}>
              <Text style={[localStyle.pageStyle, {backgroundColor: 'red'}]}>
                One
              </Text>
              <Page />
              <Text style={[localStyle.pageStyle, {backgroundColor: 'green'}]}>
                two
              </Text>
              <Text style={[localStyle.pageStyle, {backgroundColor: 'blue'}]}>
                Three
              </Text>
              <Text style={[localStyle.pageStyle, {backgroundColor: 'red'}]}>
                Four
              </Text>
              <Text style={[localStyle.pageStyle, {backgroundColor: 'yellow'}]}>
                Five
              </Text>
            </ViewPager>
          </View>
        </View>
      </SafeAreaView>
    );
  }
}

const localStyle = StyleSheet.create({
  pagerContainerStyle: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    alignContent: 'center',
  },

  pageStyle: {
    width: '100%',
    height: '100%',
    backgroundColor: 'blue',
    color: 'white',
    textAlign: 'center',
  },
});