React Native: Advanced Concepts

Explore react native animations by building a tinder-style swipe card using the animated module, compare layout animation versus the animated system, and prepare for deeper practical demos.

Explore the React Native animated module, including values, types, and components, and learn to answer where the element is, the end state, and which element moves through practical code.

Apply the animated module to determine the circle’s position, its changes over time, and what to animate, then build a simple top-left to bottom-right motion in one to two seconds.

Move a ball from the top-left by removing default centering styles and implementing a React Native animation using Animated.Value for x and y, Animated.spring, and Animated.View.

Explore how React Native animations work by tracking the ball's current position with an animated value, moving toward 200, 500 using a spring, and rendering with an animated view.

Learn how React Native animations run outside the state loop, using an initial render and animated value x,y to move the ball via animated view without re-rendering.

Build a tinder-like swipe deck in React Native, enabling left/right swipes with rotating cards and auto-dismiss after a threshold. Use data, renderCard, onSwipeLeft, onSwipeRight, and renderNoMoreCards.

Learn how to scaffold a React Native deck component, from boilerplate setup and imports to wiring dummy data in Main.js and preparing for component implementation.

Explore how to wire a data array and a renderCard function into a reusable deck component in a React Native app, enabling customizable cards via app and deck props.

Render a list of customizable cards in a deck component by mapping data with the render card function, using React Native Elements for visuals and item.id keys for unique cards.

Discover how the pan responder captures touch and the animation system moves the card in React Native. Learn to coordinate gesture input with animation for responsive cards.

Define pan responder lifecycle callbacks in a React Native component, including onStartShouldSetPanResponder, onPanResponderMove, and onPanResponderRelease. Wire the pan responder to a rendered element and review the official documentation.

Wire a pan responder to a card view, inspect the gesture object during on pan responder move, and learn how move X, move y, dx, and dy drive card movement.

Master dragging cards in React Native by linking pan responder gestures to the animated system, updating the x and y position in real time, and rendering with an animated view.

Enable dragging only the top card by attaching a pan handler to the first item and wrapping it in an animated view, for precise card interactions.

Learn to rotate cards in a Tinder-style React Native deck by wiring pan handlers, applying a transform rotate, and using a get card style helper, with proper key prop.

Use the interpolation system to map the card’s horizontal drag to its rotation. Tie the X position to a rotation output so dragging updates the card’s angle in real time.

Explore how interpolation maps a drag distance from -500 to 500 into rotation from -120 to 120 degrees using an interpolation object in animated view, and why hardcoding input ranges may be poor practice.

Replace the hard-coded input range of -500 to 500 with a screen width-based range using dimensions.get('window').width. Tie rotation to device width and scale by 1.5 to achieve consistent motion.

Reset a draggable card to its default centered position on release using a helper function and Animated.spring to animate x and y back to zero.

Detect the minimum swipe distance to determine if a card is liked or disliked, using on pan responder release to measure drag distance and a screen width based threshold.

Detect when a user swipes a card far enough, forcibly swipe left or right with two helper functions using timing, then prepare the next card with gesture handlers.

Learn to implement force swipe in React Native by passing direction, and computing x with screen width, and animating cards off screen for left or right swipes.

Master detecting swipe completion after a 250 ms animation and prep the next card, while wiring on swipe left and on swipe right callbacks through props.

Add an index state to track the current card in the Onswipe deck. Pass the item to on swipe right and on swipe left callbacks, and destructure data.

Learn how default props prevent on swipe right errors in the deck component. Define static default props to provide a safe on swipe left and right callback when missing.

Learn how to reset the swipe deck by advancing to the next card, reattaching panhandlers and position to the upcoming card, and resetting the position for subsequent swipes.

Advance the deck by rendering only the active card with panhandlers and animation helpers, while swiped cards are no longer rendered.

Learn to handle empty lists by rendering a no more cards view when the index reaches the data length, using a render no more cards prop passed from Main.js.

Learn to stack tinder-style cards in a React Native deck by using absolute positioning, wrapping in a view, and reversing render order so the top card stays on top.

Identify and fix the flashing images in a React Native card deck by replacing the top card rendering from a view to an animated view, preventing re-render and image refetch.

Create cascading card visuals by offsetting non-current cards with top and index-based calculations, revealing a stacked, Tinder-like deck and smoother swipe motion.

Animate the deck of cards on swipe using React Native layout animation, moving cards up by ten pixels with a spring effect for a snappy, smooth transition.

