Mobile Applications course

Hints for Codecademy lessons on React Native

Version 1.0

Codecademy has a great series of lessons on the mobile app framework React Native. However, they will be a challenge unless you are already familiar with some React, and you'll need to be willing to skim the documentation.

While Codecademy already allows you to see certain hints or compare working code to your own, there are a number of little issues that can trip you up while you complete each lesson. This cheatsheet offers reminders that can help you overcome these pitfalls as you progress through the lessons.

This document was created for the University of Maine's New Media course in Mobile Applications.

Introduction to React Native

⚙️ While Expo Snacks are a great way to practice React Native and share code with others, to follow the lessons on installing React Native on your own machine will require you to pre-install:

• Visual Studio Code
• node
• npm
• yarn

As you progress through this lesson, you’ll need to enter several commands into the terminal and hit return. ⚠️ Make sure to type these commands correctly.

• node -v - Checks your version of Node.js
• npm -v - Checks your version of Node package manager
• npm install -g expo-cli - Installs the Expo command-line tools
• expo init hello-world - Creates a new Expo app
• cd hello-world - Moves you into the hello-world folder

Core components

🎩 Install Expo Go on your phone to try the following exercises on your own device.

View component

• ⛑Step 1: "Rendering a component" means writing it as an opening and closing tag, eg <View>Hey buddy</ View>
• ⛑Step 3: Wrap the existing <View> tag in a parent <View>, and give the parent the flex properties described in the instructions.
• ⛑Step 4: Add the <View> for your second box inside the parent <View>, after the first box.

Text component

• ⛑Step 1: Use camelCase for font size, and just set it to a number without "px". (If you give a raw number, React Native usually assumes it's pixels (technically "density-independent pixels," or dp). Enclose in quotes a number with any other unit, such as a percentage ('50%').

Image component

• ⛑Step 1: Just like the web, you can self-close an Image tag, eg <Image style={{ ... }} />.
• ⛑Step 2: The source attribute is still inside the <Image> tag, but separate from the style attribute.
• ⛑Step 3: Inside the source attribute, replace {{ uri: 'https://...' }} with { require( 'https://...' ) }. (You are dropping one set of enclosing braces.)

ScrollView component

• ⛑Step 1: When there are no instructions to change the code, just press Run to continue.
• 🎗Step 2: Be sure to import the ScrollView component on line 2.
• ⛑Step 3: You can just type horizontal inside the <ScrollView> tag without any associated value, and React Native will assume it's set to true.

Button component

• ⛑Step 1: Use the function setPressedCount defined in the useState hook to pass a number that is the current value of pressedCount plus one. (☹️ You can't use ++ in this context.)
• ⛑Step 2: A clever way to disable the button after 3 presses is to set its disabled attribute to a conditional inequality, eg pressedCount >= 3. Don't forget to wrap any JavaScript inside braces {}.

TextInput component

• ⛑Step 2: Replace the null inside the <TextInput>'s arrow function with the setName function and feed it the text parameter.
• ⛑Step 3: Just add the secureTextEntry attribute inside the <TextInput> tag; React Native will assume it's true.

Combining components

• ⛑Step 2: Change the empty parameter () in the function definition of Box to a variable name like props. Then change the specific color in your <View> attribute from 'red' (say) to props.color.
• ⛑Step 3: Replace each of the <View>s in the App function with your new <Box> tag. Although you referred in Step 2 to a props object in your function definition, in the <Box> tags you add inside App you should just set the property color to 'red' etc. without a props. prefix. React Native will use those values for props.color in the Box definition.

Styling in Expo and React Native

Stylesheets

• ⛑Step 2: Choose only one way to close a tag: either with an internal slash (<View />) or, if you are enclosing other content, a separate end tag (<View> </View>)
• 🎗Step 3: Don't forget to import StyleSheet along with View at the top.
• ⛑Step 3: Make sure to add a comma between style declarations, eg between layout: {...} and card: {...}
• ⛑Step 4: You won't notice any improvement in readability unless you delete the inline styles from the JSX inside the App function. In place of style={{...}}, write style={styles.layout} etc. (⚠️ Note that you are removing one set of braces.)

Combining Styles

• ⛑Step 1: The style attribute can take an array inside the braces, in which case you need both punctuation marks, eg style={[...]}.
• 🎗Step 2: Don't forget to import any new components you use.
• ⛑Step 2: You'll need to modify the definition of Box to use the conditional technique in the "AwesomeBox" example at top. Note that this requires naming the props passed to the function instead of just writing an empty parameter like Box = () =>.

Flex (box)

• ℹ️Step 1: Resizing your screen won't really do anything in the preview 🤷‍♂️
• 🎗Step 2: Don't forget to add quotes around percentage values (eg, '100%' )
• ℹ️Step 4: In this example, the <View>s corresponding to boxes end in a slash /, so they don't need an end tag like </View>.

Flex Justify Content

• 🎗Step 1: Remember that flex properties are almost always set on the parent, not the children.

Navigation

React Navigation

• ⛑Step 2: Define the new FeedScreen component after line 5 using the arrow notation, ie. const FeedScreen = () => (...). Note that instead of braces, component definitions enclose their contents in parentheses for returning JSX.

Tab Navigation

• ⛑Step 1: There are 8 places you need to switch from stack to tab navigation. Also note that "Tab" is singular in createBottomTabNavigator but plural in '@react-navigation/bottom-tabs' and <Tabs>.
• 🎗Step 2. Remember to define a new CatalogScreen component like you did with FeedScreen.

Programmatic Navigation

• 🎗Step 2: Remember to import the Button component from 'react-native'.

Nested Navigation

• 🎗Step 1: Remember to import createStackNavigator from '@react-navigation/stack'. You'll use it to create a Stack component that you'll add to your new ProfileNavigator definition.
• ⛑Step 1: When you create your OverviewScreen component, you have have to return something. You can copy and customize the same <View> and <Text> JSX that is now in the FeedScreen component.

Authentication Flow

• 🎗Step 1: Button takes two attributes, title and onPress, and the latter requires an anonymous function. You can use the setUser function defined in the LoginScreen.
• ⛑Step 3: You can write your conditional with the hasUser variable defined in useContext.
• 🎗Step 3: React requires that you put the if and else statements outside the return blocks.