Skip to content
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.

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

Screens/social profile screen #56

Open
wants to merge 4 commits into
base: examples
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 3 commits
Commits
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
Binary file added assets/fonts/SF-UI-Text-Bold.otf
Binary file not shown.
Binary file added assets/fonts/SF-UI-Text-Regular.otf
Binary file not shown.
Binary file added assets/profile_screen/img1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/profile_screen/img2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/profile_screen/img3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/profile_screen/img4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/profile_screen/img5.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import Presentation from './src/screens/Presentation';
import Dashboard from './src/screens/Dashboard';
import Register from './src/screens/Register';
import Grid from './src/screens/Grid';
import SocialProfile from './src/screens/SocialProfile';


import theme from './src/theme';
import { Block, Icon, Text } from './src';
Expand Down Expand Up @@ -152,6 +154,13 @@ const screens = {
drawerIcon: props => <MenuIcon name="grid-48" family="Galio" focused={props.focused} />,
},
},
SocialProfile: {
screen: SocialProfile,
navigationOptions: {
drawerLabel: 'Social Profile',
drawerIcon: props => <MenuIcon name="share-bold" family="Galio" focused={props.focused} />,
}
},
};

const options = {
Expand Down
371 changes: 371 additions & 0 deletions src/screens/SocialProfile.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,371 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
Dimensions, StyleSheet, ScrollView, Platform, Image, ActivityIndicator, Alert,
} from 'react-native';
import { Font, LinearGradient } from 'expo';
// galio components
import {
Button, Block, Icon, Text, NavBar, Card,
} from 'galio-framework';
import theme from '../theme';

const BASE_SIZE = theme.SIZES.BASE;
const GRADIENT_GREY = ['#f3f3f3', '#ffffff'];
const GRADIENT_CRIMSON = ['#f96332', '#fe2472'];
const COLOR_WHITE = theme.COLORS.WHITE;
const COLOR_GREY = theme.COLORS.MUTED;
const FONT_REGULAR = 'SFUIText-Regular';
const FONT_BOLD = 'SFUIText-Bold';
const { width } = Dimensions.get('screen');

hetmann marked this conversation as resolved.
Show resolved Hide resolved

const imageOne = require('../../assets/profile_screen/img1.png');
const imageTwo = require('../../assets/profile_screen/img2.png');
const imageThree = require('../../assets/profile_screen/img3.png');
const imageFour = require('../../assets/profile_screen/img4.png');
const imageFive = require('../../assets/profile_screen/img5.png');

// F O N T S
const SF_UI_REGULAR = require('../../assets/fonts/SF-UI-Text-Regular.otf');
const SF_UI_BOLD = require('../../assets/fonts/SF-UI-Text-Bold.otf');

const grids = [
{
id: 1,
image: imageOne,
},
{
id: 2,
image: imageTwo,
},
{
id: 3,
image: imageThree,
},
{
id: 4,
image: imageFour,
},
{
id: 5,
image: imageFive,
},
];


class SocialProfile extends React.Component {
state = {
fontsLoaded: false,
}

async componentDidMount() {
await Font.loadAsync({
'SFUIText-Regular': SF_UI_REGULAR,
'SFUIText-Bold': SF_UI_BOLD,
});
this.setState({ fontsLoaded: true });
}

renderHeader = navigation => (
<NavBar
back
transparent
title="Profile"
right={(
<Button
onlyIcon
icon="zoom-split"
iconFamily="Galio"
iconSize={BASE_SIZE}
iconColor={COLOR_GREY}
color="transparent"
onPress={() => Alert.alert('Like it!')}
/>
)}
titleStyle={styles.titleStyle}
leftIconColor={COLOR_GREY}
onLeftPress={() => navigation.goBack()}
style={Platform.OS === 'android' ? { marginTop: BASE_SIZE } : null}
/>
);

renderBio = () => (
<Block style={styles.bioContainer}>
<Block row space="between">
<Block middle style={styles.bioAvatarWrap}>
<Image source={{ uri: 'http://i.pravatar.cc/100' }} style={styles.bioAvatar} />
</Block>
<Block middle>
<Button round style={styles.bioButton}>
<LinearGradient
colors={GRADIENT_CRIMSON}
start={[0.1, 0.1]}
style={styles.crimsonGradient}
>
<Icon
size={BASE_SIZE * 1.5}
name="plus"
color={COLOR_WHITE}
family="Entypo"
/>
<Text color={COLOR_WHITE} style={styles.buttonTextStyle}>Follow</Text>
</LinearGradient>
</Button>
</Block>
</Block>
<Block style={styles.bioInnerContainer}>
<Text h2 color="#444" style={styles.bioHeading}>Julie Andrew</Text>
<Text p muted style={styles.bioParagraph}>
Hey there, I&#39;m a UI designer from Paris.
</Text>
</Block>
</Block>
);

renderLevel = () => (
<Block row card space="around" style={styles.levelCard}>
<Block center>
<Text h5 color="#444" style={styles.levelHeading}>100</Text>
<Text p muted style={styles.levelParagraph}>Photos</Text>
</Block>
<Block center>
<Text h5 color="#444" style={styles.levelHeading}>30</Text>
<Text p muted style={styles.levelParagraph}>Articles</Text>
</Block>
<Block center>
<Text h5 color="#444" style={styles.levelHeading}>4K</Text>
<Text p muted style={styles.levelParagraph}>Followers</Text>
</Block>
</Block>
);

renderPhotos = () => (
<Block>
<Block row space="between" style={styles.headingWrapper}>
<Text h6 color="#444" style={styles.leftHeading}>Photos</Text>
<Text p muted style={styles.rightParagraph}>View more</Text>
</Block>
<Block row space="between" style={{ flexWrap: 'wrap' }}>
{
grids.map((grid, index) => (
<Block shadow middle style={styles.column} key={`grid_${grid.id}`}>
<Button color="transparent" style={styles.fullSize} onPress={() => Alert.alert(`You pressed number ${index + 1} image`)}>
<Image source={grid.image} style={styles.fullSize} />
</Button>
</Block>
))
}
<Block shadow middle style={styles.column}>
<Button
style={styles.fullSize}
onPress={() => Alert.alert('loading 95 more items...')}
>
<LinearGradient
colors={GRADIENT_CRIMSON}
start={[0.1, 0.1]}
style={styles.crimsonGradient}
>
<Text color={theme.COLORS.WHITE} style={styles.buttonTextStyle}>+95</Text>
</LinearGradient>
</Button>
</Block>
</Block>
</Block>
);

renderArticles = () => (
<Block style={{ marginTop: 21 }}>
<Block row space="between" style={styles.headingWrapper}>
<Text h6 style={styles.leftHeading}>Articles</Text>
<Text p muted style={styles.rightParagraph}>View more</Text>
</Block>
<Block>
<Card
flex
borderless
shadowColor={theme.COLORS.BLACK}
style={styles.card}
title="Galio App in Progress"
caption="25 minutes ago"
location="Lagos, Nigeria"
avatar="http://i.pravatar.cc/100?id=pineaple"
imageBlockStyle={styles.cardNoRadius}
image="https://images.unsplash.com/photo-1494252713559-f26b4bf0b174?w=840&q=300"
/>
</Block>
</Block>
);

render() {
const { fontsLoaded } = this.state;
const { navigation } = this.props;
// S H O W - L O A D E R - W H E N - F O N T - I S - L O A D I N G
if (!fontsLoaded) {
return (
<Block safe flex middle>
<ActivityIndicator size="large" color="#fe2472" />
</Block>
);
}
// E L S E - S H O W - T H E - S C R E E N
return (
<Block safe flex>
{/* G R E D I E N T - B A C K G R O U N D */}
<LinearGradient
colors={GRADIENT_GREY}
start={[0.1, 0.1]}
style={styles.backgroundGradient}
/>
{/* H E A D E R */}
{this.renderHeader(navigation)}

<ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
<Block style={styles.container}>
{/* R E N D E R - M A I N - C O N T E N T S */}
{this.renderBio()}

{this.renderLevel()}

{this.renderPhotos()}

{this.renderArticles()}
</Block>
</ScrollView>
</Block>
);
}
}

