Mobile App Design with React Native

Latest Framework from Facebook for Professional Apps

Mobile App Development4.6(47)16h 56m84 lectures9 sections

What you'll learn

  • Understand what React Native is and install the tools
  • Use Expo and create your first project
  • Work with the core components
  • Style screens with Style Sheet and FlexBox
  • Design the project screens
  • Create form elements and sign-in screens
  • Request access permissions and work with images and location
  • Navigate between screens
  • Work with networking and APIs

About this course

This course teaches mobile app design with React Native, a framework from Facebook for building Android and iOS apps with JavaScript. It starts with the course introduction and its requirements, installing the tools, creating your first project and a look at Expo. Next you learn the core components such as View, Text, Image, Touchable, Buttons and Alerts, then Style Sheet, FlexBox, positioning elements and designing several screens. Then you work with TextInput, Switch, Modal, creating form elements and the LoginScreen and RegisterScreen. You also learn native features such as access permissions, images and Location, and navigation between screens through StackNavigator and TabNavigator, and finally networking and APIs with Postman, Fetch and Axios. The course suits anyone who knows the basics of JavaScript and wants to build mobile apps. Afterward you will be able to design the app screens, connect them and carry out a complete project that connects to a server. The teaching is practical and gradual, and you follow the lessons in order to move from the idea to the application step by step.

Expected outcomes

  • Ability to create mobile applications using React Native.
  • Deep understanding of network handling and device features.
  • Create applications that support screen navigation and user interaction.
  • Master the use of tools that enhance application efficiency.

Learner reviews

