Starting project

rn-started/App.js

+import { createAppContainer } from "react-navigation";
+import { createStackNavigator } from "react-navigation-stack";
+import HomeScreen from "./src/screens/HomeScreen";
+import ComponentsScreen from "./src/screens/ComponentsScreen";
+import ListScreen from "./src/screens/ListScreen";
+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 SquareScreenReducer from "./src/screens/SquareScreenReducer";
+import TextScreen from "./src/screens/TextScreen";
+import PasswordScreen from "./src/screens/PasswordScreen";
+import BoxScreen from "./src/screens/BoxScreen";
+
+const navigator = createStackNavigator(
+  {
+    Home: HomeScreen,
+    Components: ComponentsScreen,
+    List: ListScreen,
+    Image: ImageScreen,
+    Counter: CounterScreen,
+    Colors: ColorScreen,
+    Square: SquareScreen,
+    Reducer: SquareScreenReducer,
+    Text: TextScreen,
+    Password: PasswordScreen,
+    Box: BoxScreen
+  },
+  {
+    initialRouteName: "Home",
+    defaultNavigationOptions: {
+      title: "App",
+    },
+  }
+);
+
+export default createAppContainer(navigator);

rn-started/app.json

+{
+  "expo": {
+    "name": "my-app",
+    "slug": "my-app",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

rn-started/babel.config.js

+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+    plugins: ["react-native-reanimated/plugin"],
+  };
+};

rn-started/package.json

+{
+  "name": "rn-starter-update",
+  "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"
+  },
+  "dependencies": {
+    "@react-native-community/masked-view": "^0.1.11",
+    "expo": "~49.0.10",
+    "expo-status-bar": "~1.6.0",
+    "react": "18.2.0",
+    "react-native": "0.72.4",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-reanimated": "~3.3.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0",
+    "react-navigation": "^4.4.4",
+    "react-navigation-stack": "^2.10.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0"
+  },
+  "private": true
+}

rn-started/src/components/ColorCounter.js

+import React from "react";
+import { View, Text, Button, StyleSheet } from "react-native";
+
+const ColorCounter = ({ color, onIncrease, onDecrease }) => {
+    return (
+        <View>
+            <Text style={styles.title}>{color}</Text>
+            <Button 
+            title = {`More ${color}`}
+            onPress={ () => { onIncrease() }}
+            />
+            <Button 
+            title = {`Less ${color}`}
+            onPress={ () => { onDecrease() }}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    title: {
+        marginHorizontal: 16,
+        marginTop: 16
+    }
+});
+
+export default ColorCounter;
\ No newline at end of file

rn-started/src/components/ImageDetail.js

+import React from "react";
+import { View, Text, StyleSheet, Image } from "react-native";
+
+const ImageDetail = ({ imageSource, title, score}) => {
+    return(
+        <View style={styles.cell}>
+            <Image source={imageSource} />
+            <Text>{ title }</Text>
+            <Text>Image Score: { score}</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    cell: {
+        margin: 16
+    }
+});
+
+export default ImageDetail
\ No newline at end of file

rn-started/src/screens/BoxScreen.js

+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+
+const BoxScreen = () => {
+    return (
+        <View
+            style={styles.viewStyle }
+        >
+            <Text style={styles.textOneStyle }>Child #1</Text>
+            <Text style={styles.textTwoStyle }>Child #2</Text>
+            <Text style={styles.textThreeStyle }>Child #3</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    viewStyle: {
+        borderWidth: 3,
+        borderColor: 'black',
+        height: 200,
+        alignItems: 'center'
+    },
+    textOneStyle: {
+        borderWidth: 3,
+        borderColor: 'red',
+        width: '50%'
+    },
+    textTwoStyle: {
+        borderWidth: 3,
+        borderColor: 'red',
+        alignSelf: 'flex-end '
+    },
+    textThreeStyle: {
+        borderWidth: 3,
+        borderColor: 'red',
+    }
+});
+
+export default BoxScreen;
\ No newline at end of file

