Create Your First React Native App

Explore how the FlatList in React Native renders efficient scrollable lists by passing a data array, customizing style, rendering items with renderItem, and extracting a unique key with keyExtractor.

Import contacts and a colors module, configure a FlatList with a white background, and render each contact’s email using a key extractor for unique items.

Organize your React Native components in a three-file directory: index.js for exports, styles.js for shared styling, and the component file itself; consider splitting complex components for clarity and reuse.

Explore how to define styles in React Native using the StyleSheet API, learn Flexbox basics for layout, and apply camelCase keys and flex properties to center content.

Learn to use the React Native platform module to tailor apps for iOS or Android by checking the platform OS, selecting platform-specific icons, and adjusting padding and margins in styles.

Install the React Native Vector Icons package via npm, link native dependencies for iOS and Android with React Native Link, then restart the simulator and packager to render icons.

Explore how React Native Vector Icons provides icon sets like Font Awesome and material icons, and how to use iron icons with icon component, including name, size, style, and color.

Build and export a reusable list item component for a React Native app. Display a contact's avatar, name, and email with an on-press handler and a platform-aware chevron.

Explore how to navigate between screens with React Navigation, a unified routing solution. Discover the stack navigator, tab navigator, drawer navigator, and how to install React Navigation in your project.

Learn the stack navigator from React Navigation, which renders one screen at a time with iOS and Android transitions. Build screens as components, set dynamic titles, and customize header actions.

Implement a stack navigator in React Native to move from a contacts list to a details screen using React Navigation. Configure the stack in config/router.js and render it from index.js.

Learn to navigate to a new screen with the navigate function on this.props.navigation, pass params like a name or contact info, and access them in the destination screen UI.

Navigate to the details screen by pressing a contact row, passing the selected item through the navigate function from props.navigation, and render the details UI with the expected Android-style transition.

Master the screen navigation prop to navigate between screens, access and update state.params with setParams, and use goBack after saving profile data on a demo screen.

Customize the navigation bar title by returning a navigationOptions function that reads the user's first and last name from navigation state params. Capitalize and display the name in the header.

Create a modular header for the user details screen in a React Native app, pass contact info via navigation params, and display a circular photo with a capitalized name.

Explore the ScrollView component in React Native to create scrollable detail screens without the overhead of a flat list, while understanding its trade-offs with performance.

Build and integrate an actions component in a React Native app to enable email, call, and text actions from the user details screen, using icons and styling.

Create a reusable row component in a React Native app to reduce duplication, enabling flexible labels, bodies, and multiple actions via a simple, scalable API.

Discover how moment.js helps format JavaScript dates into human readable strings, install and import Moment.js, and format dates with tokens for month, day suffix, and year.

Build and display a general info component in the user details screen to show username, birth date, city, and registered date, formatting dates with moment and using a row layout.

Master the TabNavigator in React Navigation to render iOS and Android tab bars with platform-aware defaults. Configure tab screens with labels, icons, and active tint to reflect state.

Create a three-tab navigation in a React Native app using a Tab Navigator for context, new contact, and me, with icons, labels, and nested screens.

Set up stack navigators for the new contact and me tabs to display headers on every screen. Define header titles as new contact and me to ensure clear, consistent navigation.

Master the React Native drawer navigator, a slide-in menu from left or right with customizable labels and icons, and learn to open or close it via navigation.

Replace the tab navigator with a drawer navigator, configure screens for contacts, new contact, and me, set drawer labels, and render the drawer in the app entry.

Add a header left button labeled open to trigger the navigation drawer open from the top left, applying the header button across all drawer stack navigators.

Learn to tailor navigation by platform: render a tab navigator on iOS and a drawer navigator on Android using React Native's Platform API, and adjust the header button accordingly.

Implement a platform-specific left drawer button for Android and hide the iOS open text. Create a left draw button with a hamburger menu in the header to control the drawer.

reuse the detail screen components (header, actions, info) to compose the me screen, using scroll view, colors, and MI data for a fully functional user interface.

Create a primary button component in the Buttons folder using TouchableOpacity and label and onpress props to render edit profile, reusing UI across the Me screen and detail screens.

Explore how the text input component captures user input from the onscreen keyboard across iOS and Android. Configure placeholder, style, onChangeText, autocorrect, and autoCapitalize for reliable inputs.

Create a reusable text input component in React Native with base styling, platform-aware borders for iOS and Android, and prop passthrough to mimic native text input behavior.

Create a dynamic React Native form by capturing input with component state and onChangeText, render fields from a config array, and submit with a primary button.

Learn how the React Native keyboard aware scroll view keeps inputs visible by scrolling to the username field. Install via npm to add this package to your project.

Import and replace the standard scroll view with the keyboard aware scroll view. It keeps inputs visible when the keyboard appears by auto-scrolling to focused fields.

Enhance a React Native contact form by using refs to focus inputs, switching the return key between next and done, and adding a robust submit/save flow.