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 tutorial helpful ?
