├── exercises
    ├── building-a-form.js
    ├── class-components.js
    ├── styling.js
    ├── custom-component.js
    ├── capturing-taps.js
    ├── state-props.js
    ├── component-lifecycle.js
    ├── scrollable-content.js
    ├── multiple-files.js
    ├── hello-world.js
    ├── capturing-taps.md
    ├── custom-component.md
    ├── scrollable-content.md
    ├── working-with-api.js
    ├── building-a-form.md
    ├── hello-world.md
    ├── long-lists.md
    ├── state-props.md
    ├── multiple-files.md
    ├── styling.md
    ├── class-components.md
    ├── working-with-api.md
    ├── component-lifecycle.md
    └── long-lists.js
├── assets
    ├── header.png
    ├── icon.png
    ├── splash.png
    └── favicon.png
├── src
    ├── assets
    │   └── RNS.png
    ├── constants
    │   └── colors.js
    ├── util
    │   └── storage.js
    ├── screens
    │   ├── Instructions.js
    │   ├── Exercise.js
    │   ├── Welcome.js
    │   └── ExerciseList.js
    └── index.js
├── babel.config.js
├── .expo-shared
    └── assets.json
├── .gitignore
├── LICENSE.md
├── .eslintrc.js
├── metro.config.js
├── solutions
    ├── capturing-taps.final.js
    ├── multiple-files.final.js
    ├── hello-world.final.js
    ├── state-props.final.js
    ├── state-props.extra-1.js
    ├── multiple-files.component.js
    ├── capturing-taps.extra-1.js
    ├── custom-component.final.js
    ├── component-lifecycle.final.js
    ├── class-components.final.js
    ├── custom-component.extra-1.js
    ├── scrollable-content.final.js
    ├── styling.extra-1.js
    ├── styling.final.js
    ├── building-a-form.final.js
    ├── building-a-form.extra-1.js
    ├── component-lifecycle.extra-1.js
    ├── working-with-api.final.js
    ├── working-with-api.extra-1.js
    ├── working-with-api.extra-2.js
    ├── long-lists.final.js
    └── long-lists.extra-1.js
├── App.js
├── app.json
├── support
    └── component-lifecycle.js
├── package.json
├── README.md
└── Exercises.js


/exercises/building-a-form.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/exercises/class-components.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/exercises/styling.js:
--------------------------------------------------------------------------------
1 | // Styling
2 | 


--------------------------------------------------------------------------------
/assets/header.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactNativeSchool/react-native-fundamentals/HEAD/assets/header.png


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactNativeSchool/react-native-fundamentals/HEAD/assets/icon.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactNativeSchool/react-native-fundamentals/HEAD/assets/splash.png


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactNativeSchool/react-native-fundamentals/HEAD/assets/favicon.png


--------------------------------------------------------------------------------
/src/assets/RNS.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactNativeSchool/react-native-fundamentals/HEAD/src/assets/RNS.png


--------------------------------------------------------------------------------
/src/constants/colors.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   brand: "#7CA1B4",
3 |   accent: "#7cb48f",
4 |   link: "#007aff",
5 | };
6 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 |   "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
3 |   "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/**/*
 2 | .expo/*
 3 | npm-debug.*
 4 | *.jks
 5 | *.p8
 6 | *.p12
 7 | *.key
 8 | *.mobileprovision
 9 | *.orig.*
10 | web-build/
11 | 
12 | # macOS
13 | .DS_Store
14 | 


--------------------------------------------------------------------------------
/exercises/custom-component.js:
--------------------------------------------------------------------------------
1 | // Creating a Custom Component
2 | 
3 | export default () => {
4 |   // return <Button text="Hello" onPress={() => alert('hello!')} />
5 |   return null;
6 | };
7 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | This material is available for private, non-commercial use under the [GPL version 3](http://www.gnu.org/licenses/gpl-3.0-standalone.html). Questions? Contact me - spencer@handlebarlabs.com.
2 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   extends: ["handlebarlabs"],
 3 |   rules: {
 4 |     "react/style-prop-object": 0,
 5 |     "react/jsx-one-expression-per-line": 0,
 6 |     "react/no-unescaped-entities": 0,
 7 |     "no-use-before-define": 0,
 8 |   },
 9 | };
10 | 


--------------------------------------------------------------------------------
/metro.config.js:
--------------------------------------------------------------------------------
 1 | const { getDefaultConfig } = require("@expo/metro-config");
 2 | 
 3 | const defaultConfig = getDefaultConfig(__dirname);
 4 | 
 5 | module.exports = {
 6 |   resolver: {
 7 |     assetExts: [...defaultConfig.resolver.assetExts, "md"],
 8 |   },
 9 | };
10 | 


--------------------------------------------------------------------------------
/solutions/capturing-taps.final.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { View, Button } from "react-native";
 3 | 
 4 | export default () => {
 5 |   return (
 6 |     <View>
 7 |       <Button title="Button 1" onPress={() => alert("hello!")} />
 8 |     </View>
 9 |   );
10 | };
11 | 


--------------------------------------------------------------------------------
/exercises/capturing-taps.js:
--------------------------------------------------------------------------------
 1 | // Capturing User Taps
 2 | 
 3 | // TIP: Button is a component exposed by React Native. You'll import it the same way you did View
 4 | // and Text previously.
 5 | 
 6 | export default () => {
 7 |   // Replace return null with your code.
 8 |   return null;
 9 | };
10 | 


--------------------------------------------------------------------------------
/solutions/multiple-files.final.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { View } from "react-native";
 3 | import { Button } from "./multiple-files.component";
 4 | 
 5 | export default () => (
 6 |   <View style={{ marginTop: 20 }}>
 7 |     <Button text="Say hello" onPress={() => alert("hello!")} />
 8 |   </View>
 9 | );
10 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
 1 | import { LogBox } from "react-native";
 2 | import { App } from "./src/index";
 3 | 
 4 | LogBox.ignoreLogs([
 5 |   // Courier isn't used anywhere in the app. I'm not sure why it's throwing this warning.
 6 |   'fontFamily "Courier" is not a system font and has not been loaded through Font.loadAsync.',
 7 | ]);
 8 | 
 9 | export default App;
10 | 


--------------------------------------------------------------------------------
/src/util/storage.js:
--------------------------------------------------------------------------------
 1 | import AsyncStorage from "@react-native-async-storage/async-storage";
 2 | 
 3 | const PREFIX = `@@FundamentalsWrapper::`;
 4 | 
 5 | export const get = (key) => {
 6 |   return AsyncStorage.getItem(`${PREFIX}${key}`);
 7 | };
 8 | 
 9 | export const set = (key, value) => {
10 |   return AsyncStorage.setItem(`${PREFIX}${key}`, value);
11 | };
12 | 


--------------------------------------------------------------------------------
/solutions/hello-world.final.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { View, Text } from "react-native";
 3 | 
 4 | export default () => {
 5 |   return (
 6 |     <View
 7 |       style={{
 8 |         width: 100,
 9 |         height: 100,
10 |         justifyContent: "center",
11 |         alignItems: "center",
12 |         backgroundColor: "#7ce0f9",
13 |       }}
14 |     >
15 |       <Text>Hello, world!</Text>
16 |     </View>
17 |   );
18 | };
19 | 


--------------------------------------------------------------------------------
/exercises/state-props.js:
--------------------------------------------------------------------------------
 1 | // Using State and Props
 2 | 
 3 | // useState is a hook that is a named export from React.
 4 | import React from "react";
 5 | import { Text, Button, View } from "react-native";
 6 | 
 7 | export default () => {
 8 |   return (
 9 |     <View style={{ alignItems: "center", marginTop: 20 }}>
10 |       <Text>You've pressed the button: ??? time(s)</Text>
11 |       <Button title="Press me" onPress={() => {}} />
12 |     </View>
13 |   );
14 | };
15 | 


--------------------------------------------------------------------------------
/solutions/state-props.final.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import { Text, Button, View } from "react-native";
 3 | 
 4 | export default () => {
 5 |   const [pressCount, setPressCount] = useState(0);
 6 | 
 7 |   return (
 8 |     <View style={{ alignItems: "center", marginTop: 20 }}>
 9 |       <Text>You've pressed the button: {pressCount} time(s)</Text>
10 |       <Button title="Press me" onPress={() => setPressCount(pressCount + 1)} />
11 |     </View>
12 |   );
13 | };
14 | 


--------------------------------------------------------------------------------
/exercises/component-lifecycle.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import { View, Text } from "react-native";
 3 | 
 4 | import { listener, listener2 } from "../support/component-lifecycle";
 5 | 
 6 | export default () => {
 7 |   const [updateCount, setUpdateCount] = useState(0);
 8 | 
 9 |   return (
10 |     <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
11 |       <Text>The listener has updated {updateCount} time(s).</Text>
12 |     </View>
13 |   );
14 | };
15 | 


--------------------------------------------------------------------------------
/solutions/state-props.extra-1.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import { Text, Button, View } from "react-native";
 3 | 
 4 | export default () => {
 5 |   const [pressCount, setPressCount] = useState(0);
 6 | 
 7 |   return (
 8 |     <View style={{ alignItems: "center", marginTop: 20 }}>
 9 |       <Text>You've pressed the button: {pressCount} time(s)</Text>
10 |       <Button
11 |         title={`Pressed ${pressCount} time(s)`}
12 |         onPress={() => setPressCount(pressCount + 1)}
13 |       />
14 |     </View>
15 |   );
16 | };
17 | 


--------------------------------------------------------------------------------
/solutions/multiple-files.component.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { TouchableOpacity, Text } from "react-native";
 3 | 
 4 | export const Button = ({ text, onPress, buttonStyle = {} }) => (
 5 |   <TouchableOpacity
 6 |     onPress={onPress}
 7 |     style={{
 8 |       backgroundColor: "#ff637c",
 9 |       alignSelf: "center",
10 |       paddingHorizontal: 20,
11 |       paddingVertical: 10,
12 |       marginVertical: 15,
13 |       ...buttonStyle,
14 |     }}
15 |   >
16 |     <Text style={{ color: "#fff" }}>{text}</Text>
17 |   </TouchableOpacity>
18 | );
19 | 


--------------------------------------------------------------------------------
/exercises/scrollable-content.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { View, Text, StyleSheet } from "react-native";
 3 | 
 4 | const styles = StyleSheet.create({
 5 |   container: { backgroundColor: "#fff" },
 6 |   box: {
 7 |     width: 100,
 8 |     height: 100,
 9 |     justifyContent: "center",
10 |     alignItems: "center",
11 |     margin: 20,
12 |   },
13 | });
14 | 
15 | const Square = ({ text, bgColor = "#7ce0f9" }) => (
16 |   <View style={[styles.box, { backgroundColor: bgColor }]}>
17 |     <Text>{text}</Text>
18 |   </View>
19 | );
20 | 
21 | export default () => null;
22 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "react-native-fundamentals",
 4 |     "slug": "react-native-fundamentals",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/icon.png",
 8 |     "splash": {
 9 |       "image": "./assets/splash.png",
10 |       "resizeMode": "contain",
11 |       "backgroundColor": "#ffffff"
12 |     },
13 |     "updates": {
14 |       "fallbackToCacheTimeout": 0
15 |     },
16 |     "assetBundlePatterns": ["**/*"],
17 |     "ios": {
18 |       "supportsTablet": true
19 |     },
20 |     "web": {
21 |       "favicon": "./assets/favicon.png"
22 |     }
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/solutions/capturing-taps.extra-1.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { View, Button, TouchableOpacity, Text } from "react-native";
 3 | 
 4 | export default () => {
 5 |   return (
 6 |     <View>
 7 |       <Button title="Button 1" onPress={() => alert("hello!")} />
 8 |       <TouchableOpacity
 9 |         onPress={() => alert("hello 2!")}
10 |         style={{
11 |           backgroundColor: "blue",
12 |           paddingHorizontal: 10,
13 |           paddingVertical: 5,
14 |           alignSelf: "center",
15 |           marginTop: 10,
16 |         }}
17 |       >
18 |         <Text style={{ color: "white", fontSize: 18 }}>Button 2</Text>
19 |       </TouchableOpacity>
20 |     </View>
21 |   );
22 | };
23 | 


--------------------------------------------------------------------------------
/exercises/multiple-files.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { View, TouchableOpacity, Text } from "react-native";
 3 | 
 4 | export const Button = ({ text, onPress, buttonStyle = {} }) => (
 5 |   <TouchableOpacity
 6 |     onPress={onPress}
 7 |     style={{
 8 |       backgroundColor: "#ff637c",
 9 |       alignSelf: "center",
10 |       paddingHorizontal: 20,
11 |       paddingVertical: 10,
12 |       marginVertical: 15,
13 |       ...buttonStyle,
14 |     }}
15 |   >
16 |     <Text style={{ color: "#fff" }}>{text}</Text>
17 |   </TouchableOpacity>
18 | );
19 | 
20 | export default () => (
21 |   <View style={{ marginTop: 20 }}>
22 |     <Button text="Say hello" onPress={() => alert("hello!")} />
23 |   </View>
24 | );
25 | 


--------------------------------------------------------------------------------
/solutions/custom-component.final.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { TouchableOpacity, Text, View } from "react-native";
 3 | 
 4 | const Button = ({ text, onPress }) => (
 5 |   <TouchableOpacity
 6 |     onPress={onPress}
 7 |     style={{
 8 |       backgroundColor: "#ff637c",
 9 |       alignSelf: "center",
10 |       paddingHorizontal: 20,
11 |       paddingVertical: 10,
12 |       marginVertical: 15,
13 |     }}
14 |   >
15 |     <Text style={{ color: "#fff" }}>{text}</Text>
16 |   </TouchableOpacity>
17 | );
18 | 
19 | export default () => (
20 |   <View>
21 |     <Button text="Say hello" onPress={() => alert("hello!")} />
22 |     <Button text="Say goodbye" onPress={() => alert("goodbye!")} />
23 |   </View>
24 | );
25 | 


--------------------------------------------------------------------------------
/solutions/component-lifecycle.final.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import { View, Text } from "react-native";
 3 | 
 4 | import { listener } from "../support/component-lifecycle";
 5 | 
 6 | export default () => {
 7 |   const [updateCount, setUpdateCount] = useState(0);
 8 | 
 9 |   useEffect(() => {
10 |     setUpdateCount(0);
11 |     const unsubscibe = listener(() => {
12 |       setUpdateCount((value) => value + 1);
13 |     });
14 | 
15 |     return () => {
16 |       unsubscibe();
17 |     };
18 |   }, []);
19 | 
20 |   return (
21 |     <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
22 |       <Text>The listener has updated {updateCount} time(s).</Text>
23 |     </View>
24 |   );
25 | };
26 | 


--------------------------------------------------------------------------------
/solutions/class-components.final.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { View, Button, Text } from "react-native";
 3 | 
 4 | class App extends React.Component {
 5 |   constructor(props) {
 6 |     super(props);
 7 | 
 8 |     this.state = {
 9 |       pressCount: 0,
10 |     };
11 |   }
12 | 
13 |   render() {
14 |     return (
15 |       <View style={{ marginTop: 20, alignItems: "center" }}>
16 |         <Text>Press Count: {this.state.pressCount}</Text>
17 |         <Button
18 |           title="Press Me"
19 |           onPress={() =>
20 |             this.setState((state) => {
21 |               return {
22 |                 pressCount: state.pressCount + 1,
23 |               };
24 |             })
25 |           }
26 |         />
27 |       </View>
28 |     );
29 |   }
30 | }
31 | 
32 | export default App;
33 | 


--------------------------------------------------------------------------------
/support/component-lifecycle.js:
--------------------------------------------------------------------------------
 1 | export const listener = (fn = () => {}) => {
 2 |   console.log(`subscribing to listener...`);
 3 |   const interval = setInterval(() => {
 4 |     console.log(`listener updating`);
 5 |     fn();
 6 |   }, 500);
 7 | 
 8 |   return () => {
 9 |     if (interval) {
10 |       console.log(`unsubscribing from listener...`);
11 | 
12 |       clearInterval(interval);
13 |     }
14 |   };
15 | };
16 | 
17 | export const listener2 = (name, fn = () => {}) => {
18 |   console.log(`subscribing to ${name} listener...`);
19 |   const interval = setInterval(() => {
20 |     console.log(`${name} listener updating`);
21 |     fn();
22 |   }, 500);
23 | 
24 |   return () => {
25 |     if (interval) {
26 |       console.log(`unsubscribing from ${name} listener...`);
27 | 
28 |       clearInterval(interval);
29 |     }
30 |   };
31 | };
32 | 


--------------------------------------------------------------------------------
/solutions/custom-component.extra-1.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { TouchableOpacity, Text, View } from "react-native";
 3 | 
 4 | const Button = ({ text, onPress, buttonStyle = {} }) => (
 5 |   <TouchableOpacity
 6 |     onPress={onPress}
 7 |     style={{
 8 |       backgroundColor: "#ff637c",
 9 |       alignSelf: "center",
10 |       paddingHorizontal: 20,
11 |       paddingVertical: 10,
12 |       marginVertical: 15,
13 |       ...buttonStyle,
14 |     }}
15 |   >
16 |     <Text style={{ color: "#fff" }}>{text}</Text>
17 |   </TouchableOpacity>
18 | );
19 | 
20 | export default () => (
21 |   <View>
22 |     <Button text="Say hello" onPress={() => alert("hello!")} />
23 |     <Button
24 |       text="Say goodbye"
25 |       onPress={() => alert("goodbye!")}
26 |       buttonStyle={{ backgroundColor: "#4dc2c2" }}
27 |     />
28 |   </View>
29 | );
30 | 


