Day 2; first commit

App.js

@@ -7,6 +7,7 @@ import ImageScreen from "./src/screens/ImageScreen";
 import CounterScreen from "./src/screens/CounterScreen";
 import ColorScreen from "./src/screens/ColorScreen";
 import SquareScreen from "./src/screens/SquareScreen";
+import TextScreen from "./src/screens/TextScreen";
 
 const navigator = createStackNavigator(
   {
@@ -17,6 +18,7 @@ const navigator = createStackNavigator(
     Counter: CounterScreen,
     Color: ColorScreen,
     Square: SquareScreen,
+    Text: TextScreen,
   },
   {
     initialRouteName: "Home",

src/screens/CounterScreen.js

@@ -1,21 +1,32 @@
-import React, { useState } from "react";
-import { Text, StyleSheet, View, Button, TouchableOpacity } from "react-native";
+import React, { useReducer } from "react";
+import { Text, StyleSheet, View, Button } from "react-native";
 
-const CounterScreen = () => {
-  const [counter, setCounter] = useState(0);
+const reducer = (state, action) => {
+  // state === {counter: number}
+  // action === {type: "change_counter", payload: +1 || -1}
+  switch (action.type) {
+    case "change_counter":
+      return { ...state, counter: state.counter + action.payload };
+    default:
+      return state;
+  }
+};
 
+const CounterScreen = () => {
+  const [state, dispatch] = useReducer(reducer, { counter: 0 });
+  const { counter } = state;
   return (
     <View>
       <Button
         title="Increase"
         onPress={() => {
-          setCounter(counter + 1);
+          dispatch({ type: "change_counter", payload: 1 });
         }}
       />
       <Button
         title="Decrease"
         onPress={() => {
-          setCounter(counter - 1);
+          dispatch({ type: "change_counter", payload: -1 });
         }}
       />
       <Text>Current Count: {counter}</Text>

src/screens/HomeScreen.js

@@ -29,6 +29,10 @@ const HomeScreen = ({ navigation }) => {
         onPress={() => navigation.navigate("Square")}
         title="Go to Square Demo"
       />
+      <Button
+        onPress={() => navigation.navigate("Text")}
+        title="Go to Text Demo"
+      />
     </View>
   );
 };

src/screens/SquareScreen.js

@@ -1,53 +1,64 @@
-import React, { useState } from "react";
+import React, { useReducer } from "react";
 import { StyleSheet, View } from "react-native";
 import ColorCounter from "../components/ColorCounter";
 
 const COLOR_INCREMENT = 15;
 
-const SquareScreen = () => {
-  const [red, setRed] = useState(0);
-  const [green, setGreen] = useState(0);
-  const [blue, setBlue] = useState(0);
-
-  const setColor = (color, change) => {
-    // color === 'red', 'green', 'blue'
-    // change === +15, -15
+const reducer = (state, action) => {
+  // state === {red: number, green: number, blue: number}
+  // action === {type: 'change_red' || 'change_green' || 'change_blue', payload: 15 || -15}
+  switch (action.type) {
+    case "change_red":
+      return state.red + action.payload > 255 || state.red + action.payload < 0
+        ? state
+        : { ...state, red: state.red + action.payload };
+    case "change_green":
+      return state.green + action.payload > 255 ||
+        state.green + action.payload < 0
+        ? state
+        : { ...state, green: state.green + action.payload };
+    case "change_blue":
+      return state.blue + action.payload > 255 ||
+        state.blue + action.payload < 0
+        ? state
+        : { ...state, blue: state.blue + action.payload };
+    default:
+      return state;
+  }
+};
 
-    switch (color) {
-      case "red":
-        red + change > 255 || red + change < 0 ? null : setRed(red + change);
-        return;
-      case "green":
-        green + change > 255 || green + change < 0
-          ? null
-          : setGreen(green + change);
-        return;
-      case "blue":
-        blue + change > 255 || blue + change < 0
-          ? null
-          : setBlue(blue + change);
-        return;
-      default:
-        return;
-    }
-  };
+const SquareScreen = () => {
+  const [state, dispatch] = useReducer(reducer, { red: 0, green: 0, blue: 0 });
+  const { red, green, blue } = state;
 
   return (
     <View>
       <ColorCounter
-        onIncrease={() => setColor("red", COLOR_INCREMENT)}
-        onDecrease={() => setColor("red", -1 * COLOR_INCREMENT)}
+        onIncrease={() =>
+          dispatch({ type: "change_red", payload: COLOR_INCREMENT })
+        }
+        onDecrease={() =>
+          dispatch({ type: "change_red", payload: -1 * COLOR_INCREMENT })
+        }
         color="Red"
       />
       <ColorCounter
-        onIncrease={() => setColor("blue", COLOR_INCREMENT)}
-        onDecrease={() => setColor("blue", -1 * COLOR_INCREMENT)}
-        color="Blue"
+        onIncrease={() =>
+          dispatch({ type: "change_green", payload: COLOR_INCREMENT })
+        }
+        onDecrease={() =>
+          dispatch({ type: "change_green", payload: -1 * COLOR_INCREMENT })
+        }
+        color="Green"
       />
       <ColorCounter
-        onIncrease={() => setColor("green", COLOR_INCREMENT)}
-        onDecrease={() => setColor("green", -1 * COLOR_INCREMENT)}
-        color="Green"
+        onIncrease={() =>
+          dispatch({ type: "change_blue", payload: COLOR_INCREMENT })
+        }
+        onDecrease={() =>
+          dispatch({ type: "change_blue", payload: -1 * COLOR_INCREMENT })
+        }
+        color="Blue"
       />
       <View
         style={{

src/screens/TextScreen.js

@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+import { View, Text, StyleSheet, TextInput } from "react-native";
+
+const TextScreen = () => {
+  const [name, setName] = useState("");
+
+  return (
+    <View>
+      <Text>Enter Name:</Text>
+      <TextInput
+        style={styles.input}
+        textContentType="givenName"
+        autoCorrect={false}
+        value={name}
+        onChangeText={(newValue) => setName(newValue)}
+      />
+      <Text>My name is {name}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  input: {
+    margin: 15,
+    borderColor: "black",
+    borderWidth: 1,
+  },
+});
+
+export default TextScreen;