-
-
Notifications
You must be signed in to change notification settings - Fork 108
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9bf22bd
commit ca4bc89
Showing
15 changed files
with
822 additions
and
175 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import { | ||
Animated, | ||
Easing | ||
} from 'react-native'; | ||
|
||
const configureTimingTransition = (transitionProps, previousTransitionProps) => ({ | ||
timing: Animated.timing, | ||
easing: Easing.inOut(Easing.linear), | ||
duration: 150, | ||
}); | ||
|
||
export default FadedZoom = { | ||
configureTransition: configureTimingTransition, | ||
sceneAnimations: (props) => { | ||
const { | ||
position, | ||
scene, | ||
} = props; | ||
|
||
const index = scene.index; | ||
const inputRange = [index - 1, index, index + 1]; | ||
|
||
const opacity = position.interpolate({ | ||
inputRange, | ||
outputRange: [0, 1, 0], | ||
}); | ||
|
||
const scale = position.interpolate({ | ||
inputRange, | ||
outputRange: [1.2, 1, 1.2], | ||
}); | ||
|
||
return { | ||
opacity, | ||
transform: [ | ||
{ translateX: 0 }, | ||
{ translateY: 0 }, | ||
{ scale: scale }, | ||
], | ||
}; | ||
}, | ||
gestures: null, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import React from 'react'; | ||
import { | ||
View, | ||
Text, | ||
StyleSheet, | ||
Image, | ||
Dimensions | ||
} from 'react-native'; | ||
|
||
const windowWidth = Dimensions.get('window').width; | ||
|
||
class Card extends React.Component { | ||
render() { | ||
return ( | ||
<View style={styles.card} shadowColor={'#000'} shadowOffset={{width: 0, height: 10}} shadowOpacity={0.4} shadowRadius={20}> | ||
{this.props.children} | ||
</View> | ||
); | ||
} | ||
} | ||
|
||
const styles = StyleSheet.create({ | ||
card: { | ||
backgroundColor: '#fff', | ||
borderRadius: 10, | ||
height: 400, | ||
flex: 1, | ||
marginHorizontal: 40, | ||
marginVertical: 30, | ||
minWidth: windowWidth - 80, | ||
}, | ||
}); | ||
|
||
export default Card; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,143 @@ | ||
import React from 'react'; | ||
import { | ||
View, | ||
Text, | ||
StyleSheet, | ||
Image | ||
} from 'react-native'; | ||
import Card from './Card'; | ||
|
||
class CardCoach extends React.Component { | ||
render() { | ||
return ( | ||
<Card> | ||
<View style={styles.cardHeader}> | ||
<View style={{flex: 1, alignItems: 'flex-start'}}> | ||
<View style={{flexDirection: 'row', alignItems: 'center'}}> | ||
<Image source={require('../images/coach-icon.png')} style={styles.profileicon} /> | ||
<Text style={{fontFamily: 'bebas-neue', fontSize: 18, color: '#282a2c'}}>NIKE+ COACH</Text> | ||
</View> | ||
</View> | ||
<View style={{flex: 1, alignItems: 'flex-end'}}> | ||
<View style={{flexDirection: 'row', alignItems: 'center', marginTop: 3}}> | ||
<Text style={{fontFamily: 'bebas-neue', fontSize: 18, color: '#adadad'}}>THIS WEEK</Text> | ||
</View> | ||
</View> | ||
</View> | ||
<View style={{height: 30}}> | ||
|
||
</View> | ||
<View style={styles.cardContent}> | ||
<View style={{flex: 2}}> | ||
<Text style={styles.textSmall}>MON 16</Text> | ||
</View> | ||
<View style={{flex: 5}}> | ||
<Text style={styles.text}>WALK 1.6KM</Text> | ||
</View> | ||
<View style={{flex: 1}}> | ||
<Text>🙌</Text> | ||
</View> | ||
</View> | ||
<View style={styles.cardContent}> | ||
<View style={{flex: 2}}> | ||
<Text style={styles.textSmall}>TUE 17</Text> | ||
</View> | ||
<View style={{flex: 5}}> | ||
<Text style={styles.text}>RUN 4.8KM</Text> | ||
</View> | ||
<View style={{flex: 1}}> | ||
<Text>💪</Text> | ||
</View> | ||
</View> | ||
<View style={styles.cardContent}> | ||
<View style={{flex: 2}}> | ||
<Text style={[styles.textSmall, {color: '#f02733'}]}>WED 18</Text> | ||
</View> | ||
<View style={{flex: 5}}> | ||
<Text style={[styles.text, {color: '#f02733'}]}>CROSS TRAIN</Text> | ||
</View> | ||
<View style={{flex: 1}}> | ||
<Text>🤔</Text> | ||
</View> | ||
</View> | ||
<View style={styles.cardContent}> | ||
<View style={{flex: 2}}> | ||
<Text style={[styles.textSmall, {color: '#eee'}]}>THU 19</Text> | ||
</View> | ||
<View style={{flex: 6}}> | ||
<Text style={[styles.text, {color: '#eee'}]}>REST</Text> | ||
</View> | ||
</View> | ||
<View style={styles.cardContent}> | ||
<View style={{flex: 2}}> | ||
<Text style={[styles.textSmall, {color: '#eee'}]}>FRI 20</Text> | ||
</View> | ||
<View style={{flex: 6}}> | ||
<Text style={[styles.text, {color: '#eee'}]}>WALK 1.6KM</Text> | ||
</View> | ||
</View> | ||
</Card> | ||
); | ||
} | ||
} | ||
|
||
const styles = StyleSheet.create({ | ||
cardHeader: { | ||
flexDirection: 'row', | ||
paddingVertical: 20, | ||
paddingHorizontal: 25, | ||
paddingBottom: 0, | ||
}, | ||
profileicon: { | ||
height: 30, | ||
width: 30 | ||
}, | ||
profileiconred: { | ||
height: 30, | ||
width: 30, | ||
marginTop: 8 | ||
}, | ||
cardContent: { | ||
flexDirection: 'row', | ||
paddingHorizontal: 25, | ||
marginVertical: 8, | ||
justifyContent: 'flex-start', | ||
alignItems: 'center' | ||
}, | ||
profilepicture: { | ||
height: 60, | ||
width: 60, | ||
borderRadius: 30, | ||
marginHorizontal: 10, | ||
marginTop: 5 | ||
}, | ||
cardLabel: { | ||
fontFamily: 'bebas-neue', | ||
fontSize: 18, | ||
color: '#adadad' | ||
}, | ||
cardText: { | ||
fontFamily: 'bebas-neue', | ||
fontSize: 30 | ||
}, | ||
cardTextSmall: { | ||
fontFamily: 'bebas-neue', | ||
fontSize: 13 | ||
}, | ||
graphText: { | ||
textAlign: 'center', | ||
fontFamily: 'bebas-neue', | ||
fontSize: 13, | ||
color: '#adadad' | ||
}, | ||
text: { | ||
fontFamily: 'bebas-neue', | ||
fontSize: 20 | ||
}, | ||
textSmall: { | ||
fontFamily: 'bebas-neue', | ||
fontSize: 14 | ||
} | ||
}); | ||
|
||
export default CardCoach; |
Oops, something went wrong.