Learn to reset the deck component's index when a new data list arrives in React Native, using componentWillReceiveProps to compare nextProps.data and reset the index to zero.

Clarify when to use layout animation versus the animated module in React Native, and explain pan responder gestures, including values, types, and components for animating UI.

Explore common authentication flows—email and password, OAuth, and two factor authentication—and compare them to a phone number based one time password sign-in for a two-section app.

Explore the end-to-end flow of one-time passwords for app authentication. Learn how text messages deliver codes, how a backend verifies them, and how a json web token authorizes future requests.

Explore how to implement a secure one-time password flow using google cloud functions with firebase, including generating and storing codes, sending sms via twilio, and authenticating users with jwt.

Compare traditional servers with Google Cloud Functions and understand serverless advantages for short-lived tasks. See how Google handles routing and why small code like generate and compare codes fits serverless.

Explore the end-to-end authentication flow with serverless Google Cloud Functions and Firebase, detailing signup with a phone number, code generation and texting, code verification, and JWT-based login.

Create a Firebase project on the Firebase console, sign in, set up a local Firebase project, install Firebase tools, and initialize Google Cloud Functions for deployment.

Deploy and test a new firebase project by initializing defaults, exploring the generated files, and deploying a simple cloud function to connect local code with a remote firebase project.

Learn to deploy and test Google Cloud Functions with Firebase, create HTTP endpoints, view function URLs and logs, and add signup-related functions via exports.

Organize Google Cloud functions by file, wire them into index.js, and create a new user function that receives email and phone and writes a Firebase database record.

Learn how Google Cloud functions handle request data with req and res, using req.body for input, res.send to echo it back, and leverage the service client with Firebase.

Learn to set up the Firebase service client in a Google Cloud Function by initializing the admin with a service account and its credentials.

Enable Firebase authentication and manage user accounts through the anonymous feature. Coerce the phone input to a string, strip non-digits, and validate presence before creating the user.

Create a new Firebase user with the phone as the unique id, handle the async create with promises, and respond with the user or an error.

Test new user creation by deploying a firebase function, sending a post request with a phone number, and verifying the user appears in firebase authentication as a unique id.

Sign up for Twilio, configure a texting number, and use the Twilio API to send a test SMS via the API Explorer, illustrating programmatic messaging for a cloud function workflow.

Retrieve the user by phone number, generate and save a four-digit code to the user model, then text it with Twilio to verify login in a Firebase cloud function.

Create a cloud function to handle requesting a one-time password by phone, validating and sanitizing the input, locating the user in Firebase by phone, and generating and saving the code.

Validate input and scrub the phone number, fetch the user from Firebase with promises, handle not-found errors, generate a four-digit code, and text it via Twilio before saving for security.

Generate a one-time password, text it with a Twilio callback, and handle errors via status codes. Save the code in Firebase under a phone-based user record, then deploy.

Deploy and test a one-time password flow using Firebase cloud functions and Twilio, verify codes via a phone number, and handle trial account restrictions and code validation.

verify a one-time password by fetching a user by phone, compare the server-stored code and its validity, and issue a json web token after marking the code as invalid.

Generate a custom json web token with firebase admin.auth after one-time password verification, then asynchronously return the token to the user to authenticate via firebase custom auth.

Build an Expo React Native app that signs up and signs in with a json web token from Firebase using a simple one time password flow.

Explore a React Native app boilerplate that authenticates Firebase with a Json web token by calling Google Cloud functions, using axios and React Native Elements to build a signup form.

Wire a React Native sign-up form using component state, onChangeText, and an arrow function submit handler to create a user via Google Cloud function and send a password.

Invoke a Google Cloud function to create a user by posting the phone number with Axios, then request a one-time password with a second function.

Refactor the handleSubmit function with async/await to run Axios post requests in sequence, replacing then chains for clearer, more robust React Native code.

Debug the async/await flow in the submit handler and verify network requests in the simulator. Inspect console logs and error handling for Firebase sign-up with phone numbers.

Refactor the sign in form in React Native by adding a code field, wiring an async submit with axios post to verify one time password, and handling errors.

Import the sign in form into main.js and render it under the sign up form, adjust layout for spacing, and outline capturing the one-time password token to authenticate with Firebase.

Wire up Firebase by installing it, configuring the app, and initializing Firebase. Use the data token from sign-in to sign in with a custom token and start a Firebase session.

Review the completed app by revisiting Firebase cloud functions (create user request, one time password, verify one time password), Twilio integration, and async/await patterns in the React Native app.

