Basic layout with flexbox (#11)

* Basic layout with flexbox

* Update readme

Author: spencercarli

README.md

@@ -10,6 +10,8 @@ A single place to find all of the React Native tutorials created at Handlebar La
 
 ## Tutorials
 
+* Layout with Flexbox - React Native Basics (November 7, 2018) - [video](https://www.youtube.com/watch?v=qBFMnFXVw2c), [code](https://github.com/HandlebarLabs/react-native-examples-and-tutorials/tree/master/tutorials/flexbox-basics)
+
 * How to use the Image Component - React Native Basics (November 7, 2018) - [video](https://www.youtube.com/watch?v=v-3sNvMNosY), [code](https://github.com/HandlebarLabs/react-native-examples-and-tutorials/tree/master/tutorials/image-basics)
 
 * Building a Global Alert System in React Native (November 5, 2018) - [video series](https://www.youtube.com/watch?v=NsAQTbAV2zE&list=PLG02JlJZbKbtNnOx2vlUqF_HBve5HVlH1), [code](https://github.com/HandlebarLabs/react-native-examples-and-tutorials/tree/master/tutorials/global-alerts)

tutorials/flexbox-basics/.babelrc

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

tutorials/flexbox-basics/.gitignore

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

tutorials/flexbox-basics/.watchmanconfig

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

tutorials/flexbox-basics/App.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  Image,
+} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#fff',
+    flex: 1,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  image: {
+    width: 250,
+    height: 250,
+    borderRadius: 125,
+    borderWidth: 5,
+    borderColor: '#4cfcf3',
+    marginBottom: 20,
+  },
+  nameText: {
+    fontSize: 30,
+    fontWeight: 'bold',
+  },
+});
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <React.Fragment>
+        <View style={styles.container}>
+          <Image
+            resizeMode="contain"
+            style={styles.image}
+            source={{ uri: 'https://randomuser.me/api/portraits/lego/5.jpg' }}
+          />
+          <Text style={styles.nameText}>John Doe</Text>
+          <Text style={styles.nameText}>John Doe</Text>
+        </View>
+      </React.Fragment>
+    );
+  }
+}

tutorials/flexbox-basics/app.json

@@ -0,0 +1,27 @@
+{
+  "expo": {
+    "name": "FlexboxBasics",
+    "description": "This project is really great.",
+    "slug": "FlexboxBasics",
+    "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
+    }
+  }
+}

tutorials/flexbox-basics/assets/icon.png

@@ -0,0 +1,16 @@
+{
+  "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": "^30.0.1",
+    "react": "16.3.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz"
+  }
+}