React Native

React Native | Meta

React Native is an open-source framework that leverages React and the native capabilities of platforms to create cross-platform applications. Throughout this course, you will progress from fundamental React concepts to advanced implementation using React Native. You'll explore diverse React components and various methods of styling them, alongside practicing interactive mobile development techniques with React Native.

Key skills covered include building single-page applications in React Native, styling with basic components, managing extensive lists, configuring user inputs, and utilizing the Pressable component for creating interactive elements. You'll also learn to set up navigation using React Navigation to facilitate seamless transitions between app screens.

This course equips learners with proficiency in React, React Native, essential front-end languages (HTML, CSS, JavaScript), JSX syntax, and popular coding environments like Expo and Visual Studio Code. It's designed for those aspiring to enter the field of mobile development, requiring a foundational understanding of React fundamentals, basic internet navigation skills, and a strong enthusiasm for coding.

Enroll Course

---

Notice!
Always refer to the module on your course for the most accurate and up-to-date information.

Attention!
If you have any questions that are not covered in this post, please feel free to leave them in the comments section below. Thank you for your engagement.

Module quiz: Introduction to React Native

1. Of the following, what are some benefits of React Native? Select all that apply.

• Builds cross-platform native apps
• Cost-effective
• Superior developer experience
• Uses Swift and Kotlin

2. React Native components can be categorized into the following groups. Select all that apply.

• Core Components
• Your native custom components
• None of the above.
• Community Components

3. Which of the following statements are true about React Native?

• React Native is cost-effective since there is no need for multiple teams. A single code base is shared between iOS and Android, and all code changes reflect upon both platforms.
• React Native has separate code bases for both iOS and Android. These have to be maintained by two different teams of developers. Because of this, React Native could be quite expensive.

4. If you are new to mobile development, what is the recommended way to set up React Native?

• Using Expo CLI
• Using React Native CLI

5. With Expo, you can push the Over The Air (OTA) updates. This is because:

• Expo CLI is a paid service, and you can override app store requirements to push updates.
• All of the code is written in JavaScript, without native code. This enables Expo to push updates OTA.

6. Which of the following is true about the View component? 

• A View component is a parent element that cannot have other views inside it.
• A View component can be nested inside other views and can have as many children of any type.

7. Styles should not be abstracted away from the render function of a component, as this would make the code harder to read and understand. True or false?

• True
• False

8. Which job title would be most applicable if you learned React Native and used it to develop applications?

• Android Developer
• Cross-Platform Developer
• iOS Developer

9. You are asked to write a readable and clean component. Which of the following code snippets better matches this description?

import * as React from 'react';

import { View, Text, StyleSheet } from 'react-native';

export default function LittleLemonHeader() {

  return (

    <View style={headerStyles.container}>

      <Text style={headerStyles.headerText}>

        Little Lemon

        <Text style={headerStyles.innerText}> Cafe</Text>

      </Text>

    </View>

  );

}

const headerStyles = StyleSheet.create({

  container: {

    flex: 0.1,

    backgroundColor: '#F4CE14',

  },

  headerText: {

    padding: 40,

    fontSize: 30,

    color: 'black',

    textAlign: 'center',

  },

  innerText: {

    fontWeight: 'bold',

  },

});

import * as React from 'react';

import { View, Text } from 'react-native';

export default function LittleLemonHeader() {

  return (

    <View style={{ flex: 0.1, backgroundColor: '#F4CE14' }}>

      <Text style={{ padding: 40, fontSize: 30, color: 'black', textAlign: "center" }}>

        Little Lemon

        <Text style={{ fontWeight: 'bold' }}> Cafe</Text>

      </Text>

    </View>

  );

}

10. Which of the following code snippets are correct and will not throw any errors? Select all that apply.

<ScrollView>

  Some text

</ScrollView>

<ScrollView>

  <Text>Some text

    <Text> Some more text</Text>

  </Text>

</ScrollView>

<ScrollView>

  <Text>

    Some text

  </Text>

</ScrollView>

<ScrollView>

  <Text>

    Some text 

  </ScrollView>

</Text>

Module quiz: Lists and Text Input in React Native

1. You need to display a large list of items in your app while maintaining solid performance. Which components could you use to accomplish this? Select all that apply.

• FlatList
• ScrollView
• SectionList

2. The keyExtractor is a required prop to both the FlatList and SectionList components. True or false?

• True
• False

3. Which feature is NOT supported by the FlatList component? Select the correct option.

