From f3fc9df3068d1b6e0aeb9892c5e33c69222bfee4 Mon Sep 17 00:00:00 2001 From: Rodrigo Date: Tue, 28 May 2019 16:37:11 -0300 Subject: [PATCH 1/5] Topic 2 - Layout --- training-playground/App.js | 17 ++-------- .../components/topic2/index.js | 15 +++++++++ .../components/topic2/styles.js | 31 +++++++++++++++++++ training-playground/styles.js | 10 ++++++ 4 files changed, 59 insertions(+), 14 deletions(-) create mode 100644 training-playground/components/topic2/index.js create mode 100644 training-playground/components/topic2/styles.js create mode 100644 training-playground/styles.js diff --git a/training-playground/App.js b/training-playground/App.js index b06aee1..4925a0a 100644 --- a/training-playground/App.js +++ b/training-playground/App.js @@ -1,21 +1,10 @@ import React from 'react'; -import { StyleSheet, Text, View } from 'react-native'; +import Topic2 from './components/topic2/' export default class App extends React.Component { render() { return ( - - Open up App.js to start working on your app! - + ); } -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#fff', - alignItems: 'center', - justifyContent: 'center', - }, -}); +} \ No newline at end of file diff --git a/training-playground/components/topic2/index.js b/training-playground/components/topic2/index.js new file mode 100644 index 0000000..01f7bab --- /dev/null +++ b/training-playground/components/topic2/index.js @@ -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 ( + + + + + + ); + } +} \ No newline at end of file diff --git a/training-playground/components/topic2/styles.js b/training-playground/components/topic2/styles.js new file mode 100644 index 0000000..6bce19f --- /dev/null +++ b/training-playground/components/topic2/styles.js @@ -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, + } + } +); \ No newline at end of file diff --git a/training-playground/styles.js b/training-playground/styles.js new file mode 100644 index 0000000..68350e5 --- /dev/null +++ b/training-playground/styles.js @@ -0,0 +1,10 @@ +import { StyleSheet } from 'react-native'; + + +export default StyleSheet.create( + { + container: { + + }, + } +); \ No newline at end of file From abc8ae37896bc8f80303fae14e55e0725346237e Mon Sep 17 00:00:00 2001 From: Rodrigo Date: Tue, 28 May 2019 17:11:50 -0300 Subject: [PATCH 2/5] Exercise 3 - ii, i made a mistake uploading the last one (is in Topic 3) --- training-playground/App.js | 4 +-- .../components/topic3/index.js | 15 ++++++++ .../components/topic3/styles.js | 34 +++++++++++++++++++ 3 files changed, 51 insertions(+), 2 deletions(-) create mode 100644 training-playground/components/topic3/index.js create mode 100644 training-playground/components/topic3/styles.js diff --git a/training-playground/App.js b/training-playground/App.js index 4925a0a..42b020c 100644 --- a/training-playground/App.js +++ b/training-playground/App.js @@ -1,10 +1,10 @@ import React from 'react'; -import Topic2 from './components/topic2/' +import Topic3 from './components/topic3/' export default class App extends React.Component { render() { return ( - + ); } } \ No newline at end of file diff --git a/training-playground/components/topic3/index.js b/training-playground/components/topic3/index.js new file mode 100644 index 0000000..202cf84 --- /dev/null +++ b/training-playground/components/topic3/index.js @@ -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 ( + + + + + + ); + } +} \ No newline at end of file diff --git a/training-playground/components/topic3/styles.js b/training-playground/components/topic3/styles.js new file mode 100644 index 0000000..45e80fe --- /dev/null +++ b/training-playground/components/topic3/styles.js @@ -0,0 +1,34 @@ +import { StyleSheet } from 'react-native'; + +export default StyleSheet.create( + { + container: { + flex: 1, + flexDirection: 'column', + alignContent: 'center', + justifyContent: 'space-between', + padding: 0, + }, + box: { + borderRadius: 25, + }, + box1: { + flex: 0.5, + backgroundColor: '#00BFFF', + width: 100, + height: 100, + }, + box2: { + flex: 0.3, + backgroundColor: '#1E90FF', + width: 100, + height: 100, + }, + box3: { + flex: 0.2, + backgroundColor: '#6495ED', + width: 100, + height: 100, + } + } +); \ No newline at end of file From 2c8ef417d3e1ff879949207fbe584d3a4f4e0072 Mon Sep 17 00:00:00 2001 From: Rodrigo Date: Tue, 28 May 2019 17:17:08 -0300 Subject: [PATCH 3/5] Topic 2 - Exercise 5 --- training-playground/components/topic3/styles.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/training-playground/components/topic3/styles.js b/training-playground/components/topic3/styles.js index 45e80fe..5c38975 100644 --- a/training-playground/components/topic3/styles.js +++ b/training-playground/components/topic3/styles.js @@ -5,30 +5,33 @@ export default StyleSheet.create( container: { flex: 1, flexDirection: 'column', + alignItems: 'center', alignContent: 'center', justifyContent: 'space-between', - padding: 0, + padding: 10, }, box: { borderRadius: 25, }, box1: { - flex: 0.5, backgroundColor: '#00BFFF', width: 100, height: 100, + alignSelf: 'flex-start', }, box2: { - flex: 0.3, backgroundColor: '#1E90FF', width: 100, height: 100, + alignItems: 'center', + }, box3: { - flex: 0.2, backgroundColor: '#6495ED', width: 100, height: 100, + alignSelf: 'flex-end', + } } ); \ No newline at end of file From 171b2c9e2ba8ede9601ae4f23c59f7da4d8611be Mon Sep 17 00:00:00 2001 From: Rodrigo Date: Tue, 28 May 2019 22:11:09 -0300 Subject: [PATCH 4/5] Topic 2 (Exercise 6) Platform Specific Code --- .../components/Topic2_6/index.js | 15 +++++++ .../components/Topic2_6/styles.js | 40 +++++++++++++++++++ 2 files changed, 55 insertions(+) create mode 100644 training-playground/components/Topic2_6/index.js create mode 100644 training-playground/components/Topic2_6/styles.js diff --git a/training-playground/components/Topic2_6/index.js b/training-playground/components/Topic2_6/index.js new file mode 100644 index 0000000..ba50e13 --- /dev/null +++ b/training-playground/components/Topic2_6/index.js @@ -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 ( + + + + + + ); + } +} \ No newline at end of file diff --git a/training-playground/components/Topic2_6/styles.js b/training-playground/components/Topic2_6/styles.js new file mode 100644 index 0000000..1799e16 --- /dev/null +++ b/training-playground/components/Topic2_6/styles.js @@ -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', + + } + } +); \ No newline at end of file From 75c920010a1a9ba1598d30c95dc531ced3d4ac92 Mon Sep 17 00:00:00 2001 From: Rodrigo Date: Wed, 29 May 2019 12:41:00 -0300 Subject: [PATCH 5/5] Topic 2 - Exercise 7 - Layout with different paragraphs, image and icons (@expo/vector-icons) --- training-playground/App.js | 7 ++- .../components/topic2_7/index.js | 49 +++++++++++++++++++ .../components/topic2_7/styles.js | 42 ++++++++++++++++ 3 files changed, 96 insertions(+), 2 deletions(-) create mode 100644 training-playground/components/topic2_7/index.js create mode 100644 training-playground/components/topic2_7/styles.js diff --git a/training-playground/App.js b/training-playground/App.js index 42b020c..5e57db4 100644 --- a/training-playground/App.js +++ b/training-playground/App.js @@ -1,10 +1,13 @@ import React from 'react'; -import Topic3 from './components/topic3/' +import { View } from 'react-native'; +import Topic2_7 from './components/topic2_7'; export default class App extends React.Component { render() { return ( - + + + ); } } \ No newline at end of file diff --git a/training-playground/components/topic2_7/index.js b/training-playground/components/topic2_7/index.js new file mode 100644 index 0000000..2e8c5bc --- /dev/null +++ b/training-playground/components/topic2_7/index.js @@ -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 ( + + + + This is the title + + + And this is the sub-title + + + This is a paragraph. A paragraph with letters and words, without any meaning. It just for this example to work. + + + + + + + + + + + + + + + + + + + + + + + + ); + } +} \ No newline at end of file diff --git a/training-playground/components/topic2_7/styles.js b/training-playground/components/topic2_7/styles.js new file mode 100644 index 0000000..b93e0a7 --- /dev/null +++ b/training-playground/components/topic2_7/styles.js @@ -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, + } + } +); \ No newline at end of file