rn-started/src/screens/ColorScreen.js

+import React, {useState} from "react";
+import { View, Text, StyleSheet, Button, FlatList } from "react-native";
+
+const ColorScreen = () => {
+    const [colors, setColors] = useState([]);
+
+    return (
+        <View>
+            <Button 
+                title="Add a color"
+                onPress={ () => {
+                    setColors([...colors, randomRgb()])
+                }}
+            />
+            <FlatList 
+                keyExtractor={ item => item}
+                data = {colors}
+                renderItem = { ({ item }) => {
+                    return <View style={ {height: 100, width: 100, backgroundColor: item } } />
+                }}
+            />
+            
+        </View>
+    );
+};
+
+const randomRgb = () => {
+    const red = Math.floor(Math.random() * 256)
+    const green = Math.floor(Math.random() * 256)
+    const blue = Math.floor(Math.random() * 256)
+
+    return `rgb(${red}, ${green}, ${blue})`;
+}
+
+const styles = StyleSheet.create({
+
+});
+
+export default ColorScreen;
\ No newline at end of file

rn-started/src/screens/ComponentsScreen.js

+// Part1: Import libraries
+import React from "react";
+import { Text, StyleSheet, View } from "react-native";
+
+// Part2: Definition of components
+const ComponentsScreen = () => { //Same that: const ComponentsScreen = function() {
+    const name = "Juan Elias";
+
+    return (
+    <View>
+        <Text style={styles.titleStyle}>Getting started with React Native!</Text>
+        <Text style={styles.subtitleStyle}>My name is {name}</Text>
+    </View>
+    );
+};
+
+// Part3: Styling component
+const styles = StyleSheet.create({
+    titleStyle: {
+        fontSize: 40,
+        padding: 8
+    },
+    subtitleStyle: {
+        fontSize: 20
+    }
+});
+
+// Part4: Exposing components
+export default ComponentsScreen;
\ No newline at end of file

rn-started/src/screens/CounterScreen.js

+import React, { useState } from "react";
+import { View, Text, StyleSheet, Button } from "react-native";
+
+const CounterScreen = () => {
+    const [counter, setCounter] = useState(0)
+
+    return (
+        <View>
+            <Button
+                title="Increase"
+                onPress={ () => {
+                    setCounter(counter + 1);
+                }}
+            />
+            <Button
+                title="Decrease"
+                onPress={ () => {
+                    setCounter(counter - 1);
+                }}
+            />
+            <Text>Courrent Count: {counter}</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+
+});
+
+export default CounterScreen;
\ No newline at end of file

rn-started/src/screens/HomeScreen.js

+import React from "react";
+import { Text, StyleSheet, View, Button } from "react-native";
+// import { TouchableOpacity } from "react-native-gesture-handler";
+
+const HomeScreen = ({ navigation }) => {
+  
+  return (
+    <View>
+      <Text style={styles.text}>Hi there!</Text>
+      <Button 
+        onPress={ () => navigation.navigate('Components')}
+        title="Go to Components Demo"
+      />
+      <Button
+        title="Go to List Demo"
+        onPress={ () => navigation.navigate('List') }
+      />
+      <Button
+        title="Go to Image Demo"
+        onPress={ () => navigation.navigate('Image') }
+      />
+      <Button
+        title="Go to Counter Demo"
+        onPress={ () => navigation.navigate('Counter') }
+      />
+      <Button
+        title="Go to Colors Demo"
+        onPress={ () => navigation.navigate('Colors') }
+      />
+      <Button
+        title="Go to Square Demo"
+        onPress={ () => navigation.navigate('Square') }
+      />
+      <Button
+        title="Go to Reducer Demo"
+        onPress={ () => navigation.navigate('Reducer') }
+      />
+      <Button
+        title="Go to TextScreen Demo"
+        onPress={ () => navigation.navigate('Text') }
+      />
+      <Button
+        title="Go to Password Demo"
+        onPress={ () => navigation.navigate('Password') }
+      />
+      <Button
+        title="Go to BoxScreen Demo"
+        onPress={ () => navigation.navigate('Box ') }
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 30,
+    padding: 16
+  },
+});
+
+export default HomeScreen;