• Header, footer, and separator support
• Fully cross-platform
• Pull to refresh support
• Sectional support

4. Observe the emulator screenshot below; which one of the following code snippets will produce this output on the emulator?

const MyLoginComponent = () => {

  const [userName, onChnageUserName] = React.useState('');

  const [password, onChangePassword] = React.useState('');

  return (

    <SafeAreaView>

      <TextInput

        style={styles.input}

        onChangeText={onChnageUserName}

        value={userName}

        placeholder="first name"

      />

      <TextInput

        style={styles.input}

        onChangeText={onChangePassword}

        value={password}

        placeholder="password"

      />

    </SafeAreaView>

  );

};

const MyLoginComponent = () => {

  const [userName, onChnageUserName] = React.useState('');

  const [password, onChangePassword] = React.useState('');

  return (

    <SafeAreaView>

      <TextInput

        style={styles.input}

        onChangeText={onChnageUserName}

        value={userName}

        placeholder="first name"

      />

      <TextInput

        style={styles.input}

        onChangeText={onChangePassword}

        value={password}

        secureTextEntry={true}

        placeholder="password"

      />

    </SafeAreaView>

  );

};

5. Which method would you use to make a native text input lose focus? 

•  blur()
•  focus()
•  isFocused() 

6. Which one of these props are used to configure a separator component between each item in the FlatList?

• ItemSeparatorComponent
• SectionSeparatorComponent
• ListSeparatorComponent

7. The SectionList component can be rendered without providing the sections prop to it.

• True
• False

8. Observe the output on the emulator screenshot below, and determine what component you would use to display this list of items within your app. Note: More items will appear as you scroll down the screen.

• FlatList
• ScrollView
• SectionList

9. Select all the keyboard types that are supported cross-platform by the TextInput component.

• web-search
• email-address
• number-pad
• phone-pad

10. Internal state is preserved when the content is scrolled out of the screen in which of these components? Select the correct option.

• ScrollView
• FlatList
• SectionList

Module quiz: Pressable, Images and Hooks in React Native

1. Which of these hooks belong to the core React Native package? Select all that apply.

• useColorScheme
• useWindowDimensions
• useAppState

2. Which component would you use to display a background image on your mobile screen?

• ImageBackground
• View
• Image

3. The Pressable component can accept child/children elements that can be a clickable area. True or false?

• True 
• False

4. What are the values accepted by the resizeMode prop to the Image component? Select all that apply.

• cover
• contain
• stretch
• left

5. Which of the following statements are true about the Image component? Select all that apply.

• The Image component can fetch and display images from a network.
• The Image component can fetch and display images from local storage. 
• The Image component cannot fetch and display images from a network location. 

6. Examine the emulator below and determine which code snippets will produce this output that is illustrated.

import React from 'react';

