04 deep dive real app

code/01-creating-custom-buttons/App.js

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+
+import StartGameScreen from './screens/StartGameScreen';
+
+export default function App() {
+  return <StartGameScreen />;
+}
+
+const styles = StyleSheet.create({});

code/01-creating-custom-buttons/app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "RNCourse",
+    "slug": "RNCourse",
+    "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
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

code/01-creating-custom-buttons/babel.config.js

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

code/01-creating-custom-buttons/components/PrimaryButton.js

@@ -0,0 +1,11 @@
+import { View, Text } from 'react-native';
+
+function PrimaryButton({ children }) {
+  return (
+    <View>
+      <Text>{children}</Text>
+    </View>
+  );
+}
+
+export default PrimaryButton;

code/01-creating-custom-buttons/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "rncourse",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "expo": "~44.0.0",
+    "expo-status-bar": "~1.2.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-native": "0.64.3",
+    "react-native-web": "0.17.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9"
+  },
+  "private": true
+}

code/01-creating-custom-buttons/screens/StartGameScreen.js

@@ -0,0 +1,15 @@
+import { TextInput, View } from 'react-native';
+
+import PrimaryButton from '../components/PrimaryButton';
+
+function StartGameScreen() {
+  return (
+    <View>
+      <TextInput />
+      <PrimaryButton>Reset</PrimaryButton>
+      <PrimaryButton>Confirm</PrimaryButton>
+    </View>
+  );
+}
+
+export default StartGameScreen;

code/02-styling-number-input/App.js

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+
+import StartGameScreen from './screens/StartGameScreen';
+
+export default function App() {
+  return <StartGameScreen />;
+}
+
+const styles = StyleSheet.create({});

code/02-styling-number-input/app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "RNCourse",
+    "slug": "RNCourse",
+    "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
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

code/02-styling-number-input/babel.config.js

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

code/02-styling-number-input/components/PrimaryButton.js

@@ -0,0 +1,11 @@
+import { View, Text } from 'react-native';
+
+function PrimaryButton({ children }) {
+  return (
+    <View>
+      <Text>{children}</Text>
+    </View>
+  );
+}
+
+export default PrimaryButton;

code/02-styling-number-input/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "rncourse",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "expo": "~44.0.0",
+    "expo-status-bar": "~1.2.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-native": "0.64.3",
+    "react-native-web": "0.17.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9"
+  },
+  "private": true
+}

code/02-styling-number-input/screens/StartGameScreen.js

@@ -0,0 +1,41 @@
+import { TextInput, View, StyleSheet } from 'react-native';
+
+import PrimaryButton from '../components/PrimaryButton';
+
+function StartGameScreen() {
+  return (
+    <View style={styles.inputContainer}>
+      <TextInput style={styles.numberInput} maxLength={2} />
+      <PrimaryButton>Reset</PrimaryButton>
+      <PrimaryButton>Confirm</PrimaryButton>
+    </View>
+  );
+}
+
+export default StartGameScreen;
+
+const styles = StyleSheet.create({
+  inputContainer: {
+    marginTop: 100,
+    marginHorizontal: 24,
+    padding: 16,
+    backgroundColor: '#72063c',
+    borderRadius: 8,
+    elevation: 4,
+    shadowColor: 'black',
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 6,
+    shadowOpacity: 0.25
+  },
+  numberInput: {
+    height: 50,
+    width: 50,
+    fontSize: 32,
+    borderBottomColor: '#ddb52f',
+    borderBottomWidth: 2,
+    color: '#ddb52f',
+    marginVertical: 8,
+    fontWeight: 'bold',
+    textAlign: 'center'
+  }
+});

code/03-configuring-text-input/App.js

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+
+import StartGameScreen from './screens/StartGameScreen';
+
+export default function App() {
+  return <StartGameScreen />;
+}
+
+const styles = StyleSheet.create({});

code/03-configuring-text-input/app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "RNCourse",
+    "slug": "RNCourse",
+    "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
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

code/03-configuring-text-input/babel.config.js

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

code/03-configuring-text-input/components/PrimaryButton.js

@@ -0,0 +1,11 @@
+import { View, Text } from 'react-native';
+
+function PrimaryButton({ children }) {
+  return (
+    <View>
+      <Text>{children}</Text>
+    </View>
+  );
+}
+
+export default PrimaryButton;

code/03-configuring-text-input/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "rncourse",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "expo": "~44.0.0",
+    "expo-status-bar": "~1.2.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-native": "0.64.3",
+    "react-native-web": "0.17.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9"
+  },
+  "private": true
+}

code/03-configuring-text-input/screens/StartGameScreen.js

@@ -0,0 +1,47 @@
+import { TextInput, View, StyleSheet } from 'react-native';
+
+import PrimaryButton from '../components/PrimaryButton';
+
+function StartGameScreen() {
+  return (
+    <View style={styles.inputContainer}>
+      <TextInput
+        style={styles.numberInput}
+        maxLength={2}
+        keyboardType="number-pad"
+        autoCapitalize="none"
+        autoCorrect={false}
+      />
+      <PrimaryButton>Reset</PrimaryButton>
+      <PrimaryButton>Confirm</PrimaryButton>
+    </View>
+  );
+}
+
+export default StartGameScreen;
+
+const styles = StyleSheet.create({
+  inputContainer: {
+    marginTop: 100,
+    marginHorizontal: 24,
+    padding: 16,
+    backgroundColor: '#72063c',
+    borderRadius: 8,
+    elevation: 4,
+    shadowColor: 'black',
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 6,
+    shadowOpacity: 0.25,
+  },
+  numberInput: {
+    height: 50,
+    width: 50,
+    fontSize: 32,
+    borderBottomColor: '#ddb52f',
+    borderBottomWidth: 2,
+    color: '#ddb52f',
+    marginVertical: 8,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+});

code/04-improving-buttons/App.js

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+
+import StartGameScreen from './screens/StartGameScreen';
+
+export default function App() {
+  return <StartGameScreen />;
+}
+
+const styles = StyleSheet.create({});