Mastering React Native with NodeJs and MongoDB

Learn how React Native wraps native code and interacts with native APIs to deliver performance-friendly apps, using flexbox layout and status bar styling.

Learn flex layout and positioning in React Native by placing text in top left, center left, top right, center right, bottom left, and bottom right using flexbox.

Create reusable React Native components by passing props, destructure props for cleaner code, and render multiple greetings with map, organizing components with imports and separate files.

Master the splash screen logo in a React Native app by displaying a logo before load, using a split-screen logo, and applying a unique key for mapped components.

Learn how to render web content in a React Native app using WebView, evaluate performance and user experience trade-offs, and implement a source-based WebView as part of building your app.

Start a real React Native project from scratch, building signup and login flows, protected screens, and a home with post lists while mastering input fields and basic styling.

Create a sign-up screen in React Native by building a sign-up component and styling the text with inline styles, using the beggar's React Native text library for easy title styling.

Create a user login input by importing React Native's text input, and style it with a bottom border, margins, and height to capture email and password.

Create a reusable user input component in React Native, pass dynamic props for name, email, and password, and bind input text to state while handling keyboard with a scroll view.

Define reactive state with useState for name, email, and password, update state as the user types, and send the state to the server to create a user in the database.

Customize text input fields for name, email, and password in a signup form using react native text input props such as autoCapitalize, autoCorrect, keyboardType, secureTextEntry, and autoCompleteType.

Explore building interactive submit buttons in React Native with the TouchableOpacity component, wrapping text or images, and styling with color, size, and border radius.

Learn to wire a reusable sign-up button in react native, validate name, email, and password, post data with axios to a backend, and save results in the global context.

Build a top brand logo with a reusable Circle logo component in React Native, loading a local image with require, centered with margins, and scrollable to prevent keyboard overlap.

Learn to replace view with scroll view in react native, apply content container style, and use a keyboard aware solution to push content above the keyboard for smooth scrolling.

learn to build a sign in screen in a React Native app, including sign up options, clickable text for navigation, and prep for password reset flows using token via email.

Explore configuring navigator options in React Native, including setting the default screen, hiding headers on specific screens, and using navigation to switch between sign up and sign in.

Explore building a complete authentication API with the Kaloraat auth API generator, delivering a ready Node.js Express backend with MongoDB, environment variables, password reset, and auth endpoints.

Discover how to build an authentication server for a React Native app using Colorado scaffolding, Node.js, and MongoDB, including sign up, sign in, reset password, JWT tokens, and SendGrid.

Sign up for mongodb atlas, create a free cluster, configure ip access, and obtain a connection string. Paste credentials into the app, install dependencies, and test the api endpoint.

Sign up for SendGrid, generate API keys, verify a sender identity, and send the first test emails to enable email delivery for a React Native app backed by Node.js.

Master front-end authentication in react native by implementing signup and signin requests, storing tokens and user data in context and async storage, and testing on devices with a local tunnel.

Learn to expose your localhost to the web with local tunnel, expose port 8000, configure the API, and test sign-up and sign-in on a real device.

Learn to handle signup errors by retrieving server validation messages (email taken, short passwords), display clear error alerts, and debug with console logs; then save the user token on success.

Create a global user context in react native and persist user information and token with async storage, loading from local storage on app reload to preserve state.

Create a global auth context to manage user and token across the app, loading saved credentials from local storage to provide seamless authenticated access.

Master how to create and consume a React context with the useContext hook, access global state across components, and render user and funding data in a React Native home screen.

Update the user state in context during sign in or sign up, store the token in local storage, and configure axios with the base url to automatically attach authentication headers.

Create a bottom footprints navigation in a React Native app, using touchable opacity icons to navigate between screens, with safe area view and reusable components in a nav folder.

Shows implementing font awesome icons in a react native app with vector icons, a reusable icon component with props, and navigation between home, posts, and accounts with conditional rendering.

Refactor your app's navigation by extracting a dedicated navigation component, wiring a login-aware flow, and wrapping screens with a navigation content provider to conditionally show home or sign-in screens.

protect screens by using the user and token from context, conditionally rendering the home or sign-up screens based on authentication, and implementing sign-out via local storage and header customization.

Learn to implement a sign-out flow in a React Native app by adding a header icon, clearing auth data from storage, updating context, and gating the home page behind sign-in.

Create the account screen and linked post and links screens in a React Native app, wiring sign out, navigation with useNavigation, and press handlers to move between screens.

Build post and links screens in a React Native app, customize navigation and titles, and use React Native Elements to add a divider and manage active states with flex layouts.

Learn to implement an active screen tab in a React Native app by using useRoute to read the route name and screen name, then apply an orange active style.

Access user information from context and display it in the account screen using useContext, safe area view, and a scroll view; then implement password updates and profile image uploads.

Design and implement the account screen by enabling profile image uploads, password updates, and reusing the sign-in layout to streamline user settings.