Why I prefer Flutter than React Native

Photo by Oskar Yildiz on Unsplash

As I know, I am not expert in multi-platform App or Tools like Flutter, React Native, Cordova or Ionic.

That’s why I prefer use Tools that make us (as Developer) not use high effort to install and build.

I just invited to take a Test and the Test is use React Native as a Framework. Before taking test there is Requirement to use

• Node 12.0 LTS so to handle that we can just install NVM to manage the version.
• React version ^16.3.1
• React Native version 0.63.2
• Default Port to 8000.

Oke to handle that we just need create project with specific version like bellow

npx @react-native-community/cli@latest init AwesomeProject --version 0.63.2

Lets install, build and run our project. Like you expected App wont run because some dependency like Flipper.

Oke we just need to remove Flipper from our React Native Project.

iOS

Xcode 14.0 | macOS Monterey

For iOS we need open Podfile and remove or comment this code

#  use_flipper!
#  post_install do |installer|
#    flipper_post_install(installer)
#  end

Then run pod install again.

Android

Android Studio Koala | macOS Monterey

But for Android we need extra work

1. First we need comment or remove all Flipper dependency from build.gradle | Module
2. Then comment or remove BUCK (I dont know what is this and I hate when I dont know what is going on in my project)
3. Change distributionUrl to support Android Studio Koala
4. Change com.android.tools.build:gradle version
5. Remove ReactNativeFlipper.java from project
6. Remove or comment Flipper code at MainApplication.java

//    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
//      exclude group:'com.facebook.fbjni'
//    }
//
//    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
//        exclude group:'com.facebook.flipper'
//        exclude group:'com.squareup.okhttp3', module:'okhttp'
//    }
//
//    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
//        exclude group:'com.facebook.flipper'
//    }

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
//task copyDownloadableDepsToLibs(type: Copy) {
//    from configurations.compile
//    into 'libs'
//}

distributionUrl=https\://services.gradle.org/distributions/gradle-7.3-all.zip

dependencies {
    classpath("com.android.tools.build:gradle:7.0.0")
    // NOTE: Do not place your application dependencies here; they belong
    // in the individual module build.gradle files
}

initializeFlipper(this, getReactNativeHost().getReactInstanceManager());

 /**
   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   *
   * @param context
   * @param reactInstanceManager
   */
  private static void initializeFlipper(
      Context context, ReactInstanceManager reactInstanceManager) {
    if (BuildConfig.DEBUG) {
      try {
        /*
         We use reflection here to pick up the class that initializes Flipper,
        since Flipper library is not available in release mode
        */
        Class<?> aClass = Class.forName("com.awesomeproject.ReactNativeFlipper");
        aClass
            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
            .invoke(null, context, reactInstanceManager);
      } catch (ClassNotFoundException e) {
        e.printStackTrace();
      } catch (NoSuchMethodException e) {
        e.printStackTrace();
      } catch (IllegalAccessException e) {
        e.printStackTrace();
      } catch (InvocationTargetException e) {
        e.printStackTrace();
      }
    }
  }

Then sync gradle again.

Then just build and run again for iOS and Android. This approach will work on Mac Intel series.

For Mac Apple Sillicon series and macOS Sonoma for iOS will produce error when you use Xcode 15.

So you need download and run with Xcode 14.0. To run Xcode 14.0 in macOS you can run Xcode by show package content like bellow and open with terminal.

Then you can run project by run Metro from terminal first then run each app on the Android Studio or Xcode. I dont know why we can run by using this command on macOS silicon.

npm run android

OR

npm run ios

That is why I prefer Flutter

Because when use Flutter, we just use FVM to choose Flutter version to build and run the project without any issue.

GitHub - alfian0/Exercise-React-Native: Create React-Native with old version and run in the new Mac…