Skip to content

Commit 788410c

Browse files
maeschliethanshar
maeschli
and
ethanshar
authored
[Inspiration screens]: Product Page & Twitter screens (#1466)
* [Inspiration screens]: Product Page Screen * fixed ActionSheet screen * [Inspiration screens]: Twitter Screen * [Inspiration screens]: Twitter Screen icons * [Inspiration screens]: Changed Product page option items to pickers * Use Pickers instead of ActionSheet in Products inspiration screens * Fix formatting and some lint errors Co-authored-by: Ethan Sharabi <[email protected]>
1 parent af06b72 commit 788410c

File tree

5 files changed

+272
-1
lines changed

5 files changed

+272
-1
lines changed

‎demo/src/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,12 @@ module.exports = {
238238
get ListActionsScreen() {
239239
return require('./screens/realExamples/ListActions/ListActionsScreen').default;
240240
},
241+
get ProductPage() {
242+
return require('./screens/realExamples/ProductPage');
243+
},
244+
get Twitter() {
245+
return require('./screens/realExamples/Twitter');
246+
},
241247
// wrapperScreens
242248
get TouchableOpacityScreen() {
243249
return require('./screens/componentScreens/TouchableOpacityScreen').default;

‎demo/src/screens/MenuStructure.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,9 @@ export const navigationData = {
166166
screens: [
167167
{title: 'Apple Music', tags: 'apple music demo screen', screen: 'unicorn.examples.AppleMusic'},
168168
{title: 'Pinterest', tags: 'pinterest demo screen', screen: 'unicorn.examples.Pinterest'},
169-
{title: 'List Actions', tags: 'list actions demo screen', screen: 'unicorn.examples.ListActionsScreen'}
169+
{title: 'List Actions', tags: 'list actions demo screen', screen: 'unicorn.examples.ListActionsScreen'},
170+
{title: 'Product Page', tags: 'product page demo screen', screen: 'unicorn.examples.ProductPage'},
171+
{title: 'Twitter', tags: 'twitter demo screen', screen: 'unicorn.examples.Twitter'}
170172
]
171173
}
172174
};

‎demo/src/screens/realExamples/ProductPage/index.tsx

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import React, {Component} from 'react';
2+
import {ScrollView} from 'react-native';
3+
import {View, Text, Colors, Image, Button, Carousel, Picker} from 'react-native-ui-lib';
4+
import _ from 'lodash';
5+
6+
const colorOptions: {[key: string]: {name: string; color: string}} = {
7+
red: {name: 'Red', color: Colors.red30},
8+
green: {name: 'Green', color: Colors.green30},
9+
blue: {name: 'Blue', color: Colors.blue30}
10+
};
11+
12+
const sizeOptions = {
13+
s: {name: 'Small'},
14+
m: {name: 'Medium'},
15+
l: {name: 'Large'}
16+
};
17+
18+
const images = [
19+
'https://images.pexels.com/photos/3297502/pexels-photo-3297502.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
20+
'https://images.pexels.com/photos/3496994/pexels-photo-3496994.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
21+
'https://images.pexels.com/photos/3323694/pexels-photo-3323694.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
22+
'https://images.pexels.com/photos/3350141/pexels-photo-3350141.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
23+
'https://images.pexels.com/photos/3127161/pexels-photo-3127161.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
24+
'https://images.pexels.com/photos/2872767/pexels-photo-2872767.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
25+
'https://images.pexels.com/photos/3271010/pexels-photo-3271010.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
26+
'https://images.pexels.com/photos/3206153/pexels-photo-3206153.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
27+
];
28+
29+
class Product extends Component {
30+
state = {
31+
isColor: false,
32+
isSize: false,
33+
selectedColor: 'red',
34+
selectedSize: 's'
35+
};
36+
37+
render() {
38+
const {selectedColor, selectedSize} = this.state;
39+
40+
return (
41+
<ScrollView>
42+
<View>
43+
<Image
44+
style={{position: 'absolute', top: 10, right: 10, zIndex: 100, tintColor: Colors.white}}
45+
source={require('../../../assets/icons/share.png')}
46+
/>
47+
<Carousel
48+
containerStyle={{height: 200}}
49+
pageControlProps={{size: 6}}
50+
pageControlPosition={Carousel.pageControlPositions.OVER}
51+
>
52+
{images.map((image, i) => {
53+
return (
54+
<View flex centerV key={i}>
55+
<Image overlayType={Image.overlayTypes.BOTTOM} style={{flex: 1}} source={{uri: image}}/>
56+
</View>
57+
);
58+
})}
59+
</Carousel>
60+
</View>
61+
62+
<View paddingH-page>
63+
<View row centerV>
64+
<Text text40M marginT-s7>
65+
New Product
66+
</Text>
67+
</View>
68+
<Text text80 dark40 marginV-s1>
69+
SKU: 1234567890
70+
</Text>
71+
<Text text50L marginV-s2>
72+
$55.00
73+
</Text>
74+
75+
<View marginT-s2>
76+
<Picker
77+
migrate
78+
value={selectedColor}
79+
onChange={(value: string) => this.setState({selectedColor: value})}
80+
rightIconSource={{}}
81+
rightIconStyle={{
82+
width: 24,
83+
height: 24,
84+
backgroundColor: colorOptions[selectedColor].color,
85+
borderRadius: 12
86+
}}
87+
>
88+
{_.map(colorOptions, (colorOption, colorKey) => {
89+
return <Picker.Item value={colorKey} label={colorOption.name}/>;
90+
})}
91+
</Picker>
92+
<Picker migrate value={selectedSize} onChange={(value: string) => this.setState({selectedSize: value})}>
93+
{_.map(sizeOptions, (sizeOption, sizeKey) => {
94+
return <Picker.Item value={sizeKey} label={sizeOption.name}/>;
95+
})}
96+
</Picker>
97+
</View>
98+
99+
<Button label={'Add to Cart'}/>
100+
</View>
101+
<Text marginL-page marginT-s5 text60M>
102+
Recommended for You
103+
</Text>
104+
<ScrollView
105+
style={{height: 200, marginVertical: 20, marginLeft: 20}}
106+
horizontal
107+
showsHorizontalScrollIndicator={false}
108+
>
109+
{images.map((image, index) => (
110+
<Image key={index} width={160} style={{marginRight: 10}} source={{uri: image}}/>
111+
))}
112+
</ScrollView>
113+
</ScrollView>
114+
);
115+
}
116+
}
117+
118+
export default Product;

‎demo/src/screens/realExamples/Twitter/index.tsx

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import React, {Component} from 'react';
2+
import {FlatList, StyleSheet} from 'react-native';
3+
import {View as AnimatableView} from 'react-native-animatable';
4+
import {View, Text, ListItem, Avatar, AnimatableManager, Card, Colors, Button} from 'react-native-ui-lib';
5+
6+
const posts = [
7+
{
8+
height: 310,
9+
avatar:
10+
'https://images.pexels.com/photos/3496994/pexels-photo-3496994.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
11+
name: 'Jack',
12+
nickname: '@jackywhite',
13+
description: 'Join our live webinar and discover the secrets of successful serverless monitoring.',
14+
time: '1h',
15+
link: {
16+
website: 'helloworld.com',
17+
description: 'Live Webinar: Secrets of Serverless monitoring. Register Now!',
18+
thumbnail:
19+
'https://images.pexels.com/photos/3271010/pexels-photo-3271010.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
20+
},
21+
icons: [
22+
require('../../../assets/icons/video.png'),
23+
require('../../../assets/icons/tags.png'),
24+
require('../../../assets/icons/star.png'),
25+
require('../../../assets/icons/share.png')
26+
]
27+
},
28+
{
29+
height: 196,
30+
avatar: 'https://images.pexels.com/photos/3297502/pexels-photo-3297502.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
31+
name: 'Jessica Alba',
32+
nickname: '@jessicaalba',
33+
description:
34+
'I am a Jessica Marie Alba, an American actress, model and businesswoman. I began my television and movie appearances at age 13 in Camp Nowhere and The Secret World of Alex Mack, but rose to prominence at age 19 as the lead actress of the television series Dark Angel, for which she received a Golden Globe nomination.',
35+
time: '47m',
36+
icons: [
37+
require('../../../assets/icons/video.png'),
38+
require('../../../assets/icons/tags.png'),
39+
require('../../../assets/icons/star.png'),
40+
require('../../../assets/icons/share.png')
41+
]
42+
},
43+
{
44+
height: 310,
45+
avatar:
46+
'https://images.pexels.com/photos/3323694/pexels-photo-3323694.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
47+
name: 'New York Times',
48+
nickname: '@NYTimesMagazine',
49+
description: 'Solar Power Mandate Approved for California Buildings',
50+
time: '1m',
51+
link: {
52+
website: 'newyorktimes.com',
53+
description: 'Californians have felt an urgency to move away from using fossil fuels as climate...',
54+
thumbnail:
55+
'https://images.pexels.com/photos/3206153/pexels-photo-3206153.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
56+
},
57+
icons: [
58+
require('../../../assets/icons/video.png'),
59+
require('../../../assets/icons/tags.png'),
60+
require('../../../assets/icons/star.png'),
61+
require('../../../assets/icons/share.png')
62+
]
63+
}
64+
];
65+
66+
class Twitter extends Component {
67+
keyExtractor = (item: any) => item.nickname;
68+
69+
renderPost(post: any, id: number) {
70+
return (
71+
<AnimatableView {...AnimatableManager.getEntranceByIndex(id, {})}>
72+
<ListItem key={id} height={post.height} containerStyle={styles.post}>
73+
<ListItem.Part left containerStyle={{justifyContent: 'space-between'}}>
74+
<Avatar source={post.avatar ? {uri: post.avatar} : undefined} containerStyle={styles.avatar}/>
75+
</ListItem.Part>
76+
<ListItem.Part middle column>
77+
<View row centerV>
78+
<Text text80M>{post.name} </Text>
79+
<Text dark40>{post.nickname}</Text>
80+
<Text dark40>{' • ' + post.time}</Text>
81+
</View>
82+
<Text>{post.description}</Text>
83+
{post.link ? (
84+
<Card style={{marginTop: 10}} height={200}>
85+
<Card.Section imageSource={{uri: post.link.thumbnail}} imageStyle={{height: 120}}/>
86+
<View padding-s3>
87+
<Text dark40>{post.link.website}</Text>
88+
<Text>{post.link.description}</Text>
89+
</View>
90+
</Card>
91+
) : null}
92+
<View row style={{justifyContent: 'space-between', marginVertical: 10}}>
93+
{post.icons
94+
? post.icons.map((icnSource: any, index) => {
95+
return (
96+
<Button
97+
key={index}
98+
iconSource={icnSource}
99+
iconStyle={styles.icon}
100+
backgroundColor={'transparent'}
101+
/>
102+
);
103+
})
104+
: null}
105+
</View>
106+
</ListItem.Part>
107+
</ListItem>
108+
</AnimatableView>
109+
);
110+
}
111+
112+
render() {
113+
return (
114+
<FlatList
115+
data={posts}
116+
renderItem={({item, index}) => this.renderPost(item, index)}
117+
keyExtractor={this.keyExtractor}
118+
/>
119+
);
120+
}
121+
}
122+
123+
const styles = StyleSheet.create({
124+
post: {
125+
marginTop: 10,
126+
marginBottom: 10,
127+
borderBottomWidth: 0.5,
128+
borderBottomColor: Colors.grey70,
129+
paddingHorizontal: 20
130+
},
131+
avatar: {
132+
alignSelf: 'flex-start',
133+
marginRight: 8,
134+
marginTop: 8
135+
},
136+
icon: {
137+
tintColor: Colors.dark40,
138+
width: 20,
139+
height: 20
140+
}
141+
});
142+
143+
export default Twitter;

‎demo/src/screens/realExamples/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,6 @@ export function registerScreens(registrar) {
66
gestureHandlerRootHOC(require('./Pinterest').default));
77
registrar('unicorn.examples.ListActionsScreen',
88
() => require('./ListActions/ListActionsScreen').default);
9+
registrar('unicorn.examples.ProductPage', () => require('./ProductPage').default);
10+
registrar('unicorn.examples.Twitter', () => require('./Twitter').default);
911
}

0 commit comments

Comments
 (0)