React Native Tutorial

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.