About the course
React Native empowers JavaScript developers to build truly native mobile applications for both iOS and Android from a single, shared codebase. By leveraging their existing web development skills, particularly in JavaScript and React, developers can efficiently create performant and visually appealing mobile experiences that utilise native device capabilities. This 3-day hands-on training course provides a comprehensive introduction to the world of cross-platform mobile app development using React Native and the power of the React library. Participants will gain the practical knowledge and experience needed to understand how React Native works under the hood, set up their development environment using modern tools like Expo, and begin the process of creating user interfaces composed of native components.
The course delves into the core concepts of building mobile UIs, providing a thorough understanding of essential layout components and flexible styling techniques, with a focus on Flexbox. Participants will learn how to create responsive designs that adapt to different screen sizes and orientations. A significant portion is dedicated to reinforcing core React principles such as state, props, and the effective use of hooks (useState, useEffect, useContext), explaining how these fundamental concepts are applied within a mobile context for managing application data and component behaviour. Participants will gain practical experience in handling data by calling external APIs and learn how to utilise various mobile data storage options, including SecureStore, AsyncStorage, and SQLite, for managing application data on the device.
Beyond the foundational UI and data handling concepts, the course explores how to implement complex navigation patterns common in mobile applications, such as stack-based, tab-based, and drawer-based navigation. Participants will learn how to integrate common cross-platform native device APIs (like Alert, Geolocation, Camera, and Vibration), work with built-in form components (Slider, Switch, Picker), and build reusable components for efficient and maintainable code. The course concludes with essential practical topics, including understanding the importance of testing in React Native applications and a hands-on introduction to the modern deployment process for getting your developed apps onto user devices using tools like EAS Build.
Instructor-led online and in-house face-to-face options are available - as part of a wider customised training programme, or as a standalone workshop, on-site at your offices or at one of many flexible meeting spaces in the UK and around the World.
-
- Explain how React Native works, its underlying mechanisms, and its strengths and drawbacks.
- Set up a React Native development environment and utilise tools like Expo for development and debugging.
- Build mobile user interfaces using core React Native components and understand their native counterparts.
- Style React Native components effectively using Flexbox and other techniques to create responsive layouts.
- Apply core React concepts (state, props, useEffect, useContext) for managing component behaviour and data in a mobile app.
- Integrate with external APIs to fetch data and utilise various mobile data storage options (SecureStore, AsyncStorage, SQLite).
- Implement different navigation patterns (stack, tab, drawer) and manage navigation state.
- Use common cross-platform native device APIs (Alert, Geolocation, Camera, Vibration).
- Understand the importance of testing in React Native and perform basic testing and deployment of React Native apps.
-
This 3-day hands-on training course is designed for developers who want to leverage their existing JavaScript and React skills to build cross-platform native mobile applications for iOS and Android. It is ideal for:
JavaScript Developers who are comfortable coding JavaScript from scratch and want to move into mobile development.
Front-End Developers with experience in web development (HTML, CSS, JavaScript) looking to apply their skills to building native mobile apps.
Developers interested in building native mobile apps for both iOS and Android from a single codebase.
Individuals looking for a practical introduction to React Native development using modern tools and workflows.
-
Participants should have:
Attended our Modern JavaScript training course or have equivalent skills - e.g. be comfortable coding JavaScript from scratch, including familiarity with modern features (ES6+) such as arrow functions, classes, promises, and modules.
A solid understanding of web fundamentals (HTML and CSS), as concepts like the box model, positioning, and particularly Flexbox are directly relevant to React Native layout and styling.
Basic familiarity with React concepts (components, JSX, state, props) is highly helpful, though the course includes a module dedicated to reinforcing these fundamentals in a mobile context.
A development machine capable of running a mobile emulator/simulator (Xcode for iOS, Android Studio for Android) and a code editor (like VS Code). Administrator privileges may be required for environment setup.
-
This React Native course is available for private / custom delivery for your team - as an in-house face-to-face workshop at your location of choice, or as online instructor-led training via MS Teams (or your own preferred platform).
Get in touch to find out how we can deliver tailored training which focuses on your project requirements and learning goals.
-
Introduction to React Native
How React Native Works: A comprehensive introduction to its architecture and the underlying mechanisms of React Native, including how it interacts with native components and the role of the JavaScript bridge.
Strengths of React Native: Code reusability, performance, hot-reloading, large community.
Drawbacks of React Native: Potential performance bottlenecks for complex UIs, dependency on native modules, abstraction layer limitations.
Creating Your First React Native App: Setting up the development environment.
Expo: Introduction to Expo, including setup, using Expo Go on devices/simulators, JS debugging techniques, and live reloading/hot module replacement for efficient development.
Creating and Using Basic Components: Understanding core built-in components like View, Text, Image, and StyleSheet.
Hands-On Lab: Setting up the development environment (Expo or React Native CLI), creating a new project, running it on a simulator/device, exploring basic components and styling.
Layout
Study of fundamental layout components in React Native:
View: The most fundamental container for layout.
Text: For displaying text content.
Button and Touchable components: Handling user interaction (press events).
Layout with FlatList and SectionList: Efficiently rendering long lists of data.
VirtualizedList: Understanding performance optimisation for lists.
Modal: Creating modal dialogues or pop-up content.
Hands-On Lab: Building UI screens using View and Text, implementing buttons and touchable elements, creating a basic list view using FlatList.
Styling
React Native Styling vs. Web CSS.
StyleSheet.create: Organising and optimising styles.
Flexbox: Introduction to Flexbox for React Native layout and styling (flex direction, alignment, justification, flex property).
How to use Inline Styles for quick component styling (use cases and limitations).
Inspecting and Debugging Styles: Using the React Native inspector and browser developer tools to troubleshoot and perfect styles.
Handling dimensions: Using the Dimensions API for basic responsive styling.
onLayout event: Detecting component layout changes for more dynamic responsiveness.
Hands-On Lab: Styling components using StyleSheet.create and Flexbox, applying styles to create complex layouts, making layouts responsive using Dimensions and onLayout, debugging styles.
Understanding Core React Concepts in React Native
Deep dive into core React concepts as applied in React Native:
Components (Functional vs Class components - modern focus on Functional).
JSX syntax.
Props: Passing data and configuration to components.
State and useState: Managing mutable data within functional components.
useEffect: Handling side effects (data fetching, subscriptions) in functional components.
Component lifecycle (functional component perspective).
Building reusable functional components.
Hands-On Lab: Refactoring UI elements into reusable components, managing simple component state using useState, using useEffect for basic component lifecycle actions.
Calling APIs and Data Management
Fetching data from REST APIs using JavaScript's built-in Workspace API or libraries like Axios.
Handling asynchronous API calls with Promises and async/await.
Managing API data and loading states using useState and useEffect.
Introduction to Context API and useContext for managing global or shared application state (e.g., user authentication state, themes).
Structuring data fetching logic.
Hands-On Lab: Implementing API calls to fetch data, displaying fetched data in the UI, managing loading and error states, introducing basic shared state using useContext.
APIs and Data Storage Options
Introduction to various data storage options available in React Native.
AsyncStorage: Using a simple, unencrypted key-value store for small amounts of data.
SecureStore (Expo): Storing sensitive data securely.
SQLite (or similar database libraries): Using a local database for structured data storage.
Choosing the appropriate storage option based on data type and security needs.
Hands-On Lab: Implementing data persistence using AsyncStorage or SecureStore, performing basic create/read operations.
Navigation
Understanding the difference between React Native navigation patterns and web navigation.
Introduction to React Navigation (the most popular library).
Implementing stack-based navigation: Navigating between screens with a header bar.
Implementing tab-based navigation: Creating bottom or top tabs.
Implementing drawer-based navigation: Creating a side menu.
Combining different navigation types.
Passing data between screens using navigation parameters.
Learn how to persist simple data across navigation states.
Hands-On Lab: Integrating React Navigation into the app, implementing stack, tab, and drawer navigators, navigating between screens, passing parameters.
Cross-platform Native Device APIs
Learning to use common cross-platform APIs provided by React Native or Expo.
The Alert API: Showing native alerts and prompts.
Geolocation API: Accessing the user's location.
PanResponder: Handling complex touch gestures.
Accessing device features like the Camera or Vibration.
Working with permissions for native APIs.
Hands-On Lab: Integrating one or more native device APIs into the app (e.g., Geolocation, Camera access basics).
WebView, Forms, and Reusable Components
Learn about WebView: Displaying web content within a native app.
Working with standard Form Components:
TextInput: Handling text input.
Slider, Picker (dropdown), Switch: Using platform-specific form controls.
Handling form state and validation.
Building more complex and reusable custom components.
Styling and theming components.
Hands-On Lab: Implementing forms using TextInput and other form components, handling input state, using WebView to display content.
Testing your React Native Apps
Understand the importance of testing in React Native applications (unit, integration, end-to-end).
Introduction to Unit Testing React Native code (e.g., using Jest).
Introduction to Component Testing (e.g., using React Native Testing Library) - testing UI components in isolation.
Writing basic unit and component tests.
Running tests and interpreting results.
Hands-On Lab: Setting up a testing environment (Jest, React Native Testing Library), writing basic tests for a component or a utility function.
Deploying your React Native Apps
Overview of the mobile app build and deployment process (iOS and Android).
Introduction to EAS Build (Expo Application Services): Building native apps in the cloud.
Using EAS Submit: Submitting builds to app stores (Apple App Store, Google Play Store).
EAS Update: Deploying over-the-air updates.
Understanding local builds (using React Native CLI).
Preparing your app for production.
Hands-On Lab: Using EAS Build (with an Expo project) to create a native app build, discussing the steps for submitting to app stores.
-
React Native Official Documentation: The primary resource for learning React Native, covering components, APIs, and guides for both Expo and React Native CLI projects.
Expo Documentation: Comprehensive documentation for the Expo framework, covering setup, APIs, workflows, and EAS (Build, Submit, Update).
React Official Documentation: While focused on web, this is the source for core React concepts (components, state, hooks) that are fundamental to React Native.
React Navigation Documentation: The official guide for implementing navigation in React Native applications.
React Native Testing Library Documentation: Documentation for the widely used library for testing React Native components.
EAS Documentation: Specific documentation for Expo Application Services (Build, Submit, Update).
Trusted by