These reviews are from learners who bought the content and completed at least 50% of it — there are no reviews from anyone who hasn't gone through the material.
4.6
★★★★★
47 reviews
5★
28
4★
17
3★
2
2★
0
1★
0

    Course content

    1

    Introduction to React Native

    6 lectures
    1. Course IntroductionIntroduces the app to be built with React Native for Android and iOS, covering register and login screens, home, account, messages, adding a post or image, and device location, along with an organized folder structure.3:01
    2. Course RequirementsExplains the prerequisites for learning React Native: JavaScript with its advanced concepts such as object-oriented programming and modules, then React with concepts like components, JSX, props, hooks and state.3:44
    3. What is React NativeDefines React Native as a framework for building mobile apps for Android and iOS in JavaScript with components like View and Text, compares it with each platform's native languages, and notes that Facebook developed it.9:31
    4. Installing the ToolsWalks through installing the tools needed on Windows to build React Native apps, including Node.js, npm and Expo, helpful code editor extensions, and installing the Expo app on the phone to test the project.17:07
    5. Creating Your First ProjectExplains creating the first React Native project with Expo and npm commands, the project file structure, adding styles, and running the app on Expo Go with instant refresh on changes.14:30
    6. An Overview of ExpoExplains the Expo tool and its services as a development environment for React Native apps, including Snack, running the app on a device, creating a project with the right command, and terminal shortcuts to restart.13:52
    2

    Explaining Basic Components

    9 lectures
    1. Chapter Introduction (Explaining the Basic Components)Introduces the second chapter on the core components of React Native, previews components such as a button, and shows how the documentation lists each component's props and which ones are specific to Android or iOS.9:49
    2. ViewExplains the View component in React Native as a core building block of interfaces, trying out placing elements inside it and setting its height, and showing how nested Views affect the layout space.18:02
    3. TextExplains the Text component for displaying text in React Native, its props such as style, font size and limiting the number of lines, and handling presses with onPress while logging the result in the terminal.14:48
    4. ImageExplains the Image component in React Native for showing pictures from project files via require and from the internet via uri, and props such as blurRadius and resizeMode for effects and fitting the image to its frame.19:09
    5. TouchableExplains Touchable components such as TouchableHighlight, TouchableOpacity and TouchableWithoutFeedback for adding press interaction, the opacity effect on an image, long press, and the Android-only TouchableNativeFeedback.18:56
    6. ButtonsExplains the built-in Button component in React Native, its key props such as title and press handler, how its look differs between Android and iOS, and unifying the look with a custom approach.8:06
    7. AlertsExplains the Alert API for showing a notification message to the user, adding buttons with handlers such as confirming a deletion, and Alert.prompt which asks for text input and works on iOS only.15:55
    8. Style SheetExplains using StyleSheet.create instead of inline styles, defining a styles object that groups styles under keys, preferably one per component, and how this differs from writing CSS on the web.7:33
    9. PlatformExplains using Platform to detect the operating system and run code specific to Android or iOS, fixing a button overlapping the status bar with SafeAreaView and top padding, and the StatusBar.currentHeight value.12:23
    3

    Dimensions and Layout Organization

    10 lectures
    1. DimensionsExplains how to get the device screen dimensions through Dimensions, why sizes differ between devices, the difference between pixels and density-independent units, and using percentages for a responsive layout.17:50
    2. OrientationsExplains how to detect screen orientation and handle its changes using hooks such as useWindowDimensions and useDeviceOrientation, distinguishing between screen and window dimensions and adjusting the interface accordingly.19:07
    3. FlexBoxExplains the Flexbox system for laying out screens in React Native, using the flex property to divide space between elements proportionally, and applying it to draw the Egyptian flag with equal or unequal color bands.10:46
    4. FlexDirectionExplains the flexDirection property in Flexbox with its values row, row-reverse, column and column-reverse, showing how it orders items inside the container, the main and cross axes, with the Egyptian flag example.7:34
    5. Control Element PositionExplains the properties controlling item placement inside a View such as justifyContent and alignItems, their start, end, center and spacing values, and the difference between row and column direction and reversed order.17:59
    6. Element Exit from ScreenExplains handling items that overflow the screen frame, using flexWrap to move them to a new line, and alignContent to distribute the lines when the content exceeds the screen size.4:41
    7. Define Element PositionExplains positioning an element with the position property, offsetting it with positive or negative top, left, right and bottom values, and the difference between relative to neighbors and absolute to the screen.6:57
    8. Design First Screen in ProjectExplains designing the app's first screen with an ImageBackground, centering the logo, and placing two buttons at the bottom of the screen, adjusting sizes and alignment with the layout properties learned.29:51
    9. Design Second Screen in ProjectExplains designing the second screen that shows an image on a black background with two small buttons, setting the button size and color from the shared colors file, and separating primary and secondary colors in a module.25:29
    10. Upload Project Files 1
    4

    Style

    12 lectures
    1. BorderExplains the Border style in React Native: adding a border around an element with a color and width, using borderRadius to make it circular, and setting different borders for each side of the element.8:30
    2. ShadowExplains the Shadow style in React Native and how to set its color, offset and opacity on iOS, noting that Android needs the elevation property instead to display a shadow.8:18
    3. PaddingExplains the difference between padding and margin in React Native: padding adds inner space between an element's edge and its content, margin adds outer space from other elements, along with the per-side variants.7:47
    4. Text FormattingExplains text styling properties in React Native, such as fontWeight, text alignment with textAlign, and fontFamily, including how supported fonts differ between Android and iOS.16:12
    5. Create New Text ElementExplains creating a reusable custom text component, unifying text styling across the whole app, and choosing the font per operating system with Platform instead of repeating code.12:23
    6. IconExplains showing icons in the app with the vector icons library, browsing, choosing and importing icons, changing their size, and why they keep their quality when enlarged unlike regular images.9:53
    7. Re-edit First Screen in ProjectExplains creating a reusable AppButton component, styling it with width, rounded corners and margins, passing the title and color as props with a default color, and applying it on the first screen.27:36
    8. Re-edit Second Screen in ProjectExplains updating the second screen by adding two MaterialCommunityIcons icons, close and delete, inside two View elements, setting their color and size, and removing the background to keep only the icon.6:17
    9. Create Card ElementExplains creating a Card component that shows an item with its image, title and subtitle, receiving these values as props, styling the price text, so it can be reused later in lists.26:52
    10. Create ItemBuilds a ListItem component in React Native that shows a person's picture, name, and number of subscribers, receiving these values as props and styling them.12:23
    11. Design the Third Screen in the ProjectDesigns the third screen, which opens when a card is pressed, arranging the image, title, price, and containers with styles, adding a new color for the list and setting the padding.14:35
    12. Download Project Files 2
    5

    Working with Lists

    8 lectures
    1. Design the Fourth Screen in the Project Using FlatListIntroduces the chapter on lists and builds the messages screen with FlatList, passing the data array, a renderItem function to display each item, and a keyExtractor to give each item a unique key.17:46
    2. Create Screen ItemCreates a reusable Screen component to fix content rendering under the status bar on Android, using SafeAreaView and StatusBar.currentHeight to adjust the top padding.15:33
    3. Create Separator ItemCreates a reusable Separator component that divides list items, using it with ItemSeparatorComponent in FlatList with full width, thin height and a light color, then adds it to the messages screen.9:10
    4. How to Select an Item in the ListExplains making an item pressable with a Touchable component, changing the highlight color on press with underlayColor, and linking the press to a function that runs logic for the selected list item.7:37
    5. Refresh Screen DataExplains refreshing screen data by pulling down in a FlatList, using useState to hold messages along with the refreshing property and an onRefresh function to add new messages.7:44
    6. Design the Fifth Screen for Displaying GoodsExplains designing the listings screen with a FlatList that renders a Card component, passing data to it, using keyExtractor to set each item's key, and setting the screen colors and styling.12:04
    7. Design the Sixth Screen for Displaying Personal AccountExplains designing the personal account screen with a ListItem component showing the user image, name and email, plus an options list with colored circular icons, each navigating to its own screen.32:02
    8. Download Project Files 3
    6

    Handling Inputs

    11 lectures
    1. Working with the TextInput ComponentExplains working with the TextInput component to receive user input, its props such as limiting the number of characters and choosing the keyboard type, and reading the typed value and showing it instantly using state.14:53
    2. Create AppTextInput ComponentCreates a reusable AppTextInput component that combines a TextInput with an icon and consistent styling, passes props through using spreading, and tests it by typing text to confirm it works.18:15
    3. Working with the Switch ComponentExplains working with the Switch component and how it looks different on Android and iOS, using the value prop to set its state and onValueChange to update it, tied to state so it toggles when pressed.11:29
    4. Create AppPicker ComponentExplains building an AppPicker component from existing Picker code, showing categories when pressed, and adding a MaterialCommunityIcons icon next to the text with proper layout styling.12:19
    5. Working with the Modal ComponentExplains using a Modal to show the category list inside the AppPicker when pressed, choosing an item from the list and displaying it, then closing the modal and showing the selected item's icon.18:56
    6. Create Form ItemsExplains building form elements with the Formik and Yup libraries, where Formik manages field values and submission, and Yup validates the input through a validation schema and shows errors.28:36
    7. Design the LoginScreenExplains designing the login screen with email and password fields using Formik and Yup, defining a validation schema for the email, showing error messages, and adding the logo with layout styling.21:16
    8. Design the RegisterScreenExplains designing the registration screen with name, email and password fields using Formik and Yup, setting the keyboard type for email, hiding the password with secureTextEntry, and logging the entered values.16:54
    9. Design the ListingEditScreenExplains designing the ListingEditScreen for adding an item using a Formik form with title, price, category and description fields, defining a validation schema and field lengths, and adding the submit button.16:48
    10. Some Modifications and Improvements in the ProjectReviews improvements to the previous chapter's code, such as adding a Picker to choose a category, adjusting item widths, and limiting the lines of card text, and previews adding app logic and images next.9:12
    11. Download Project Files 4
    7

    Handling Native Features

    10 lectures
    1. Introduction to the Chapter (Working with Native Features)Introduces the chapter on native device features such as the camera, photos and location, looks for the suitable Expo library to pick images, browses its documentation and installs it in the project.9:21
    2. Requesting Access PermissionsExplains requesting permission to access photos in the app through ImagePicker and a function that runs only once using useEffect, then checking the request result and whether permission was granted.10:43
    3. Working with Different Access PermissionsExplains handling different access permissions through the Permissions API in Expo, requesting several permissions such as camera and location, checking the grant result and acting based on whether the user accepts or refuses.7:58
    4. Accessing Images from the DeviceExplains accessing device photos after getting the user's permission, launching the image library when a button is pressed, and displaying the selected image inside an Image component.9:19
    5. Creating an ImageInput ComponentExplains building an ImageInput component for picking images, requesting camera permission with useEffect, opening the image library on press, and styling the container and the displayed image.21:55
    6. Creating an ImageInputList ComponentExplains building an ImageInputList component that shows the chosen images inside a ScrollView, with add and remove handlers, keeping image paths in an array and deleting an image when it is pressed.16:32
    7. Creating a FormImagePicker ComponentExplains building a FormImagePicker that connects ImageInputList to Formik, handling image errors, adding and removing images through setFieldValue, and showing an error message when no image is chosen.8:16
    8. Uploading Images and Adding Them to ListingEditScreenExplains adding the FormImagePicker to the ListingEditScreen for uploading item photos, linking it to the images field in Formik, hiding the error message once an image is chosen, and preparing the data to send to the server.4:35
    9. Accessing Phone LocationExplains accessing the phone's location with the expo-location library, requesting location permission, getting latitude and longitude, then moving the code into a custom useLocation hook reusable on any screen.15:24
    10. Downloading Project Files 5
    8

    Navigating Between Screens

    12 lectures
    1. Introduction to the Chapter (Navigating Between Screens)Introduces the chapter on navigating between screens, presents navigator types such as Stack, Tab and Drawer, then installs the React Navigation library along with the supporting packages it needs.6:29
    2. Working with StackNavigatorExplains using the Stack Navigator from the React Navigation library: installing the library, creating the navigator with createNativeStackNavigator, defining screens inside it and wrapping it in a NavigationContainer.16:17
    3. How to Navigate Between Screens Using the StackExplains navigating between screens with Stack: wrapping the navigator in a NavigationContainer, using navigation.navigate to go to another screen, and accessing navigation in components that are not screens via useNavigation.8:23
    4. Sending Data Between ScreensExplains sending data from one screen to another through the route, passing an object with an id, name and description during navigation, and reading and displaying it on the second screen.9:16
    5. Changing the Header StyleExplains changing the header style in navigation, such as the background color, setting it for a single screen or for all screens through the Navigator options, and which one takes priority when they conflict.6:29
    6. Working with TapNavigatorExplains tab navigation with the bottom tab navigator, installing the package, creating a Tab Navigator with two screens, and using it in place of the Stack inside the NavigationContainer.8:27
    7. Working with Screen Styles via TapExplains styling the Tab Navigator, such as active and inactive tab colors and icon size, adding an icon to each tab through tabBarIcon, and hiding the duplicate header when a Stack is nested inside a tab.11:17
    8. Create Transition Element AuthNavigationExplains creating an AuthNavigation in a navigation folder, using a Stack Navigator that links the welcome, login and register screens, hiding the header, and navigating between screens through button presses.8:27
    9. Create Transition Elements AppNavigation, FeedNavigationConnects the app screens through the AppNavigation and FeedNavigation components in React Native, sets up the bottom tabs and headers, and passes the pressed item's data from the list screen to the next screen.18:43
    10. Create Transition Element AccountNavigationCreates the AccountNavigation component following the same idea as FeedNavigation, links it to the account tab in AppNavigation, and adds a button on the account screen that navigates to the messages screen.5:34
    11. Design AppNavigationAdds MaterialCommunityIcons icons to the AppNavigation tabs and builds a custom button for the middle tab as a function component, styling it and handling its press to navigate to the target screen.11:52
    12. Upload Project Files 6
    9

    Handling Networks

    6 lectures
    1. Chapter Introduction (Working with Networks)Introduces the chapter on networking and connecting the app to a backend instead of dummy data, covering internet and web concepts, the HTTP protocol, and tools such as fetch and axios for GET, POST and DELETE requests.3:35
    2. Working with the BackEndExplains core networking concepts: what the internet is, the request sent from the browser to the server and its parts such as the URL, the GET, POST and DELETE methods, response status codes, and the server's endpoints.23:39
    3. Understanding the APIExplains the concept of an API as the link between the user interface, the backend server and the database, comparing it to a waiter who carries the order to the kitchen and brings back the response.4:21
    4. Working with PostmanExplains using Postman to test the backend, sending a POST request with body data and a GET request to fetch categories, and understanding the server response and success status.11:47
    5. Working with Fetch and AxiosExplains two ways to talk to an API from the app, the browser built-in Fetch that returns a Promise and the Axios library, and how to request data and read the response.9:28
    6. Downloading Project Files 7

    Instructor

    Eng. Amr Abdel Fattah

    Eng. Amr Abdel Fattah

    Computer systems engineer specializing in mobile app and website development, with experience in creating popular platforms and web applications.
    49.1K views20 courses

    Related courses