More Premium Hugo Themes Premium React Themes

React Native Expo Examples

Learn React Native (Expo) by examples.

React Native Expo Examples

Learn React Native (Expo) by examples.

Author Avatar Theme by robinhuy
Github Stars Github Stars: 355
Last Commit Last Commit: Dec 14, 2024 -
First Commit Created: Feb 24, 2024 -
React Native Expo Examples screenshot

Overview:

This product analysis delves into a variety of React Native (Expo SDK 47) examples ranging from a simple “Hello World” application to more complex projects like a BMI Calculator and Music Player. Each example aims to teach different React Native features and techniques, making it a valuable resource for those learning React Native development.

Features:

  • Hello World: Teaches how to use StyleSheet, Text, View, SafeAreaView.
  • Login Screen: Demonstrates the use of StatusBar, Expo Icons, Images, TextInput, TouchableOpacity.
  • The Light: Covers Transform, Platform, Dimensions, Switch, TouchableHighlight, React Hook useState.
  • Register Form: Includes usage of React Native Keyboard Aware Scroll View, Formik, Yup, Alert, Separate Style, Separate Components.
  • Instagram Feed: Demonstrates ScrollView, FlatList.
  • Rock Paper Scissors: Utilizes Animations, React Hook useRef.
  • Scan QR Code: Features React Native Animatable, Expo Barcode Scanner.
  • Stop Watch: Includes Timer, React Memo, React Hook useCallback.
  • BMI Calculator: Involves React Native Slider, Modal.
  • Music Player: Uses Expo AV, React Native Modal, React Hook useEffect.
  • Worldwide News: Demonstrates connecting JSON API, ActivityIndicator, Linking, Lodash.
  • Pokedex: Includes React Native Elements, React Navigation, React Native Progress, React Hook useEffect with Cleanup.

Installation:

  1. Setting up the development environment: React Native Environment Setup.
  2. Install dependencies: yarn install (or npm install).
  3. Run on Android: yarn android (or npm run android).
  4. Run on iOS: yarn ios (or npm run ios).
  5. Run on both Android & iOS: yarn mobile (or npm run mobile).
  6. Run server: yarn start.
  7. Use app Expo Go on your mobile and scan QR code on the terminal to preview the projects.

Summary:

This product analysis highlights a collection of React Native examples that cover a wide range of features and functionalities. From basic UI components like Text and View to advanced concepts like animations, JSON API integration, and using various React Hooks, these examples provide valuable insights for beginners and intermediate React Native developers. The clear structure and step-by-step guidance make it easier for users to learn and implement these features in their own projects.