Topic6 completed

06-React-Native/index/.gitignore

@@ -0,0 +1,7 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p12
+*.key
+*.mobileprovision

06-React-Native/index/.watchmanconfig

@@ -0,0 +1 @@
+{}

06-React-Native/index/App.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { StyleSheet, Text, View, Image } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <ScrollView horizontal={true} style={{flexDirection: 'row',height: 100,padding: 20,}}>
+        <View style={styles.newView}>
+          <Text >This is the first text</Text>
+          <Image style={{width:100, height:100}} source= {require ('./img/image.png')}></Image>
+        </View>
+        <View style={styles.anotherView}>
+        <Text style={{fontSize:40,color:'red',fontWeight:'bold'}}>
+          This is the second text, with diferent size
+          <Text style={{fontSize:20,color:'white', fontStyle:'italic',fontWeight:'normal'}}>And with nesting</Text>
+          </Text>
+        </View>
+        <View style={styles.thirdView}>
+          <Text style={{color:'violet',fontSize:27}}>This is the last text</Text>
+        </View>
+        <View style={styles.anotherView}>
+
+          <Image style={{width:240, height:240}} source= {{uri: 'https://t1.kn3.net/taringa/2/9/4/1/F/8/spideriron/C8E.jpg'}}></Image>
+        </View>
+      </ScrollView>
+
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  newView: {
+    flex: 0.2,
+    height: 140,
+    width: 340,
+    backgroundColor: '#DC3939',
+    fontSize: 15,
+    alignItems: 'center',
+    borderStyle: 'solid',
+    borderColor: 'black',
+  },
+  anotherView: {
+    flex: 0.5,
+    height: 240,
+    width: 240,
+    backgroundColor: 'blue',
+    fontSize: 15,
+    alignItems: 'center',
+    borderStyle: 'solid',
+    borderColor: 'black',
+  },
+  thirdView:{
+    flex: 0.3,
+    height: 540,
+    width: 20,
+    backgroundColor: 'grey',
+    fontSize: 15,
+    alignItems: 'center',
+    borderStyle: 'solid',
+    borderColor: 'black',
+  }
+});

06-React-Native/index/app.json

@@ -0,0 +1,27 @@
+{
+  "expo": {
+    "name": "index",
+    "description": "This project is really great.",
+    "slug": "index",
+    "privacy": "public",
+    "sdkVersion": "31.0.0",
+    "platforms": ["ios", "android"],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

06-React-Native/index/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

06-React-Native/index/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "empty-project-template",
+  "main": "node_modules/expo/AppEntry.js",
+  "private": true,
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "expo": "^31.0.2",
+    "react": "16.5.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz"
+  },
+  "devDependencies": {
+    "babel-preset-expo": "^5.0.0"
+  }
+}

06-React-Native/topic2/.gitignore

@@ -0,0 +1,7 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p12
+*.key
+*.mobileprovision

06-React-Native/topic2/.watchmanconfig

@@ -0,0 +1 @@
+{}

06-React-Native/topic2/App.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { StyleSheet, Text, View, Image } from 'react-native';
+import styles from './styles.js';
+
+export default class App extends React.Component {
+  render() {
+    return (
+    /*  <View style={[styles.container]}>
+        <View style={[styles.redBox, styles.box, height='50%']}></View>       
+        <View style={[styles.whiteBox, styles.box]}></View>
+        <View style={[styles.purpleBox, styles.box]}></View>
+      </View>*/
+
+      <View style={styles.container}>
+        <View style={styles.article}>
+          <View style={styles.content}>
+            <Text style={styles.title}>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Text>
+            <Text>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+              ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+              voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+              occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+              anim id est laborum.
+            </Text>
+            <View style={styles.socialContainer}>
+              <Image source={{uri: 'https://i1.wp.com/medellinstyle.com/wp-content/uploads/facebook-logo3.jpg?fit=300%2C300&ssl=1'}}
+                    style={styles.socialImage} />
+              <Image source={{uri: 'http://pngimg.com/uploads/twitter/twitter_PNG32.png'}}
+                    style={styles.socialImage} />
+              <Image source={{uri: 'http://cofarming.info/wp-content/uploads/2017/01/Linkedin-logo-1-550x550-300x300.png'}}
+                    style={styles.socialImage} />
+              <Image source={{uri: 'https://images.vexels.com/media/users/3/137399/isolated/preview/47c9900ae893cbed1e1599ab9c8bcb18-pinterest-icon-logo-by-vexels.png'}}
+                    style={styles.socialImage} />
+            </View>
+          </View>
+          <Image source={require('./assets/image.png')}
+                   style={styles.artileIMG} />
+        </View>
+      </View>
+    );
+  }
+}