--------------------------------------------------------------------------------
/solutions/scrollable-content.final.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { View, Text, StyleSheet, ScrollView } from "react-native";
 3 | 
 4 | const styles = StyleSheet.create({
 5 |   container: { backgroundColor: "#fff" },
 6 |   box: {
 7 |     width: 100,
 8 |     height: 100,
 9 |     justifyContent: "center",
10 |     alignItems: "center",
11 |     margin: 20,
12 |   },
13 | });
14 | 
15 | const Square = ({ text, bgColor = "#7ce0f9" }) => (
16 |   <View style={[styles.box, { backgroundColor: bgColor }]}>
17 |     <Text>{text}</Text>
18 |   </View>
19 | );
20 | 
21 | const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
22 | 
23 | export default () => {
24 |   return (
25 |     <ScrollView style={styles.container}>
26 |       {data.map((item, index) => (
27 |         <Square key={item} text={`Square ${index + 1}`} />
28 |       ))}
29 |     </ScrollView>
30 |   );
31 | };
32 | 


--------------------------------------------------------------------------------
/exercises/hello-world.js:
--------------------------------------------------------------------------------
 1 | // Hello, World!
 2 | 
 3 | // When using JSX React needs to be in scope. This means you have to import it.
 4 | // import React from "react";
 5 | 
 6 | // Unlike working with HTML, the building blocks of our UI are not global. Therefore we need to
 7 | // import them.
 8 | // import { View, Text } from "react-native";
 9 | 
10 | // TIP: A component is simply a function from which we return JSX.
11 | // const App = () => {}
12 | 
13 | // TIP: Components can nest and have children. <View><Text></Text></View>
14 | 
15 | // TIP: Styling happens via the style prop. That style, in it's most basic form, is simply an
16 | // object. style={{ ... }}
17 | 
18 | // We need to export App/Component so it's rendered on the screen. To work in this example app you
19 | // need to use export default. Dont' worry about this right now, we'll talk about it later.
20 | // export default App;
21 | 


--------------------------------------------------------------------------------
/solutions/styling.extra-1.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { View, Text, StyleSheet } from "react-native";
 3 | 
 4 | const styles = StyleSheet.create({
 5 |   container: {
 6 |     flex: 1,
 7 |     alignItems: "center",
 8 |     flexDirection: "row",
 9 |     justifyContent: "space-around",
10 |   },
11 |   box: {
12 |     width: 100,
13 |     height: 100,
14 |     justifyContent: "center",
15 |     alignItems: "center",
16 |   },
17 | });
18 | 
19 | const Square = ({ text, bgColor = "#7ce0f9" }) => (
20 |   <View style={[styles.box, { backgroundColor: bgColor }]}>
21 |     <Text>{text}</Text>
22 |   </View>
23 | );
24 | 
25 | export default () => {
26 |   return (
27 |     <View style={styles.container}>
28 |       <Square text="Square 1" />
29 |       <Square text="Square 2" bgColor="#4dc2c2" />
30 |       <Square text="Square 3" bgColor="#ff637c" />
31 |     </View>
32 |   );
33 | };
34 | 


--------------------------------------------------------------------------------
/exercises/capturing-taps.md:
--------------------------------------------------------------------------------
 1 | # Capturing Taps
 2 | 
 3 | ## Background
 4 | 
 5 | An app isn't much if a user can't interact with it. The most basic form of interaction is capturing a user's tap (or press) on a screen.
 6 | 
 7 | This is quite straight forward with built in components from React Native - most directly through the `Button` component.
 8 | 
 9 | With this component once you render it you'll then interact with it via props. Namely `title` and `onPress`.
