Skip to content

[Inspiration screens]: Product Page & Twitter screens #1466

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

Merged
merged 7 commits into from
Aug 17, 2021
Merged

[Inspiration screens]: Product Page & Twitter screens #1466

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5b66aaf
[Inspiration screens]: Product Page Screen
mariaborovyk Aug 10, 2021
c4e1951
fixed ActionSheet screen
mariaborovyk Aug 10, 2021
417adb0
[Inspiration screens]: Twitter Screen
mariaborovyk Aug 12, 2021
aa49273
[Inspiration screens]: Twitter Screen icons
mariaborovyk Aug 13, 2021
449377f
[Inspiration screens]: Changed Product page option items to pickers
mariaborovyk Aug 15, 2021
ec4c386
Use Pickers instead of ActionSheet in Products inspiration screens
ethanshar Aug 17, 2021
9568507
Fix formatting and some lint errors
ethanshar Aug 17, 2021
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
3 changes: 3 additions & 0 deletions demo/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,9 @@ module.exports = {
// wrapperScreens
get TouchableOpacityScreen() {
return require('./screens/componentScreens/TouchableOpacityScreen').default;
},
get ProductPage() {
return require('./screens/realExamples/ProductPage');
}
};
},
Expand Down
3 changes: 2 additions & 1 deletion demo/src/screens/MenuStructure.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,8 @@ export const navigationData = {
screens: [
{title: 'Apple Music', tags: 'apple music demo screen', screen: 'unicorn.examples.AppleMusic'},
{title: 'Pinterest', tags: 'pinterest demo screen', screen: 'unicorn.examples.Pinterest'},
{title: 'List Actions', tags: 'list actions demo screen', screen: 'unicorn.examples.ListActionsScreen'}
{title: 'List Actions', tags: 'list actions demo screen', screen: 'unicorn.examples.ListActionsScreen'},
{title: 'Product Page', tags: 'product page demo screen', screen: 'unicorn.examples.ProductPage'}
]
}
};
138 changes: 138 additions & 0 deletions demo/src/screens/realExamples/ProductPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
import React, {Component} from 'react';
import {ScrollView} from 'react-native';
import {View, Text, Colors, TouchableOpacity, Image, ActionSheet, Button, Carousel} from 'react-native-ui-lib';

const colorOptions = {
red: {name: 'Red', color: Colors.red30},
green: {name: 'Green', color: Colors.green30},
blue: {name: 'Blue', color: Colors.blue30},
};

const sizeOptions = {
s: {name: 'Small'},
m: {name: 'Medium'},
l: {name: 'Large'},
};

const images = [
'https://images.pexels.com/photos/3297502/pexels-photo-3297502.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
'https://images.pexels.com/photos/3496994/pexels-photo-3496994.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
'https://images.pexels.com/photos/3323694/pexels-photo-3323694.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
'https://images.pexels.com/photos/3350141/pexels-photo-3350141.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
'https://images.pexels.com/photos/3127161/pexels-photo-3127161.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
'https://images.pexels.com/photos/2872767/pexels-photo-2872767.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
'https://images.pexels.com/photos/3271010/pexels-photo-3271010.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
'https://images.pexels.com/photos/3206153/pexels-photo-3206153.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
];

class Product extends Component {
state = {
isColor: false,
isSize: false,
colorOption: colorOptions.red,
sizeOption: sizeOptions.s,
};

pickOption(opt: any) {
this.setState({
colorOption: opt
});
}

render() {
const {isColor, colorOption, isSize, sizeOption} = this.state;

return (
<ScrollView>
<View>
<Image
style={{position: 'absolute', top: 10, right: 10, zIndex: 100, tintColor: Colors.white}}
source={require('../../../assets/icons/share.png')}/>
<Carousel
containerStyle={{height: 200}}
pageControlProps={{size: 6}}
pageControlPosition={Carousel.pageControlPositions.OVER}
>
{images.map((image, i) => {
return (
<View flex centerV key={i}>
<Image
overlayType={Image.overlayTypes.BOTTOM}
style={{flex: 1}}
source={{uri: image}}
/>
</View>
);
})}
</Carousel>
</View>

<View paddingH-page>
<View row centerV>
<Text text40M marginT-s7>New Product</Text>
</View>
<Text text80 dark40 marginV-s1>SKU: 1234567890</Text>
<Text text50L marginV-s2>$55.00</Text>

<View marginV-s2 paddingV-s2 style={{borderColor: Colors.dark70, borderBottomWidth: 1}}>
<Text dark30>Color</Text>
<TouchableOpacity row centerV spread onPress={()=> this.setState({isColor: true})}>
<View row centerV>
<View style={{width: 14, height: 14, borderRadius: 12, marginRight: 6}} backgroundColor={colorOption.color}/>
<Text dark10 text70>{colorOption.name}</Text>
</View>
<Image source={require('../../../assets/icons/chevronDown.png')}/>
</TouchableOpacity>
</View>
<ActionSheet
title={'Select a Color'}
options={[
{label: colorOptions.red.name, onPress: () => this.pickOption(colorOptions.red)},
{label: colorOptions.green.name, onPress: () => this.pickOption(colorOptions.green)},
{label: colorOptions.blue.name, onPress: () => this.pickOption(colorOptions.blue)},
]}
visible={isColor}
onDismiss={()=> this.setState({isColor: false})}
/>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not use the Picker component?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought that Picker doesn't have ActionSheet, but seems like it has in custom options

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, technically you achieve the same behavior with custom item render.


<View marginV-s2 paddingV-s2 style={{borderColor: Colors.dark70, borderBottomWidth: 1}}>
<Text dark30>Size</Text>
<TouchableOpacity row centerV spread onPress={()=> this.setState({isSize: true})}>
<View row centerV>
<Text dark10 text70>{sizeOption.name}</Text>
</View>
<Image source={require('../../../assets/icons/chevronDown.png')}/>
</TouchableOpacity>
</View>
<ActionSheet
title={'Select a Size'}
options={[
{label: sizeOptions.s.name, onPress: () => this.pickOption(sizeOptions.s)},
{label: sizeOptions.m.name, onPress: () => this.pickOption(sizeOptions.m)},
{label: sizeOptions.l.name, onPress: () => this.pickOption(sizeOptions.l)},
]}
visible={isSize}
onDismiss={()=> this.setState({isSize: false})}
/>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here, consider using the Picker component


<Button style={{marginVertical: 40}} label={'Add to Cart'} />

<Text text60M>Recommended for You</Text>
</View>
<ScrollView style={{height: 200, marginVertical: 20, marginLeft: 20}} horizontal showsHorizontalScrollIndicator={false}>
{
images.map((image) => (
<Image
width={160}
style={{marginRight: 10}}
source={{uri: image}}
/>
))
}
</ScrollView>
</ScrollView>
);
}
}

export default Product;
1 change: 1 addition & 0 deletions demo/src/screens/realExamples/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@ export function registerScreens(registrar) {
gestureHandlerRootHOC(require('./Pinterest').default));
registrar('unicorn.examples.ListActionsScreen',
() => require('./ListActions/ListActionsScreen').default);
registrar('unicorn.examples.ProductPage', () => require('./ProductPage').default);
}