React Native : The beginner guide

Install expo on your device, connect a real device via QR or exp URL, and watch live updates as you edit app.js in VS Code.

Install android studio on mac or linux, set up an android emulator (Pixel 6, API 33 Tiramisu), run expo with npx expo start, edit App.js in VS Code, and recompile.

Set up an Android emulator on Windows by downloading Android Studio, installing, and creating a Pixel device with the latest API level 33, then run Expo, edit App.js, and reload.

Learn to set up the ios simulator on macOS by installing or updating Xcode, installing watchman with brew, and running expo with vscode to test react native apps.

Install and configure Android Studio to run an Android emulator on mac or linux, set up the SDK, create a virtual device, and run the app with expo.

Explore the React Native project structure, including the .expo folder, assets, node_modules, and key config files like app.json and package.json, to understand dependencies, customization, and setup steps.

Create your first react native component by returning react native elements, importing Text and TouchableOpacity, wrapping them with a fragment, and exporting a profile component for App.js.

Install prettier in vscode, set it as the default formatter, and enable format on save. Use auto rename tag to keep start and end tags synchronized.

Learn to style React Native components with inline styles and StyleSheet, use SafeAreaProvider and SafeAreaView for safe rendering, and apply camelCase properties for responsive flex box layouts and training cards.

Learn the flex box system in React Native, using flex direction to layout and justify content, align items, and align self, with position and z index for layering.

Create a profile card component in React Native, styling a white box with platform-specific shadows, an avatar image beside the name and subtitle, all inside a safe area view.

Add a row of social icons to the profile card, applying a border radius, global padding, and a flexible row layout with evenly spaced icons using expo font awesome.

Master the props system in React Native by passing data to a profile card and using it inside with destructuring and JSX.

Learn how to pass content to components using the children prop, which captures elements placed between a component's opening and closing tags, including text, JSX, and other elements like images.

Learn how to implement conditional rendering in React and React Native using if-else, ternary operators, and logical && to show content based on props such as age and isOpenToWork.

Learn how states make React Native components reactive by using useState to update age with setAge, triggering a re-render and refreshing the display.

Understand that useState updates are asynchronous and trigger re-renders; log state inside the component body to see the updated value after a click, and avoid updating state in render.

Learn how to use callback functions in React Native by passing functions through props from parent to child, enabling the child to trigger parent actions and update state.

Learn to use callbacks in a profile card to open social links with a single go to social media function, using linking.open to open GitHub, LinkedIn, and Twitter.

Learn to detect the running platform in React Native with Platform.OS and conditionally render iOS or Android code. Adjust UI and behavior for each platform.

Build a temperature converter app in React Native, starting a new expo project, implementing Celsius and Fahrenheit input with a unit toggle and a background that changes at 0°C.

Plan and center a workspace containing input, result, and a button, using flex to center and space elements, then apply a full-screen image background with ImageBackground.

Build a reusable React Native text input component with placeholder, styling, and a unit label, supporting a configurable default value via props.

Wire up a mirror temperature display in React Native by lifting state to a common parent, passing onChange and unit props to update the display in real time.

Create a utilities module for converting temperatures between Celsius and Fahrenheit in React Native, and expose the opposite unit helper. Validate input, format to one decimal, and display the result.

Build a ButtonConvert component in React Native using TouchableOpacity and Text to toggle units with an onPress prop, updating the current unit.

Learn how the useEffect hook in React Native tracks state and props, runs after renders, and cleans up on unmount with a dependencies array.

Learn to change the background dynamically in a React Native app using an isIceTemperature function with temperature and unit, and switch between cold and hot backgrounds with useState and useEffect.

Build a to-do list app with all, in-progress, and done filters, strike-through of completed items, persistent local storage, and support for creating and deleting tasks.

Initialize an expo app with npm create-expo-app, name it react-native-todolist, start with expo start, then replace App.js with a default export and wrap content in SafeAreaProvider and SafeAreaView from react-native-safe-area-context.

Learn to design a three-part React Native layout with a header editor, a body list, and a footer, using safe area view, flex sizing, and elevation styling.

Create a custom header and splash screen in Expo by replacing splash.png, adding a header component with image and text, and styling with Header.style and safe area padding.

Build a reusable card to-do component in React Native, rendering a title with optional strike-through and a check icon based on is completed, and test with a sample to-do list.

Explore how the ES6 map function transforms every item in an array by applying a callback that receives the current item and index, producing a new array with updated elements.

Transform a hard-coded list into a React state, render items with map into CardTodo components, ensure unique keys, and enable scrolling with a ScrollView for a reusable, scalable to-do list.

Learn how to use the spread operator in ES6 to concatenate arrays and merge objects. Apply it to update or add properties and to pass multiple function arguments with ease.

Learn to toggle a card's status in React Native by updating a todo's isCompleted value, using a controlled update through onPress, immutable state updates, and setTodoList.

Design a tab bottom menu with all, in progress, and done tabs; lift the selected tab state to the app and update blue highlighting and list filtering via onPress.

Explore the ES6 filter on arrays to keep users whose age is greater or equal to eighteen; return true or false, and use concise syntax or an external isUserMajor function.

Learn how the ES6 reduce function iterates an array, using an accumulator and the current item to produce a final result, with an initial value and a sum example.

Filter a notes list by status in a React Native app, using reduce to count in progress and done, and a tab-driven filtered list.