SocialProfile.propTypes = {
navigation: PropTypes.object.isRequired,
};
const styles = StyleSheet.create({
backgroundGradient: {
position: 'absolute',
top: 0,
bottom: 0,
right: 0,
left: 0,
zIndex: 0,
},
titleStyle: {
fontFamily: FONT_REGULAR,
lineHeight: 16,
},
container: {
paddingHorizontal: theme.SIZES.BASE,
},
bioContainer: {
marginBottom: 30,
paddingHorizontal: 8,
},
bioAvatarWrap: {
height: 55,
width: 55,
borderRadius: BASE_SIZE * 3.25,
shadowColor: 'rgb(0,0,0)',
shadowOffset: { width: 0, height: 10 },
shadowOpacity: 0.3,
shadowRadius: -3,
elevation: 27,
overflow: 'hidden',
},
bioAvatar: {
height: '100%',
width: '100%',
},
bioButton: {
height: 32,
overflow: 'hidden',
shadowColor: 'rgb(0,0,0)',
shadowOffset: { width: 0, height: 13 },
shadowOpacity: 0.1,
shadowRadius: -8,
elevation: 11,
width: 102,
},
buttonTextStyle: {
fontFamily: FONT_REGULAR,
lineHeight: 19,
},
bioInnerContainer: {
marginTop: 16,
},
bioHeading: {
fontFamily: FONT_BOLD,
fontSize: 36,
lineHeight: 43,
marginBottom: 7,
},
bioParagraph: {
fontFamily: FONT_REGULAR,
fontSize: 14,
lineHeight: 16,
},
levelCard: {
alignItems: 'center',
borderWidth: 0,
borderColor: 'transparent',
backgroundColor: COLOR_WHITE,
paddingTop: 17,
paddingBottom: 12,
marginBottom: 37,
shadowColor: 'rgba(0,0,0, 0.1)',
shadowOffset: { width: 0, height: 10 },
shadowOpacity: 0.1,
shadowRadius: -1,
elevation: 34,
},
levelHeading: {
fontFamily: FONT_REGULAR,
fontSize: 16,
lineHeight: 19,
marginBottom: 6,
},
levelParagraph: {
fontFamily: FONT_REGULAR,
fontSize: 12,
lineHeight: 14,
},
headingWrapper: {
paddingHorizontal: 7,
marginBottom: 11,
},
leftHeading: {
fontFamily: FONT_REGULAR,
fontSize: 16,
lineHeight: 19,
},
rightParagraph: {
fontFamily: FONT_REGULAR,
fontSize: 12,
lineHeight: 14,
},
column: {
height: width * 0.28,
marginBottom: 15,
width: width * 0.28,
},
fullSize: {
borderWidth: 0,
height: '100%',
padding: 0,
width: '100%',
},
crimsonGradient: {
alignItems: 'center',
borderRadius: 3,
flexDirection: 'row',
height: '100%',
justifyContent: 'center',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
width: '100%',
},
});

export default SocialProfile;