rn-started/src/screens/ImageScreen.js

+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import ImageDetail from "../components/ImageDetail";
+
+const ImageScreen = () => {
+    return (
+        <View>
+            <ImageDetail 
+                title = "Forest" 
+                imageSource = { require('../../assets/forest.jpg') }
+                score = {9}
+            />
+            <ImageDetail 
+                title = "Beach" 
+                imageSource = { require('../../assets/beach.jpg') }
+                score = {7}
+            />
+            <ImageDetail 
+                title = "Mountain" 
+                imageSource = { require('../../assets/mountain.jpg') }
+                score = {10}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+  
+});
+
+export default ImageScreen;

rn-started/src/screens/ListScreen.js

+import React from "react";
+import { View, Text, StyleSheet, FlatList} from 'react-native';
+
+const ListScreen = () => {
+    const friends = [
+        { name: "Friend #1", age: 20 },
+        { name: "Friend #2", age: 21 },
+        { name: "Friend #3", age: 22 },
+        { name: "Friend #4", age: 23 },
+        { name: "Friend #5", age: 24 },
+        { name: "Friend #6", age: 25 },
+        { name: "Friend #7", age: 26 },
+        { name: "Friend #8", age: 27 },
+        { name: "Friend #9", age: 28 }
+    ];
+    
+    return (
+        <FlatList 
+            // horizontal = {true}
+            // showsHorizontalScrollIndicator = {false}
+            keyExtractor={ (friend) => friend.name}
+            data = {friends} 
+            renderItem = { ( {item} ) => {
+                return (
+                    <Text style= {styles.textStyle}>{item.name} - Age {item.age}</Text>
+                );
+            }}
+        />
+    );
+};
+
+const styles = StyleSheet.create({
+    textStyle: {
+        marginVertical: 24
+    }
+});
+
+export default ListScreen;
\ No newline at end of file

rn-started/src/screens/PasswordScreen.js

+import React, { useState } from "react";
+import { View, Text, TextInput, StyleSheet } from "react-native";
+
+const PasswordScreen = () => {
+    const [password, setPassword] = useState("");
+
+    return (
+        <View>
+            <Text>Enter your password</Text> 
+            <TextInput
+                style = {styles.input}
+                autoCapitalize="none"
+                autoCorrect={false}
+                placeholder="Your password herer..."
+                value={password}
+                secureTextEntry={true}
+                onChangeText={ (newValue) => {
+                    setPassword(newValue); 
+                }}
+            />
+            { (password.length < 5) ? <Text>The password must contain at least 5 characters</Text> : null }
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    input: {
+        margin: 16,
+        borderColor: 'black',
+        borderWidth: 1,
+        padding: 12
+    }
+});
+
+export default PasswordScreen;
\ No newline at end of file

rn-started/src/screens/SquareScreen.js

