GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Home
  • ES6
  • Web
  • JS BOM
  • JS DOM
  • Web API
  • React
  • Node.js
  • Express
  • JavaScript Array Methods
  • JavaScript String Methods
  • Regular Expressions
  • ES Next
  • Playground

This view

  • Original page
  • New address

GeezerVison is showing www.javascripttutorial.net — React Native Tutorial

Home » React Native Tutorial

React Native allows you to develop cross-platform mobile applications using JavaScript. In this tutorial series, you’ll learn how to use React Native to create your next great mobile applications.

What you’ll learn #

  • Build real-world mobile apps using React Native.
  • Develop reusable components.

Prerequisites #

  • Basic React.
  • An Android phone or iPhone for testing mobile apps.

Section 1. Getting Started with React Native #

  • What is React Native – Introduction to React Native and why you should use React Native to develop cross-platform mobile apps.
  • Set up React Native development environment – Show you how to quickly set up Expo and Expo Go to start React Native Development immediately.
  • React Native Hello World – Learn how to create the first React Native application called Hello World and understand the app structure.

Section 2. Text, SafeArea, and ScrollView components #

  • Text – Show you how to display text on mobile apps using the Text component.
  • SafeAreaView – Render nested components within the safe boundaries of a device using the SafeAreaView components.
  • ScrollView – Create scrollable content in your app.

Section 3. Rendering List with FlatList and SectionList #

  • FlatList – Display a large list of items efficiently.
  • SectionList – Render a large list with section headers.

Section 4. Text Input, KeyboardAvoidingView, Pressable, Switch, and Image #

  • TextInput – Learn how to create text input fields with various keyboard types.
  • KeyboardAvoidingView – Show you how to use the KeyboardAvoidingKey component to automatically adjust its properties to keep the nested component visible while the virtual keyboard is displayed.
  • Pressable – Use Pressable to create touch interactivity in your app.
  • Switch – Create a toggle switch.
  • Image – Display local or remote images in your app.

Section 5. Layout #

  • Flexbox – Learn how to use the Flexbox layout to arrange components on your mobile app.
  • Positioning – Learn how to use relative and absolution positioning to position components on the screen.

Section 6. Hooks #

  • useWindowDimensions – show you how to use the useWindowDimension hook to get the current window’s dimensions including width and height.
  • useColorTheme – Learn how to use the useColorTheme hook to get the current user-preferred color theme color (dark or light).

Section 7. React Navigation #

In this section, you’ll learn how to set up navigation including stack navigation, bottom tab navigation, and drawer navigation to navigate between screens.

  • Stack Navigation – Set up React Navigation and create a Stack Navigator that allows you to move back and forth between screens.
  • Bottom Tab – Create a Button Tab using the the Bottom Tab Navigator.
  • Drawer – Create a drawer using the Drawer Navigator.

Was this helpful?

Thank you for your feedback!

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.