Skip to content

Commit c32cac8

Browse files
Monte9Monte9
committed
profile view complete
1 parent 54e42b2 commit c32cac8

File tree

3 files changed

+115
-117
lines changed

3 files changed

+115
-117
lines changed

‎example/beta-src/ParallaxScrollView.js

Lines changed: 80 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
22
import {
33
Text,
44
View,
5+
Image,
56
Animated,
67
ScrollView,
78
Dimensions,
@@ -10,7 +11,7 @@ import {
1011

1112
import { Icon, List, ListItem } from 'react-native-elements';
1213

13-
import { COLORS, LIST, SCREEN_WIDTH, SCREEN_HEIGHT } from './constants'
14+
import { COLORS, FACEBOOK_LIST, SLACK_LIST, GENERIC_LIST, SCREEN_WIDTH, SCREEN_HEIGHT } from './constants'
1415

1516
const SCREEN = Dimensions.get('window');
1617
const ScrollViewPropTypes = ScrollView.propTypes;
@@ -100,7 +101,7 @@ export default class ParallaxScrollView extends Component {
100101
position: 'relative',
101102
height: newWindowHeight,
102103
opacity: scrollY.interpolate({
103-
inputRange: [-windowHeight, 0, windowHeight / 2],
104+
inputRange: [-windowHeight, 0, windowHeight / 0.5],
104105
outputRange: [1, 1, 0]
105106
})
106107
}}
@@ -109,10 +110,22 @@ export default class ParallaxScrollView extends Component {
109110
this.props.header :
110111
<View style={styles.headerView}>
111112
<View style={styles.headerTextView}>
112-
<Text style={styles.headerTextViewTitle}>My Day</Text>
113-
<Text style={styles.headerTextViewSubtitle}>
114-
Wednesday, May 17
115-
</Text>
113+
<Animated.View
114+
style={[styles.avatarView,
115+
{
116+
opacity: scrollY.interpolate({
117+
inputRange: [-windowHeight, 0, windowHeight * 0.42],
118+
outputRange: [1, 1, 0]
119+
})
120+
}
121+
]}
122+
>
123+
<Image source={{uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg'}} style={{height: 120, width: 120, borderRadius: 60}} />
124+
</Animated.View>
125+
<View style={{paddingBottom: 20}}>
126+
<Text style={{textAlign: 'center', fontSize: 22, color: 'white', paddingBottom: 5}}>Katy Friedson</Text>
127+
<Text style={{textAlign: 'center', fontSize: 17, color: 'rgba(247,247, 250, 1)', paddingBottom: 5}}>Engineering Manager</Text>
128+
</View>
116129
</View>
117130
</View>
118131
}
@@ -133,13 +146,13 @@ export default class ParallaxScrollView extends Component {
133146
<Animated.View
134147
style={{
135148
opacity: scrollY.interpolate({
136-
inputRange: [-windowHeight, 0, windowHeight / 1.3],
149+
inputRange: [-windowHeight, windowHeight * 0.42, windowHeight * 0.8],
137150
outputRange: [0, 0, 1]
138151
})
139152
}}
140153
>
141154
<Text style={{ fontSize: 22, fontWeight: '600', color: 'white' }}>
142-
My Day
155+
Katy Friedson
143156
</Text>
144157
</Animated.View>
145158
);
@@ -153,7 +166,7 @@ export default class ParallaxScrollView extends Component {
153166
}
154167

155168
var backgroundColor = scrollY.interpolate({
156-
inputRange: [-windowHeight, 0, windowHeight / 1.3],
169+
inputRange: [-windowHeight, windowHeight * 0.42, windowHeight * 0.8],
157170
outputRange: ['transparent', 'transparent', 'rgba(0, 0, 0, 1.0)']
158171
});
159172

@@ -207,33 +220,50 @@ export default class ParallaxScrollView extends Component {
207220

208221
renderTodoListContent() {
209222
return (
210-
<List containerStyle={styles.listContainerView}>
211-
{LIST.map((item, index) => (
223+
<View>
224+
<List>
225+
{
226+
FACEBOOK_LIST.map((item, index) => (
227+
<ListItem
228+
key={index}
229+
onPress={() => console.log("List item pressed")}
230+
title={item.title}
231+
leftIcon={{name: item.icon}} />
232+
))
233+
}
234+
</List>
235+
<List>
236+
{
237+
SLACK_LIST.map((item, index) => (
238+
<ListItem
239+
key={index}
240+
onPress={() => console.log("List item pressed")}
241+
title={item.title}
242+
leftIcon={{name: item.icon}} />
243+
))
244+
}
245+
</List>
246+
<List>
247+
{
248+
GENERIC_LIST.map((item, index) => (
249+
<ListItem
250+
key={index}
251+
onPress={() => console.log("List item pressed")}
252+
title={item.title}
253+
leftIcon={{name: item.icon}} />
254+
))
255+
}
256+
</List>
257+
<List containerStyle={{marginBottom: 15}}>
212258
<ListItem
213-
key={index}
214-
hideChevron
215-
title={item.description}
216-
titleStyle={
217-
item.checked
218-
? styles.itemCompleteTitle
219-
: styles.itemInCompleteTitle
220-
}
221-
subtitle={item.category}
222-
subtitleStyle={
223-
item.checked
224-
? styles.itemCompleteSubtitle
225-
: styles.itemInCompleteSubtitle
226-
}
227-
leftIcon={
228-
item.checked
229-
? this.itemCompleteIconStyle()
230-
: this.itemInCompleteIconStyle()
231-
}
232-
leftIconOnPress={() => console.log("Icon pressed")}
233-
onPress={() => console.log("List Item pressed")}
234-
/>
235-
))}
236-
</List>
259+
key={1}
260+
hideChevron={true}
261+
onPress={() => console.log('Logout Pressed')}
262+
title='LOGOUT'
263+
titleStyle={styles.logoutText}
264+
icon={{name: ''}} />
265+
</List>
266+
</View>
237267
);
238268
}
239269

@@ -300,19 +330,20 @@ var styles = StyleSheet.create({
300330
flexDirection: 'column'
301331
},
302332
headerView: {
303-
flex: 5
333+
flex: 5,
334+
justifyContent: 'center',
335+
alignItems: 'center'
304336
},
305-
headerTextView: {
306-
position: 'absolute',
307-
left: 25,
308-
bottom: 25,
309-
backgroundColor: 'transparent'
337+
avatarView: {
338+
justifyContent: 'center',
339+
alignItems: 'center',
340+
alignSelf: 'center',
341+
paddingBottom: 10,
310342
},
311343
headerTextViewTitle: {
312344
fontSize: 35,
313345
color: 'white',
314346
fontWeight: '300',
315-
paddingBottom: 10
316347
},
317348
headerTextViewSubtitle: {
318349
fontSize: 20,
@@ -375,12 +406,17 @@ var styles = StyleSheet.create({
375406
justifyContent: 'center',
376407
alignItems: 'center',
377408
paddingRight: 15
409+
},
410+
logoutText: {
411+
color: 'red',
412+
textAlign: 'center',
413+
fontWeight: 'bold'
378414
}
379415
});
380416

381417
ParallaxScrollView.defaultProps = {
382-
backgroundSource: {uri: 'http://i.imgur.com/ytzr6ff.png'},
383-
windowHeight: SCREEN.height * 0.38,
418+
backgroundSource: {uri: 'http://i.imgur.com/6Iej2c3.png'},
419+
windowHeight: SCREEN.height * 0.42,
384420
contentInset: {
385421
top: SCREEN.scale
386422
},

‎example/beta-src/constants.js

Lines changed: 35 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -14,101 +14,67 @@ export const COLORS = {
1414
addItemIconNoValue: 'rgba(79, 94, 248, 1)'
1515
};
1616

17-
export const LIST = [
17+
export const FACEBOOK_LIST = [
1818
{
19-
description: 'Buy groceries on my way home',
20-
category: 'To-Do',
21-
notes: 'Don\'t forget or wifey won\'t make you any dinner',
22-
checked: true
19+
title: 'Friends',
20+
icon: 'people'
2321
},
2422
{
25-
description: 'Release v3.1',
26-
category: 'Work',
27-
notes: 'Need to codepush it. QA it before release',
28-
checked: true
23+
title: 'Pictures',
24+
icon: 'wallpaper'
2925
},
3026
{
31-
description: 'Finish React Native GraphQL Todo List App',
32-
category: 'Projects',
33-
notes: 'GraphQL is :fire:',
34-
checked: false
27+
title: 'Payment',
28+
icon: 'credit-card'
3529
},
3630
{
37-
description: 'Finish college & graduate',
38-
category: 'Life',
39-
notes: "Life don't wait for nobody",
40-
checked: true
31+
title: 'Nearby',
32+
icon: 'location-city'
4133
},
4234
{
43-
description: 'Drink water',
44-
category: 'Life',
45-
notes: 'Gotta stay hydrated, else you will dehydrate',
46-
checked: false
47-
},
48-
{
49-
description: 'Go to the Warriors game',
50-
category: 'Fun',
51-
notes: 'Splash Brothers',
52-
checked: false
53-
},
54-
{
55-
description: 'Call Obama',
56-
category: 'Fun',
57-
notes: 'Catch with with my bud, Barack',
58-
checked: true
35+
title: 'Games',
36+
icon: 'videogame-asset'
5937
},
38+
];
39+
40+
export const SLACK_LIST = [
6041
{
61-
description: 'Remove trash',
62-
category: 'Home',
63-
notes: 'Gotta do it',
64-
checked: true
42+
title: 'Activity',
43+
icon: 'bookmark-border'
6544
},
6645
{
67-
description: 'Buy groceries on my way home',
68-
category: 'To-Do',
69-
notes: 'Don\'t forget or wifey won\'t make you any dinner',
70-
checked: true
46+
title: 'Notifications',
47+
icon: 'notifications-none'
7148
},
7249
{
73-
description: 'Release v3.1',
74-
category: 'Work',
75-
notes: 'Need to codepush it. QA it before release',
76-
checked: true
50+
title: 'Starred Items',
51+
icon: 'star-border'
7752
},
7853
{
79-
description: 'Finish React Native GraphQL Todo List App',
80-
category: 'Projects',
81-
notes: 'GraphQL is :fire:',
82-
checked: false
54+
title: 'Your Files',
55+
icon: 'cloud-queue'
8356
},
57+
];
58+
59+
export const GENERIC_LIST = [
8460
{
85-
description: 'Finish college & graduate',
86-
category: 'Life',
87-
notes: "Life don't wait for nobody",
88-
checked: true
61+
title: 'Edit Profile',
62+
icon: 'person'
8963
},
9064
{
91-
description: 'Drink water',
92-
category: 'Life',
93-
notes: 'Gotta stay hydrated, else you will dehydrate',
94-
checked: false
65+
title: 'Change Password',
66+
icon: 'fingerprint'
9567
},
9668
{
97-
description: 'Go to the Warriors game',
98-
category: 'Fun',
99-
notes: 'Splash Brothers',
100-
checked: false
69+
title: 'Settings',
70+
icon: 'settings'
10171
},
10272
{
103-
description: 'Call Obama',
104-
category: 'Fun',
105-
notes: 'Catch with with my bud, Barack',
106-
checked: true
73+
title: 'History',
74+
icon: 'history'
10775
},
10876
{
109-
description: 'Remove trash',
110-
category: 'Home',
111-
notes: 'Gotta do it',
112-
checked: true
77+
title: 'Help',
78+
icon: 'help'
11379
},
11480
];

‎example/main.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,6 @@ import { StyleSheet, Text, View } from 'react-native';
44

55
import ParallaxScrollView from './beta-src/ParallaxScrollView'
66

7-
// <View style={styles.container}>
8-
// <Text>hello</Text>
9-
// </View>
10-
117
class App extends React.Component {
128
render() {
139
return (

0 commit comments

Comments
 (0)