Skip to content

ziosa/react-native-boilerplate

Repository files navigation

🚀react-native-boilerplate 🚀

My first app using React Native with React Navigation:

Let's start to create our standard template for React Native:

npx react-native init ReactNativeBoilerplate

After that run Metro Bundler with this command:

npm run start

And in another terminal/tab run the app for ios/android:

npm run ios

or

npm run android

So for iOS everything worked on the first shot, but not for Android.

Android error:

* What went wrong:
Could not compile settings file '/Users/szicar01/Repositories/react-native-boilerplate/android/settings.gradle'.
> startup failed:
  General error during semantic analysis: Unsupported class file major version 57

  java.lang.IllegalArgumentException: Unsupported class file major version 57

Solution (found here):

Go to android/gradle/wrapper/gradle-wrapper.properties

Change the following line:

- distributionUrl=https\://services.gradle.org/distributions/gradle-5.5-all.zip
+ distributionUrl=https\://services.gradle.org/distributions/gradle-6.0.1-all.zip
That's what worked for me with the latest versions of everything on MacOS

If you have others issues about Android env take a look here.

Install React Navigation

I would like to try new version (alpha) of React Navigation.

npm install @react-navigation/native@next
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install @react-navigation/stack@next @react-native-community/masked-view
npm install @react-navigation/bottom-tabs@next

Afte install all package from react-navigation you need to type this from here:

cd ios
pod install
cd ..

Install icons:

npm install --save react-native-vector-icons

And configure it following this steps

Author: Salvatore Zicaro ✍️