10 | 
11 | ## Exercise
12 | 
13 | Using the `Button` component, capture a tap event and `alert` "hello".
14 | 
15 | ## Extra Credit
16 | 
17 | 1. Rather than using the `Button` component, use the `TouchableOpacity` and `Text` components to create your own with the same functionality.
18 | 
19 | ## Helpful Links
20 | 
21 | - [React Native Button Docs](https://reactnative.dev/docs/button)
22 | - [React Native TouchableOpacity Docs](https://reactnative.dev/docs/touchableopacity)
23 | 


--------------------------------------------------------------------------------
/exercises/custom-component.md:
--------------------------------------------------------------------------------
 1 | # Custom Component
 2 | 
 3 | ## Background
 4 | 
 5 | Previously we've been exclusively using component from React Native. But what about our creating our own?
 6 | 
 7 | That's one of the great things about React (Native) - how easy it is to build and reuse our own components.
 8 | 
 9 | At their core, most components use React Native primitives (the core components like `View` or `Text`), but have expanded functionality.
10 | 
11 | A component can be as simply as a function that returns JSX.
12 | 
13 | ## Exercise
14 | 
15 | Build your own button component that accepts an `onPress` and `text` prop. Use the `TouchableOpacity` and `Text` components to accomplish this.
16 | 
17 | Then, using your component, render two buttons that say different things and do different things.
18 | 
19 | ## Extra Credit
20 | 
21 | 1. Have your button accept a `buttonStyle` prop as well that will _merge_ its custom styles with your button's default styles.
22 | 


--------------------------------------------------------------------------------
/solutions/styling.final.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { View, Text, StyleSheet } from "react-native";
 3 | 
 4 | const styles = StyleSheet.create({
 5 |   container: {
 6 |     flex: 1,
 7 |     alignItems: "center",
 8 |     flexDirection: "row",
 9 |     justifyContent: "space-around",
10 |     // justifyContent: "space-between",
11 |     // justifyContent: "center",
12 |   },
13 |   box: {
14 |     width: 100,
15 |     height: 100,
16 |     justifyContent: "center",
17 |     alignItems: "center",
18 |     backgroundColor: "#7ce0f9",
19 |   },
20 | });
21 | 
22 | export default () => {
23 |   return (
24 |     <View style={styles.container}>
25 |       <View style={styles.box}>
26 |         <Text>Square 1</Text>
27 |       </View>
28 |       <View style={[styles.box, { backgroundColor: "#4dc2c2" }]}>
29 |         <Text>Square 2</Text>
30 |       </View>
31 |       <View style={[styles.box, { backgroundColor: "#ff637c" }]}>
32 |         <Text>Square 3</Text>
33 |       </View>
34 |     </View>
35 |   );
36 | };
37 | 


--------------------------------------------------------------------------------
/exercises/scrollable-content.md:
--------------------------------------------------------------------------------
 1 | # Scrollable Content
 2 | 
 3 | ## Background
 4 | 
 5 | Rarely does all of the content you want to display completely fit into the user's screen - that's where scrolling comes in.
 6 | 
 7 | We've already built components that use the `View` component. This is a fixed sized component. Fortunately React Native also has a `ScrollView` component - I'll let you guess what this does.
 8 | 
 9 | Don't worry about efficiency with large lists right now - let's just get a basic scrollable list going.
10 | 
11 | ## Exercise
12 | 
13 | Render 15 squares in a scrollable list.
14 | 
15 | **Note:** Depending on how you implement this solution you may run into a warning that "each child in a list should have a unique key..." You can safely ignore this warning for now. There's info in the "Helpful Links" section which goes into this more.
16 | 
17 | ## Helpful Links
18 | 
19 | - [ScrollView Docs](https://reactnative.dev/docs/scrollview)
20 | - [Explained: Each child in a list should have a unique "key" prop.](https://reactjs.org/docs/lists-and-keys.html#keys)
21 | 


--------------------------------------------------------------------------------
/solutions/building-a-form.final.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import { TextInput, Text, View, StyleSheet, Button } from "react-native";
 3 | 
 4 | const styles = StyleSheet.create({
 5 |   container: {
 6 |     padding: 20,
 7 |   },
 8 |   label: {
 9 |     fontWeight: "bold",
10 |     fontSize: 18,
11 |   },
12 |   input: {
13 |     marginTop: 10,
14 |     backgroundColor: "rgba(0, 0, 0, 0.1)",
15 |     padding: 10,
16 |     borderRadius: 5,
17 |   },
18 | });
19 | 
20 | export default () => {
21 |   const [name, setName] = useState("");
22 | 
23 |   return (
24 |     <View style={styles.container}>
25 |       <Text style={styles.label}>What is your name?</Text>
26 |       <TextInput
27 |         style={styles.input}
28 |         placeholder="John Doe"
29 |         placeholderTextColor="rgba(0, 0, 0, 0.5)"
30 |         onChangeText={(text) => setName(text)}
31 |       />
32 |       <Button
33 |         title="Say Hello"
34 |         onPress={() => {
35 |           alert(`Hello, ${name}!`);
36 |         }}
37 |       />
38 |     </View>
39 |   );
40 | };
41 | 


--------------------------------------------------------------------------------
/solutions/building-a-form.extra-1.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import { TextInput, Text, View, StyleSheet, Button } from "react-native";
 3 | 
 4 | const styles = StyleSheet.create({
 5 |   container: {
 6 |     padding: 20,
 7 |   },
 8 |   label: {
 9 |     fontWeight: "bold",
10 |     fontSize: 18,
11 |   },
12 |   input: {
13 |     marginTop: 10,
14 |     backgroundColor: "rgba(0, 0, 0, 0.1)",
15 |     padding: 10,
16 |     borderRadius: 5,
17 |   },
18 | });
19 | 
20 | export default () => {
21 |   const [name, setName] = useState("");
22 | 
23 |   return (
24 |     <View style={styles.container}>
25 |       <Text style={styles.label}>What is your name?</Text>
26 |       <TextInput
27 |         style={styles.input}
28 |         placeholder="John Doe"
29 |         placeholderTextColor="rgba(0, 0, 0, 0.5)"
30 |         onChangeText={(text) => setName(text)}
31 |         value={name}
32 |       />
33 |       <Button
34 |         title="Say Hello"
35 |         onPress={() => {
36 |           alert(`Hello, ${name}!`);
37 |           setName("");
38 |         }}
39 |       />
40 |     </View>
41 |   );
42 | };
43 | 


--------------------------------------------------------------------------------
/exercises/working-with-api.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { FlatList, Text, View, StyleSheet, SafeAreaView } from "react-native";
 3 | 
 4 | const styles = StyleSheet.create({
 5 |   row: {
 6 |     paddingHorizontal: 10,
 7 |     paddingVertical: 10,
 8 |   },
 9 |   name: {
10 |     fontSize: 16,
11 |   },
12 |   separator: {
13 |     backgroundColor: "rgba(0, 0, 0, 0.5)",
14 |     height: 1,
15 |   },
16 | });
17 | 
18 | export default () => {
19 |   return (
20 |     <SafeAreaView>
21 |       <FlatList
22 |         data={[
23 |           { name: { title: "Monsieur", first: "Emilio", last: "Legrand" } },
24 |           { name: { title: "Miss", first: "Linda", last: "King" } },
25 |         ]}
26 |         keyExtractor={(item) => `${item.name.first}-${item.name.last}`}
27 |         renderItem={({ item }) => {
28 |           return (
29 |             <View style={styles.row}>
30 |               <Text style={styles.name}>
31 |                 {item.name.first} {item.name.last}
32 |               </Text>
33 |             </View>
34 |           );
35 |         }}
36 |         ItemSeparatorComponent={() => <View style={styles.separator} />}
37 |       />
38 |     </SafeAreaView>
39 |   );
40 | };
41 | 


--------------------------------------------------------------------------------
/exercises/building-a-form.md:
--------------------------------------------------------------------------------
 1 | # Building a Form
 2 | 
 3 | ## Background
 4 | 
 5 | Much like you would have an `input` in html, React Native has the `TextInput` component. The big difference between the two is that, with a `TextInput`, you get no styling with it - you're responsible for it all.
 6 | 
 7 | When working with text inputs/forms in React Native you've got two ways to go about it:
 8 | 
 9 | 1. Controlled
10 | 2. Uncontrolled
11 | 
12 | Let's go with uncontrolled first. This just means that we're listening to what the user is inputting into the `TextInput` but don't control what is being displayed. We can listen to it but we can't tell it what to show.
13 | 
14 | Controlled on the other hand means that we can tell the `TextInput` what to display, much like we would a `Text` component but still let them input text through the keyboard.
15 | 
16 | ## Exercise
17 | 
18 | Using the `TextInput` component capture a user's name and, upon a button press, `alert` their name back to them. Add some style to the `TextInput` while you're there!
19 | 
20 | ## Extra Credit
21 | 
22 | 1. Upon button press clear the user's name from the `TextInput`.
23 | 
24 | ## Helpful Links
25 | 
26 | - [TextInput Docs](https://reactnative.dev/docs/textinput)
27 | 


--------------------------------------------------------------------------------
/solutions/component-lifecycle.extra-1.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import { View, Text, Button } from "react-native";
 3 | 
 4 | import { listener2 } from "../support/component-lifecycle";
 5 | 
 6 | export default () => {
 7 |   const [updateCount, setUpdateCount] = useState(0);
 8 |   const [listenerName, setListenerName] = useState("cat");
 9 | 
10 |   useEffect(() => {
11 |     setUpdateCount(0);
12 |     const unsubscibe = listener2(listenerName, () => {
13 |       setUpdateCount((value) => value + 1);
14 |     });
15 | 
16 |     return () => {
17 |       unsubscibe();
18 |     };
19 |   }, [listenerName]);
20 | 
21 |   return (
22 |     <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
23 |       <Text>The listener has updated {updateCount} time(s).</Text>
24 |       <Text>Currently listening to the {listenerName} listener.</Text>
25 | 
26 |       <Button
27 |         title="Change Listener Name"
28 |         onPress={() => {
29 |           setListenerName((value) => {
30 |             if (value === "cat") {
31 |               return setListenerName("dog");
32 |             }
33 | 
34 |             return setListenerName("cat");
35 |           });
36 |         }}
37 |       />
38 |     </View>
39 |   );
40 | };
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "main": "node_modules/expo/AppEntry.js",
 3 |   "scripts": {
 4 |     "start": "expo start",
 5 |     "android": "expo start --android",
 6 |     "ios": "expo start --ios",
 7 |     "web": "expo start --web",
 8 |     "eject": "expo eject"
 9 |   },
10 |   "dependencies": {
11 |     "@expo/metro-config": "^0.1.49",
12 |     "@react-native-async-storage/async-storage": "1.17.11",
13 |     "@react-native-community/masked-view": "0.1.10",
14 |     "@react-navigation/native": "^6.0.8",
15 |     "@react-navigation/stack": "^6.1.1",
16 |     "add": "^2.0.6",
17 |     "expo": "^48.0.0",
18 |     "expo-asset": "~8.9.0",
19 |     "expo-status-bar": "~1.4.4",
20 |     "lodash": "^4.17.19",
21 |     "react": "18.2.0",
22 |     "react-dom": "18.2.0",
23 |     "react-native": "0.71.3",
24 |     "react-native-gesture-handler": "~2.9.0",
25 |     "react-native-markdown-display": "^7.0.0-alpha.2",
26 |     "react-native-reanimated": "~2.14.4",
27 |     "react-native-safe-area-context": "4.5.0",
28 |     "react-native-screens": "~3.20.0",
29 |     "react-native-web": "~0.18.11"
30 |   },
31 |   "devDependencies": {
32 |     "@babel/core": "^7.20.0",
33 |     "babel-preset-expo": "^9.3.0",
34 |     "eslint": "^7.5.0",
35 |     "eslint-config-handlebarlabs": "^0.0.6"
36 |   },
37 |   "private": true
38 | }
39 | 


--------------------------------------------------------------------------------
/exercises/hello-world.md:
--------------------------------------------------------------------------------
 1 | # Basic Hello, World
 2 | 
 3 | ## Background
 4 | 
 5 | React Native is built on JSX. JSX is a HTML like syntax that allows us to declaratively build our UI.
 6 | 
 7 | A few important notes:
 8 | 
 9 | - Whenever you use JSX React must be in scope (that means imported in the file).
10 | - Unlike on the web, React Native components are not global. Therefore we have to import them.
11 | 
12 | You'll here me refer to components having "children" a lot. This simply means some JSX is rendered inside of other JSX, like so:
13 | 
14 | ```jsx
15 | <View>
16 |   <Text>I'm text</Text>
17 | </View>
18 | ```
19 | 
20 | You can see that different components have different children. A `View` can take another component whereas `Text` takes plain text as a child. You'll learn more about which component to use and when as we go along.
21 | 
22 | Alternatively, you can pass `props` to some components. This is simply another way of passing data to a component. For example:
23 | 
24 | ```jsx
25 | <View exampleProp="this is an example"></View>
26 | ```
27 | 
28 | You can see that I define the prop `exampleProp` and pass a value to it.
29 | 
30 | ## Exercise
31 | 
32 | Render a square with a background color. Inside of the square render the text "Hello, world".
33 | 
34 | ## Helpful Links
35 | 
36 | - [React Native View Docs](https://reactnative.dev/docs/view)
37 | - [React Native Text Docs](https://reactnative.dev/docs/text)
38 | 


--------------------------------------------------------------------------------
/solutions/working-with-api.final.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import { FlatList, Text, View, StyleSheet, SafeAreaView } from "react-native";
 3 | 
 4 | const styles = StyleSheet.create({
 5 |   row: {
 6 |     paddingHorizontal: 10,
 7 |     paddingVertical: 10,
 8 |   },
 9 |   name: {
10 |     fontSize: 16,
11 |   },
12 |   separator: {
13 |     backgroundColor: "rgba(0, 0, 0, 0.5)",
14 |     height: 1,
15 |   },
16 | });
17 | 
18 | export default () => {
19 |   const [people, setPeople] = useState([]);
20 | 
21 |   useEffect(() => {
22 |     fetch("https://randomuser.me/api/?results=100&inc=name")
23 |       .then((response) => response.json())
24 |       .then((response) => {
25 |         setPeople(response.results);
26 |       })
27 |       .catch((error) => {
28 |         console.log("error", error);
29 |         alert("Sorry, something went wrong.");
30 |       });
31 |   }, []);
32 | 
33 |   return (
34 |     <SafeAreaView>
35 |       <FlatList
36 |         data={people}
37 |         keyExtractor={(item) => `${item.name.first}-${item.name.last}`}
38 |         renderItem={({ item }) => {
39 |           return (
40 |             <View style={styles.row}>
41 |               <Text style={styles.name}>
42 |                 {item.name.first} {item.name.last}
43 |               </Text>
44 |             </View>
45 |           );
46 |         }}
47 |         ItemSeparatorComponent={() => <View style={styles.separator} />}
48 |       />
49 |     </SafeAreaView>
50 |   );
51 | };
52 | 


--------------------------------------------------------------------------------
/src/screens/Instructions.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import { ScrollView, View, StyleSheet } from "react-native";
 3 | import _ from "lodash";
 4 | import { Asset } from "expo-asset";
 5 | import Markdown from "react-native-markdown-display";
 6 | 
 7 | import exercises from "../../Exercises";
 8 | import colors from "../constants/colors";
 9 | 
10 | const mdStyles = {
11 |   heading1: {
12 |     flexDirection: "row",
13 |     fontSize: 32,
14 |     borderBottomColor: "rgba(27,31,35,.2)",
15 |     borderBottomWidth: StyleSheet.hairlineWidth,
16 |     marginBottom: 10,
17 |     paddingBottom: 5,
18 |     marginTop: 10,
19 |   },
20 |   heading2: {
21 |     flexDirection: "row",
22 |     fontSize: 24,
23 |     borderBottomColor: "rgba(27,31,35,.2)",
24 |     borderBottomWidth: StyleSheet.hairlineWidth,
25 |     paddingBottom: 5,
26 |     marginTop: 10,
27 |     marginBottom: 10,
28 |   },
29 |   fence: {
30 |     marginVertical: 10,
31 |   },
32 |   link: {
33 |     color: colors.link,
34 |   },
35 | };
36 | 
37 | export const Instructions = ({ route }) => {
38 |   const lesson = _.get(route, "params.lesson");
39 |   const [content, setContent] = useState("");
40 | 
41 |   useEffect(() => {
42 |     const getData = async () => {
43 |       const lessonData = _.find(exercises, (e) => e.lesson === lesson);
44 | 
45 |       if (lesson && lessonData) {
46 |         const src = lessonData.instructions;
47 |         let file = Asset.fromModule(src);
48 |         file = await fetch(file.uri);
49 |         file = await file.text();
50 |         setContent(file);
51 |       }
52 |     };
53 |     getData();
54 |   }, [lesson]);
55 | 
56 |   return (
57 |     <ScrollView
58 |       style={{
59 |         flex: 1,
60 |         paddingHorizontal: 20,
61 |         paddingVertical: 10,
62 |         backgroundColor: "#fff",
63 |       }}
64 |     >
65 |       <Markdown style={mdStyles} mergeStyle>
66 |         {content}
67 |       </Markdown>
68 |       <View style={{ width: 1, height: 200, backgroundColor: "transparent" }} />
69 |     </ScrollView>
70 |   );
71 | };
72 | 


--------------------------------------------------------------------------------
/exercises/long-lists.md:
--------------------------------------------------------------------------------
 1 | # Rendering Long Lists
 2 | 
 3 | ## Background
 4 | 
 5 | When you have longs lists of data the `ScrollView` component won't cut it - it's just not built for it.
 6 | 
 7 | That's where the `FlatList` and `SectionList` come into play. They're both convenience wrappers around the `VirtualizedList` component which "massively improves memory consumption and performance of large lists by maintaining a finite render window of active items and replacing all items outside of the render window with appropriately sized blank space."
 8 | 
 9 | Basically, this means that these components are only rendering what's being shown on the screen. This frees up memory.
10 | 
11 | What's the difference between a `FlatList` and a `SectionList`? A `FlatList` is going to render a simple array of data. A `SectionList` is going to render groups of data.
12 | 
13 | Given this data:
14 | 
15 | ```js
16 | [
17 |   {
18 |     id: 1,
19 |     title: "Hello",
20 |   },
21 |   {
22 |     id: 2,
23 |     title: "Good bye",
24 |   },
25 | ];
26 | ```
27 | 
28 | A `FlatList` will be your best bet.
29 | 
30 | Alternatively, given the following data:
31 | 
32 | ```js
33 | [
34 |   {
35 |     title: "Greetings",
36 |     data: [
37 |       {
38 |         id: 1,
39 |         title: "Hello",
40 |       },
41 |       {
42 |         id: 2,
43 |         title: "Hi",
44 |       },
45 |     ],
46 |   },
47 |   {
48 |     title: "Farewells",
49 |     data: [
50 |       {
51 |         id: 3,
52 |         title: "Good bye",
53 |       },
54 |       {
55 |         id: 4,
56 |         title: "See ya later",
57 |       },
58 |     ],
59 |   },
60 | ];
61 | ```
62 | 
63 | A `SectionList` will be your best bet. It's important to note that each section's list of data needs to exist on the `data` key.
64 | 
65 | ## Exercise
66 | 
67 | Render the array of people using the `FlatList` component.
68 | 
69 | ## Extra Credit
70 | 
71 | 1. Group the people based on their last name into sections and render these sections using a `SectionList`
72 | 
73 | ## Helpful Links
74 | 
75 | - [FlatList](https://reactnative.dev/docs/flatlist#docsNav)
76 | - [SectionList](https://reactnative.dev/docs/sectionlist#docsNav)
77 | 


--------------------------------------------------------------------------------
/solutions/working-with-api.extra-1.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import {
 3 |   FlatList,
 4 |   Text,
 5 |   View,
 6 |   StyleSheet,
 7 |   SafeAreaView,
 8 |   ActivityIndicator,
 9 | } from "react-native";
10 | 
11 | const styles = StyleSheet.create({
12 |   row: {
13 |     paddingHorizontal: 10,
14 |     paddingVertical: 10,
15 |   },
16 |   name: {
17 |     fontSize: 16,
18 |   },
19 |   separator: {
20 |     backgroundColor: "rgba(0, 0, 0, 0.5)",
21 |     height: 1,
22 |   },
23 |   loading: {
24 |     marginVertical: 20,
25 |   },
26 | });
27 | 
28 | export default () => {
29 |   const [people, setPeople] = useState([]);
30 |   const [loading, setLoading] = useState(true);
31 | 
32 |   useEffect(() => {
33 |     const timeout = setTimeout(() => {
34 |       fetch("https://randomuser.me/api/?results=100&inc=name")
35 |         .then((response) => response.json())
36 |         .then((response) => {
37 |           setPeople(response.results);
38 |         })
39 |         .catch((error) => {
40 |           console.log("error", error);
41 |           alert("Sorry, something went wrong.");
42 |         })
43 |         .finally(() => {
44 |           setLoading(false);
45 |         });
46 |     }, 1000);
47 | 
48 |     return () => clearTimeout(timeout);
49 |   }, []);
50 | 
51 |   return (
52 |     <SafeAreaView>
53 |       <FlatList
54 |         data={people}
55 |         keyExtractor={(item) => `${item.name.first}-${item.name.last}`}
56 |         renderItem={({ item }) => {
57 |           return (
58 |             <View style={styles.row}>
59 |               <Text style={styles.name}>
60 |                 {item.name.first} {item.name.last}
61 |               </Text>
62 |             </View>
63 |           );
64 |         }}
65 |         ItemSeparatorComponent={() => <View style={styles.separator} />}
66 |         ListEmptyComponent={() => {
67 |           if (loading) {
68 |             return (
69 |               <View style={styles.loading}>
70 |                 <ActivityIndicator size="large" />
71 |               </View>
72 |             );
73 |           }
74 | 
75 |           return null;
76 |         }}
77 |       />
78 |     </SafeAreaView>
79 |   );
80 | };
81 | 


--------------------------------------------------------------------------------
/src/screens/Exercise.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import _ from "lodash";
 3 | import {
 4 |   Text,
 5 |   View,
 6 |   SafeAreaView,
 7 |   TouchableOpacity,
 8 |   StyleSheet,
 9 |   StatusBar,
10 | } from "react-native";
11 | 
12 | import exercises from "../../Exercises";
13 | import colors from "../constants/colors";
14 | 
15 | export const Exercise = ({ navigation, route }) => {
16 |   const lesson = _.get(route, "params.lesson");
17 |   const lessonData = _.find(exercises, (e) => e.lesson === lesson);
18 |   const [tabIndex, setTabIndex] = useState(0);
19 | 
20 |   useEffect(() => {
21 |     if (!lessonData.instructions) {
22 |       navigation.setOptions({
23 |         headerRight: null,
24 |       });
25 |     }
26 |   }, []);
27 | 
28 |   if (lessonData.code && lessonData.code.length > 0) {
29 |     const Output = lessonData.code[tabIndex].source;
30 |     return (
31 |       <>
32 |         <StatusBar barStyle="dark-content" backgroundColor="#fff" />
33 | 
34 |         <View style={{ flex: 1 }}>{Output ? <Output /> : null}</View>
35 |         <SafeAreaView style={{ backgroundColor: "#fff" }}>
36 |           <View
37 |             style={{
38 |               flexDirection: "row",
39 |               justifyContent: "space-around",
40 |               borderTopWidth: StyleSheet.hairlineWidth,
41 |               borderTopColor: "rgb(216, 216, 216)",
42 |             }}
43 |           >
44 |             {lessonData.code.map((ex, index) => {
45 |               const selected = tabIndex === index;
46 |               return (
47 |                 <TouchableOpacity
48 |                   key={ex.name}
49 |                   onPress={() => setTabIndex(index)}
50 |                   style={{
51 |                     paddingVertical: 20,
52 |                     flex: 1,
53 |                     alignItems: "center",
54 |                   }}
55 |                 >
56 |                   <Text style={selected ? { color: colors.link } : {}}>
57 |                     {ex.name}
58 |                   </Text>
59 |                 </TouchableOpacity>
60 |               );
61 |             })}
62 |           </View>
63 |         </SafeAreaView>
64 |       </>
65 |     );
66 |   }
67 | 
68 |   return null;
69 | };
70 | 


--------------------------------------------------------------------------------
/solutions/working-with-api.extra-2.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import {
 3 |   FlatList,
 4 |   Text,
 5 |   View,
 6 |   StyleSheet,
 7 |   SafeAreaView,
 8 |   ActivityIndicator,
 9 | } from "react-native";
10 | 
11 | const styles = StyleSheet.create({
12 |   row: {
13 |     paddingHorizontal: 10,
14 |     paddingVertical: 10,
15 |   },
16 |   name: {
17 |     fontSize: 16,
18 |   },
19 |   separator: {
20 |     backgroundColor: "rgba(0, 0, 0, 0.5)",
21 |     height: 1,
22 |   },
23 |   loading: {
24 |     marginVertical: 20,
25 |   },
26 | });
27 | 
28 | const usePeople = () => {
29 |   const [people, setPeople] = useState([]);
30 |   const [loading, setLoading] = useState(true);
31 | 
32 |   useEffect(() => {
33 |     const timeout = setTimeout(() => {
34 |       fetch("https://randomuser.me/api/?results=100&inc=name")
35 |         .then((response) => response.json())
36 |         .then((response) => {
37 |           setPeople(response.results);
38 |         })
39 |         .catch((error) => {
40 |           console.log("error", error);
41 |           alert("Sorry, something went wrong.");
42 |         })
43 |         .finally(() => {
44 |           setLoading(false);
45 |         });
46 |     }, 1000);
47 | 
48 |     return () => clearTimeout(timeout);
49 |   }, []);
50 | 
51 |   return { people, loading };
52 | };
53 | 
54 | export default () => {
55 |   const { people, loading } = usePeople();
56 | 
57 |   return (
58 |     <SafeAreaView>
59 |       <FlatList
60 |         data={people}
61 |         keyExtractor={(item) => `${item.name.first}-${item.name.last}`}
62 |         renderItem={({ item }) => {
63 |           return (
64 |             <View style={styles.row}>
65 |               <Text style={styles.name}>
66 |                 {item.name.first} {item.name.last}
67 |               </Text>
68 |             </View>
69 |           );
70 |         }}
71 |         ItemSeparatorComponent={() => <View style={styles.separator} />}
72 |         ListEmptyComponent={() => {
73 |           if (loading) {
74 |             return (
75 |               <View style={styles.loading}>
76 |                 <ActivityIndicator size="large" />
77 |               </View>
78 |             );
79 |           }
80 | 
81 |           return null;
82 |         }}
83 |       />
84 |     </SafeAreaView>
85 |   );
86 | };
87 | 


--------------------------------------------------------------------------------
/exercises/state-props.md:
--------------------------------------------------------------------------------
 1 | # Using State and Props
 2 | 
 3 | ## Background
 4 | 
 5 | We've taken a look at props previously - props allow us to pass data down to a component to interact with it. These props can be static values or dynamic (changing) ones.
 6 | 
 7 | Where would a dynamic value come from? In React (Native) land that's where State comes in. State is a means to track a value and, upon change, tell React that something has changed and it should recompute what is being displayed on the screen.
 8 | 
 9 | The way you'll interact with state is via the `useState` hook from React.
10 | 
11 | The `useState` hook is a function that takes 1 argument - that argument is the initial value.
12 | 
13 | `useState` also returns an array of items. The first item is the value and the second value is a function that you'll call to change it.
14 | 
15 | You may be wondering why all this complexity? Can't I just define a variable and change it's value?
16 | 
17 | ```js
18 | let greeting = "hello";
19 | 
20 | const changeGreeting = () => {
21 |   greeting = "hey";
22 | };
23 | 
24 | // greeting === 'hello'
25 | changeGreeting();
26 | // greeting === 'hey'
27 | ```
28 | 
29 | You could, but then React won't know that it's changed and won't update the UI. We need to use the hook so that React can keep track of what's going on.
30 | 
31 | ```js
32 | const [greeting, setGreetingValue] = useState("hello");
33 | 
34 | const changeGreeting = () => {
35 |   setGreeting("hey");
36 | };
37 | 
38 | // greeting === 'hello'
39 | changeGreeting();
40 | // greeting === 'hey'
41 | ```
42 | 
43 | This is the most basic way (and most common way) you'll store values in a React (Native) app.
44 | 
45 | There are a few important rules when it comes to using hooks (I encourage you to read the "Introducing Hooks" article below) but you'll typically be fine if you follow these two rules:
46 | 
47 | 1. Hooks can only be used in components (functions that return JSX)
48 | 2. Hooks (like `useState`) should be initialized at the very top of the component function. They should never be conditionally called.
49 | 
50 | ## Exercise
51 | 
52 | Track how many times a user presses the button and display that number.
53 | 
54 | ## Extra Credit
55 | 
56 | 1. Dynamically update the text prop of the button as you press it.
57 | 
58 | ## Helpful Links
59 | 
60 | - [Using the State Hook](https://reactjs.org/docs/hooks-state.html)
61 | - [Introducing Hooks](https://reactjs.org/docs/hooks-intro.html)
62 | 


--------------------------------------------------------------------------------
/src/screens/Welcome.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {
 3 |   View,
 4 |   Text,
 5 |   StyleSheet,
 6 |   SafeAreaView,
 7 |   Linking,
 8 |   TouchableOpacity,
 9 |   Image,
10 |   Dimensions,
11 |   StatusBar,
12 | } from "react-native";
13 | 
14 | import colors from "../constants/colors";
15 | 
16 | const screen = Dimensions.get("screen");
17 | 
18 | const styles = StyleSheet.create({
19 |   container: {
20 |     flex: 1,
21 |     alignItems: "center",
22 |     justifyContent: "space-between",
23 |     backgroundColor: colors.brand,
24 |   },
25 |   title: {
26 |     fontWeight: "bold",
27 |     fontSize: 28,
28 |     textAlign: "center",
29 |     marginBottom: 20,
30 |     paddingHorizontal: 20,
31 |     color: "#fff",
32 |     fontFamily: "Menlo",
33 |   },
34 |   btn: {
35 |     backgroundColor: colors.accent,
36 |     alignSelf: "center",
37 |     paddingHorizontal: 20,
38 |     paddingVertical: 10,
39 |     marginTop: 10,
40 |     borderRadius: 10,
41 |     shadowColor: "black",
42 |     shadowOffset: {
43 |       width: 0,
44 |       height: 5,
45 |     },
46 |     shadowOpacity: 0.2,
47 |     shadowRadius: 5,
48 |   },
49 |   btnText: {
50 |     color: "#fff",
51 |     fontSize: 20,
52 |     fontWeight: "600",
53 |   },
54 |   logo: {
55 |     width: screen.width * 0.8,
56 |     height: screen.width * 0.8,
57 |     resizeMode: "contain",
58 |     position: "absolute",
59 |     bottom: -80,
60 |     opacity: 0.2,
61 |   },
62 |   text: {
63 |     color: "#fff",
64 |     fontWeight: "500",
65 |     fontSize: 14,
66 |   },
67 | });
68 | 
69 | export const Welcome = ({ onOnboardingComplete = () => {} }) => {
70 |   return (
71 |     <SafeAreaView style={styles.container}>
72 |       <StatusBar barStyle="light-content" backgroundColor={colors.brand} />
73 |       <View />
74 |       <View>
75 |         <Text style={styles.title}>
76 |           Welcome to the React Native Fundamentals Workshop!
77 |         </Text>
78 |         <TouchableOpacity
79 |           style={styles.btn}
80 |           onPress={() => onOnboardingComplete()}
81 |           activeOpacity={0.8}
82 |         >
83 |           <Text style={styles.btnText}>Get Started</Text>
84 |         </TouchableOpacity>
85 |       </View>
86 |       <Image style={styles.logo} source={require("../assets/RNS.png")} />
87 |       <Text
88 |         style={styles.text}
89 |         onPress={() => Linking.openURL("https://reactnativeschool.com")}
90 |       >
91 |         Prepared by React Native School
92 |       </Text>
93 |     </SafeAreaView>
94 |   );
95 | };
96 | 


--------------------------------------------------------------------------------
/exercises/multiple-files.md:
--------------------------------------------------------------------------------
 1 | # Splitting Code into Multiple Files
 2 | 
 3 | ## Background
 4 | 
 5 | In React Native we leverage JavaScript Modules. These allow us to export code from one file and import it into another file.
 6 | 
 7 | You've actually been using them already! In all of your exercise files you've had to have `export default` at the end of the file so the app picks up your changes. That's modules in action!
 8 | 
 9 | That brings us to our first point - how to get code _out_ of a file. That's where the `export` keyword comes in. Using this keyword means that you're allowing other files to import that function.
10 | 
11 | There are two approaches with exports - default and named.
12 | 
13 | With a default export you can only export one thing from that file. This would look like:
14 | 
15 | ```js
16 | const sayHello = () => console.log("hello!");
17 | 
18 | export default sayHello;
19 | ```
20 | 
21 | Alternatively there are named exports. With named exports you can export multiple functions.
22 | 
23 | ```js
24 | export const sayHello = () => console.log("hello!");
25 | export const sayGoodbye = () => console.log("good bye!");
26 | ```
27 | 
28 | All I had to do was place the `export` keyword in from out my function definition.
29 | 
30 | Okay, so how do we get that code in another file? By using the `import` keyword!
31 | 
32 | Say we want to get a default export - we would use
33 | 
34 | ```js
35 | import sayHello from "./conversations";
36 | ```
37 | 
38 | What I've done here is used the import keyword, applied a name to the function (this doesn't have to match the name of the function that was exported), and then I specify from where that code is.
39 | 
40 | Looking at named imports.
41 | 
42 | ```js
43 | import { sayHello, sayGoodbye } from "./conversations";
44 | ```
45 | 
46 | It's very similar. This time however the names of the exported functions matter.
47 | 
48 | It's also important to note that the path (the part after `from`) is relative. That means that that you need to specify the path from the file that you're importing from to the file that is exporting.
49 | 
50 | The above examples illustrate if the exporting file was right next to the file that is importing.
51 | 
52 | If it was in a directory above you would use `import sayHello from '../conversations';` (the `..` mean go "up" a directory).
53 | 
54 | Or if it was nested in another directory `import sayHello from './utility/conversations';`.
55 | 
56 | ## Exercise
57 | 
58 | Take the `Button` component and put it in it's own file then import the component from that file.
59 | 
60 | ## Helpful Links
61 | 
62 | - [JavaScript modules in depth](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
63 | 


--------------------------------------------------------------------------------
/exercises/styling.md:
--------------------------------------------------------------------------------
 1 | # Styling
 2 | 
 3 | ## Background
 4 | 
 5 | If you're familiar with CSS-in-JS you should be able to fall right into styling in React Native as it follows the same principles. If not, no worries.
 6 | 
 7 | React Native has just about all the CSS properties you would expect. The only difference is that rather than using dashes (-) it uses camel case. For example:
 8 | 
 9 | `background-color` becomes `backgroundColor`.
10 | 
11 | So what does this look like in practice? Let's look at an inline style:
12 | 
13 | `<View style={{ backgroundColor: 'red', width: 100, height: 100 }} />`
14 | 
15 | This works fine but what if you want to reuse this style? Just assign it to a variable!
16 | 
17 | ```jsx
18 | const box = { backgroundColor: 'red', width: 100, height: 100 }
19 | 
20 | <View style={style.box} />
21 | ```
22 | 
23 | This works perfectly well but more often than not you'll see the React Native `StyleSheet` API used to encapsulate styles, like so:
24 | 
25 | ```jsx
26 | import { StyleSheet } from 'react-native';
27 | const styles = StyleSheet.create({
28 |   box: { backgroundColor: 'red', width: 100, height: 100 }
29 | })
30 | 
31 | <View style={styles.box} />
32 | ```
33 | 
34 | This creates a reference to your style rather than a defined object leading to potentially better performance as you reuse styles.
35 | 
36 | One interesting thing with styles is how you override them.
37 | 
38 | Much like css where you can "stack" styles and they'll override each other, you can do the same in React Native by passing an array to the `style` prop. The last items in the array will override properties defined previously.
39 | 
40 | ```jsx
41 | import { StyleSheet } from 'react-native';
42 | const styles = StyleSheet.create({
43 |   box: { backgroundColor: 'red', width: 100, height: 100 },
44 |   boxBlue: { backgroundColor: 'blue' }
45 | })
46 | 
47 | <View style={[styles.box, styles.boxBlue]} />
48 | ```
49 | 
50 | First, styles are simply objects (as you may have seen in previous lessons). This
51 | 
52 | What about layout?
53 | 
54 | React Native uses Flexbox for laying out content.
55 | 
56 | This is a whole topic in itself and I've found it's something that you just master over time. A few properties that I constantly use:
57 | 
58 | 1. `flex`
59 | 2. `justifyContent`
60 | 3. `alignItems`
61 | 4. `flexDirection`
62 | 
63 | The "Layout with Flexbox" goes into details on these - use that page for reference as you go through the exercise.
64 | 
65 | ## Exercise
66 | 
67 | Create 3 squares that are vertically and horizontally centered. Each square should have a unique background color but all shared styles should only be defined once.
68 | 
69 | ## Extra Credit
70 | 
71 | 1. Simplify your code by creating a `Square` component.
72 | 
73 | ## Helpful Links
74 | 
75 | - [StyleSheet API Documentation](https://reactnative.dev/docs/stylesheet)
76 | - [Layout with Flexbox](https://reactnative.dev/docs/flexbox)
77 | 


--------------------------------------------------------------------------------
/exercises/class-components.md:
--------------------------------------------------------------------------------
 1 | # Class Based Components
 2 | 
 3 | ## Background
 4 | 
 5 | Throughout this workshop we've been using functional components. In reality, this is what you'll most likely be writing.
 6 | 
 7 | BUT they're a somewhat new concept. That means that some older tutorials/documentation will use the previous API - class components.
 8 | 
 9 | This API is still perfectly valid and will continue to be supported. Sometimes I still write them because I find it easier to reason about certain problems using that API.
10 | 
11 | With that said I wanted to make sure I introduce this API to you.
12 | 
13 | React class components use the `class` keyword and extend a `React.Component`.
14 | 
15 | ```jsx
16 | import React from "react";
17 | 
18 | class Example extends React.Component {}
19 | 
20 | export default Example;
21 | ```
22 | 
23 | Since we're extending `React.Component` we can specify implementations of our component. The major one is `render`. This is where we render the component the user will interact with.
24 | 
25 | ```jsx
26 | import React from "react";
27 | import { View, Text } from "react-native";
28 | 
29 | class Example extends React.Component {
30 |   render() {
31 |     return (
32 |       <View>
33 |         <Text>Hello!</Text>
34 |       </View>
35 |     );
36 |   }
37 | }
38 | 
39 | export default Example;
40 | ```
41 | 
42 | Tracking and using component state is also different.
43 | 
44 | ```jsx
45 | import React from "react";
46 | import { View, Text } from "react-native";
47 | 
48 | class Example extends React.Component {
49 |   constructor(props) {
50 |     super(props);
51 | 
52 |     this.state = {
53 |       text: "Hello",
54 |     };
55 |   }
56 |   render() {
57 |     return (
58 |       <View>
59 |         <Text>{this.state.text}!</Text>
60 |       </View>
61 |     );
62 |   }
63 | }
64 | 
65 | export default Example;
66 | ```
67 | 
68 | We initialize it in a `constructor` and then access it in our component via `this.state`.
69 | 
70 | > Note: The super(props) is just some syntax you have to write. The official docs cover this in more detail.
71 | 
72 | Now changing state is also different.
73 | 
74 | You _never_ want to modify a value directly like so `this.state.text = 'goodbye'`. This will circumvent the React re-rendering engine and cause all kinds of problems.
75 | 
76 | Rather, you will change state via `this.setState({ text: "goodbye" })`.
77 | 
78 | `this.setState` is available because our component extends `React.Component` and will then modify `this.state` and ensure our component re-renders.
79 | 
80 | ## Exercise
81 | 
82 | Using the `React.Component` render a screen that has a button. Count each time the button has been pressed and store it in state.
83 | 
84 | ## Helpful Links
85 | 
86 | - [React.Component Docs](https://reactjs.org/docs/react-component.html)
87 | - [JavaScript Class Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
88 | 


--------------------------------------------------------------------------------
/exercises/working-with-api.md:
--------------------------------------------------------------------------------
 1 | # Working with a Remote API
 2 | 
 3 | ## Background
 4 | 
 5 | Just like a web browser, React Native implements the `fetch` and `XMLHttpRequest` APIs. This means that the same logic and packages we would use to fetch data in a web browser will work in React Native. We'll just be talking about the `fetch` API here.
 6 | 
 7 | `fetch` does what it sounds like - it let's you fetch a value from somewhere else. When this happens it takes some amount of time to make the request and get the result. This is called an asynchronous action. The way that `fetch` handles these is via a Promise.
 8 | 
 9 | Essentially we say "get me the data and then once I have the data continue on". In code this looks like:
10 | 
11 | ```js
12 | fetch("https://example.com")
13 |   .then((response) => response.json())
14 |   .then((response) => console.log(response));
15 | ```
16 | 
17 | So what's happening there?
18 | 
19 | Well we make a fetch to "https://example.com". Then when we get a response we convert that response to JSON (you can convert it other ways if it's not a JSON response you're getting). Then we log the value.
20 | 
21 | Whenever you use a promise it's important to catch and handle any errors as well. That results in the following code.
22 | 
23 | ```js
24 | fetch("https://example.com")
25 |   .then((response) => response.json())
26 |   .then((response) => console.log(response))
27 |   .catch((error) => console.log("error", error));
28 | ```
29 | 
30 | How do you actually request the data though?
31 | 
32 | You could do it on a button press
33 | 
34 | ```js
35 | onPress = () => {
36 |   fetch("https://example.com")
37 |     .then((response) => response.json())
38 |     .then((response) => console.log(response))
39 |     .catch((error) => console.log("error", error));
40 | };
41 | ```
42 | 
43 | but what about making a request for data when the pages loads? The `useEffect` hook is great for this. Here's some code that would fetch data on page load:
44 | 
45 | ```js
46 | useEffect(() => {
47 |   fetch("https://example.com")
48 |     .then((response) => response.json())
49 |     .then((response) => console.log(response))
50 |     .catch((error) => console.log("error", error));
51 | }, []);
52 | ```
53 | 
54 | The first argument to `useEffect` is the function that should be called. The second argument, the empty array, is any dependencies that would cause that function (the effect) to re-run. Since we only want to call this when the page initially loads we pass it an empty array.
55 | 
56 | ## Exercise
57 | 
58 | Fetch data from the `https://randomuser.me/api/?results=100&inc=name` url (it returns JSON) and render it in the `FlatList`.
59 | 
60 | ## Extra Credit
61 | 
62 | 1. Implement a loading state while waiting for the data to download.
63 | 2. Package your data fetching code into a custom hook so it's easily reusable.
64 | 
65 | ## Helpful Links
66 | 
67 | - [Fetch API Docs](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
68 | - [Promise Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
69 | - [useEffect Hook Docs](https://reactjs.org/docs/hooks-reference.html#useeffect)
70 | - [useState Hook Docs](https://reactjs.org/docs/hooks-reference.html#usestate)
71 | 


--------------------------------------------------------------------------------
/exercises/component-lifecycle.md:
--------------------------------------------------------------------------------
 1 | # Component Lifecycle
 2 | 
 3 | ## Background
 4 | 
 5 | A component has a lifecycle, much like we do.
 6 | 
 7 | They're born (mount).
 8 | 
 9 | Things change (update).
10 | 
11 | And then they die (unmount).
12 | 
13 | Sometimes we need to take actions based on where the component is in the lifecycle.
14 | 
15 | The way we do this is via the `useEffect` hook from React, which we've previously discussed. If we write the following code:
16 | 
17 | ```js
18 | useEffect(() => {
19 |   console.log("hello");
20 | }, []);
21 | ```
22 | 
23 | We'll see "hello" logged when the component mounts (is born) and no other time.
24 | 
25 | What if we want to say goodbye when the component is about to unmount (die)?
26 | 
27 | ```js
28 | useEffect(() => {
29 |   console.log('hello')
30 | 
31 |   return () => {
32 |     console.log('goodbye)
33 |   }
34 | }, [])
35 | ```
36 | 
37 | If we return a function from a hook it will be called when that component unmounts.
38 | 
39 | Now, the statements above are only true because I'm passed an empty array as a second argument to `useEffect`. This means that this component has no dependencies that would cause it to re-run - it only happens when it mounts.
40 | 
41 | What if we want to log a message when someone changes a value in state? Well we would pass that value as a dependency.
42 | 
43 | ```js
44 | const [count, setCount] = useState(0);
45 | 
46 | useEffect(() => {
47 |   if (count % 2) {
48 |     console.log("an even number, nice!");
49 |   } else {
50 |     console.log("an odd one, eh?");
51 |   }
52 | }, [count]);
53 | ```
54 | 
55 | In this case, each time the `count` value changes our effect will re-run and log a unique message depending on if the new value is even or odd.
56 | 
57 | If you were to return a function from this effect it will be called each time that `count` changes as well.
58 | 
59 | ```js
60 | const [count, setCount] = useState(0);
61 | 
62 | useEffect(() => {
63 |   if (count % 2) {
64 |     console.log("an even number, nice!");
65 |   } else {
66 |     console.log("an odd one, eh?");
67 |   }
68 | 
69 |   return () => {
70 |     console.log("oh the count changed!");
71 |   };
72 | }, [count]);
73 | ```
74 | 
75 | A common use case for this is listeners. Say you have a chat app and when you're in a room you want to listen to all the new messages but once you leave that room you don't need to listen to the new messages there.
76 | 
77 | That brings me to the exercise for this lesson. You'll see that you're importing a `listener` function. This function, once started, will periodically console.log some text. It also returns an `unsubscribe` function that allows you to stop that logging.
78 | 
79 | ## Exercise
80 | 
81 | Upon component mount, start listening to the `listener`. Store in state how many times it has been called. When leaving the exercise screen and going back to the exercise list screen the listener should stop.
82 | 
83 | ## Extra Credit
84 | 
85 | 1. While the component is still mounted, create a way to let you unsubscribe from one listener and subscribe to a new one. When doing so the old listener should unsubscribe and no long be running.
86 | 
87 | ## Helpful Links
88 | 
89 | - [Effect Hook](https://reactjs.org/docs/hooks-overview.html#effect-hook)
90 | - [Using the Effect Hook](https://reactjs.org/docs/hooks-effect.html)
91 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import { NavigationContainer } from "@react-navigation/native";
  3 | import { createStackNavigator } from "@react-navigation/stack";
  4 | import { StatusBar } from "expo-status-bar";
  5 | import { Button, View, TouchableOpacity } from "react-native";
  6 | import _ from "lodash";
  7 | import { Entypo } from "@expo/vector-icons";
  8 | 
  9 | import { Welcome } from "./screens/Welcome";
 10 | import { ExerciseList } from "./screens/ExerciseList";
 11 | import { Exercise } from "./screens/Exercise";
 12 | import { Instructions } from "./screens/Instructions";
 13 | import { get, set } from "./util/storage";
 14 | import colors from "./constants/colors";
 15 | 
 16 | const AppStack = createStackNavigator();
 17 | const Main = () => (
 18 |   <AppStack.Navigator screenOptions={{ headerBackTitleVisible: false }}>
 19 |     <AppStack.Screen
 20 |       name="ExerciseList"
 21 |       component={ExerciseList}
 22 |       options={{ title: "Exercises" }}
 23 |     />
 24 |     <AppStack.Screen
 25 |       name="Exercise"
 26 |       component={Exercise}
 27 |       options={({ navigation, route }) => ({
 28 |         title: route.params.title,
 29 |         headerRight: () => {
 30 |           const lesson = _.get(route, "params.lesson");
 31 | 
 32 |           return (
 33 |             <View style={{ paddingRight: 10 }}>
 34 |               <Button
 35 |                 title="Instructions"
 36 |                 onPress={() => navigation.push("Instructions", { lesson })}
 37 |               />
 38 |             </View>
 39 |           );
 40 |         },
 41 |       })}
 42 |     />
 43 |   </AppStack.Navigator>
 44 | );
 45 | 
 46 | const RootStack = createStackNavigator();
 47 | const Root = () => {
 48 |   const [onboardingComplete, setOnboardingComplete] = useState();
 49 | 
 50 |   useEffect(() => {
 51 |     get("ONBOARDING_COMPLETE").then((onboarded) => {
 52 |       if (onboarded) {
 53 |         setOnboardingComplete(true);
 54 |       } else {
 55 |         setOnboardingComplete(false);
 56 |       }
 57 |     });
 58 |   }, []);
 59 | 
 60 |   if (onboardingComplete === undefined) {
 61 |     return null;
 62 |   }
 63 | 
 64 |   if (!onboardingComplete) {
 65 |     return (
 66 |       <Welcome
 67 |         onOnboardingComplete={() => {
 68 |           set("ONBOARDING_COMPLETE", "true");
 69 |           setOnboardingComplete(true);
 70 |         }}
 71 |       />
 72 |     );
 73 |   }
 74 | 
 75 |   return (
 76 |     <RootStack.Navigator
 77 |       screenOptions={{
 78 |         headerShown: false,
 79 |         headerBackTitleVisible: false,
 80 |         presentation: "modal",
 81 |       }}
 82 |     >
 83 |       <RootStack.Screen name="Main" component={Main} />
 84 |       <RootStack.Screen
 85 |         name="Instructions"
 86 |         component={Instructions}
 87 |         options={({ navigation }) => ({
 88 |           headerShown: true,
 89 |           title: "Instructions",
 90 |           headerLeft: null,
 91 |           headerRight: () => {
 92 |             return (
 93 |               <TouchableOpacity
 94 |                 onPress={() => navigation.pop()}
 95 |                 style={{ paddingHorizontal: 10 }}
 96 |               >
 97 |                 <Entypo name="cross" size={32} color={colors.link} />
 98 |               </TouchableOpacity>
 99 |             );
100 |           },
101 |         })}
102 |       />
103 |     </RootStack.Navigator>
104 |   );
105 | };
106 | 
107 | export const App = () => (
108 |   <NavigationContainer>
109 |     <StatusBar style="auto" />
110 |     <Root />
111 |   </NavigationContainer>
112 | );
113 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <a href="https://www.reactnativeschool.com/react-native-fundamentals-workshop/" target="_blank">
 2 |   <img src="./assets/header.png" alt="React Native Fundamentals" />
 3 | </div>
 4 | 
 5 | # React Native Fundamentals
 6 | 
 7 | This [self-guided workshop](https://www.reactnativeschool.com/react-native-fundamentals-workshop/) aims to get you up and running with React Native and understand the fundamentals.
 8 | 
 9 | Prepared by [React Native School](https://www.reactnativeschool.com/).
10 | 
11 | ## Helpful Links
12 | 
13 | If at any point you feel lost or like you're missing "something" outside of the scope of the lessons please check out these articles to help fill any gaps.
14 | 
15 | Each lesson also provides links to further your knowledge on the topic at hand.
16 | 
17 | - [JavaScript Essentials](https://www.reactnativeschool.com/javascript-essentials)
18 | - [A Brief Overview of ES6 for React Native Developers](https://www.reactnativeschool.com/a-brief-overview-of-es6-for-react-native-developers)
19 | - [JSX In Depth](https://reactjs.org/docs/jsx-in-depth.html)
20 | 
21 | ## System Setup
22 | 
23 | We'll be leveraging [Expo](https://expo.io/) in this workshop. It makes React Native development very easy to get started with (it also provides a great way to build large React Native apps as well).
24 | 
25 | Follow the [Expo installation documentation](https://expo.io/learn) for your machine. Once complete, you should have Expo installed on your computer and the app installed on your phone.
26 | 
27 | You'll also want to [install Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git).
28 | 
29 | Once complete the following tools should be available on your system.
30 | 
31 | - Node
32 | - npm
33 | - Git
34 | - Expo
35 | 
36 | You can check installation by running the following commands:
37 | 
38 | ```
39 | node --version
40 | npm --version
41 | git --version
42 | expo --version
43 | ```
44 | 
45 | ## Project Setup
46 | 
47 | From the command line, run the following commands.
48 | 
49 | ```
50 | git clone https://github.com/ReactNativeSchool/react-native-fundamentals.git
51 | cd react-native-fundamentals
52 | npm install
53 | ```
54 | 
55 | ## Running the App
56 | 
57 | With the project installed you can start the project by running `npm start`.
58 | 
59 | This will output a QR code in your terminal which you can scan from the Expo app (Android) or the Camera app (iOS).
60 | 
61 | - [Expo iOS App](https://itunes.apple.com/app/apple-store/id982107779)
62 | - [Expo Android App](https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=www)
63 | 
64 | Once that is complete shake your device (yes, physically shake it) at which point a menu should pop up.
65 | 
66 | Make sure that Fast Refresh is enabled.
67 | 
68 | With this complete the app will now refresh with the latest code any time you save a file.
69 | 
70 | ## Exercises
71 | 
72 | You can find a pre-made file for each exercise in the `exercises` directory. Each exercise has a `.js` file and `.md` file. The `.md` files will give you context about what you're doing and give you the exercise(s). The `.js` file will be where you do your work.
73 | 
74 | > Important: Make sure you use `export default` from the exercise js file so that the app can pick up your code.
75 | 
76 | You can find solutions for each exercise in the `solutions` folder (they use the same file name).
77 | 
78 | 1. [Exercise 1 - Hello, World!](./exercises/hello-world.md)
79 | 2. [Exercise 2 - Capturing Taps](./exercises/capturing-taps.md)
80 | 3. [Exercise 3 - Building a Custom Component](./exercises/custom-component.md)
81 | 4. [Exercise 4 - State & Props](./exercises/state-props.md)
82 | 5. [Exercise 5 - Styling](./exercises/styling.md)
83 | 6. [Exercise 6 - Scrolling Content](./exercises/scrollable-content.md)
84 | 7. [Exercise 7 - Building a Form](./exercises/building-a-form.md)
85 | 8. [Exercise 8 - Long Scrolling Lists](./exercises/long-lists.md)
86 | 9. [Exercise 9 - Working with Remote APIs](./exercises/working-with-api.md)
87 | 10. [Exercise 10 - Splitting Code into Multiple Files](./exercises/multiple-files.md)
88 | 11. [Exercise 11 - Class Components](./exercises/class-components.md)
89 | 12. [Exercise 12 - Component Lifecycle](./exercises/component-lifecycle.md)
90 | 
91 | ## Credit
92 | 
93 | This workshop (concept and structure) is heavily inspired by Kent C. Dodds' [React Fundamentals](https://github.com/kentcdodds/react-fundamentals) workshop. Thank you for putting it together and sharing it publicly.
94 | 
95 | [Kent's React Fundamentals Workshop](https://kentcdodds.com/workshops/react-fundamentals)
96 | 


--------------------------------------------------------------------------------
/Exercises.js:
--------------------------------------------------------------------------------
  1 | export default [
  2 |   {
  3 |     lesson: "hello-world",
  4 |     title: "Hello, world!",
  5 |     code: [
  6 |       {
  7 |         name: "Exercise",
  8 |         source: require("./exercises/hello-world").default,
  9 |       },
 10 |       {
 11 |         name: "Final",
 12 |         source: require("./solutions/hello-world.final").default,
 13 |       },
 14 |     ],
 15 |     instructions: require("./exercises/hello-world.md"),
 16 |   },
 17 |   {
 18 |     lesson: "capturing-taps",
 19 |     title: "Capturing Taps",
 20 |     code: [
 21 |       {
 22 |         name: "Exercise",
 23 |         source: require("./exercises/capturing-taps.js").default,
 24 |       },
 25 |       {
 26 |         name: "Final",
 27 |         source: require("./solutions/capturing-taps.final").default,
 28 |       },
 29 |       {
 30 |         name: "Extra 1",
 31 |         source: require("./solutions/capturing-taps.extra-1").default,
 32 |       },
 33 |     ],
 34 |     instructions: require("./exercises/capturing-taps.md"),
 35 |   },
 36 |   {
 37 |     lesson: "custom-component",
 38 |     title: "Custom Component",
 39 |     code: [
 40 |       {
 41 |         name: "Exercise",
 42 |         source: require("./exercises/custom-component").default,
 43 |       },
 44 |       {
 45 |         name: "Final",
 46 |         source: require("./solutions/custom-component.final").default,
 47 |       },
 48 |       {
 49 |         name: "Extra 1",
 50 |         source: require("./solutions/custom-component.extra-1").default,
 51 |       },
 52 |     ],
 53 |     instructions: require("./exercises/custom-component.md"),
 54 |   },
 55 |   {
 56 |     lesson: "state-props",
 57 |     title: "State & Props",
 58 |     code: [
 59 |       { name: "Exercise", source: require("./exercises/state-props").default },
 60 |       {
 61 |         name: "Final",
 62 |         source: require("./solutions/state-props.final").default,
 63 |       },
 64 |       {
 65 |         name: "Extra 1",
 66 |         source: require("./solutions/state-props.extra-1").default,
 67 |       },
 68 |     ],
 69 |     instructions: require("./exercises/state-props.md"),
 70 |   },
 71 |   {
 72 |     lesson: "styling",
 73 |     title: "Styling",
 74 |     code: [
 75 |       { name: "Exercise", source: require("./exercises/styling").default },
 76 |       { name: "Final", source: require("./solutions/styling.final").default },
 77 |       {
 78 |         name: "Extra 1",
 79 |         source: require("./solutions/styling.extra-1").default,
 80 |       },
 81 |     ],
 82 |     instructions: require("./exercises/styling.md"),
 83 |   },
 84 |   {
 85 |     lesson: "scrollable-content",
 86 |     title: "Scrollable Content",
 87 |     code: [
 88 |       {
 89 |         name: "Exercise",
 90 |         source: require("./exercises/scrollable-content").default,
 91 |       },
 92 |       {
 93 |         name: "Final",
 94 |         source: require("./solutions/scrollable-content.final").default,
 95 |       },
 96 |     ],
 97 |     instructions: require("./exercises/scrollable-content.md"),
 98 |   },
 99 |   {
100 |     lesson: "building-a-form",
101 |     title: "Building a Form",
102 |     code: [
103 |       {
104 |         name: "Exercise",
105 |         source: require("./exercises/building-a-form").default,
106 |       },
107 |       {
108 |         name: "Final",
109 |         source: require("./solutions/building-a-form.final").default,
110 |       },
111 |       {
112 |         name: "Extra 1",
113 |         source: require("./solutions/building-a-form.extra-1").default,
114 |       },
115 |     ],
116 |     instructions: require("./exercises/building-a-form.md"),
117 |   },
118 |   {
119 |     lesson: "long-lists",
120 |     title: "Long Lists",
121 |     code: [
122 |       {
123 |         name: "Exercise",
124 |         source: require("./exercises/long-lists").default,
125 |       },
126 |       {
127 |         name: "Final",
128 |         source: require("./solutions/long-lists.final").default,
129 |       },
130 |       {
131 |         name: "Extra 1",
132 |         source: require("./solutions/long-lists.extra-1").default,
133 |       },
134 |     ],
135 |     instructions: require("./exercises/long-lists.md"),
136 |   },
137 |   {
138 |     lesson: "working-with-api",
139 |     title: "Working with an API",
140 |     code: [
141 |       {
142 |         name: "Exercise",
143 |         source: require("./exercises/working-with-api").default,
144 |       },
145 |       {
146 |         name: "Final",
147 |         source: require("./solutions/working-with-api.final").default,
148 |       },
149 |       {
150 |         name: "Extra 1",
151 |         source: require("./solutions/working-with-api.extra-1").default,
152 |       },
153 |       {
154 |         name: "Extra 2",
155 |         source: require("./solutions/working-with-api.extra-2").default,
156 |       },
157 |     ],
158 |     instructions: require("./exercises/working-with-api.md"),
159 |   },
160 |   {
161 |     lesson: "multiple-files",
162 |     title: "Mulitple Files",
163 |     code: [
164 |       {
165 |         name: "Exercise",
166 |         source: require("./exercises/multiple-files").default,
167 |       },
168 |       {
169 |         name: "Final",
170 |         source: require("./solutions/multiple-files.final").default,
171 |       },
172 |     ],
173 |     instructions: require("./exercises/multiple-files.md"),
174 |   },
175 |   {
176 |     lesson: "class-components",
177 |     title: "Class Components",
178 |     code: [
179 |       {
180 |         name: "Exercise",
181 |         source: require("./exercises/class-components").default,
182 |       },
183 |       {
184 |         name: "Final",
185 |         source: require("./solutions/class-components.final").default,
186 |       },
187 |     ],
188 |     instructions: require("./exercises/class-components.md"),
189 |   },
190 |   {
191 |     lesson: "component-lifecycle",
192 |     title: "Component Lifecycle",
193 |     code: [
194 |       {
195 |         name: "Exercise",
196 |         source: require("./exercises/component-lifecycle").default,
197 |       },
198 |       {
199 |         name: "Final",
200 |         source: require("./solutions/component-lifecycle.final").default,
201 |       },
202 |       {
203 |         name: "Extra 1",
204 |         source: require("./solutions/component-lifecycle.extra-1").default,
205 |       },
206 |     ],
207 |     instructions: require("./exercises/component-lifecycle.md"),
208 |   },
209 | ];
210 | 


--------------------------------------------------------------------------------
/src/screens/ExerciseList.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import {
  3 |   View,
  4 |   Text,
  5 |   TouchableOpacity,
  6 |   StyleSheet,
  7 |   SectionList,
  8 |   StatusBar,
  9 |   Linking,
 10 | } from "react-native";
 11 | import { Entypo } from "@expo/vector-icons";
 12 | import _ from "lodash";
 13 | 
 14 | import _exercises from "../../Exercises";
 15 | import { get, set } from "../util/storage";
 16 | import colors from "../constants/colors";
 17 | 
 18 | const exercises = _.map(_exercises, (exercise, index) => ({
 19 |   exerciseNumber: index,
 20 |   ...exercise,
 21 | }));
 22 | 
 23 | const styles = StyleSheet.create({
 24 |   row: {
 25 |     backgroundColor: "#fff",
 26 |     flex: 1,
 27 |     paddingLeft: 20,
 28 |     paddingRight: 10,
 29 |     paddingVertical: 15,
 30 |     flexDirection: "row",
 31 |     justifyContent: "space-between",
 32 |     alignItems: "center",
 33 |   },
 34 |   separator: {
 35 |     flex: 1,
 36 |     height: 1,
 37 |     backgroundColor: "rgba(27,31,35,.05)",
 38 |   },
 39 |   headerText: {
 40 |     fontWeight: "bold",
 41 |     fontSize: 16,
 42 |     color: "rgba(0, 0, 0, 0.9)",
 43 |   },
 44 |   titleText: {
 45 |     fontSize: 15,
 46 |     marginTop: 1,
 47 |     color: "rgba(0, 0, 0, 0.9)",
 48 |   },
 49 |   left: {
 50 |     flexDirection: "row",
 51 |     alignItems: "center",
 52 |   },
 53 |   radio: {
 54 |     width: 20,
 55 |     height: 20,
 56 |     borderColor: "rgb(216, 216, 216)",
 57 |     borderWidth: StyleSheet.hairlineWidth,
 58 |     marginRight: 10,
 59 |     borderRadius: 10,
 60 |     justifyContent: "center",
 61 |     alignItems: "center",
 62 |   },
 63 |   radioFilled: {
 64 |     backgroundColor: colors.link,
 65 |     width: 15,
 66 |     height: 15,
 67 |     borderRadius: 8,
 68 |   },
 69 |   section: {
 70 |     paddingHorizontal: 20,
 71 |     paddingTop: 20,
 72 |     paddingBottom: 5,
 73 |   },
 74 |   sectionText: {
 75 |     fontWeight: "bold",
 76 |     fontSize: 20,
 77 |   },
 78 | });
 79 | 
 80 | const sortSections = (completedLessons) => {
 81 |   const incompleteData = [];
 82 |   const completeData = [];
 83 | 
 84 |   _.forEach(exercises, (exercise) => {
 85 |     if (completedLessons.includes(exercise.lesson)) {
 86 |       completeData.push(exercise);
 87 |     } else {
 88 |       incompleteData.push(exercise);
 89 |     }
 90 |   });
 91 | 
 92 |   if (incompleteData.length === 0) {
 93 |     incompleteData.push({
 94 |       exerciseNumber: 0,
 95 |       isPromo: true,
 96 |       title: "Keep Learning - Visit React Native School",
 97 |     });
 98 |   }
 99 | 
100 |   return [
101 |     { title: "Incomplete", data: _.sortBy(incompleteData, ["exerciseNumber"]) },
102 |     { title: "Complete", data: _.sortBy(completeData, ["exerciseNumber"]) },
103 |   ];
104 | };
105 | 
106 | export const ExerciseList = ({ navigation }) => {
107 |   const [completedLessons, setCompletedLessons] = useState();
108 |   const [sections, setSections] = useState([]);
109 |   const [dataLoaded, setDataLoaded] = useState(false);
110 | 
111 |   useEffect(() => {
112 |     if (completedLessons) {
113 |       setSections(sortSections(completedLessons));
114 |       set("COMPLETED_LESSONS", JSON.stringify(completedLessons));
115 |     }
116 |   }, [completedLessons]);
117 | 
118 |   useEffect(() => {
119 |     get("COMPLETED_LESSONS")
120 |       .then((lessons) => {
121 |         if (lessons) {
122 |           setCompletedLessons(JSON.parse(lessons));
123 |         } else {
124 |           setCompletedLessons([]);
125 |         }
126 |       })
127 |       .finally(() => {
128 |         setDataLoaded(true);
129 |       });
130 |   }, []);
131 | 
132 |   if (!dataLoaded) {
133 |     return null;
134 |   }
135 | 
136 |   return (
137 |     <>
138 |       <StatusBar barStyle="dark-content" backgroundColor="#fff" />
139 | 
140 |       <SectionList
141 |         style={{ backgroundColor: "#EFEFF4" }}
142 |         contentContainerStyle={{ paddingBottom: 200 }}
143 |         sections={sections}
144 |         keyExtractor={(item) => item.lesson}
145 |         renderSectionHeader={({ section }) => {
146 |           if (section.data.length === 0 && section.title !== "Incomplete") {
147 |             return null;
148 |           }
149 |           return (
150 |             <View style={styles.section}>
151 |               <Text style={styles.sectionText}>{section.title}</Text>
152 |             </View>
153 |           );
154 |         }}
155 |         stickySectionHeadersEnabled={false}
156 |         renderItem={({ item }) => {
157 |           const isCompleted = completedLessons.includes(item.lesson);
158 | 
159 |           return (
160 |             <TouchableOpacity
161 |               style={styles.row}
162 |               onPress={() => {
163 |                 if (item.isPromo) {
164 |                   Linking.openURL("https://reactnativeschool.com");
165 |                 } else {
166 |                   navigation.push("Exercise", {
167 |                     lesson: item.lesson,
168 |                     title: item.title,
169 |                   });
170 |                 }
171 |               }}
172 |             >
173 |               <View style={styles.left}>
174 |                 {!item.isPromo ? (
175 |                   <TouchableOpacity
176 |                     onPress={() => {
177 |                       if (!isCompleted) {
178 |                         setCompletedLessons((og) => [item.lesson, ...og]);
179 |                       } else {
180 |                         setCompletedLessons((og) => _.without(og, item.lesson));
181 |                       }
182 |                     }}
183 |                   >
184 |                     <View style={styles.radio}>
185 |                       {isCompleted ? <View style={styles.radioFilled} /> : null}
186 |                     </View>
187 |                   </TouchableOpacity>
188 |                 ) : null}
189 |                 <View>
190 |                   <Text style={styles.headerText}>
191 |                     {!item.isPromo
192 |                       ? `Exercise ${item.exerciseNumber + 1}`
193 |                       : "Congrats!"}
194 |                   </Text>
195 |                   <Text style={styles.titleText}>{item.title}</Text>
196 |                 </View>
197 |               </View>
198 |               <Entypo
199 |                 name={item.isPromo ? "export" : "chevron-right"}
200 |                 size={item.isPromo ? 28 : 32}
201 |                 color="rgba(0, 0, 0, 0.4)"
202 |               />
203 |             </TouchableOpacity>
204 |           );
205 |         }}
206 |         ItemSeparatorComponent={() => <View style={styles.separator} />}
207 |         SectionSeparatorComponent={() => <View style={styles.separator} />}
208 |       />
209 |     </>
210 |   );
211 | };
212 | 


--------------------------------------------------------------------------------
/exercises/long-lists.js:
--------------------------------------------------------------------------------
  1 | const PEOPLE = [
  2 |   {
  3 |     name: {
  4 |       title: "Ms",
  5 |       first: "Maeva",
  6 |       last: "Scott",
  7 |     },
  8 |   },
  9 |   {
 10 |     name: {
 11 |       title: "Ms",
 12 |       first: "Maëlle",
 13 |       last: "Henry",
 14 |     },
 15 |   },
 16 |   {
 17 |     name: {
 18 |       title: "Mr",
 19 |       first: "Mohamoud",
 20 |       last: "Faaij",
 21 |     },
 22 |   },
 23 |   {
 24 |     name: {
 25 |       title: "Monsieur",
 26 |       first: "Carmelo",
 27 |       last: "Meunier",
 28 |     },
 29 |   },
 30 |   {
 31 |     name: {
 32 |       title: "Mrs",
 33 |       first: "Peyton",
 34 |       last: "Garcia",
 35 |     },
 36 |   },
 37 |   {
 38 |     name: {
 39 |       title: "Mrs",
 40 |       first: "Godofreda",
 41 |       last: "Caldeira",
 42 |     },
 43 |   },
 44 |   {
 45 |     name: {
 46 |       title: "Ms",
 47 |       first: "Kristin",
 48 |       last: "White",
 49 |     },
 50 |   },
 51 |   {
 52 |     name: {
 53 |       title: "Miss",
 54 |       first: "Xênia",
 55 |       last: "da Cruz",
 56 |     },
 57 |   },
 58 |   {
 59 |     name: {
 60 |       title: "Miss",
 61 |       first: "Christl",
 62 |       last: "Schwinn",
 63 |     },
 64 |   },
 65 |   {
 66 |     name: {
 67 |       title: "Mademoiselle",
 68 |       first: "Édith",
 69 |       last: "Hubert",
 70 |     },
 71 |   },
 72 |   {
 73 |     name: {
 74 |       title: "Monsieur",
 75 |       first: "Tobias",
 76 |       last: "David",
 77 |     },
 78 |   },
 79 |   {
 80 |     name: {
 81 |       title: "Mr",
 82 |       first: "Väinö",
 83 |       last: "Tervo",
 84 |     },
 85 |   },
 86 |   {
 87 |     name: {
 88 |       title: "Ms",
 89 |       first: "Susanne",
 90 |       last: "Peters",
 91 |     },
 92 |   },
 93 |   {
 94 |     name: {
 95 |       title: "Ms",
 96 |       first: "Ariane",
 97 |       last: "Gagnon",
 98 |     },
 99 |   },
100 |   {
101 |     name: {
102 |       title: "Mr",
103 |       first: "Warren",
104 |       last: "Graham",
105 |     },
106 |   },
107 |   {
108 |     name: {
109 |       title: "Mr",
110 |       first: "Corey",
111 |       last: "Price",
112 |     },
113 |   },
114 |   {
115 |     name: {
116 |       title: "Mr",
117 |       first: "Milian",
118 |       last: "Tufte",
119 |     },
120 |   },
121 |   {
122 |     name: {
123 |       title: "Mr",
124 |       first: "Johan",
125 |       last: "Renard",
126 |     },
127 |   },
128 |   {
129 |     name: {
130 |       title: "Mr",
131 |       first: "Brand",
132 |       last: "Van Meijl",
133 |     },
134 |   },
135 |   {
136 |     name: {
137 |       title: "Mr",
138 |       first: "Kasper",
139 |       last: "Kivela",
140 |     },
141 |   },
142 |   {
143 |     name: {
144 |       title: "Mr",
145 |       first: "Harley",
146 |       last: "Martin",
147 |     },
148 |   },
149 |   {
150 |     name: {
151 |       title: "Mr",
152 |       first: "Aapo",
153 |       last: "Niemela",
154 |     },
155 |   },
156 |   {
157 |     name: {
158 |       title: "Mrs",
159 |       first: "Carol",
160 |       last: "Williams",
161 |     },
162 |   },
163 |   {
164 |     name: {
165 |       title: "Miss",
166 |       first: "تارا",
167 |       last: "حسینی",
168 |     },
169 |   },
170 |   {
171 |     name: {
172 |       title: "Mr",
173 |       first: "محمدامين",
174 |       last: "سهيلي راد",
175 |     },
176 |   },
177 |   {
178 |     name: {
179 |       title: "Mr",
180 |       first: "Mauritz",
181 |       last: "Musch",
182 |     },
183 |   },
184 |   {
185 |     name: {
186 |       title: "Mrs",
187 |       first: "Andrea",
188 |       last: "Austin",
189 |     },
190 |   },
191 |   {
192 |     name: {
193 |       title: "Mr",
194 |       first: "Murat",
195 |       last: "Kutlay",
196 |     },
197 |   },
198 |   {
199 |     name: {
200 |       title: "Miss",
201 |       first: "Nanneke",
202 |       last: "Ermers",
203 |     },
204 |   },
205 |   {
206 |     name: {
207 |       title: "Mr",
208 |       first: "Jayden",
209 |       last: "Anderson",
210 |     },
211 |   },
212 |   {
213 |     name: {
214 |       title: "Mrs",
215 |       first: "Nejla",
216 |       last: "Van Riet",
217 |     },
218 |   },
219 |   {
220 |     name: {
221 |       title: "Ms",
222 |       first: "Heather",
223 |       last: "Hudson",
224 |     },
225 |   },
226 |   {
227 |     name: {
228 |       title: "Ms",
229 |       first: "Maria",
230 |       last: "Wright",
231 |     },
232 |   },
233 |   {
234 |     name: {
235 |       title: "Ms",
236 |       first: "Edelmira",
237 |       last: "Nogueira",
238 |     },
239 |   },
240 |   {
241 |     name: {
242 |       title: "Mrs",
243 |       first: "Concepcion",
244 |       last: "Santana",
245 |     },
246 |   },
247 |   {
248 |     name: {
249 |       title: "Miss",
250 |       first: "Andrea",
251 |       last: "Knight",
252 |     },
253 |   },
254 |   {
255 |     name: {
256 |       title: "Miss",
257 |       first: "Julie",
258 |       last: "Pedersen",
259 |     },
260 |   },
261 |   {
262 |     name: {
263 |       title: "Mrs",
264 |       first: "Renata",
265 |       last: "Kautz",
266 |     },
267 |   },
268 |   {
269 |     name: {
270 |       title: "Miss",
271 |       first: "Samanta",
272 |       last: "Groenveld",
273 |     },
274 |   },
275 |   {
276 |     name: {
277 |       title: "Mrs",
278 |       first: "محیا",
279 |       last: "سلطانی نژاد",
280 |     },
281 |   },
282 |   {
283 |     name: {
284 |       title: "Ms",
285 |       first: "Apolline",
286 |       last: "David",
287 |     },
288 |   },
289 |   {
290 |     name: {
291 |       title: "Mr",
292 |       first: "نيما",
293 |       last: "کوتی",
294 |     },
295 |   },
296 |   {
297 |     name: {
298 |       title: "Mr",
299 |       first: "مهدي",
300 |       last: "پارسا",
301 |     },
302 |   },
303 |   {
304 |     name: {
305 |       title: "Mrs",
306 |       first: "Gina",
307 |       last: "Sunde",
308 |     },
309 |   },
310 |   {
311 |     name: {
312 |       title: "Ms",
313 |       first: "Louella",
314 |       last: "Gibson",
315 |     },
316 |   },
317 |   {
318 |     name: {
319 |       title: "Mr",
320 |       first: "Jar",
321 |       last: "Foster",
322 |     },
323 |   },
324 |   {
325 |     name: {
326 |       title: "Mr",
327 |       first: "Jackson",
328 |       last: "Green",
329 |     },
330 |   },
331 |   {
332 |     name: {
333 |       title: "Mr",
334 |       first: "Jesse",
335 |       last: "Ketola",
336 |     },
337 |   },
338 |   {
339 |     name: {
340 |       title: "Madame",
341 |       first: "Zoe",
342 |       last: "Dupont",
343 |     },
344 |   },
345 |   {
346 |     name: {
347 |       title: "Mr",
348 |       first: "Till",
349 |       last: "Kögler",
350 |     },
351 |   },
352 |   {
353 |     name: {
354 |       title: "Mr",
355 |       first: "Babür",
356 |       last: "Aykaç",
357 |     },
358 |   },
359 |   {
360 |     name: {
361 |       title: "Mr",
362 |       first: "بردیا",
363 |       last: "حسینی",
364 |     },
365 |   },
366 |   {
367 |     name: {
368 |       title: "Miss",
369 |       first: "Aliya",
370 |       last: "Brudevoll",
371 |     },
372 |   },
373 |   {
374 |     name: {
375 |       title: "Mrs",
376 |       first: "Isobel",
377 |       last: "Anderson",
378 |     },
379 |   },
380 |   {
381 |     name: {
382 |       title: "Ms",
383 |       first: "Alice",
384 |       last: "Côté",
385 |     },
386 |   },
387 |   {
388 |     name: {
389 |       title: "Mr",
390 |       first: "Josep",
391 |       last: "Velasco",
392 |     },
393 |   },
394 |   {
395 |     name: {
396 |       title: "Mr",
397 |       first: "Joshua",
398 |       last: "Saur",
399 |     },
400 |   },
401 |   {
402 |     name: {
403 |       title: "Ms",
404 |       first: "Alida",
405 |       last: "Sollid",
406 |     },
407 |   },
408 |   {
409 |     name: {
410 |       title: "Mr",
411 |       first: "Jonathan",
412 |       last: "Willis",
413 |     },
414 |   },
415 |   {
416 |     name: {
417 |       title: "Mr",
418 |       first: "Adriel",
419 |       last: "Barros",
420 |     },
421 |   },
422 |   {
423 |     name: {
424 |       title: "Ms",
425 |       first: "Charlotte",
426 |       last: "Gerard",
427 |     },
428 |   },
429 |   {
430 |     name: {
431 |       title: "Ms",
432 |       first: "Amelia",
433 |       last: "Clarke",
434 |     },
435 |   },
436 |   {
437 |     name: {
438 |       title: "Mr",
439 |       first: "Magnus",
440 |       last: "Senf",
441 |     },
442 |   },
443 |   {
444 |     name: {
445 |       title: "Mrs",
446 |       first: "Yolanda",
447 |       last: "Muñoz",
448 |     },
449 |   },
450 |   {
451 |     name: {
452 |       title: "Mrs",
453 |       first: "Susan",
454 |       last: "Hill",
455 |     },
456 |   },
457 |   {
458 |     name: {
459 |       title: "Ms",
460 |       first: "Andira",
461 |       last: "Sales",
462 |     },
463 |   },
464 |   {
465 |     name: {
466 |       title: "Mr",
467 |       first: "Victor",
468 |       last: "Moore",
469 |     },
470 |   },
471 |   {
472 |     name: {
473 |       title: "Monsieur",
474 |       first: "Mauro",
475 |       last: "Thomas",
476 |     },
477 |   },
478 |   {
479 |     name: {
480 |       title: "Mrs",
481 |       first: "Ege",
482 |       last: "Günday",
483 |     },
484 |   },
485 |   {
486 |     name: {
487 |       title: "Mr",
488 |       first: "Enrique",
489 |       last: "White",
490 |     },
491 |   },
492 |   {
493 |     name: {
494 |       title: "Mr",
495 |       first: "Nathaniel",
496 |       last: "Silva",
497 |     },
498 |   },
499 |   {
500 |     name: {
501 |       title: "Mr",
502 |       first: "Sandor",
503 |       last: "Stroh",
504 |     },
505 |   },
506 |   {
507 |     name: {
508 |       title: "Miss",
509 |       first: "Frida",
510 |       last: "Pedersen",
511 |     },
512 |   },
513 |   {
514 |     name: {
515 |       title: "Mrs",
516 |       first: "Marta",
517 |       last: "Silva",
518 |     },
519 |   },
520 |   {
521 |     name: {
522 |       title: "Mr",
523 |       first: "Leander",
524 |       last: "Bergquist",
525 |     },
526 |   },
527 |   {
528 |     name: {
529 |       title: "Mr",
530 |       first: "Niklas",
531 |       last: "Hakala",
532 |     },
533 |   },
534 |   {
535 |     name: {
536 |       title: "Mr",
537 |       first: "Matias",
538 |       last: "Pietila",
539 |     },
540 |   },
541 |   {
542 |     name: {
543 |       title: "Ms",
544 |       first: "Célia",
545 |       last: "Simon",
546 |     },
547 |   },
548 |   {
549 |     name: {
550 |       title: "Mr",
551 |       first: "James",
552 |       last: "Walker",
553 |     },
554 |   },
555 |   {
556 |     name: {
557 |       title: "Ms",
558 |       first: "Elif",
559 |       last: "Kıraç",
560 |     },
561 |   },
562 |   {
563 |     name: {
564 |       title: "Mrs",
565 |       first: "Kati",
566 |       last: "Schorr",
567 |     },
568 |   },
569 |   {
570 |     name: {
571 |       title: "Mr",
572 |       first: "Lucas",
573 |       last: "Pedersen",
574 |     },
575 |   },
576 |   {
577 |     name: {
578 |       title: "Mr",
579 |       first: "Babür",
580 |       last: "Beşok",
581 |     },
582 |   },
583 |   {
584 |     name: {
585 |       title: "Ms",
586 |       first: "Yael",
587 |       last: "De Vegt",
588 |     },
589 |   },
590 |   {
591 |     name: {
592 |       title: "Mrs",
593 |       first: "Claudia",
594 |       last: "Bishop",
595 |     },
596 |   },
597 |   {
598 |     name: {
599 |       title: "Miss",
600 |       first: "Sophie",
601 |       last: "Garcia",
602 |     },
603 |   },
604 |   {
605 |     name: {
606 |       title: "Mr",
607 |       first: "Warren",
608 |       last: "Kim",
609 |     },
610 |   },
611 |   {
612 |     name: {
613 |       title: "Miss",
614 |       first: "Alison",
615 |       last: "Morris",
616 |     },
617 |   },
618 |   {
619 |     name: {
620 |       title: "Ms",
621 |       first: "Alexia",
622 |       last: "Leroy",
623 |     },
624 |   },
625 |   {
626 |     name: {
627 |       title: "Ms",
628 |       first: "رها",
629 |       last: "مرادی",
630 |     },
631 |   },
632 |   {
633 |     name: {
634 |       title: "Miss",
635 |       first: "Susanna",
636 |       last: "Moore",
637 |     },
638 |   },
639 |   {
640 |     name: {
641 |       title: "Mademoiselle",
642 |       first: "Nelli",
643 |       last: "Robert",
644 |     },
645 |   },
646 |   {
647 |     name: {
648 |       title: "Miss",
649 |       first: "یاسمن",
650 |       last: "سهيلي راد",
651 |     },
652 |   },
653 |   {
654 |     name: {
655 |       title: "Ms",
656 |       first: "مارال",
657 |       last: "سلطانی نژاد",
658 |     },
659 |   },
660 |   {
661 |     name: {
662 |       title: "Mr",
663 |       first: "Kornelius",
664 |       last: "Røyland",
665 |     },
666 |   },
667 |   {
668 |     name: {
669 |       title: "Mr",
670 |       first: "Arcanjo",
671 |       last: "Nogueira",
672 |     },
673 |   },
674 |   {
675 |     name: {
676 |       title: "Mr",
677 |       first: "Dursun",
678 |       last: "Reiss",
679 |     },
680 |   },
681 |   {
682 |     name: {
683 |       title: "Mrs",
684 |       first: "Vår",
685 |       last: "Slettebø",
686 |     },
687 |   },
688 |   {
689 |     name: {
690 |       title: "Mr",
691 |       first: "Luis",
692 |       last: "Owens",
693 |     },
694 |   },
695 |   {
696 |     name: {
697 |       title: "Mr",
698 |       first: "Ryder",
699 |       last: "Ennis",
700 |     },
701 |   },
702 | ];
703 | 


--------------------------------------------------------------------------------
/solutions/long-lists.final.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { FlatList, Text, View, StyleSheet, SafeAreaView } from "react-native";
  3 | 
  4 | const styles = StyleSheet.create({
  5 |   row: {
  6 |     paddingHorizontal: 10,
  7 |     paddingVertical: 10,
  8 |   },
  9 |   name: {
 10 |     fontSize: 16,
 11 |   },
 12 |   separator: {
 13 |     backgroundColor: "rgba(0, 0, 0, 0.5)",
 14 |     height: 1,
 15 |   },
 16 | });
 17 | 
 18 | export default () => {
 19 |   return (
 20 |     <SafeAreaView>
 21 |       <FlatList
 22 |         data={PEOPLE}
 23 |         keyExtractor={(item) => `${item.name.first}-${item.name.last}`}
 24 |         renderItem={({ item }) => {
 25 |           return (
 26 |             <View style={styles.row}>
 27 |               <Text style={styles.name}>
 28 |                 {item.name.first} {item.name.last}
 29 |               </Text>
 30 |             </View>
 31 |           );
 32 |         }}
 33 |         ItemSeparatorComponent={() => <View style={styles.separator} />}
 34 |       />
 35 |     </SafeAreaView>
 36 |   );
 37 | };
 38 | 
 39 | const PEOPLE = [
 40 |   {
 41 |     name: {
 42 |       title: "Ms",
 43 |       first: "Maeva",
 44 |       last: "Scott",
 45 |     },
 46 |   },
 47 |   {
 48 |     name: {
 49 |       title: "Ms",
 50 |       first: "Maëlle",
 51 |       last: "Henry",
 52 |     },
 53 |   },
 54 |   {
 55 |     name: {
 56 |       title: "Mr",
 57 |       first: "Mohamoud",
 58 |       last: "Faaij",
 59 |     },
 60 |   },
 61 |   {
 62 |     name: {
 63 |       title: "Monsieur",
 64 |       first: "Carmelo",
 65 |       last: "Meunier",
 66 |     },
 67 |   },
 68 |   {
 69 |     name: {
 70 |       title: "Mrs",
 71 |       first: "Peyton",
 72 |       last: "Garcia",
 73 |     },
 74 |   },
 75 |   {
 76 |     name: {
 77 |       title: "Mrs",
 78 |       first: "Godofreda",
 79 |       last: "Caldeira",
 80 |     },
 81 |   },
 82 |   {
 83 |     name: {
 84 |       title: "Ms",
 85 |       first: "Kristin",
 86 |       last: "White",
 87 |     },
 88 |   },
 89 |   {
 90 |     name: {
 91 |       title: "Miss",
 92 |       first: "Xênia",
 93 |       last: "da Cruz",
 94 |     },
 95 |   },
 96 |   {
 97 |     name: {
 98 |       title: "Miss",
 99 |       first: "Christl",
100 |       last: "Schwinn",
101 |     },
102 |   },
103 |   {
104 |     name: {
105 |       title: "Mademoiselle",
106 |       first: "Édith",
107 |       last: "Hubert",
108 |     },
109 |   },
110 |   {
111 |     name: {
112 |       title: "Monsieur",
113 |       first: "Tobias",
114 |       last: "David",
115 |     },
116 |   },
117 |   {
118 |     name: {
119 |       title: "Mr",
120 |       first: "Väinö",
121 |       last: "Tervo",
122 |     },
123 |   },
124 |   {
125 |     name: {
126 |       title: "Ms",
127 |       first: "Susanne",
128 |       last: "Peters",
129 |     },
130 |   },
131 |   {
132 |     name: {
133 |       title: "Ms",
134 |       first: "Ariane",
135 |       last: "Gagnon",
136 |     },
137 |   },
138 |   {
139 |     name: {
140 |       title: "Mr",
141 |       first: "Warren",
142 |       last: "Graham",
143 |     },
144 |   },
145 |   {
146 |     name: {
147 |       title: "Mr",
148 |       first: "Corey",
149 |       last: "Price",
150 |     },
151 |   },
152 |   {
153 |     name: {
154 |       title: "Mr",
155 |       first: "Milian",
156 |       last: "Tufte",
157 |     },
158 |   },
159 |   {
160 |     name: {
161 |       title: "Mr",
162 |       first: "Johan",
163 |       last: "Renard",
164 |     },
165 |   },
166 |   {
167 |     name: {
168 |       title: "Mr",
169 |       first: "Brand",
170 |       last: "Van Meijl",
171 |     },
172 |   },
173 |   {
174 |     name: {
175 |       title: "Mr",
176 |       first: "Kasper",
177 |       last: "Kivela",
178 |     },
179 |   },
180 |   {
181 |     name: {
182 |       title: "Mr",
183 |       first: "Harley",
184 |       last: "Martin",
185 |     },
186 |   },
187 |   {
188 |     name: {
189 |       title: "Mr",
190 |       first: "Aapo",
191 |       last: "Niemela",
192 |     },
193 |   },
194 |   {
195 |     name: {
196 |       title: "Mrs",
197 |       first: "Carol",
198 |       last: "Williams",
199 |     },
200 |   },
201 |   {
202 |     name: {
203 |       title: "Miss",
204 |       first: "تارا",
205 |       last: "حسینی",
206 |     },
207 |   },
208 |   {
209 |     name: {
210 |       title: "Mr",
211 |       first: "محمدامين",
212 |       last: "سهيلي راد",
213 |     },
214 |   },
215 |   {
216 |     name: {
217 |       title: "Mr",
218 |       first: "Mauritz",
219 |       last: "Musch",
220 |     },
221 |   },
222 |   {
223 |     name: {
224 |       title: "Mrs",
225 |       first: "Andrea",
226 |       last: "Austin",
227 |     },
228 |   },
229 |   {
230 |     name: {
231 |       title: "Mr",
232 |       first: "Murat",
233 |       last: "Kutlay",
234 |     },
235 |   },
236 |   {
237 |     name: {
238 |       title: "Miss",
239 |       first: "Nanneke",
240 |       last: "Ermers",
241 |     },
242 |   },
243 |   {
244 |     name: {
245 |       title: "Mr",
246 |       first: "Jayden",
247 |       last: "Anderson",
248 |     },
249 |   },
250 |   {
251 |     name: {
252 |       title: "Mrs",
253 |       first: "Nejla",
254 |       last: "Van Riet",
255 |     },
256 |   },
257 |   {
258 |     name: {
259 |       title: "Ms",
260 |       first: "Heather",
261 |       last: "Hudson",
262 |     },
263 |   },
264 |   {
265 |     name: {
266 |       title: "Ms",
267 |       first: "Maria",
268 |       last: "Wright",
269 |     },
270 |   },
271 |   {
272 |     name: {
273 |       title: "Ms",
274 |       first: "Edelmira",
275 |       last: "Nogueira",
276 |     },
277 |   },
278 |   {
279 |     name: {
280 |       title: "Mrs",
281 |       first: "Concepcion",
282 |       last: "Santana",
283 |     },
284 |   },
285 |   {
286 |     name: {
287 |       title: "Miss",
288 |       first: "Andrea",
289 |       last: "Knight",
290 |     },
291 |   },
292 |   {
293 |     name: {
294 |       title: "Miss",
295 |       first: "Julie",
296 |       last: "Pedersen",
297 |     },
298 |   },
299 |   {
300 |     name: {
301 |       title: "Mrs",
302 |       first: "Renata",
303 |       last: "Kautz",
304 |     },
305 |   },
306 |   {
307 |     name: {
308 |       title: "Miss",
309 |       first: "Samanta",
310 |       last: "Groenveld",
311 |     },
312 |   },
313 |   {
314 |     name: {
315 |       title: "Mrs",
316 |       first: "محیا",
317 |       last: "سلطانی نژاد",
318 |     },
319 |   },
320 |   {
321 |     name: {
322 |       title: "Ms",
323 |       first: "Apolline",
324 |       last: "David",
325 |     },
326 |   },
327 |   {
328 |     name: {
329 |       title: "Mr",
330 |       first: "نيما",
331 |       last: "کوتی",
332 |     },
333 |   },
334 |   {
335 |     name: {
336 |       title: "Mr",
337 |       first: "مهدي",
338 |       last: "پارسا",
339 |     },
340 |   },
341 |   {
342 |     name: {
343 |       title: "Mrs",
344 |       first: "Gina",
345 |       last: "Sunde",
346 |     },
347 |   },
348 |   {
349 |     name: {
350 |       title: "Ms",
351 |       first: "Louella",
352 |       last: "Gibson",
353 |     },
354 |   },
355 |   {
356 |     name: {
357 |       title: "Mr",
358 |       first: "Jar",
359 |       last: "Foster",
360 |     },
361 |   },
362 |   {
363 |     name: {
364 |       title: "Mr",
365 |       first: "Jackson",
366 |       last: "Green",
367 |     },
368 |   },
369 |   {
370 |     name: {
371 |       title: "Mr",
372 |       first: "Jesse",
373 |       last: "Ketola",
374 |     },
375 |   },
376 |   {
377 |     name: {
378 |       title: "Madame",
379 |       first: "Zoe",
380 |       last: "Dupont",
381 |     },
382 |   },
383 |   {
384 |     name: {
385 |       title: "Mr",
386 |       first: "Till",
387 |       last: "Kögler",
388 |     },
389 |   },
390 |   {
391 |     name: {
392 |       title: "Mr",
393 |       first: "Babür",
394 |       last: "Aykaç",
395 |     },
396 |   },
397 |   {
398 |     name: {
399 |       title: "Mr",
400 |       first: "بردیا",
401 |       last: "حسینی",
402 |     },
403 |   },
404 |   {
405 |     name: {
406 |       title: "Miss",
407 |       first: "Aliya",
408 |       last: "Brudevoll",
409 |     },
410 |   },
411 |   {
412 |     name: {
413 |       title: "Mrs",
414 |       first: "Isobel",
415 |       last: "Anderson",
416 |     },
417 |   },
418 |   {
419 |     name: {
420 |       title: "Ms",
421 |       first: "Alice",
422 |       last: "Côté",
423 |     },
424 |   },
425 |   {
426 |     name: {
427 |       title: "Mr",
428 |       first: "Josep",
429 |       last: "Velasco",
430 |     },
431 |   },
432 |   {
433 |     name: {
434 |       title: "Mr",
435 |       first: "Joshua",
436 |       last: "Saur",
437 |     },
438 |   },
439 |   {
440 |     name: {
441 |       title: "Ms",
442 |       first: "Alida",
443 |       last: "Sollid",
444 |     },
445 |   },
446 |   {
447 |     name: {
448 |       title: "Mr",
449 |       first: "Jonathan",
450 |       last: "Willis",
451 |     },
452 |   },
453 |   {
454 |     name: {
455 |       title: "Mr",
456 |       first: "Adriel",
457 |       last: "Barros",
458 |     },
459 |   },
460 |   {
461 |     name: {
462 |       title: "Ms",
463 |       first: "Charlotte",
464 |       last: "Gerard",
465 |     },
466 |   },
467 |   {
468 |     name: {
469 |       title: "Ms",
470 |       first: "Amelia",
471 |       last: "Clarke",
472 |     },
473 |   },
474 |   {
475 |     name: {
476 |       title: "Mr",
477 |       first: "Magnus",
478 |       last: "Senf",
479 |     },
480 |   },
481 |   {
482 |     name: {
483 |       title: "Mrs",
484 |       first: "Yolanda",
485 |       last: "Muñoz",
486 |     },
487 |   },
488 |   {
489 |     name: {
490 |       title: "Mrs",
491 |       first: "Susan",
492 |       last: "Hill",
493 |     },
494 |   },
495 |   {
496 |     name: {
497 |       title: "Ms",
498 |       first: "Andira",
499 |       last: "Sales",
500 |     },
501 |   },
502 |   {
503 |     name: {
504 |       title: "Mr",
505 |       first: "Victor",
506 |       last: "Moore",
507 |     },
508 |   },
509 |   {
510 |     name: {
511 |       title: "Monsieur",
512 |       first: "Mauro",
513 |       last: "Thomas",
514 |     },
515 |   },
516 |   {
517 |     name: {
518 |       title: "Mrs",
519 |       first: "Ege",
520 |       last: "Günday",
521 |     },
522 |   },
523 |   {
524 |     name: {
525 |       title: "Mr",
526 |       first: "Enrique",
527 |       last: "White",
528 |     },
529 |   },
530 |   {
531 |     name: {
532 |       title: "Mr",
533 |       first: "Nathaniel",
534 |       last: "Silva",
535 |     },
536 |   },
537 |   {
538 |     name: {
539 |       title: "Mr",
540 |       first: "Sandor",
541 |       last: "Stroh",
542 |     },
543 |   },
544 |   {
545 |     name: {
546 |       title: "Miss",
547 |       first: "Frida",
548 |       last: "Pedersen",
549 |     },
550 |   },
551 |   {
552 |     name: {
553 |       title: "Mrs",
554 |       first: "Marta",
555 |       last: "Silva",
556 |     },
557 |   },
558 |   {
559 |     name: {
560 |       title: "Mr",
561 |       first: "Leander",
562 |       last: "Bergquist",
563 |     },
564 |   },
565 |   {
566 |     name: {
567 |       title: "Mr",
568 |       first: "Niklas",
569 |       last: "Hakala",
570 |     },
571 |   },
572 |   {
573 |     name: {
574 |       title: "Mr",
575 |       first: "Matias",
576 |       last: "Pietila",
577 |     },
578 |   },
579 |   {
580 |     name: {
581 |       title: "Ms",
582 |       first: "Célia",
583 |       last: "Simon",
584 |     },
585 |   },
586 |   {
587 |     name: {
588 |       title: "Mr",
589 |       first: "James",
590 |       last: "Walker",
591 |     },
592 |   },
593 |   {
594 |     name: {
595 |       title: "Ms",
596 |       first: "Elif",
597 |       last: "Kıraç",
598 |     },
599 |   },
600 |   {
601 |     name: {
602 |       title: "Mrs",
603 |       first: "Kati",
604 |       last: "Schorr",
605 |     },
606 |   },
607 |   {
608 |     name: {
609 |       title: "Mr",
610 |       first: "Lucas",
611 |       last: "Pedersen",
612 |     },
613 |   },
614 |   {
615 |     name: {
616 |       title: "Mr",
617 |       first: "Babür",
618 |       last: "Beşok",
619 |     },
620 |   },
621 |   {
622 |     name: {
623 |       title: "Ms",
624 |       first: "Yael",
625 |       last: "De Vegt",
626 |     },
627 |   },
628 |   {
629 |     name: {
630 |       title: "Mrs",
631 |       first: "Claudia",
632 |       last: "Bishop",
633 |     },
634 |   },
635 |   {
636 |     name: {
637 |       title: "Miss",
638 |       first: "Sophie",
639 |       last: "Garcia",
640 |     },
641 |   },
642 |   {
643 |     name: {
644 |       title: "Mr",
645 |       first: "Warren",
646 |       last: "Kim",
647 |     },
648 |   },
649 |   {
650 |     name: {
651 |       title: "Miss",
652 |       first: "Alison",
653 |       last: "Morris",
654 |     },
655 |   },
656 |   {
657 |     name: {
658 |       title: "Ms",
659 |       first: "Alexia",
660 |       last: "Leroy",
661 |     },
662 |   },
663 |   {
664 |     name: {
665 |       title: "Ms",
666 |       first: "رها",
667 |       last: "مرادی",
668 |     },
669 |   },
670 |   {
671 |     name: {
672 |       title: "Miss",
673 |       first: "Susanna",
674 |       last: "Moore",
675 |     },
676 |   },
677 |   {
678 |     name: {
679 |       title: "Mademoiselle",
680 |       first: "Nelli",
681 |       last: "Robert",
682 |     },
683 |   },
684 |   {
685 |     name: {
686 |       title: "Miss",
687 |       first: "یاسمن",
688 |       last: "سهيلي راد",
689 |     },
690 |   },
691 |   {
692 |     name: {
693 |       title: "Ms",
694 |       first: "مارال",
695 |       last: "سلطانی نژاد",
696 |     },
697 |   },
698 |   {
699 |     name: {
700 |       title: "Mr",
701 |       first: "Kornelius",
702 |       last: "Røyland",
703 |     },
704 |   },
705 |   {
706 |     name: {
707 |       title: "Mr",
708 |       first: "Arcanjo",
709 |       last: "Nogueira",
710 |     },
711 |   },
712 |   {
713 |     name: {
714 |       title: "Mr",
715 |       first: "Dursun",
716 |       last: "Reiss",
717 |     },
718 |   },
719 |   {
720 |     name: {
721 |       title: "Mrs",
722 |       first: "Vår",
723 |       last: "Slettebø",
724 |     },
725 |   },
726 |   {
727 |     name: {
728 |       title: "Mr",
729 |       first: "Luis",
730 |       last: "Owens",
731 |     },
732 |   },
733 |   {
734 |     name: {
735 |       title: "Mr",
736 |       first: "Ryder",
737 |       last: "Ennis",
738 |     },
739 |   },
740 | ];
741 | 


--------------------------------------------------------------------------------
/solutions/long-lists.extra-1.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import {
  3 |   SectionList,
  4 |   Text,
  5 |   View,
  6 |   StyleSheet,
  7 |   SafeAreaView,
  8 | } from "react-native";
  9 | 
 10 | const styles = StyleSheet.create({
 11 |   row: {
 12 |     paddingHorizontal: 10,
 13 |     paddingVertical: 10,
 14 |   },
 15 |   name: {
 16 |     fontSize: 16,
 17 |   },
 18 |   separator: {
 19 |     backgroundColor: "rgba(0, 0, 0, 0.5)",
 20 |     height: 1,
 21 |   },
 22 |   sectionHeader: {
 23 |     paddingHorizontal: 10,
 24 |     paddingVertical: 10,
 25 |     backgroundColor: "rgb(170, 170, 170))",
 26 |   },
 27 | });
 28 | 
 29 | const groupPeopleByLastName = (_data) => {
 30 |   const data = [..._data];
 31 |   const groupedData = data.reduce((accumulator, item) => {
 32 |     const group = item.name.last[0].toUpperCase();
 33 | 
 34 |     if (accumulator[group]) {
 35 |       accumulator[group].data.push(item);
 36 |     } else {
 37 |       accumulator[group] = {
 38 |         title: group,
 39 |         data: [item],
 40 |       };
 41 |     }
 42 | 
 43 |     return accumulator;
 44 |   }, {});
 45 | 
 46 |   const sections = Object.keys(groupedData).map((key) => {
 47 |     return groupedData[key];
 48 |   });
 49 | 
 50 |   return sections.sort((a, b) => {
 51 |     if (a.title > b.title) {
 52 |       return 1;
 53 |     }
 54 |     return -1;
 55 |   });
 56 | };
 57 | 
 58 | export default () => {
 59 |   return (
 60 |     <SafeAreaView>
 61 |       <SectionList
 62 |         sections={groupPeopleByLastName(PEOPLE)}
 63 |         keyExtractor={(item) => `${item.name.first}-${item.name.last}`}
 64 |         renderSectionHeader={({ section }) => {
 65 |           return (
 66 |             <View style={styles.sectionHeader}>
 67 |               <Text>{section.title}</Text>
 68 |             </View>
 69 |           );
 70 |         }}
 71 |         renderItem={({ item }) => {
 72 |           return (
 73 |             <View style={styles.row}>
 74 |               <Text style={styles.name}>
 75 |                 {item.name.first} {item.name.last}
 76 |               </Text>
 77 |             </View>
 78 |           );
 79 |         }}
 80 |         ItemSeparatorComponent={() => <View style={styles.separator} />}
 81 |       />
 82 |     </SafeAreaView>
 83 |   );
 84 | };
 85 | 
 86 | const PEOPLE = [
 87 |   {
 88 |     name: {
 89 |       title: "Ms",
 90 |       first: "Maeva",
 91 |       last: "Scott",
 92 |     },
 93 |   },
 94 |   {
 95 |     name: {
 96 |       title: "Ms",
 97 |       first: "Maëlle",
 98 |       last: "Henry",
 99 |     },
100 |   },
101 |   {
102 |     name: {
103 |       title: "Mr",
104 |       first: "Mohamoud",
105 |       last: "Faaij",
106 |     },
107 |   },
108 |   {
109 |     name: {
110 |       title: "Monsieur",
111 |       first: "Carmelo",
112 |       last: "Meunier",
113 |     },
114 |   },
115 |   {
116 |     name: {
117 |       title: "Mrs",
118 |       first: "Peyton",
119 |       last: "Garcia",
120 |     },
121 |   },
122 |   {
123 |     name: {
124 |       title: "Mrs",
125 |       first: "Godofreda",
126 |       last: "Caldeira",
127 |     },
128 |   },
129 |   {
130 |     name: {
131 |       title: "Ms",
132 |       first: "Kristin",
133 |       last: "White",
134 |     },
135 |   },
136 |   {
137 |     name: {
138 |       title: "Miss",
139 |       first: "Xênia",
140 |       last: "da Cruz",
141 |     },
142 |   },
143 |   {
144 |     name: {
145 |       title: "Miss",
146 |       first: "Christl",
147 |       last: "Schwinn",
148 |     },
149 |   },
150 |   {
151 |     name: {
152 |       title: "Mademoiselle",
153 |       first: "Édith",
154 |       last: "Hubert",
155 |     },
156 |   },
157 |   {
158 |     name: {
159 |       title: "Monsieur",
160 |       first: "Tobias",
161 |       last: "David",
162 |     },
163 |   },
164 |   {
165 |     name: {
166 |       title: "Mr",
167 |       first: "Väinö",
168 |       last: "Tervo",
169 |     },
170 |   },
171 |   {
172 |     name: {
173 |       title: "Ms",
174 |       first: "Susanne",
175 |       last: "Peters",
176 |     },
177 |   },
178 |   {
179 |     name: {
180 |       title: "Ms",
181 |       first: "Ariane",
182 |       last: "Gagnon",
183 |     },
184 |   },
185 |   {
186 |     name: {
187 |       title: "Mr",
188 |       first: "Warren",
189 |       last: "Graham",
190 |     },
191 |   },
192 |   {
193 |     name: {
194 |       title: "Mr",
195 |       first: "Corey",
196 |       last: "Price",
197 |     },
198 |   },
199 |   {
200 |     name: {
201 |       title: "Mr",
202 |       first: "Milian",
203 |       last: "Tufte",
204 |     },
205 |   },
206 |   {
207 |     name: {
208 |       title: "Mr",
209 |       first: "Johan",
210 |       last: "Renard",
211 |     },
212 |   },
213 |   {
214 |     name: {
215 |       title: "Mr",
216 |       first: "Brand",
217 |       last: "Van Meijl",
218 |     },
219 |   },
220 |   {
221 |     name: {
222 |       title: "Mr",
223 |       first: "Kasper",
224 |       last: "Kivela",
225 |     },
226 |   },
227 |   {
228 |     name: {
229 |       title: "Mr",
230 |       first: "Harley",
231 |       last: "Martin",
232 |     },
233 |   },
234 |   {
235 |     name: {
236 |       title: "Mr",
237 |       first: "Aapo",
238 |       last: "Niemela",
239 |     },
240 |   },
241 |   {
242 |     name: {
243 |       title: "Mrs",
244 |       first: "Carol",
245 |       last: "Williams",
246 |     },
247 |   },
248 |   {
249 |     name: {
250 |       title: "Miss",
251 |       first: "تارا",
252 |       last: "حسینی",
253 |     },
254 |   },
255 |   {
256 |     name: {
257 |       title: "Mr",
258 |       first: "محمدامين",
259 |       last: "سهيلي راد",
260 |     },
261 |   },
262 |   {
263 |     name: {
264 |       title: "Mr",
265 |       first: "Mauritz",
266 |       last: "Musch",
267 |     },
268 |   },
269 |   {
270 |     name: {
271 |       title: "Mrs",
272 |       first: "Andrea",
273 |       last: "Austin",
274 |     },
275 |   },
276 |   {
277 |     name: {
278 |       title: "Mr",
279 |       first: "Murat",
280 |       last: "Kutlay",
281 |     },
282 |   },
283 |   {
284 |     name: {
285 |       title: "Miss",
286 |       first: "Nanneke",
287 |       last: "Ermers",
288 |     },
289 |   },
290 |   {
291 |     name: {
292 |       title: "Mr",
293 |       first: "Jayden",
294 |       last: "Anderson",
295 |     },
296 |   },
297 |   {
298 |     name: {
299 |       title: "Mrs",
300 |       first: "Nejla",
301 |       last: "Van Riet",
302 |     },
303 |   },
304 |   {
305 |     name: {
306 |       title: "Ms",
307 |       first: "Heather",
308 |       last: "Hudson",
309 |     },
310 |   },
311 |   {
312 |     name: {
313 |       title: "Ms",
314 |       first: "Maria",
315 |       last: "Wright",
316 |     },
317 |   },
318 |   {
319 |     name: {
320 |       title: "Ms",
321 |       first: "Edelmira",
322 |       last: "Nogueira",
323 |     },
324 |   },
325 |   {
326 |     name: {
327 |       title: "Mrs",
328 |       first: "Concepcion",
329 |       last: "Santana",
330 |     },
331 |   },
332 |   {
333 |     name: {
334 |       title: "Miss",
335 |       first: "Andrea",
336 |       last: "Knight",
337 |     },
338 |   },
339 |   {
340 |     name: {
341 |       title: "Miss",
342 |       first: "Julie",
343 |       last: "Pedersen",
344 |     },
345 |   },
346 |   {
347 |     name: {
348 |       title: "Mrs",
349 |       first: "Renata",
350 |       last: "Kautz",
351 |     },
352 |   },
353 |   {
354 |     name: {
355 |       title: "Miss",
356 |       first: "Samanta",
357 |       last: "Groenveld",
358 |     },
359 |   },
360 |   {
361 |     name: {
362 |       title: "Mrs",
363 |       first: "محیا",
364 |       last: "سلطانی نژاد",
365 |     },
366 |   },
367 |   {
368 |     name: {
369 |       title: "Ms",
370 |       first: "Apolline",
371 |       last: "David",
372 |     },
373 |   },
374 |   {
375 |     name: {
376 |       title: "Mr",
377 |       first: "نيما",
378 |       last: "کوتی",
379 |     },
380 |   },
381 |   {
382 |     name: {
383 |       title: "Mr",
384 |       first: "مهدي",
385 |       last: "پارسا",
386 |     },
387 |   },
388 |   {
389 |     name: {
390 |       title: "Mrs",
391 |       first: "Gina",
392 |       last: "Sunde",
393 |     },
394 |   },
395 |   {
396 |     name: {
397 |       title: "Ms",
398 |       first: "Louella",
399 |       last: "Gibson",
400 |     },
401 |   },
402 |   {
403 |     name: {
404 |       title: "Mr",
405 |       first: "Jar",
406 |       last: "Foster",
407 |     },
408 |   },
409 |   {
410 |     name: {
411 |       title: "Mr",
412 |       first: "Jackson",
413 |       last: "Green",
414 |     },
415 |   },
416 |   {
417 |     name: {
418 |       title: "Mr",
419 |       first: "Jesse",
420 |       last: "Ketola",
421 |     },
422 |   },
423 |   {
424 |     name: {
425 |       title: "Madame",
426 |       first: "Zoe",
427 |       last: "Dupont",
428 |     },
429 |   },
430 |   {
431 |     name: {
432 |       title: "Mr",
433 |       first: "Till",
434 |       last: "Kögler",
435 |     },
436 |   },
437 |   {
438 |     name: {
439 |       title: "Mr",
440 |       first: "Babür",
441 |       last: "Aykaç",
442 |     },
443 |   },
444 |   {
445 |     name: {
446 |       title: "Mr",
447 |       first: "بردیا",
448 |       last: "حسینی",
449 |     },
450 |   },
451 |   {
452 |     name: {
453 |       title: "Miss",
454 |       first: "Aliya",
455 |       last: "Brudevoll",
456 |     },
457 |   },
458 |   {
459 |     name: {
460 |       title: "Mrs",
461 |       first: "Isobel",
462 |       last: "Anderson",
463 |     },
464 |   },
465 |   {
466 |     name: {
467 |       title: "Ms",
468 |       first: "Alice",
469 |       last: "Côté",
470 |     },
471 |   },
472 |   {
473 |     name: {
474 |       title: "Mr",
475 |       first: "Josep",
476 |       last: "Velasco",
477 |     },
478 |   },
479 |   {
480 |     name: {
481 |       title: "Mr",
482 |       first: "Joshua",
483 |       last: "Saur",
484 |     },
485 |   },
486 |   {
487 |     name: {
488 |       title: "Ms",
489 |       first: "Alida",
490 |       last: "Sollid",
491 |     },
492 |   },
493 |   {
494 |     name: {
495 |       title: "Mr",
496 |       first: "Jonathan",
497 |       last: "Willis",
498 |     },
499 |   },
500 |   {
501 |     name: {
502 |       title: "Mr",
503 |       first: "Adriel",
504 |       last: "Barros",
505 |     },
506 |   },
507 |   {
508 |     name: {
509 |       title: "Ms",
510 |       first: "Charlotte",
511 |       last: "Gerard",
512 |     },
513 |   },
514 |   {
515 |     name: {
516 |       title: "Ms",
517 |       first: "Amelia",
518 |       last: "Clarke",
519 |     },
520 |   },
521 |   {
522 |     name: {
523 |       title: "Mr",
524 |       first: "Magnus",
525 |       last: "Senf",
526 |     },
527 |   },
528 |   {
529 |     name: {
530 |       title: "Mrs",
531 |       first: "Yolanda",
532 |       last: "Muñoz",
533 |     },
534 |   },
535 |   {
536 |     name: {
537 |       title: "Mrs",
538 |       first: "Susan",
539 |       last: "Hill",
540 |     },
541 |   },
542 |   {
543 |     name: {
544 |       title: "Ms",
545 |       first: "Andira",
546 |       last: "Sales",
547 |     },
548 |   },
549 |   {
550 |     name: {
551 |       title: "Mr",
552 |       first: "Victor",
553 |       last: "Moore",
554 |     },
555 |   },
556 |   {
557 |     name: {
558 |       title: "Monsieur",
559 |       first: "Mauro",
560 |       last: "Thomas",
561 |     },
562 |   },
563 |   {
564 |     name: {
565 |       title: "Mrs",
566 |       first: "Ege",
567 |       last: "Günday",
568 |     },
569 |   },
570 |   {
571 |     name: {
572 |       title: "Mr",
573 |       first: "Enrique",
574 |       last: "White",
575 |     },
576 |   },
577 |   {
578 |     name: {
579 |       title: "Mr",
580 |       first: "Nathaniel",
581 |       last: "Silva",
582 |     },
583 |   },
584 |   {
585 |     name: {
586 |       title: "Mr",
587 |       first: "Sandor",
588 |       last: "Stroh",
589 |     },
590 |   },
591 |   {
592 |     name: {
593 |       title: "Miss",
594 |       first: "Frida",
595 |       last: "Pedersen",
596 |     },
597 |   },
598 |   {
599 |     name: {
600 |       title: "Mrs",
601 |       first: "Marta",
602 |       last: "Silva",
603 |     },
604 |   },
605 |   {
606 |     name: {
607 |       title: "Mr",
608 |       first: "Leander",
609 |       last: "Bergquist",
610 |     },
611 |   },
612 |   {
613 |     name: {
614 |       title: "Mr",
615 |       first: "Niklas",
616 |       last: "Hakala",
617 |     },
618 |   },
619 |   {
620 |     name: {
621 |       title: "Mr",
622 |       first: "Matias",
623 |       last: "Pietila",
624 |     },
625 |   },
626 |   {
627 |     name: {
628 |       title: "Ms",
629 |       first: "Célia",
630 |       last: "Simon",
631 |     },
632 |   },
633 |   {
634 |     name: {
635 |       title: "Mr",
636 |       first: "James",
637 |       last: "Walker",
638 |     },
639 |   },
640 |   {
641 |     name: {
642 |       title: "Ms",
643 |       first: "Elif",
644 |       last: "Kıraç",
645 |     },
646 |   },
647 |   {
648 |     name: {
649 |       title: "Mrs",
650 |       first: "Kati",
651 |       last: "Schorr",
652 |     },
653 |   },
654 |   {
655 |     name: {
656 |       title: "Mr",
657 |       first: "Lucas",
658 |       last: "Pedersen",
659 |     },
660 |   },
661 |   {
662 |     name: {
663 |       title: "Mr",
664 |       first: "Babür",
665 |       last: "Beşok",
666 |     },
667 |   },
668 |   {
669 |     name: {
670 |       title: "Ms",
671 |       first: "Yael",
672 |       last: "De Vegt",
673 |     },
674 |   },
675 |   {
676 |     name: {
677 |       title: "Mrs",
678 |       first: "Claudia",
679 |       last: "Bishop",
680 |     },
681 |   },
682 |   {
683 |     name: {
684 |       title: "Miss",
685 |       first: "Sophie",
686 |       last: "Garcia",
687 |     },
688 |   },
689 |   {
690 |     name: {
691 |       title: "Mr",
692 |       first: "Warren",
693 |       last: "Kim",
694 |     },
695 |   },
696 |   {
697 |     name: {
698 |       title: "Miss",
699 |       first: "Alison",
700 |       last: "Morris",
701 |     },
702 |   },
703 |   {
704 |     name: {
705 |       title: "Ms",
706 |       first: "Alexia",
707 |       last: "Leroy",
708 |     },
709 |   },
710 |   {
711 |     name: {
712 |       title: "Ms",
713 |       first: "رها",
714 |       last: "مرادی",
715 |     },
716 |   },
717 |   {
718 |     name: {
719 |       title: "Miss",
720 |       first: "Susanna",
721 |       last: "Moore",
722 |     },
723 |   },
724 |   {
725 |     name: {
726 |       title: "Mademoiselle",
727 |       first: "Nelli",
728 |       last: "Robert",
729 |     },
730 |   },
731 |   {
732 |     name: {
733 |       title: "Miss",
734 |       first: "یاسمن",
735 |       last: "سهيلي راد",
736 |     },
737 |   },
738 |   {
739 |     name: {
740 |       title: "Ms",
741 |       first: "مارال",
742 |       last: "سلطانی نژاد",
743 |     },
744 |   },
745 |   {
746 |     name: {
747 |       title: "Mr",
748 |       first: "Kornelius",
749 |       last: "Røyland",
750 |     },
751 |   },
752 |   {
753 |     name: {
754 |       title: "Mr",
755 |       first: "Arcanjo",
756 |       last: "Nogueira",
757 |     },
758 |   },
759 |   {
760 |     name: {
761 |       title: "Mr",
762 |       first: "Dursun",
763 |       last: "Reiss",
764 |     },
765 |   },
766 |   {
767 |     name: {
768 |       title: "Mrs",
769 |       first: "Vår",
770 |       last: "Slettebø",
771 |     },
772 |   },
773 |   {
774 |     name: {
775 |       title: "Mr",
776 |       first: "Luis",
777 |       last: "Owens",
778 |     },
779 |   },
780 |   {
781 |     name: {
782 |       title: "Mr",
783 |       first: "Ryder",
784 |       last: "Ennis",
785 |     },
786 |   },
787 | ];
788 | 


--------------------------------------------------------------------------------