Skip to content

Topic 2 - Layout #2

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

Open
RodrigoAlejandroBelsito wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Topic 2 - Layout #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f3fc9df
Topic 2 - Layout
RodrigoBelsito May 28, 2019
abc8ae3
Exercise 3 - ii, i made a mistake uploading the last one (is in Topic 3)
RodrigoBelsito May 28, 2019
2c8ef41
Topic 2 - Exercise 5
RodrigoBelsito May 28, 2019
171b2c9
Topic 2 (Exercise 6) Platform Specific Code
RodrigoBelsito May 29, 2019
75c9200
Topic 2 - Exercise 7 - Layout with different paragraphs, image and ic…
RodrigoBelsito May 29, 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
18 changes: 5 additions & 13 deletions training-playground/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,13 @@
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { View } from 'react-native';
import Topic2_7 from './components/topic2_7';

export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<View style={ {marginTop: 24} }>
<Topic2_7 />
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
}
15 changes: 15 additions & 0 deletions training-playground/components/Topic2_6/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from 'react';
import { View } from 'react-native';
import styles from './styles'

export default class Topic2_6 extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={[styles.box, styles.box1]}/>
<View style={[styles.box, styles.box2]}/>
<View style={[styles.box3, styles.box]}/>
</View>
);
}
}
40 changes: 40 additions & 0 deletions training-playground/components/Topic2_6/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { StyleSheet, Platform } from 'react-native';

const color = Platform.OS === 'ios' ? 'grey' : 'green';

export default StyleSheet.create(
{
container: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
alignContent: 'center',
justifyContent: 'space-between',
padding: 10,
backgroundColor: color,
},
box: {
borderRadius: 25,
},
box1: {
backgroundColor: '#00BFFF',
width: 100,
height: 100,
alignSelf: 'flex-start',
},
box2: {
backgroundColor: '#1E90FF',
width: 100,
height: 100,
alignItems: 'center',

},
box3: {
backgroundColor: '#6495ED',
width: 100,
height: 100,
alignSelf: 'flex-end',

}
}
);
15 changes: 15 additions & 0 deletions training-playground/components/topic2/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from 'react';
import { View } from 'react-native';
import styles from './styles'

export default class Topic2 extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={[styles.box, styles.box1]}/>
<View style={[styles.box, styles.box2]}/>
<View style={[styles.box3, styles.box]}/>
</View>
);
}
}
31 changes: 31 additions & 0 deletions training-playground/components/topic2/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { StyleSheet } from 'react-native';

export default StyleSheet.create(
{
container: {
flex: 0.7,
width: 500,
height: 500,
justifyContent: 'space-between',
padding: 10,
},
box: {
borderRadius: 25,
},
box1: {
backgroundColor: '#00BFFF',
width: 100,
height: 100,
},
box2: {
backgroundColor: '#1E90FF',
width: 150,
height: 150,
},
box3: {
backgroundColor: '#6495ED',
width: 200,
height: 200,
}
}
);
49 changes: 49 additions & 0 deletions training-playground/components/topic2_7/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import React from 'react';
import { View, Text, Image } from 'react-native';
import styles from './styles';
import { Entypo, AntDesign, SimpleLineIcons, FontAwesome } from '@expo/vector-icons';


export default class Topic2_7 extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.boxLeft}>
<Text style={styles.textTitle}>
This is the title
</Text>
<Text style={styles.textSubTitle}>
And this is the sub-title
</Text>
<Text style={styles.textParagraph} numberOfLines={2}>
This is a paragraph. A paragraph with letters and words, without any meaning. It just for this example to work.
</Text>
<View style={styles.iconsContainer}>
<View style={[styles.icon, {backgroundColor:"grey"}]}>
<SimpleLineIcons name="bubble" size={32} color="white" />
</View>
<View style={styles.icon}>
<FontAwesome name="facebook" size={32} color="#3a5897" />
</View>
<View style={styles.icon}>
<FontAwesome name="linkedin" size={32} color="#0775b7" />
</View>
<View style={styles.icon}>
<Entypo name="pinterest" size={32} color="#cd2129" />
</View>
<View style={styles.icon}>
<FontAwesome name="twitter" size={32} color="#49c9f2" />
</View>
</View>
</View>
<View style={styles.boxRight}>
<Image
style={styles.image}
source={{uri: 'https://i.pinimg.com/originals/1f/47/fe/1f47fe8df5bac8390d39f48c22072ef6.jpg'}}
resizeMode={"contain"}
/>
</View>
</View>
);
}
}
42 changes: 42 additions & 0 deletions training-playground/components/topic2_7/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { StyleSheet } from 'react-native';

export default StyleSheet.create({
container: {
padding: 10,
flexDirection: 'row',
},
boxLeft: {
flex: 7,
},
boxRight: {
flex: 3,

},
textTitle:{
fontSize: 20,
fontWeight: 'bold',
},
textSubTitle:{
fontSize: 16,
fontStyle: 'italic',
},
textParagraph:{
fontSize: 12,
},
image:{
aspectRatio: 1,
height: undefined,
width: '100%',
},
iconsContainer:{
flexDirection: 'row',
//justifyContent: 'space-between',
},
icon:{
alignItems: 'center',
height:32,
width:32,
marginRight: 5,
}
}
);
15 changes: 15 additions & 0 deletions training-playground/components/topic3/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from 'react';
import { View } from 'react-native';
import styles from './styles'

export default class Topic3 extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={[styles.box, styles.box1]}/>
<View style={[styles.box, styles.box2]}/>
<View style={[styles.box3, styles.box]}/>
</View>
);
}
}
37 changes: 37 additions & 0 deletions training-playground/components/topic3/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { StyleSheet } from 'react-native';

export default StyleSheet.create(
{
container: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
alignContent: 'center',
justifyContent: 'space-between',
padding: 10,
},
box: {
borderRadius: 25,
},
box1: {
backgroundColor: '#00BFFF',
width: 100,
height: 100,
alignSelf: 'flex-start',
},
box2: {
backgroundColor: '#1E90FF',
width: 100,
height: 100,
alignItems: 'center',

},
box3: {
backgroundColor: '#6495ED',
width: 100,
height: 100,
alignSelf: 'flex-end',

}
}
);
10 changes: 10 additions & 0 deletions training-playground/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { StyleSheet } from 'react-native';


export default StyleSheet.create(
{
container: {

},
}
);