React Native Fitness Application with Firebase

Initialize a React Native project with Expo, install node and VS Code, create an Expo app with npx, start via Expo, and run on a device with Expo Go.

Install native wind, a tailwind css for react native, to style an expo app. Initialize tailwind, create a src folder, update app.js, and resolve the 3.3.2 version for className styling.

Set up stack navigation and bottom tabs in a React Native app, configure the navigation container, install required packages, and wire workout, timer, and calculation screens with Expo vector icons.

Style the bottom tab navigator in a React Native app by configuring route icons, hiding labels and headers, and applying a black, rounded tab bar with aqua active colors.

Hide the header on the welcome screen, create a components folder for the code, and load a custom font with expo fonts to style the welcome text using SafeAreaView.

Learn a simple workflow to add and apply custom fonts in a React Native app by using Google fonts and Expo Google fonts, then reload to see the change.

Design a workout of the day component in React Native, using a background image, centered white label, and touchable opacity. Apply 1% margins, assets images, and load the Lato font.

Create a public GitHub repository named shape_up_udemy for your project, then add and commit initial code. Push the changes to GitHub to see your code in the repository.

Create a reusable React Native separator component, imported below the workout of the day, styled with a gray border and balanced margins for a clean app layout.

Build a category component with category items in a React Native app, using a flex row layout to render a horizontal flat list of category cards with icons and images.

Style category items in a React Native app using flex layouts, spacing, and white bold text with widest tracking, and add color changes on press for interactivity.

Create a React Native exercise module with exercise and exercise item components, render exercises from a JSON data file, and wire images from assets.

Set up Expo dev client and development builds with EAS, link projects, and test on emulator via a QR code. Address flash list rendering with item size and min height.

Learn to enable smooth scrolling in a React Native fitness app with a scroll view and gesture handler. Set up Firebase storage to upload and fetch exercise images and GIFs.

Master practical git basics for syncing code on GitHub, using status, add, commit, and push, while pulling to align changes and organize the assets folder.

Learn to navigate between screens in a React Native app, pass an exercise item as a parameter, and retrieve it with useNavigation and useRoute to render the correct exercise details.

Fetches the exercise GIF from firebase storage asynchronously using a storage ref and get download URL, then loads it via useEffect.

display exercise content in a React Native app by conditionally rendering a gif from a URL, with an activity indicator while loading, and present categories, intensity, and instructions with controls.

Design and adjust a React Native exercise screen using flexible layout, margins, padding, text styling, color, and rounded items, including plus/minus controls and start and reset buttons.

Create a React Native fitness timer by defining initial time and minimum time, managing time with state, and implementing decrease, increase, and reset controls.

Explore implementing a start and pause countdown for a workout in React Native, using useEffect and a one-second interval with proper cleanup and state handling.

Install Expo AV, import and load countdown audio from assets, and implement play sound with playback status updates to handle timer countdown in a React Native app.

Generate a new development build for Android using expo dev client, install and run it, then debug audio playback and countdown sounds with useEffect and sound unloading.

Add a back button to the exercise screen in a React Native fitness app using touchable opacity, expo vector icons, and go back navigation.

Create a category exercise screen and wire navigation from items to the exercise list. Pass intensity and the exercise title as route params and use Firebase search to fetch exercises.

Fetch exercises by intensity from Firebase storage, use storage ref and listAll to gather files, map to exercise data, and update state for display in the app.

Fetch gif urls for each exercise by querying the intensity/exercises folder in storage, map over exercises with a batch of promises, and store results in state with an effect.

Display category exercises by tracking a current exercise index and rendering the corresponding gif url and title, with forward and backward navigation and conditional rendering for undefined data.

Implement next and previous exercise navigation by updating the exercise index only when within bounds, and bind these functions to touchable icons for onPress navigation.

Understand timer screen logic for a React Native fitness app, defining round and rest durations, rounds and current round, using useEffect to update time and render start, resting, paused, finished.

Design timer screen in React Native, style a gray view with start, pause, reset, inputs for round duration, rest duration, rounds with a numeric keyboard and editability when not running.

Create a functional timer screen in a React Native fitness app, implementing start, pause, and reset using countdown with useRef, setInterval, and useEffect; manage rounds, resting states, and button disabling.

Fixes timer screen logic in a React Native fitness app, ensuring proper transitions from running to rest to finish and safe reset by clearing the interval at the final round.

Compute BMI on the calculation screen by managing weight and height state, converting units, and displaying range-based interpretations with color cues.

Shows installing and using a picker in a React Native app to select weight and height units kg, lbs, centimetres, inches for a BMI calculator, and creating a dev build.

Complete the BMI calculation screen in a React Native fitness app, using pickers for weight and height units and a styled calculate BMI button to display BMI and color-coded message.