[Inspiration screens]: Product Page & Twitter screens

demo/src/index.js

@@ -238,6 +238,12 @@ module.exports = {
       get ListActionsScreen() {
         return require('./screens/realExamples/ListActions/ListActionsScreen').default;
       },
+      get ProductPage() {
+        return require('./screens/realExamples/ProductPage');
+      },
+      get Twitter() {
+        return require('./screens/realExamples/Twitter');
+      },
       // wrapperScreens
       get TouchableOpacityScreen() {
         return require('./screens/componentScreens/TouchableOpacityScreen').default;

demo/src/screens/MenuStructure.js

@@ -165,7 +165,9 @@ 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'},
+      {title: 'Twitter', tags: 'twitter demo screen', screen: 'unicorn.examples.Twitter'}
     ]
   }
 };

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

@@ -0,0 +1,118 @@
+import React, {Component} from 'react';
+import {ScrollView} from 'react-native';
+import {View, Text, Colors, Image, Button, Carousel, Picker} from 'react-native-ui-lib';
+import _ from 'lodash';
+
+const colorOptions: {[key: string]: {name: string; color: string}} = {
+  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,
+    selectedColor: 'red',
+    selectedSize: 's'
+  };
+
+  render() {
+    const {selectedColor, selectedSize} = 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 marginT-s2>
+            <Picker
+              migrate
+              value={selectedColor}
+              onChange={(value: string) => this.setState({selectedColor: value})}
+              rightIconSource={{}}
+              rightIconStyle={{
+                width: 24,
+                height: 24,
+                backgroundColor: colorOptions[selectedColor].color,
+                borderRadius: 12
+              }}
+            >
+              {_.map(colorOptions, (colorOption, colorKey) => {
+                return <Picker.Item value={colorKey} label={colorOption.name}/>;
+              })}
+            </Picker>
+            <Picker migrate value={selectedSize} onChange={(value: string) => this.setState({selectedSize: value})}>
+              {_.map(sizeOptions, (sizeOption, sizeKey) => {
+                return <Picker.Item value={sizeKey} label={sizeOption.name}/>;
+              })}
+            </Picker>
+          </View>
+
+          <Button label={'Add to Cart'}/>
+        </View>
+        <Text marginL-page marginT-s5 text60M>
+          Recommended for You
+        </Text>
+        <ScrollView
+          style={{height: 200, marginVertical: 20, marginLeft: 20}}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+        >
+          {images.map((image, index) => (
+            <Image key={index} width={160} style={{marginRight: 10}} source={{uri: image}}/>
+          ))}
+        </ScrollView>
+      </ScrollView>
+    );
+  }
+}
+
+export default Product;

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

