Skip to content

danvitoriano/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


Last but not least: If you have time, let's try my React Native Game on Goole Play Store: Master Mind X.

About

Learn React Native (Expo) by examples.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%