06-React-Native/topic2/app.json

@@ -0,0 +1,27 @@
+{
+  "expo": {
+    "name": "topic2",
+    "description": "This project is really great.",
+    "slug": "topic2",
+    "privacy": "public",
+    "sdkVersion": "31.0.0",
+    "platforms": ["ios", "android"],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

06-React-Native/topic2/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

06-React-Native/topic2/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "empty-project-template",
+  "main": "node_modules/expo/AppEntry.js",
+  "private": true,
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "expo": "^31.0.2",
+    "react": "16.5.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz"
+  },
+  "devDependencies": {
+    "babel-preset-expo": "^5.0.0"
+  }
+}

06-React-Native/topic2/styles.js

@@ -0,0 +1,72 @@
+import { StyleSheet, Text, View, Dimensions, Platform } from 'react-native';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'column',
+        flex: 1,
+        justifyContent: 'space-between',
+        ...Platform.select({
+            ios:{
+                backgroundColor: 'grey',
+            },
+            android:{
+                backgroundColor: 'green',
+            },
+        }),
+    },
+    redBox: {
+        backgroundColor: 'red',
+        height: 100,
+        width: 100,
+
+        alignSelf: 'flex-start'
+    },
+    purpleBox: {
+        backgroundColor: 'purple',
+        height: 100,
+        width: 100,
+
+        alignSelf: 'flex-end',
+    },
+    whiteBox: {
+        backgroundColor: 'white',
+        height: 100,
+        width: 100,
+        alignSelf: 'center'
+    },
+    box: {
+        margin: 10,
+        borderRadius: 10,
+    },
+    article:{
+        borderWidth: 1,
+        borderColor: 'black',
+        flexDirection: 'row',
+        backgroundColor: 'white',
+    },
+    artileIMG:{
+        flex: 1,
+        alignSelf: 'center',
+        width: 70,
+        height: 70, 
+    },
+    content:{
+        flex: 1,
+    },
+    title:{
+        fontSize: 20,
+    },
+    socialImage: {
+        width: 50,
+        height: 50,
+        margin: 5,
+    },
+    socialContainer: {
+        flexDirection: 'row',
+    },
+})
+
+export default styles

06-React-Native/topic3/.gitignore

@@ -0,0 +1,7 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p12
+*.key
+*.mobileprovision

06-React-Native/topic3/.watchmanconfig

@@ -0,0 +1 @@
+{}

06-React-Native/topic3/App.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
+import AppTextInput from './AppTextInput.js';
+import AppTouchableOpacity from './AppTouchableOpacity.js';
+import styles from './styles.js'; 
+
+export default class App extends React.Component {
+  constructor(props){
+    super(props),
+    this.state = {text: ''}
+    this.handleOnPress = this.handleOnPress.bind(this)
+  }
+  handleOnPress(){
+    this.setState({
+      text: ''
+    });
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+        <AppTextInput placeholder="Write over here" type="password" onChangeText={(text) => this.setState({text})} value={this.state.text}> 
+          <TouchableOpacity style={styles.inputType} onPress={this.handleOnPress} text="Clear Text">
+          </TouchableOpacity>
+        </AppTextInput>
+        <AppTouchableOpacity text="Primary Button" type="primary" onPress={this.handleOnPress}/>
+        <AppTouchableOpacity text="Secundary Button" type="secundary" onPress={this.handleOnPress}/>
+        <AppTouchableOpacity text="Disabled Button" type="secundary" disabled/>
+    </View>
+    );
+  }
+}

06-React-Native/topic3/AppTextInput.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { TextInput } from 'react-native';
+
+const AppTextInput = (props) => {
+
+  switch(props.type){
+    case 'password': return (
+      <TextInput
+        style={props.style}
+        placeholder={props.placeholder}
+        onChangeText={props.onChangeText}
+        secureTextEntry={true}
+        value={props.value}
+      />
+    );
+
+    default: return (
+      <TextInput
+        style={props.style}
+        placeholder={props.placeholder}
+        onChangeText={props.onChangeText}
+        value={props.value}
+      />
+    );
+  }
+}
+
+export default AppTextInput