@@ -0,0 +1,143 @@
+import React, {Component} from 'react';
+import {FlatList, StyleSheet} from 'react-native';
+import {View as AnimatableView} from 'react-native-animatable';
+import {View, Text, ListItem, Avatar, AnimatableManager, Card, Colors, Button} from 'react-native-ui-lib';
+
+const posts = [
+  {
+    height: 310,
+    avatar:
+      'https://images.pexels.com/photos/3496994/pexels-photo-3496994.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
+    name: 'Jack',
+    nickname: '@jackywhite',
+    description: 'Join our live webinar and discover the secrets of successful serverless monitoring.',
+    time: '1h',
+    link: {
+      website: 'helloworld.com',
+      description: 'Live Webinar: Secrets of Serverless monitoring. Register Now!',
+      thumbnail:
+        'https://images.pexels.com/photos/3271010/pexels-photo-3271010.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
+    },
+    icons: [
+      require('../../../assets/icons/video.png'),
+      require('../../../assets/icons/tags.png'),
+      require('../../../assets/icons/star.png'),
+      require('../../../assets/icons/share.png')
+    ]
+  },
+  {
+    height: 196,
+    avatar: 'https://images.pexels.com/photos/3297502/pexels-photo-3297502.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
+    name: 'Jessica Alba',
+    nickname: '@jessicaalba',
+    description:
+      '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.',
+    time: '47m',
+    icons: [
+      require('../../../assets/icons/video.png'),
+      require('../../../assets/icons/tags.png'),
+      require('../../../assets/icons/star.png'),
+      require('../../../assets/icons/share.png')
+    ]
+  },
+  {
+    height: 310,
+    avatar:
+      'https://images.pexels.com/photos/3323694/pexels-photo-3323694.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
+    name: 'New York Times',
+    nickname: '@NYTimesMagazine',
+    description: 'Solar Power Mandate Approved for California Buildings',
+    time: '1m',
+    link: {
+      website: 'newyorktimes.com',
+      description: 'Californians have felt an urgency to move away from using fossil fuels as climate...',
+      thumbnail:
+        'https://images.pexels.com/photos/3206153/pexels-photo-3206153.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
+    },
+    icons: [
+      require('../../../assets/icons/video.png'),
+      require('../../../assets/icons/tags.png'),
+      require('../../../assets/icons/star.png'),
+      require('../../../assets/icons/share.png')
+    ]
+  }
+];
+
+class Twitter extends Component {
+  keyExtractor = (item: any) => item.nickname;
+
+  renderPost(post: any, id: number) {
+    return (
+      <AnimatableView {...AnimatableManager.getEntranceByIndex(id, {})}>
+        <ListItem key={id} height={post.height} containerStyle={styles.post}>
+          <ListItem.Part left containerStyle={{justifyContent: 'space-between'}}>
+            <Avatar source={post.avatar ? {uri: post.avatar} : undefined} containerStyle={styles.avatar}/>
+          </ListItem.Part>
+          <ListItem.Part middle column>
+            <View row centerV>
+              <Text text80M>{post.name} </Text>
+              <Text dark40>{post.nickname}</Text>
+              <Text dark40>{' • ' + post.time}</Text>
+            </View>
+            <Text>{post.description}</Text>
+            {post.link ? (
+              <Card style={{marginTop: 10}} height={200}>
+                <Card.Section imageSource={{uri: post.link.thumbnail}} imageStyle={{height: 120}}/>
+                <View padding-s3>
+                  <Text dark40>{post.link.website}</Text>
+                  <Text>{post.link.description}</Text>
+                </View>
+              </Card>
+            ) : null}
+            <View row style={{justifyContent: 'space-between', marginVertical: 10}}>
+              {post.icons
+                ? post.icons.map((icnSource: any, index) => {
+                  return (
+                    <Button
+                      key={index}
+                      iconSource={icnSource}
+                      iconStyle={styles.icon}
+                      backgroundColor={'transparent'}
+                    />
+                  );
+                })
+                : null}
+            </View>
+          </ListItem.Part>
+        </ListItem>
+      </AnimatableView>
+    );
+  }
+
+  render() {
+    return (
+      <FlatList
+        data={posts}
+        renderItem={({item, index}) => this.renderPost(item, index)}
+        keyExtractor={this.keyExtractor}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  post: {
+    marginTop: 10,
+    marginBottom: 10,
+    borderBottomWidth: 0.5,
+    borderBottomColor: Colors.grey70,
+    paddingHorizontal: 20
+  },
+  avatar: {
+    alignSelf: 'flex-start',
+    marginRight: 8,
+    marginTop: 8
+  },
+  icon: {
+    tintColor: Colors.dark40,
+    width: 20,
+    height: 20
+  }
+});
+
+export default Twitter;

demo/src/screens/realExamples/index.js

@@ -6,4 +6,6 @@ export function registerScreens(registrar) {
     gestureHandlerRootHOC(require('./Pinterest').default));
   registrar('unicorn.examples.ListActionsScreen',
     () => require('./ListActions/ListActionsScreen').default);
+  registrar('unicorn.examples.ProductPage', () => require('./ProductPage').default);
+  registrar('unicorn.examples.Twitter', () => require('./Twitter').default);
 }