Skip to content

robinhuy/react-native-expo-examples

Repository files navigation

React Native Expo examples

Learn React Native (Expo SDK 51) by easy-to-difficult examples.

For more advance examples, see React Native TypeScript examples

Run project in development

  • Setting up the development environment: https://reactnative.dev/docs/environment-setup.

  • Install dependencies: yarn (or npm install).

  • To start the development server, run the following command: yarn start (or npm start).

    After running the command above, you will see a QR code in your terminal. Scan this QR code to open the app on your device.

    If you're using an Android Emulator or iOS Simulator, you can press a or i respectively to open the app.

Preview

Scan the following QR code with an Android device to open it in Expo Go or a development build.

Android demo app

Scan the following QR code with an iOS device to open it in Expo Go or a development build.

iOS demo app

1. Hello World

Learn how to use: StyleSheet, Text, View, SafeAreaView.

Hello World 1 Hello World 2

2. Login Screen

Learn how to use: StatusBar, Expo Icons, Images, TextInput, TouchableOpacity.

Momo Login Screen Facebook Login Screen

3. The Light

Learn how to use: Transform, Platform, Dimensions, Switch, TouchableHighlight, React Hook useState.

The Light Traffic Light

4. Register Form

Learn how to use: React Native Keyboard Aware Scroll View, Formik, Yup, Alert, Separate Style, Separate Components.

Register Form

5. Instagram Feed

Learn how to use: ScrollView, FlatList.

Instagram Feed

6. Rock Paper Scissors

Learn how to use: Animations, React Hook useRef.

Rock Paper Scissors

7. Scan QR Code

Learn how to use: React Native Animatable, Expo Barcode Scanner.

Scan QR Code

8. Stop Watch

Learn how to use: Timer, React Memo, React Hook useCallback.

Stop Watch

9. BMI Calculator

Learn how to use: React Native Slider, Modal.

BMI Calculator

10. Music Player

Learn how to use: Expo AV, React Native Modal, React Hook useEffect.

Music Player 1 Music Player 2

11. Worldwide News

Learn how to use: Connect JSON API, ActivityIndicator, Linking, Lodash.

Worldwide News

12. Pokedex

Learn how to use: React Native Elements, React Navigation, React Native Progress, React Hook useEffect with Cleanup.

Pokedex


License

This project is licensed under the Apache License 2.0. See the LICENSE file for details.

About

Learn React Native (Expo) by examples.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published