Skip to content

Commit

Permalink
begin run screen added
Browse files Browse the repository at this point in the history
  • Loading branch information
@sonnylazuardi
sonnylazuardi committed Dec 30, 2016
1 parent 8f3aee4 commit 64d0cec
Show file tree
Hide file tree
Showing 12 changed files with 166 additions and 15 deletions.
181 changes: 166 additions & 15 deletions src/components/BeginRunScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,15 @@ import {
StyleSheet,
Image,
StatusBar,
ScrollView
ScrollView,
TouchableOpacity
} from 'react-native';
import { Components } from 'exponent';

class BeginRunScreen extends React.Component {
componentDidMount() {
this.refs.scrollView.scrollTo({y: 0, x: 85, animated: true});
}
render() {
return (
<View style={styles.container}>
Expand All @@ -28,19 +32,116 @@ class BeginRunScreen extends React.Component {
<Image source={require('../images/right-icon-white.png')} style={styles.logoicon} />
</View>
</View>
<View style={styles.mainBar}>
<ScrollView horizontal={true} snapToInterval={200} snapToAlignment={'center'}>
<View style={{height: 350, width: 200}}>
<Text>DURATION TIME</Text>
<ScrollView>
<View style={styles.mainBar}>
<Components.LinearGradient
pointerEvents="none"
colors={['rgba(0,0,0,0.8)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0.8)']}
start={[0, 0]} end={[1, 0]}
style={{height: 180, position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 2}} />
<ScrollView
style={{zIndex: 1}}
horizontal={true}
snapToInterval={180}
snapToAlignment={'center'}
decelerationRate={0}
automaticallyAdjustInsets={false}
ref="scrollView">
<View style={{height: 160, width: 180, justifyContent: 'center', alignItems: 'center'}}>
<Image source={require('../images/duration-icon.png')} style={styles.iconmain} />
<Text style={[styles.text, {color: '#fff', fontSize: 32}]}>DURATION TIME</Text>
</View>
<View style={{height: 160, width: 180, justifyContent: 'center', alignItems: 'center'}}>
<Image source={require('../images/basic-icon.png')} style={styles.iconmain} />
<Text style={[styles.text, {color: '#fff', fontSize: 32}]}>BASIC RUN</Text>
</View>
<View style={{height: 160, width: 180, justifyContent: 'center', alignItems: 'center'}}>
<Image source={require('../images/distance-icon.png')} style={styles.iconmain} />
<Text style={[styles.text, {color: '#fff', fontSize: 32}]}>DISTANCE RUN</Text>
</View>
<View style={{height: 160, width: 180, justifyContent: 'center', alignItems: 'center'}}>
<Image source={require('../images/duration-icon.png')} style={styles.iconmain} />
<Text style={[styles.text, {color: '#fff', fontSize: 32}]}>DURATION TIME</Text>
</View>
<View style={{height: 160, width: 180, justifyContent: 'center', alignItems: 'center'}}>
<Image source={require('../images/basic-icon.png')} style={styles.iconmain} />
<Text style={[styles.text, {color: '#fff', fontSize: 32}]}>BASIC RUN</Text>
</View>
<View style={{height: 160, width: 180, justifyContent: 'center', alignItems: 'center'}}>
<Image source={require('../images/distance-icon.png')} style={styles.iconmain} />
<Text style={[styles.text, {color: '#fff', fontSize: 32}]}>DISTANCE RUN</Text>
</View>
</ScrollView>
<View style={{position: 'absolute', height: 2, bottom: 0, left: 0, right: 0, alignItems: 'center'}}>
<View style={{height: 2, width: 120, borderBottomWidth: 2, borderBottomColor: '#f02733'}} />
</View>
<View style={{height: 350, width: 200}}>
<Text>BASIC RUN</Text>
</View>
<View style={styles.optionBar}>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<View style={{borderColor: '#fff', borderWidth: 1, width: 64, height: 64, borderRadius: 32, justifyContent: 'center', alignItems: 'center', marginBottom: 12}}>
<Image source={require('../images/love-small-icon.png')} style={styles.iconoption} />
</View>
<Text style={[styles.text, {color: '#fff', fontSize: 18}]}>HEART RATE</Text>
<Text style={[styles.text, {color: '#f02733', fontSize: 18}]}>ENABLED</Text>
</View>
<View style={{height: 350, width: 200}}>
<Text>DISTANCE RUN</Text>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<View style={{borderColor: '#fff', borderWidth: 1, width: 64, height: 64, borderRadius: 32, justifyContent: 'center', alignItems: 'center', marginBottom: 12}}>
<Image source={require('../images/map-small-icon.png')} style={styles.iconoption} />
</View>
<Text style={[styles.text, {color: '#fff', fontSize: 18}]}>LOCATION</Text>
<Text style={[styles.text, {color: '#f02733', fontSize: 18}]}>OUTDOOR</Text>
</View>
</ScrollView>
</View>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<View style={{borderColor: '#fff', borderWidth: 1, width: 64, height: 64, borderRadius: 32, justifyContent: 'center', alignItems: 'center', marginBottom: 12, opacity: 0.5}}>
<Image source={require('../images/cheer-small-icon.png')} style={[styles.iconoption, {opacity: 0.5}]} />
</View>
<Text style={[styles.text, {color: '#fff', fontSize: 18, opacity: 0.5}]}>CHEERS</Text>
<Text style={[styles.text, {color: '#fff', fontSize: 18, opacity: 0.5}]}>OFF</Text>
</View>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<View style={{borderColor: '#fff', borderWidth: 1, width: 64, height: 64, borderRadius: 32, justifyContent: 'center', alignItems: 'center', marginBottom: 12}}>
<Image source={require('../images/orientation-small-icon.png')} style={styles.iconoption} />
</View>
<Text style={[styles.text, {color: '#fff', fontSize: 18}]}>ORIENTATION</Text>
<Text style={[styles.text, {color: '#f02733', fontSize: 18}]}>LANDSCAPE</Text>
</View>
</View>
<View style={styles.playlistBar}>
<View style={{flexDirection: 'row', alignItems: 'center', marginBottom: 15, paddingHorizontal: 20}}>
<Image source={require('../images/spotify.png')} style={styles.iconplaylist} />
<Text style={[styles.text, {color: '#fff', fontSize: 20}]}>SELECT PLAYLIST</Text>
</View>
<View>
<ScrollView horizontal={true}>
<View style={{width: 100, height: 100, marginLeft: 20, marginRight: 10}}>
<Image source={require('../images/playlist-1.jpg')} style={styles.imageplaylist} />
</View>
<View style={{width: 100, height: 100, marginRight: 10}}>
<Image source={require('../images/playlist-2.jpg')} style={styles.imageplaylist} />
</View>
<View style={{width: 100, height: 100, marginRight: 10}}>
<Image source={require('../images/playlist-3.jpg')} style={styles.imageplaylist} />
</View>
<View style={{width: 100, height: 100, marginRight: 10}}>
<Image source={require('../images/playlist-1.jpg')} style={styles.imageplaylist} />
</View>
<View style={{width: 100, height: 100, marginRight: 10}}>
<Image source={require('../images/playlist-2.jpg')} style={styles.imageplaylist} />
</View>
<View style={{width: 100, height: 100, marginRight: 10}}>
<Image source={require('../images/playlist-3.jpg')} style={styles.imageplaylist} />
</View>
</ScrollView>
</View>
</View>
<View style={{paddingVertical: 10, paddingHorizontal: 50}}>
<TouchableOpacity style={styles.buttonRedWrapper}>
<View style={styles.buttonRed} shadowColor={'#000'} shadowOffset={{width: 10, height: 10}} shadowOpacity={0.6} shadowRadius={30}>
<Text style={styles.buttonRedText}>START</Text>
</View>
</TouchableOpacity>
</View>
</ScrollView>
</View>
);
}
Expand All @@ -55,7 +156,7 @@ const styles = StyleSheet.create({
toolbar: {
flexDirection: 'row',
backgroundColor: 'transparent',
height: 50
height: 60
},
logosmall: {
width: 40,
Expand All @@ -66,9 +167,59 @@ const styles = StyleSheet.create({
width: 30
},
mainBar: {
height: 350,
backgroundColor: '#ff0'
}
height: 160,
borderBottomWidth: 0.5,
borderBottomColor: '#555',
justifyContent: 'center',
alignItems: 'center',
marginBottom: 25
},
text: {
backgroundColor: 'transparent',
fontFamily: 'bebas-neue',
},
iconmain: {
width: 100,
height: 100
},
optionBar: {
height: 130,
flexDirection: 'row',
alignItems: 'center',
borderBottomWidth: 0.5,
borderBottomColor: '#555',
paddingBottom: 30,
paddingHorizontal: 15
},
iconoption: {
width: 32,
height: 32
},
iconplaylist: {
width: 35,
height: 35
},
playlistBar: {
paddingTop: 15,
marginBottom: 10
},
imageplaylist: {
width: 100,
height: 100,
borderRadius: 10
},
buttonRed: {
backgroundColor: '#f02733',
borderRadius: 30,
height: 60,
justifyContent: 'center',
alignItems: 'center'
},
buttonRedText: {
color: '#fff',
fontFamily: 'bebas-neue',
fontSize: 24
},
});

export default BeginRunScreen;
Binary file added src/images/basic-icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/cheer-small-icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/distance-icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/duration-icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/love-small-icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/map-small-icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/orientation-small-icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/playlist-1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/playlist-2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/playlist-3.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/spotify.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 64d0cec

Please sign in to comment.