diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/moments/MomentPost.tsx | 24 |
1 files changed, 21 insertions, 3 deletions
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 29b82cec..7b3ce6f8 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -87,6 +87,7 @@ const MomentPost: React.FC<MomentPostProps> = ({ moment.moment_url.endsWith('gif') ); const mediaHeight = SCREEN_WIDTH / aspectRatio; + const [viewCount, setViewCount] = useState<number>(moment.view_count); /* * Load tags on initial render to pass tags data to moment header and content @@ -192,11 +193,18 @@ const MomentPost: React.FC<MomentPostProps> = ({ screenType={screenType} editable={false} /> - <Text style={styles.headerText}>{user.username}</Text> + <View style={{paddingHorizontal: '3%'}}> + <Text style={styles.headerText}>{user.username}</Text> + <Text style={styles.viewCount}> + {viewCount <= 9999 + ? `${viewCount} Views` + : `${(viewCount / 1000).toFixed(1)}K Views`} + </Text> + </View> </TouchableOpacity> </View> ), - [user.username], + [user.username, viewCount], ); const momentMedia = isVideo ? ( @@ -387,7 +395,17 @@ const styles = StyleSheet.create({ fontSize: 15, fontWeight: 'bold', color: 'white', - paddingHorizontal: '3%', + }, + viewCount: { + height: normalize(12), + left: 0, + top: '8%', + fontSize: 11, + fontWeight: '600', + lineHeight: 13, + letterSpacing: 0.08, + textAlign: 'left', + color: '#fff', }, header: { alignItems: 'center', |