Implement a delete flow for todos by long-pressing a card to trigger a React Native Alert with delete and cancel options. Update the list by filtering out the deleted todo.

Build a floating add button in react native, open a dialog to enter a new todo, generate a unique id, update the list, and disable empty saves.

Learn how to use try, catch, and throw to generate and handle errors in JavaScript, including finally to run code after try or catch.

Learn to persist data in a React Native app with AsyncStorage, saving and loading a todo list using setItem, getItem, and JSON.stringify and JSON.parse, with useEffect handling.

Learn how to use the useRef hook in React Native to auto focus the next input fields (credit card number, secret code, expiration date) using refs and focus.

Use a useRef to reference the scroll view and automatically scroll to the bottom after adding a todo, using scrollToEnd with a brief timeout.

Build a React Native weather app that shows current conditions for your location by default and provides a 7-day forecast, with city switching and open source APIs.

Create a new Expo React Native app, name it, and start the project. Establish a clean structure with App.js, a home page, and safe area context, laying groundwork for navigation.

Divide the app into three sections—the basic weather info, the search bar, and the advanced weather info—and use a responsive flex layout with a darkened background image.

Explore how to fetch current weather and seven-day forecasts from the OpenWeather API using GPS coordinates, lat/long, and current weather true, with codes mapped to images and labels.

For Android emulator users, learn to fake GPS coordinates by using the emulator’s location menu and set points via Google Maps, then restart Expo to apply the location.

Set GPS in the iOS simulator by copying coordinates from Google Maps, replace the dot with a comma, and paste latitude and longitude into the custom location.

Master ES6 destructuring to extract object properties and array elements efficiently, including renaming, nested access, and the use of rest and spread in React useState.

Learn how promises manage asynchronous operations, including http requests, and how to use fetch and axios with then and catch. Then master async/await with try/catch for cleaner, more reliable code.

Learn to request user location permissions using Expo location, fetch current coordinates, and store them in state to drive API calls, with a Paris default if denied.

Fetch user coordinates with expo location by requesting permissions, obtaining current position, and storing latitude and longitude in state to query the weather data API.

Learn how to set up and use a React Native debugger with expo 48+, configure jsEngine to jsc for debugging, and inspect logs, network requests, redux and async storage.

Learn how to load custom fonts in Expo and React Native apps with useFonts, check isFontLoaded to prevent flashing, and build a reusable Txt component.

Develop the MeteoBasic layout in React Native by creating a MeteoBasic component featuring a clock, city, interpretation, temperature and image, with flex layout, alignment, and 90-degree rotation of the interpretation.

Learn to display real temperature and weather interpretations in a React Native app by mapping codes to labels and images, passing current weather data to components.

Learn to make text responsive in React Native by recalculating font sizes based on device height, using the iPhone 13 as a base, and testing across iOS and Android.

Explore how the useEffect cleanup function runs on component unmount and before subsequent effects. Learn to manage set interval and clear interval with cleanup to prevent lingering processes.

Build a dynamic clock component that displays the current hour and minutes in HH:MM format, using date-time utils, padStart, and a useEffect with setInterval and cleanup via clearInterval on unmount.

Fetch the city from coordinates using reverse geocoding with nominatim open street map, returning city, village, or town, and integrate it into the weather component.

Build meteo advanced component in React Native, arranging three views with two texts each, with a background using opacity and border, and pass sunrise, sunset, and wind speed props.

Pass wind speed from current weather and the first daily sunrise and sunset from the daily data to the meteo advanced component, extracting times by splitting on T.

Set up React Navigation in a React Native app by installing libraries, creating a stack navigator, and defining home and forecast routes.

Navigate to the forecast screen by wrapping the temperature text in a touchable element and pass parameters; retrieve them on the forecast page with useRoute.

Learn to build a reusable header component in React Native for a forecast page, including a back button wired to goBack with useNavigation, a city title, and seven-day forecast subtitle.

Build a forecast list item component in React Native that accepts image, day, date, and temperature as props, then render and style it in a row.

Learn how to render real forecast list items in React Native by mapping over forecast data, selecting weather codes, temperatures, and dates, and displaying corresponding images and day labels.

Create a search bar component in React Native with JSX and styles, including a text input, placeholder 'type a city... ex: Paris', and onSubmit handling.

Set softwareKeyboardLayoutMode to pan in the android section of app.json to prevent the keyboard from pushing content, making Android behave like iOS; restart the app to apply.

Learn how to implement city-based search in a React Native app using geocoding to fetch coordinates, update state, and trigger weather data display, with alerting for invalid city names.

Explore the push notification flow in React Native, from obtaining the device token and storing it on a server to sending notifications via Expo back end.

Set up a Node.js server and install the expo server SDK to send a notification, including token handling, a title, a body, and optional extra data.

Learn to subscribe to push notifications in React Native by requesting permission, obtaining the Expo push token, and sending it to your backend to receive alerts on a real device.

Learn to handle expo notifications in react native using two listeners for foreground and background, access notification data and content, and optionally send the device token to your back end.

Connect to the device photo gallery using Expo image picker, select images, store their URIs in a list, and display them in a scrollable gallery in a React Native app.

Publish your React Native app on Expo using the EAS CLI, create development and production channels, log in, configure eas.json, and push updates for testers via a QR code.

Generate official Android and iOS builds with EAS CLI, producing an AAB for Android and an IPA for iOS, while configuring accounts and keystore and using Expo servers.