Skip to content

Instantly share code, notes, and snippets.

@iberflow

iberflow/app.tsx

Created November 8, 2018 06:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save iberflow/8402aa8d0a2d40d0827c761eb9676190 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save iberflow/8402aa8d0a2d40d0827c761eb9676190 to your computer and use it in GitHub Desktop.
Download ZIP
app
Raw
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>
)
Raw
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
Raw
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'
}
})
Raw
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>
)
}
}
Raw
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment