Class Room | Online Training
React Native is an open-source mobile application framework created by Facebook. It is used to develop applications for Android, iOS, Web and UWP by enabling developers to use React along with native platform capabilities.
The working principles of React Native are virtually identical to React except that React Native does not manipulate the DOM via the Virtual DOM. It runs in a background process (which interprets the JavaScript written by the developers) directly on the end-device and communicates with the native platform via a serialisation, asynchronous and batched Bridge.
React components wrap existing native code and interact with native APIs via React’s declarative UI paradigm and JavaScript. This enables native app development for whole new teams of developers, and can let existing native teams work much faster.[citation needed] React Native does not use HTML. Instead, messages from the JavaScript thread are used to manipulate native views.
- We always focus on technical excellence
- We will provide exclusive training on creating mobile applications
- Our training methods are extensive with a customized course curriculum fit to match the standards of the industrial requirements and taught by highly trained and professionals
Mobile APP DEVELOPER
How React Native Works
Expo vs React Native CLI
Creating Our First React Native App
Working on Our First App
React Native Apps Are Hard Work!
React Native Alternatives
Course Requirements
Running the App on an Android Emulator
Running the App on an iOS Simulator
Course Outline
How to get the Most out of This Course
How to work with React Native Components
Setting Up A New Project
Planning the App
Working with Core Components
Getting Started with Styles
Flexbox & Layouts (Intro)
React Native Flexbox Deep Dive
Inline Styles & StyleSheet Objects
Components, Styles, Layouts
Working with State & Events
Outputting a List of Items
Styling List Items
Making it Scrollable with ScrollView!
A Better List: FlatList
More Components & Lists
Splitting the App Into Components
Passing Data Between Components
Working with Touchable Components
Deleting Items
Adding a Modal Overlay
More Flexbox Styling
Closing the Modal & Clearing Input
Finishing the Modal Styling
Wrap Up
Running the App on a Real Device & Debugging
Handling Error Messages
Understanding Code Flow with console.log()
Using the Remote Debugger & Breakpoints
Working with the Device DevTools Overlay
Debugging the UI & Using React Native Debugger
Wrap Up
Setup & App Planning
Adding a Custom Header Component
Adding a Screen Component
Working on the Layout
Styling a View as a "Card" Container (with Drop Shadows & Rounded Corners)
React Native Styling vs CSS Styling
Extracting a Card Component (Presentational Component)
Components & Styling
Color Theming with Constants
Configuring & Styling a TextInput
Cleaning User Input & Controlling the Soft Keyboard
Resetting & Confirming User Input
Configuring Components
Showing an Alert
Time to Finish the "Confirmation Box"
Adding Random Number Generation
Switching Between Multiple "Screens"
Adding Game Features: Hints & Validation
Checking the "Win" Condition with useEffect()
Finishing the Game Logic
Adding Custom Fonts
Installing expo-font
A Synthetic Style "Cascade": Custom Wrapper Components & Global Styles
Adding Local Images
Styling Images
Working with Network (Web) Images
A Closer Look at the "Text" Component (and what you can do with it) vs - A Summary
Building a Custom Button Component
Adding Icons
Exploring UI Libraries
Managing Past Guesses as a List
Styling List Items & Lists
ScrollView & Flexbox (Yes, that works!)
Using FlatList Instead of ScrollView
Wrap Up
Finding Improvement Opportunities
Working with More Flexible Styling Rules
Introducing the Dimensions API
Using Dimensions in "if" Checks
Calculating Sizes Dynamically
Problems with Different Device Orientations
Controlling Orientation & Using the KeyboardAvoidingView
Listening to Orientation Changes
Rendering Different Layouts
Fixing the GameOver Screen
Expo's ScreenOrientation API
Introducing the Platform API
Working with Platform.select() and Platform in "if" Checks
Using Platform-specific Code Files
Planning the App
Adding Screens
Adding Fonts
Installing React Navigation & Adding Navigation to the App
Creating a StackNavigator
Navigating Between Screens
Navigation to the "Meal Details" Screen
Pushing, Popping & Replacing
Outputting a Grid of Categories
Configuring the Header with Navigation Options
Passing & Reading Params Upon Navigation
Setting Dynamic Navigation Options
Default Navigation Options & Config
Navigation Params & Configuration
Grid Styling & Some Refactoring
Adding Meal Models & Data
Loading Meals for Categories
Rendering a Meals List
Passing Data to the Meal Detail Screen
Adding Header Buttons
Fixing the Shadows
Adding Tabs-based Navigation
Setting Icons and Configuring Tabs
Adding MaterialBottomTabs
Adding a Favorites Stack
Adding a Menu Button & Drawer Navigation
Configuring the Drawer
More Navigation Config & Styling
Adding a DefaultText Component
Adding the MealDetail Screen Content
Time for the "Filters" Screen Content!
Passing Data Between Component & Navigation Options (Header)
What is State & What is Redux?
Redux & Store Setup
Selecting State Slices
Redux Data & Navigation Options
Dispatching Actions & Reducer Logic
Switching the Favorites Icon
Rendering a Fallback Text
Adding Filtering Logic
Dispatching Filter Actions
Planning the App
Creating the Basic Project Setup
The Products Overview Screen
Setting Up a Navigator
Styling the Product Items
Adding Touchable Components
Working on the Product Details Screen
Using Custom Fonts
Adding Items to the Cart
Implementing Header Buttons
Outputting Cart Items
Adding Logic to Delete Items
Adding Redux Logic for Orders
SideDrawer & The Orders Screen
Clearing the Cart
Styling Order Items
Making the "Show Details" Button Work
Building the "User Products" Screen
Reorganizing the ProductItem Component
Deleting Items
Adding Basic Editing & Navigation Logic
Handling User Input
Using Params to Submit User Input
Dispatching Actions for Creating & Updating
Time to Improve the App!
Configuring TextInputs
Adding Basic Validation
Getting Started with useReducer()
Finishing the Merged Form & Input Management
Moving Input Logic Into A Separate Component
Connecting Input Component & Form
Tweaking Styles & Handling the Soft Keyboard
Alternatives & Wrap Up
Setup & How To Send Requests
Installing Redux Thunk
Storing Products on a Server
Fetching Products from the Server
Displaying a Loading Spinner & Handling Errors
Setting Up a Navigation Listener
Updating & Deleting Products
Handling Additional Errors
Storing Orders
Displaying an ActivityIndicator
Fetching Stored Orders
Adding "Pull to Refresh"