Launch a new React Native job finder app with a map-based job search, swipe to like or save jobs, and use Facebook OAuth for login, plus tutorials and settings.

Outline the screen-by-screen flow of the app, including the welcome tutorial pages, conditional facebook sign-in, a cross-platform map with set my position, a swipe deck of jobs, and saved jobs.

Fetch jobs by map center, swipe through a deck to save favorites, show a map on each card, manage touch events and nested navigation, and reset saved jobs from settings.

Explore building an Expo library-driven React Native app with Facebook authentication, a location-based map, a swipe deck for jobs, and settings to reset saved choices.

Understand navigation architecture and the screen versus component distinction in a React Native app; screens are components that host reusable components, like a review screen with header, cards, and footer.

Trace the evolution of React Native navigation and compare options, ending with why React Navigation is the preferred, stable cross-platform routing solution.

Learn how React Navigation organizes screens in React Native apps using stack, tab, and drawer navigators to connect welcome, auth, map, deck, review, and settings.

Install the React Navigation library, scaffold six screens (auth, welcome, map, deck, review, settings) with boilerplate text, and wire them with tab and stack navigators to form app's structure.

Use the React Navigation Library to build the first tab navigator linking the welcome and auth screens, define routes for welcome and auth, and render the navigator in the app.

Nest navigators in a React Native app using a root tab navigator for welcome and auth, plus a nested main tab navigator with map and deck screens.

Wire up a nested stack navigator within a tab navigator to provide forward and back navigation between the review and settings screens, and implement header buttons for navigation.

Explore how class properties and static properties define root specific navigation options for stack and tab navigators, enabling header buttons to navigate to the settings screen.

Define and apply a navigation options title to customize the review screen header, and use a header function to configure the header right content across stack and tab navigators.

Implement programmatic navigation by turning header text into a pressable settings button using React Native Elements, with an on press callback that calls navigate to the settings route.

Style the nav bar by making the settings button transparent and blue with rgba colors. Add Android-specific top margin using Platform.OS in the header style.

Create a welcome screen that shows a data-driven, swipeable tutorial using a slides component, with a centralized array of slide data passed as props and a final confirmation action.

Leverage a horizontal scrollview to render tutorial slides, map slide data to views with centered, large text, and style each slide to fill the screen.

Explore advanced welcome screen styling in React Native by setting full-width slides with Dimensions, enabling paging, and applying color-coded backgrounds with white text.

Add a last-slide button to progress through the app, hide the bottom tab bar in production, and pass a callback from the welcome screen to slides for reusable navigation.

Learn to enhance the welcome screen with styled react native button using buttonStyle, center text, and a parent-provided oncomplete callback that navigates to the auth screen via React Navigation.

Implement Facebook authentication in Expo by calling login with read permissions async, handle the token to determine login status, and route users through the welcome or map screens.

Register your app in the Facebook developer console and configure expo’s Facebook module for iOS and Android, then connect the authentication token flow to a Redux store for cross-component access.

Learn to set up Redux in a React Native app to manage the Facebook login token, create a central authentication action creator, and configure the store with thunk middleware.

Learn how to implement a Facebook login flow with Redux, handle the authentication token, and persist it via async storage, including the login success action and token retrieval logic.

Explore how to persist Facebook login tokens with async storage in a React Native Redux app, and refactor asynchronous code using async/await and redux thunk to keep promises readable.

Learn to implement Facebook login in React Native using Expo, manage authentication tokens with async storage and Redux, and handle login success or failure with thunk actions.

Wire up a redux facebook login action in a react native app, connect it to the auth screen, and manage login flow with expo's login modal, async/await, and token storage.

Uncover a major gotcha in React navigation: eager screen rendering. Apply lazy loading and token handling to manage the Facebook login flow with async storage.

Watch for Facebook login success in a new auth reducer, store returned token, and gate navigation to the map screen; on login failure clear the token to prompt another sign-in.

Wire the auth screen to redux so a valid Facebook token automatically navigates to the map screen, using mapStateToProps and React Navigation on auth completion.

Examine testing the React Native authentication flow, manage tokens in async storage, and automatically navigate to the map screen after login, including handling initial and subsequent launches.

Advance the welcome screen in a React Native app by using Expo app loading and async storage to show it only when no token exists, with a Redux-free approach.

Resolve the loading screen issue in React Native advanced concepts by updating the token state and understanding React Navigation behavior to reveal the map screen.