Skip to content

userguide #437

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
denisenricohasyim93 wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

userguide #437

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9d94e0b
add modal as a userguide
denisenricohasyim93 Oct 12, 2017
1fe0dd3
add rn-viewpager
denisenricohasyim93 Oct 12, 2017
f16b7af
remove redundant comment
denisenricohasyim93 Oct 12, 2017
2dbe429
Merge branch 'develop' into 423-Userguide
denisenricohasyim93 Oct 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 110 additions & 2 deletions app/containers/Main/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { Component } from 'react';
import { Container, Content, Text, Spinner, Item, Input, Header } from 'native-base';
import { Container, Content, Text, Spinner, Item, Input, Header, Card, CardItem, Left, Thumbnail, Body } from 'native-base';
import Icon from 'react-native-vector-icons/FontAwesome';
import {
Image,
Expand All @@ -9,11 +9,14 @@ import {
ActivityIndicator,
KeyboardAvoidingView,
ScrollView,
Modal,
TouchableHighlight,
Animated,
Keyboard
} from 'react-native';
import { Actions } from 'react-native-router-flux';
import AccountKit, { LoginButton } from 'react-native-facebook-account-kit';
import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager';

import { createTransition, Fade } from 'react-native-transition';
import { getProfileEmail } from '../../helpers';
Expand Down Expand Up @@ -42,7 +45,7 @@ class Main extends Component {
}

state = {
modalVisible: false
modalVisible: true
};

componentWillMount() {
Expand Down Expand Up @@ -136,6 +139,106 @@ class Main extends Component {
<Image source={background} style={styles.background}>
<ScrollView>
<View style={styles.container}>
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {this.setModalVisible(!this.state.modalVisible)}}
>
<ScrollView>
<View style={{flex:1}}>
<IndicatorViewPager
style={{height:600}}
indicator={this._renderDotIndicator()}
>
<View style={{
backgroundColor:'black',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'}}>
<Image source={{uri: 'http://media.nationalgeographic.co.id/daily/300/1:1/201609291242819/b/foto-planet-merkurius-kian-menyusut.jpg'}}
style={{width: 400, height: 400}} />
<Text style={{color: 'white', margin: 3, textAlign: 'center'}}>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</Text>
<View style={{
flex: 0,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'flex-end',
}}>
<Button
full
bordered
primary
style={{width: 350/3, height: 50}}
onPress={() => {
this.setModalVisible(!this.state.modalVisible)
}}
><Text style={{textAlign: 'center'}}> SKIP </Text></Button>
</View>
</View>
<View style={{
backgroundColor:'black',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'}}>
<Image source={{uri: 'https://www.astronomiskungdom.se/wp-content/uploads/2017/01/venus-11022_960_720-300x300.jpg'}}
style={{width: 400, height: 400}} />
<Text style={{color: 'white', margin: 3, textAlign: 'center'}}>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</Text>
<View style={{
flex: 0,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'flex-end',
}}>
<Button
full
bordered
primary
style={{width: 350/3, height: 50}}
onPress={() => {
this.setModalVisible(!this.state.modalVisible)
}}
><Text style={{textAlign: 'center'}}> SKIP </Text></Button>
</View>
</View>
<View style={{
backgroundColor:'black',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'}}>
<Image source={{uri: 'http://www.commongroundgroup.net/wp-content/uploads/2011/10/earth-from-space-western-400x400.jpg'}}
style={{width: 400, height: 400}} />
<Text style={{color: 'white', margin: 3, textAlign: 'center'}}>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</Text>
<View style={{
flex: 0,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'flex-end',
}}>
<Button
full
bordered
primary
style={{width: 350/3, height: 50}}
onPress={() => {
this.setModalVisible(!this.state.modalVisible)
}}
><Text style={{color: 'white', textAlign: 'center'}}> SKIP </Text></Button>
</View>
</View>
</IndicatorViewPager>
</View>
</ScrollView>
</Modal>
<View style={styles.logo}>
<Animated.Image
source={Logo}
Expand Down Expand Up @@ -261,6 +364,11 @@ class Main extends Component {
</KeyboardAvoidingView>
);
}

_renderDotIndicator() {
return <PagerDotIndicator pageCount={3} />;
}

}

Main.propTypes = {
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
"redux-immutable": "^4.0.0",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.1",
"rn-viewpager": "^1.2.4",
"socket.io-client": "^1.4.8"
},
"devDependencies": {
Expand Down