+import React, {useState} from "react";
+import { View, StyleSheet } from "react-native";
+import ColorCounter from "../components/ColorCounter";
+
+const SquareScreen = () => {
+    const [red, setRed] = useState(0);
+    const [green, setGreen] = useState(0);
+    const [blue, setBlue] = useState(0);
+    const COLOR_INCREMENT = 5;
+    const MAX_COLOR_VALUE = 255;
+    const MIN_COLOR_VALUE = 0;
+
+    return (
+        <View>
+            <ColorCounter
+                color="Red"
+                onIncrease={() => setRed(Math.min(MAX_COLOR_VALUE, red + COLOR_INCREMENT)) }
+                onDecrease={() => setRed(Math.max(MIN_COLOR_VALUE, red - COLOR_INCREMENT))}
+            />
+            <ColorCounter 
+                color="Green"
+                onIncrease={() => setGreen(Math.min(MAX_COLOR_VALUE, green + COLOR_INCREMENT))}
+                onDecrease={() => setGreen(Math.max(MIN_COLOR_VALUE, green - COLOR_INCREMENT))}
+            />
+            <ColorCounter 
+                color="Blue"
+                onIncrease={() => setBlue(Math.min(MAX_COLOR_VALUE, blue + COLOR_INCREMENT))}
+                onDecrease={() => setBlue(Math.max(MIN_COLOR_VALUE, blue - COLOR_INCREMENT))}
+            />
+            <View style={{ margin: 20, height:100, width:100, backgroundColor: `rgb(${red}, ${green}, ${blue})`}}/>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({});
+
+export default SquareScreen;
\ No newline at end of file

rn-started/src/screens/SquareScreenReducer.js

+import React, {useReducer} from "react";
+import { View, StyleSheet } from "react-native";
+import ColorCounter from "../components/ColorCounter";
+
+const COLOR_INCREMENT = 5;
+const MAX_COLOR_VALUE = 255;
+const MIN_COLOR_VALUE = 0;
+
+const reducer = (state, action) => {
+    // state === { red: number, green: number, blue: number }
+    // action == { colorToChange: 'red' || 'green' || 'blue', amount: 15 || -15 }
+    switch (action.colorToChange) {
+        case 'red':
+            // never going to do: state.red = state.red - 15
+            return { ...state, red: Math.max(0, Math.min(255, state.red + action.amount)) }; // copies state object to a new one and modifies red value
+        case 'green':
+            return { ...state, green: Math.max(0, Math.min(255, state.green + action.amount)) };
+        case 'blue':
+            return { ...state, blue: Math.max(0, Math.min(255, state.blue + action.amount)) };
+        default:
+            return state
+    }
+};
+
+const SquareScreenReducer = () => {
+    
+    const [state, dispatch] = useReducer(reducer, {red: 0, green: 0, blue: 0})
+    const { red, green, blue } = state
+    
+    return (
+        <View>
+            <ColorCounter
+                color="Red"
+                onIncrease={() => dispatch({ colorToChange: 'red', amount: COLOR_INCREMENT}) }
+                onDecrease={() => dispatch({ colorToChange: 'red', amount: -1 * COLOR_INCREMENT}) }
+            />
+            <ColorCounter 
+                color="Green"
+                onIncrease={() => dispatch({ colorToChange: 'green', amount: COLOR_INCREMENT}) }
+                onDecrease={() => dispatch({ colorToChange: 'green', amount: -1 * COLOR_INCREMENT}) }
+            />
+            <ColorCounter 
+                color="Blue"
+                onIncrease={() => dispatch({ colorToChange: 'blue', amount: COLOR_INCREMENT}) }
+                onDecrease={() => dispatch({ colorToChange: 'blue', amount: -1 * COLOR_INCREMENT}) }
+            />
+            <View 
+                style={{ 
+                    margin: 20, 
+                    height:100, 
+                    width:100, 
+                    backgroundColor: `rgb(${red}, ${green}, ${blue})`
+                }}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({});
+
+export default SquareScreenReducer;
\ No newline at end of file

rn-started/src/screens/TextScreen.js

+import React, { useState } from "react";
+import { View, Text, StyleSheet, TextInput } from "react-native";
+
+const TextScreen = () => {
+    const [name, setName] = useState("");
+
+    return (
+        <View>
+            <Text>Enter your name</Text> 
+            <TextInput
+                style = {styles.input}
+                autoCapitalize="none"
+                autoCorrect={false}
+                placeholder="Your name herer..."
+                value={name}
+                onChangeText={ (newValue) => {
+                    setName(newValue); 
+                }}
+            />
+            <Text>My name is: {name}</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    input: {
+        margin: 16,
+        borderColor: 'black',
+        borderWidth: 1,
+        padding: 12
+    }
+});
+
+export default TextScreen;
\ No newline at end of file