React Native

06-React-Native/training-playground/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["babel-preset-expo"],
+  "env": {
+    "development": {
+      "plugins": ["transform-react-jsx-source"]
+    }
+  }
+}

06-React-Native/training-playground/.gitignore

@@ -0,0 +1,3 @@
+node_modules/**/*
+.expo/*
+npm-debug.*

06-React-Native/training-playground/.watchmanconfig

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

06-React-Native/training-playground/App.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StyleSheet, Text, View, ScrollView } from 'react-native';
+import HomeScreen from './topic4/HomeScreen';
+
+export default class App extends React.Component {
+  render() {
+    return (
+        <HomeScreen />
+    );
+  }
+}

06-React-Native/training-playground/app.json

@@ -0,0 +1,27 @@
+{
+  "expo": {
+    "name": "training-app",
+    "description": "This project is really great.",
+    "slug": "training-app",
+    "privacy": "public",
+    "sdkVersion": "30.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/training-playground/components/CardFour.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+const CardFour = () => {
+	return (
+		<View style={styles.container}>
+			<Text>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin urna sed nibh posuere, non egestas neque rhoncus. Phasellus pharetra vestibulum facilisis. Ut id turpis mi. Duis fringilla mauris justo, in finibus lorem euismod eget. Vivamus pellentesque mauris mauris, sit amet accumsan enim auctor eu. Praesent consectetur volutpat vestibulum. Nunc vel sollicitudin nisi, non vulputate mi. 
+			</Text>
+		</View>
+	)
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 200,
+    width: 300,
+    padding: 10,
+    backgroundColor: '#FFF'
+  }
+});
+
+export default CardFour;

06-React-Native/training-playground/components/CardOne.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+const CardOne = () => {
+	return (
+		<View style={styles.container}>
+			<Text style={styles.baseText}>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin urna sed nibh posuere, non egestas neque rhoncus. Phasellus pharetra vestibulum facilisis. Ut id turpis mi.
+				<Text style={styles.endText}>
+				Duis fringilla mauris justo, in finibus lorem euismod eget. Vivamus pellentesque mauris mauris, sit amet accumsan enim auctor eu. Praesent consectetur volutpat vestibulum. Nunc vel sollicitudin nisi, non vulputate mi. 
+				</Text>
+			</Text>
+		</View>
+	)
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 200,
+    width: 300,
+    padding: 10,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: '#000',
+    backgroundColor: '#F00'
+  },
+  baseText: {
+  	fontSize: 14
+  },
+  endText: {
+  	fontWeight: 'bold',
+  	fontSize: 20,
+  	color: '#FFF'
+  }
+});
+
+export default CardOne;

06-React-Native/training-playground/components/CardThree.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { StyleSheet, Text, View, Image } from 'react-native';
+
+const CardThree = () => {
+	return (
+		<View style={styles.container}>
+			<Image
+          style={{width: 350, height: 300}}
+          source={require('../assets/venom.jpg')}
+      />
+		</View>
+	)
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 300,
+    width: 350,
+    backgroundColor: '#F00'
+  }
+});
+
+export default CardThree;

06-React-Native/training-playground/components/CardTwo.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleSheet, Text, View, Image } from 'react-native';
+
+const CardTwo = () => {
+	return (
+		<View style={styles.container}>
+			<Image
+          style={{width: 400, height: 150}}
+          source={require('../assets/venom.jpg')}
+      />
+      <Image
+          style={{width: 400, height: 150}}
+          source={{uri: 'https://cinepremiere.com.mx/assets/images/noticias/2016/04-abril/Marvel-toma-control-creativo-de-Spider-Man-Homecoming.jpg'}}
+      />
+		</View>
+	)
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 300,
+    width: 400,
+    backgroundColor: 'blue'
+  }
+});
+
+export default CardTwo;