import { View, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({

  container: {

    flex: 1,

    margin: 10,

  },

  logo: {

    width: 100,

    height: 100,

    flex:1

  },

});

const DisplayAnImageWithStyle = () => {

  return (

    <View style={styles.container}>

      <Image

        resizeMode={"cover"}

        style={styles.logo}

        source={require('./logo.png')}

      />

    </View>

  );

}

export default DisplayAnImageWithStyle;

import React from 'react';

import { View, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({

  container: {

    flex: 1,

    margin: 10,

  },

  logo: {

    width: 100,

    height: 100,

    flex:1

  },

});

const DisplayAnImageWithStyle = () => {

  return (

    <View style={styles.container}>

      <Image

        resizeMode={"stretch"}

        style={styles.logo}

        source={require('./logo.png')}

      />

    </View>

  );

}

export default DisplayAnImageWithStyle;

import React from 'react';

import { View, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({

  container: {

    flex: 1,

    margin: 10,

  },

  logo: {

    width: 100,

    height: 100,

    flex:1

  },

});

const DisplayAnImageWithStyle = () => {

  return (

    <View style={styles.container}>

      <Image

        resizeMode={"contain"}

        style={styles.logo}

        source={require('./logo.png')}

      />

    </View>

  );

}

export default DisplayAnImageWithStyle;

7. Which hook would you use to determine whether the app's current state is active, inactive, or backgrounded? Select the correct option.

• useKeyboard
• useAppState
• useDeviceOrientation

8. The useState hook is used when you want to handle data that changes over time or comes from user interaction within a component. True or false?

• True
• False

9. Which of the following is true about the ImageBackground component? Select the correct option.

• The ImageBackground component has props different from the Image component.
• The ImageBackground component has the same props as the Image component.

10. Which of the following methods is triggered when the person leaves their finger longer than 500 ms before removing it from a Pressable component? 

• onLongPress
• onPressOut
• onPressIn
• onPress

Module quiz: React Navigation

1. The entire app must be wrapped in the NavigtionContainer while setting up React Navigation. Observe the statement below for importing NavigationContainer, and select the statement that describes it accurately.

import { NavigationContainer } from '@react-navigation/native';

• The NavigationContainer is imported from the correct package and will cause an error.
• The NavigationContainer is imported from the correct package.

2. Which one of the following methods from the navigation prop would you use to go back to the previous screen in the stack history? (Assuming there are multiple screens)

• push
• goBack
• pop
• popToTop

3. Which methods will you use to move from one screen to another using React Navigation?

• navigation.push('Details')
• navigation.navigate('Details')
• navigation.goTo('Details')

4. Which option would you use to set specific options for each screen and customize its header bar in React Navigation?

• options
• screenOptions

5. Which of the following options would you configure to style the appearance of the drawer in Drawer Navigation? Select the correct option.

• drawerType
• drawerStyle
• drawerPosition

6. Select the option which cannot be used to configure the tint color of a tab bar icon in the Tab Navigator.

• tabBarActiveTintColor
• tabBarInactiveTintColor
• tabBarColor

7. What prop would you use to set up the initial default route within a Drawer Navigator? Select the correct option.

• name
• component
• intialRouteName

8. To set up Drawer Navigation using React Navigation, which of the following dependencies do you need? Select all that apply.

• react-native-gesture-handler
• react-navigation/native-stack
• react-native-reanimated
• @react-navigation/drawer

9. The Drawer Navigator allows you to customize the position of the drawer. You can programmatically choose to open the drawer from right to left or left to right. True or false?

• True
• False

10. Study the code below and determine if it has set up Tab Navigation correctly for two screens, Home and Settings.

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; 

const Tab = createBottomTabNavigator(); 

function MyTabs() { 

  return ( 

    <Tab.Navigator> 

      <Tab.Screen name="Home" component={HomeScreen} /> 

      <Tab.Screen name="Settings" component={SettingsScreen} /> 

    </Tab.Navigator> 

  ); 

} 

• The code is incorrect and will throw an error.
• The code correctly sets up tab navigation.

Final course quiz: React Native

1. Observe the code below and select the statement that best describes it.

<Text style={{ fontWeight: 'bold' }}>

  I am bold

  <Text style={{ color: blue }}>and blue</Text>

</Text>

• The code is not valid.  Something is missing.
• This code is valid. It will print: I am bold and blue.

2. Which category of components include Text, ScrollView and Image? Select the correct option.

• Core Components
• Your native custom components
• Community Components

3. Select the performant components that are used for the lazy rendering of items on the screen.

• FlatList
• ScrollView
• SectionList

4. The _________ component renders all its React child components at once. This could result in slow rendering and increased memory usage. Select the option that best completes this statement.

• FlatList 
• ScrollView
• SectionList

5. Which of these hooks are part of the core React Native package? Select all that apply.

• useColorScheme
• useDeviceOrientation
• useWindowDimensions
• useKeyboard

6. Which of the following values to the resizeMode prop repeats the image to cover the frame of the view? Select the correct option.

• contain
• stretch
• cover
• repeat

7. Which of the following methods is triggered when the user removes their finger and the press gesture is deactivated? Select the correct option.

• onPressIn
• onPress
• onPressOut
• onLongPress

8. Which of these are React Navigation’s minimum requirements to be set up successfully? Select the correct option.

• react-native >= 0.70.0 and expo >= 42 (if you use Expo)
• react-native >= 0.56.0 and expo >= 41 (if you use Expo)
• react-native >= 0.63.0 and expo >= 41 (if you use Expo)

9. Observe the code below and select the statement that best describes it.

import MenuScreen from './Screens/MenuScreen';

import WelcomeScreen from './Screens/WelcomeScreen';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

export default function App() {

  return (

      <Tab.Navigator>

        <Tab.Screen name="Welcome" component={WelcomeScreen} />

        <Tab.Screen name="Menu" component={MenuScreen} />

      </Tab.Navigator>

  );

}

• The code is valid.
• The code is incorrect.

10. Which options would you use to configure where the drawer opens from in Drawer Navigation? Select the correct answer.

• drawerType
• drawerPosition
• drawerStyle

---

Related Articles