pager-in-drawer.js

import React, { Component } from 'react'
import { Image, StyleSheet, Text, View, ViewPagerAndroid, StatusBar, DrawerLayoutAndroid, TouchableNativeFeedback } from 'react-native'
import Icon from 'react-native-vector-icons/MaterialIcons'

const MaterialContainer = ({text}) => {
  const elements = []
  for (let i = 0; i < 15; i++) {
    elements.push(<Text id={i} style={[styles.materialText, { fontSize: 30 - i * 2 }]}>{text}</Text>)
  }
  return <View style={styles.materialContainer}>{elements}</View>
}

const PageOne = () => (
  <View style={styles.pageOne} collapsable={false}>
    <MaterialContainer text="Material Page" />
  </View>
)

const Item = ({ icon, text }) => (
  <View style={styles.item}>
    <Icon name={icon} size={25} color="#757575" />
    <Text style={styles.itemText}>{text}</Text>
  </View>
)

const NavigationView = () => (
  <View style={styles.drawer}>
    <View style={styles.header}>
      <Text style={styles.headerText}>Hello</Text>
    </View>
    <Item icon="looks-one" text="First Element" />
    <Item icon="looks-two" text="Second Element" />
    <Item icon="looks-6" text="This is not right" />
    <Item icon="looks-4" text="Fourth" />
    <Item icon="looks-5" text="And fifth" />
  </View>
)

const PageTwo = () => (
  <View style={styles.pageTwo} collapsable={false}>
    <TouchableNativeFeedback onPress={this.handlePress}>
      <Icon name="settings" size={25} color="white" style={styles.drawerIcon} />
    </TouchableNativeFeedback>
    <MaterialContainer text="Very Material Page" />
  </View>
)

class Pager extends Component {
  render() {
    return (
      <View style={styles.container}>
        <StatusBar translucent={true} backgroundColor="#33333333" />
        <DrawerLayoutAndroid
          style={styles.drawer}
          backgroundColor="#399aee"
          drawerWidth={250}
          drawerPosition={DrawerLayoutAndroid.positions.Right}
          renderNavigationView={() => <NavigationView />}
        >
          <ViewPagerAndroid style={styles.viewPager}>
            <PageOne />
            <PageTwo />
          </ViewPagerAndroid>
        </DrawerLayoutAndroid>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  viewPager: {
    flex: 1,
  },
  pageOne: {
    backgroundColor: '#d84a6a',
  },
  pageTwo: {
    backgroundColor: '#399aee',
  },
  materialContainer: {
    marginTop: 50,
    alignSelf: 'center',
  },
  materialText: {
    color: 'white',
  },
  drawer: {
    flex: 1,
  },
  drawerIcon: {
    position: 'absolute',
    right: 10,
    top: 35,
  },
  drawer: {
    flex: 1,
  },
  header: {
    backgroundColor: '#399aee',
    height: 200,
  },
  headerText: {
    fontSize: 21,
    position: 'absolute',
    bottom: 5,
    left: 10,
    color: 'white',
  },
  item: {
    flexDirection: 'row',
    marginLeft: 10,
    marginTop: 15,
    alignItems: 'center',
  },
  itemText: {
    fontSize: 18,
    fontColor: 'black',
    marginLeft: 10,
  },
})

export default Pager