app

app.tsx

import React from 'react'
import { Root } from 'native-base'
import { createDrawerNavigator, createStackNavigator } from 'react-navigation'
import { Dimensions } from 'react-native'
import About from './screens/about'
import Home from './screens/home'
import Sidebar from './screens/sidebar'
import Splash from './screens/splash'

const deviceWidth = Dimensions.get('window').width

const Drawer = createDrawerNavigator(
  {
    Home: { screen: Home }
  },
  {
    drawerWidth: deviceWidth - 50,
    drawerPosition: 'left',
    contentComponent: props => <Sidebar {...props} />
  }
)

const App = createStackNavigator(
  {
    About: { screen: About },
    Splash: { screen: Splash },
    Drawer: { screen: Drawer }
  },
  {
    initialRouteName: 'Splash',
    headerMode: 'none'
  }
)

export default () => (
  <Root>
    <App/>
  </Root>
)

home.tsx

import * as React from 'react'
import {
  Container,
  Header,
  Content,
  Button,
  Icon,
  Left,
  Right,
} from 'native-base'

import { Image, StyleSheet, Modal, View, TouchableOpacity, Alert } from 'react-native'
import CountryPicker from './../components/country-picker/country-picker'
import { ProposalsState } from 'src/app/components/proposals-dropdown'

export interface Props {
  navigation: any;
  list: any;
}

export interface State {
  proposals: ProposalsState
}

class Home extends React.Component<Props, State> {
  private
  public render () {
    return (
      <Container>
        <Header>
          <Left>
            <Button transparent>
              <Icon
                active={true}
                name="menu"
                onPress={() => this.props.navigation.openDrawer()}
              />
            </Button>
          </Left>
          <Right/>
        </Header>
        <Content padder={true}>
          <CountryPicker list={this.state.proposals} />
        </Content>
      </Container>
    )
  }
}

export default Home

rotating-logo.tsx

import React, { Component } from 'react'
import {
  Animated,
  Image,
  StyleSheet,
  View
} from 'react-native'

export default class RotatingLogo extends Component {
  private animatedValue: Animated.Value = new Animated.Value(0)

  public componentDidMount () {
    this.cycleAnimation()
  }

  public render () {
    const animatedStyle = this.getAnimatedStyle()

    return (
      <View>
        <Animated.View style={[animatedStyle]}>
          <Image
            source={require('./../../../assets/logo.png')}
            style={styles.image}
          />
        </Animated.View>
      </View>
    )
  }

  private cycleAnimation = () => {
    this.animatedValue.setValue(0)

    Animated.sequence([
      Animated.timing(this.animatedValue, {
        toValue: 360,
        duration: 2000
      })
    ]).start(() => {
      this.cycleAnimation()
    })
  }

  private getAnimatedStyle () {
    const interpolateRotation = this.animatedValue.interpolate({
      inputRange: [0, 360],
      outputRange: ['0deg', '360deg']
    })

    const animatedStyle = {
      transform: [
        { rotate: interpolateRotation }
      ]
    }

    return animatedStyle
  }
}

const styles = StyleSheet.create({
  image: {
    width: 200,
    height: 200,
    justifyContent: 'center'
  }
})

sidebar.tsx

import * as React from 'react'
import { Text, Container, List, ListItem, Content } from 'native-base'
import { NavigationActions, StackActions } from 'react-navigation'

const routes = [
  {
    route: 'Home',
    caption: 'Home'
  },
  {
    route: 'BlankPage',
    caption: 'Blank Page'
  },
  {
    route: 'Login',
    caption: 'Logout'
  }
]

export interface Props {
  navigation: any
}

export interface State {
}

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Home' })]
})

export default class Sidebar extends React.Component<Props, State> {
  public render () {
    return (
      <Container>
        <Content>
          <List
            style={{ marginTop: 40 }}
            dataArray={routes}
            renderRow={data => {
              return (
                <ListItem
                  button={true}
                  onPress={() => {
                    data.route === 'Home'
                      ? this.props.navigation.dispatch(resetAction)
                      : this.props.navigation.navigate(data.route)
                  }}
                >
                  <Text>{data.caption}</Text>
                </ListItem>
              )
            }}
          />
        </Content>
      </Container>
    )
  }
}

splash.tsx

import * as React from 'react'
import {
  Container,
  Toast,
  Button,
  Text,
  Grid,
  Row
} from 'native-base'

import { StyleSheet } from 'react-native'

import RotatingLogo from './../components/rotating-logo'
import { NavigationScreenProp } from 'react-navigation'

const styles: any = StyleSheet.create({
  container: {
    backgroundColor: '#FBFAFA'
  },
  logo: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1
  },
  messageBox: {
    padding: 10,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#291923'
  },
  messageText: {
    color: '#ffffff'
  }
})

export interface Props {
  navigation: NavigationScreenProp
  list: any
}

export interface State {
}

class Home extends React.Component<Props, State> {
  public componentDidMount () {
    setTimeout(() => {
      this.props.navigation.navigate('Home')
    }, 100)
  }

  public render () {
    return (
      <Container style={styles.container}>
        <Grid>
          <Row size={1} style={styles.logo}>
            <RotatingLogo/>
          </Row>
          <Row style={styles.messageBox}>
            <Text style={styles.messageText}>Preparing application data</Text>
          </Row>
        </Grid>
      </Container>
    )
  }
}

export default Home