Live Preview with Expo
Scan the QR code with your camera. Don't have Expo yet? Enter your email or phone number and we'll send a link.
No items found.

Year In Review Story

Other
Feed

During our 12/4/20 Office Hours ("Flexbox Fridays" edition) Nick (@nickselman) attempted to re-create Spotify's "Year in Review" Story screen. Here was the result!

Preview this Screen

Scan with your camera to preview on your phone:

Download Expo
Screen Code

-- CODE language-jsx --
import React from 'react';
import Images from '../config/Images';
import {
 Icon,
 ProgressBar,
 ScreenContainer,
 Touchable,
 withTheme,
} from '@draftbit/ui';
import { ImageBackground, StyleSheet, Text, View } from 'react-native';
const REPLACE_SCREEN_NAME = props => {
 const { theme } = props;
 return (
   <ScreenContainer
     style={{ backgroundColor: theme.colors.strong }}
     hasSafeArea={false}
     scrollable={false}
   >
     <View
       style={StyleSheet.flatten([
         styles.viewTw,
         { borderColor: theme.colors.strong },
       ])}
       accessible={true}
       importantForAccessibility=""auto""
       hitSlop={{}}
       pointerEvents=""auto""
     >
       <View
         style={styles.viewSl}
         accessible={true}
         importantForAccessibility=""auto""
         hitSlop={{}}
         pointerEvents=""auto""
       />
       <View
         style={StyleSheet.flatten([
           styles.viewPb,
           { borderRadius: theme.borderRadius.button },
         ])}
         accessible={true}
         importantForAccessibility=""auto""
         hitSlop={{}}
         pointerEvents=""auto""
       >
         <ImageBackground
           style={styles.imageBackgroundFt}
           resizeMode=""stretch""
           source={Images.LukeChesserHQo6Uyo4nBgUnsplash}
         >
           <View
             style={styles.viewVO}
             accessible={true}
             importantForAccessibility=""auto""
             hitSlop={{}}
             pointerEvents=""auto""
           >
             <ProgressBar
               style={styles.progressBarLK}
               progress={1}
               borderRadius={0}
               borderWidth={0}
               animationType=""spring""
               color={theme.colors.lightInverse}
               unfilledColor={theme.colors.light}
             />
             <ProgressBar
               style={styles.progressBarK3}
               progress={1}
               borderRadius={0}
               borderWidth={0}
               animationType=""spring""
               color={theme.colors.lightInverse}
               unfilledColor={theme.colors.light}
             />
             <ProgressBar
               style={styles.progressBarFb}
               progress={0.5}
               borderRadius={0}
               borderWidth={0}
               animationType=""spring""
               color={theme.colors.lightInverse}
               unfilledColor={theme.colors.light}
             />
           </View>
           <View
             style={styles.viewO1}
             accessible={true}
             importantForAccessibility=""auto""
             hitSlop={{}}
             pointerEvents=""auto""
           >
             <Icon
               color={theme.colors.lightInverse}
               size={24}
               name=""Entypo/spotify""
             />
             <View
               style={styles.viewFj}
               accessible={true}
               importantForAccessibility=""auto""
               hitSlop={{}}
               pointerEvents=""auto""
             >
               <Icon
                 color={theme.colors.lightInverse}
                 size={24}
                 name=""SimpleLineIcons/volume-2""
               />
               <View
                 style={styles.viewSa}
                 accessible={true}
                 importantForAccessibility=""auto""
                 hitSlop={{}}
                 pointerEvents=""auto""
               >
                 <Touchable hitSlop={{ left: 8, bottom: 8, right: 8, top: 8 }}>
                   <Icon
                     color={theme.colors.lightInverse}
                     size={24}
                     name=""Feather/x""
                   />
                 </Touchable>
               </View>
             </View>
           </View>
           <View
             style={styles.viewZq}
             accessible={true}
             importantForAccessibility=""auto""
             hitSlop={{}}
             pointerEvents=""auto""
             removeClippedSubviews={false}
           >
             <Text
               style={StyleSheet.flatten([
                 styles.textOb,
                 theme.typography.headline2,
                 { color: theme.colors.secondary },
               ])}
               textBreakStrategy=""highquality""
             >
               You listened to 562 genres this year, including 148 new ones.
             </Text>
           </View>
         </ImageBackground>
       </View>
       <View
         style={StyleSheet.flatten([
           styles.viewEK,
           { backgroundColor: theme.colors.strong },
         ])}
         accessible={true}
         importantForAccessibility=""auto""
         hitSlop={{}}
         pointerEvents=""auto""
       >
         <Touchable style={styles.touchableZe}>
           <View
             style={styles.view3O}
             accessible={true}
             importantForAccessibility=""auto""
             hitSlop={{}}
             pointerEvents=""auto""
           >
             <View
               style={StyleSheet.flatten([
                 styles.viewRc,
                 {
                   backgroundColor: theme.colors.background,
                   borderRadius: theme.borderRadius.button,
                 },
               ])}
               accessible={true}
               importantForAccessibility=""auto""
               hitSlop={{}}
               pointerEvents=""auto""
             >
               <Icon
                 color={theme.colors.strong}
                 size={16}
                 name=""Entypo/share-alternative""
               />
             </View>
             <Text
               style={StyleSheet.flatten([
                 styles.textJo,
                 theme.typography.body2,
                 { color: theme.colors.background },
               ])}
             >
               Share this story
             </Text>
           </View>
         </Touchable>
       </View>
     </View>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 viewVO: {
   flexDirection: 'row',
   paddingTop: 12,
   paddingLeft: 12,
   paddingRight: 12,
   justifyContent: 'space-between',
 },
 textOb: {
   textAlign: 'center',
 },
 imageBackgroundFt: {
   height: '100%',
   width: '100%',
 },
 viewRc: {
   width: 40,
   height: 40,
   alignItems: 'center',
   justifyContent: 'center',
   paddingBottom: 3,
 },
 view3O: {
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'center',
 },
 viewTw: {
   width: '100%',
   height: '100%',
   position: 'absolute',
   justifyContent: 'space-between',
 },
 touchableZe: {
   width: '80%',
   height: 60,
   alignItems: 'center',
   justifyContent: 'center',
 },
 viewSl: {
   height: 40,
 },
 progressBarLK: {
   height: 2,
   marginRight: 2,
   marginLeft: 2,
   width: '32%',
 },
 viewSa: {
   marginLeft: 16,
 },
 viewFj: {
   flexDirection: 'row',
 },
 viewO1: {
   flexDirection: 'row',
   justifyContent: 'space-between',
   paddingTop: 8,
   marginRight: 24,
   marginLeft: 24,
 },
 viewPb: {
   width: '100%',
   height: '80%',
   alignSelf: 'stretch',
   overflow: 'hidden',
 },
 textJo: {
   marginLeft: 16,
 },
 progressBarK3: {
   height: 2,
   marginRight: 2,
   marginLeft: 2,
   width: '32%',
 },
 viewZq: {
   alignItems: 'center',
   justifyContent: 'center',
   height: '80%',
   marginLeft: 16,
   marginRight: 16,
   flexWrap: 'wrap',
   alignContent: 'center',
 },
 viewEK: {
   flexDirection: 'row',
   justifyContent: 'center',
   paddingTop: 16,
   paddingBottom: 32,
   marginBottom: 32,
 },
 progressBarFb: {
   height: 2,
   marginRight: 2,
   marginLeft: 2,
   width: '32%',
 },
});
export default withTheme(REPLACE_SCREEN_NAME);

Screen Variants:

Additional Details

Changelog

No items found.

Now in open beta!