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.

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

Jump to bottom

Screens/Article bugfix #113

Open
wants to merge 2 commits into
base: examples
Choose a base branch
from
Open

Screens/Article bugfix #113

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4a78fff
issue #102
Aug 15, 2019
9ef11d1
.idea removed as asked in the changes requested
Aug 30, 2019
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
158 changes: 93 additions & 65 deletions src/screens/Article.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,90 +10,114 @@ import {
import { Constants } from 'expo';

// galio components
import {
Block, Card, Text, Icon, NavBar,
} from 'galio-framework';
import { Block, Card, Text, Icon, NavBar } from 'galio-framework';
import theme from '../theme';

const { width, height } = Dimensions.get('screen');

const bgImage = 'https://images.unsplash.com/photo-1516651029879-bcd191e7d33b?fit=crop&w=900&q=80';
const bgImage =
'https://images.unsplash.com/photo-1516651029879-bcd191e7d33b?fit=crop&w=900&q=80';

const Article = props => (
<Block>
<StatusBar barStyle="light-content" />
<Block style={styles.navbar}>
<NavBar transparent leftIconColor={theme.COLORS.WHITE} onLeftPress={() => props.navigation.openDrawer()} />
</Block>
<ScrollView>
<Block flex>
<StatusBar barStyle="light-content" />
<Block style={styles.navbar}>
<NavBar
transparent
leftIconColor={theme.COLORS.WHITE}
onLeftPress={() => props.navigation.openDrawer()}
/>
</Block>

<Image
source={{ uri: bgImage }}
resizeMode="cover"
style={{
width,
height: height * 0.55,
}}
/>
<Image
source={{ uri: bgImage }}
resizeMode="cover"
style={{
width,
height: height * 0.55,
}}
/>

<Block center style={{ marginTop: -theme.SIZES.BASE * 2 }}>
<Block flex style={styles.header}>
<Block>
<Text size={theme.SIZES.BASE * 1.875}>I would happily watch a TV show about crabs</Text>
<Text muted t size={theme.SIZES.BASE * 0.875} style={{ marginTop: theme.SIZES.BASE, fontWeight: '500' }}>
InterBlocking this super star
</Text>
</Block>
<Block center style={{ marginTop: -theme.SIZES.BASE * 2 }}>
<Block flex style={styles.header}>
<Block>
<Text size={theme.SIZES.BASE * 1.875}>
I would happily watch a TV show about crabs
</Text>
<Text
muted
t
size={theme.SIZES.BASE * 0.875}
style={{ marginTop: theme.SIZES.BASE, fontWeight: '500' }}
>
InterBlocking this super star
</Text>
</Block>

<Block center>
<Card
borderless
style={styles.stats}
title="Christopher Moon"
caption="139 minutes ago"
avatar="http://i.pravatar.cc/100?id=article"
location={(
<Block row right>
<Block row middle style={{ marginHorizontal: theme.SIZES.BASE }}>
<Icon name="eye" family="font-awesome" color={theme.COLORS.MUTED} size={theme.SIZES.FONT * 0.875} />
<Text
p
color={theme.COLORS.MUTED}
size={theme.SIZES.FONT * 0.875}
style={{ marginLeft: theme.SIZES.BASE * 0.25 }}
<Block center>
<Card
borderless
style={styles.stats}
title="Christopher Moon"
caption="139 minutes ago"
avatar="http://i.pravatar.cc/100?id=article"
location={
<Block row right>
<Block
row
middle
style={{ marginHorizontal: theme.SIZES.BASE }}
>
25.6k
</Text>
<Icon
name="eye"
family="font-awesome"
color={theme.COLORS.MUTED}
size={theme.SIZES.FONT * 0.875}
/>
<Text
p
color={theme.COLORS.MUTED}
size={theme.SIZES.FONT * 0.875}
style={{ marginLeft: theme.SIZES.BASE * 0.25 }}
>
25.6k
</Text>
</Block>
<Block row middle>
<Icon
name="heart"
family="font-awesome"
color={theme.COLORS.MUTED}
size={theme.SIZES.FONT * 0.875}
/>
<Text
p
color={theme.COLORS.MUTED}
size={theme.SIZES.FONT * 0.875}
style={{ marginLeft: theme.SIZES.BASE * 0.25 }}
>
936
</Text>
</Block>
</Block>
<Block row middle>
<Icon name="heart" family="font-awesome" color={theme.COLORS.MUTED} size={theme.SIZES.FONT * 0.875} />
<Text
p
color={theme.COLORS.MUTED}
size={theme.SIZES.FONT * 0.875}
style={{ marginLeft: theme.SIZES.BASE * 0.25 }}
>
936
</Text>
</Block>
</Block>
)}
/>
</Block>
}
/>
</Block>

<ScrollView>
<Text style={styles.text}>
You should totally like check this out, ok? Why would you use another UI
library when you have so many components written by Creative Tim and the
whole React Native community. Galio was created by developers for
developers.
You should totally like check this out, ok? Why would you use
another UI library when you have so many components written by
Creative Tim and the whole React Native community. Galio was created
by developers for developers.
</Text>
<Text style={styles.text}>
{"A lot of Bacon. I'd really like to eat like a LOT of Bacon :(."}
</Text>
</ScrollView>
</Block>
</Block>
</Block>
</Block>
</ScrollView>
);

const styles = StyleSheet.create({
Expand Down Expand Up @@ -134,6 +158,10 @@ const styles = StyleSheet.create({
fontSize: theme.SIZES.FONT * 0.875,
lineHeight: theme.SIZES.FONT * 1.25,
},
container: {
flex: 1,
backgroundColor: 'red',
},
});

export default Article;