feat(android)!: new arch support (#730)

* wip

* finished

* works on both platforms

* rnta update

* finish?

* run android CI

* minor fixes

* try android build

* try android build

* fix path?

* update lockfile

* fix ci pod install

* do not build ios w/ new arch

* update deps

* do not uselessly export type

* do not codegen android component

* undo changes which weren't needed for successful build on old arch

* various refactors

* finalizing refactors

* simplify getReactModuleInfoProvider

* remove comments

* readme updated

* deps update

---------

Co-authored-by: Wojciech Lewicki <[email protected]>

Author: vonovak

.circleci/config.yml

@@ -30,6 +30,26 @@ jobs:
           command: yarn test
           name: Jest
 
+#  new_arch_ios_build:
+#    executor:
+#      name: rn/macos
+#      xcode_version: '14.0.0'
+#    steps:
+#      - checkout
+#      - run:
+#          command: yarn install --frozen-lockfile
+#          name: yarn install
+#      - run:
+#          command: cd example && yarn install --frozen-lockfile && cd -
+#          name: yarn install example
+#      - run:
+#          command: (cd example && RCT_NEW_ARCH_ENABLED=1 npx pod-install)
+#          name: pod install
+#      - run:
+#          command: yarn detox:ios:build:release
+#          name: build app with new arch
+
+
   e2e_release_ios:
     executor:
       name: rn/macos
@@ -100,6 +120,46 @@ jobs:
       - store_artifacts:
           path: ./artifacts
 
+
+  e2e_release_android_new_arch:
+    executor:
+      name: android/android-machine
+      resource-class: large
+      tag: '2022.01.1'
+    steps:
+      - checkout
+      - run:
+          command: avdmanager list
+          name: list avds
+      - android/create-avd:
+          avd-name: TestingAVD
+          system-image: system-images;android-29;default;x86
+          additional-args: --device pixel_4_xl
+          install: true
+      - android/start-emulator:
+          avd-name: TestingAVD
+          no-window: true
+          restore-gradle-cache-prefix: v1a
+          post-emulator-launch-assemble-command: "pwd"
+      - android/disable-animations
+      - run:
+          command: npm install --global yarn
+          name: install yarn
+      - run:
+          command: yarn install --frozen-lockfile
+          name: yarn install
+      - run:
+          command: yarn bundle:android
+          name: bundle js
+      - run:
+          command: ORG_GRADLE_PROJECT_newArchEnabled=true yarn detox:android:build:release
+          name: build app for e2e tests
+      - run:
+          command: yarn detox:android:test:release
+          name: run e2e tests
+      - store_artifacts:
+          path: ./artifacts
+
   publish:
     executor:
       name: rn/linux_js
@@ -121,9 +181,11 @@ workflows:
       - analyse_js
       - e2e_release_ios
       - e2e_release_android
+      - e2e_release_android_new_arch
       - publish:
           requires:
             - e2e_release_android
+            - e2e_release_android_new_arch
             - e2e_release_ios
           filters:
             branches:

.flowconfig

@@ -7,6 +7,8 @@
 
 ; Ignore polyfills
 node_modules/react-native/Libraries/polyfills/.*
+.*/**/malformed_package_json/package.json
+
 
 ; Flow doesn't support platforms
 .*/Libraries/Utilities/LoadingView.js

README.md

@@ -1,4 +1,4 @@
-### 🚧🚧 Looking for collaborators and backers 🚧🚧
+### 🚧🚧 Looking for collaborators and financial backers 🚧🚧
 
 See this [issue](https://github.com/react-native-datetimepicker/datetimepicker/issues/313).
 
@@ -93,7 +93,9 @@ React Native date & time picker component for iOS, Android and Windows.
 ## Requirements
 
 - Only Android API level >=21 (Android 5), iOS >= 11 are supported.
-- Tested with Xcode 14.0 and RN 0.70. Other configurations are very likely to work as well but have not been tested.
+- Tested with Xcode 14.0 and RN 0.71.4. Other configurations are very likely to work as well but have not been tested.
+
+The module supports the [new React Native architecture](https://reactnative.dev/docs/next/the-new-architecture/why) (Fabric rendering of iOS components, and turbomodules on Android). If you are using the new architecture, you will need to use React Native 0.71.4 or higher.
 
 ## Expo users notice
 

android/build.gradle

@@ -1,34 +1,62 @@
-apply plugin: 'com.android.library'
+buildscript {
+    repositories {
+        google()
+        mavenCentral()
+    }
+}
 
-def safeExtGet(prop, fallback) {
-  def retValue = rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
-  return retValue
+def getExtOrIntegerDefault(name) {
+    return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties['ReactNativeDateTimePicker_' + name]).toInteger()
 }
 
+def isNewArchitectureEnabled() {
+    // To opt-in for the New Architecture, you can either:
+    // - Set `newArchEnabled` to true inside the `gradle.properties` file
+    // - Invoke gradle with `-newArchEnabled=true`
+    // - Set an environment variable `ORG_GRADLE_PROJECT_newArchEnabled=true`
+    return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
+}
+
+apply plugin: 'com.android.library'
+if (isNewArchitectureEnabled()) {
+  apply plugin: "com.facebook.react"
+}
+
+
 android {
-    compileSdkVersion safeExtGet('compileSdkVersion', 28)
-    buildToolsVersion safeExtGet('buildToolsVersion', '28.0.3')
+    compileSdkVersion getExtOrIntegerDefault('compileSdkVersion')
+
+    // Used to override the NDK path/version on internal CI or by allowing
+    // users to customize the NDK path/version from their root project (e.g. for M1 support)
+    if (rootProject.hasProperty("ndkPath")) {
+        ndkPath rootProject.ext.ndkPath
+    }
+    if (rootProject.hasProperty("ndkVersion")) {
+        ndkVersion rootProject.ext.ndkVersion
+    }
 
     defaultConfig {
-        minSdkVersion safeExtGet('minSdkVersion', 21)
-        targetSdkVersion safeExtGet('targetSdkVersion', 28)
-        versionCode 1
-        versionName "1.0"
+        minSdkVersion getExtOrIntegerDefault('minSdkVersion')
+        targetSdkVersion getExtOrIntegerDefault('targetSdkVersion')
+        buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
     }
-    lintOptions {
-        abortOnError false
+
+    sourceSets.main {
+        java {
+            if (!isNewArchitectureEnabled()) {
+                srcDirs += 'src/paper/java'
+            }
+        }
     }
 }
 
 repositories {
-  mavenLocal()
-  maven {
-    // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-    url("$rootDir/../node_modules/react-native/android")
-  }
-  google()
+    google()
+    mavenLocal()
+    mavenCentral()
 }
 
 dependencies {
-  implementation "com.facebook.react:react-native:+" // From node_modules
+    //noinspection GradleDynamicVersion
+    implementation 'com.facebook.react:react-native:+'
 }

android/src/main/java/com/reactcommunity/rndatetimepicker/RNDatePickerDialogModule.java renamed to android/src/main/java/com/reactcommunity/rndatetimepicker/DatePickerModule.java

@@ -31,19 +31,19 @@
  * {@link NativeModule} that allows JS to show a native date picker dialog and get called back when
  * the user selects a date.
  */
-@ReactModule(name = RNDatePickerDialogModule.FRAGMENT_TAG)
-public class RNDatePickerDialogModule extends ReactContextBaseJavaModule {
+@ReactModule(name = DatePickerModule.NAME)
+public class DatePickerModule extends NativeModuleDatePickerSpec {
 
   @VisibleForTesting
-  public static final String FRAGMENT_TAG = "RNDatePickerAndroid";
+  public static final String NAME = "RNDatePicker";
 
-  public RNDatePickerDialogModule(ReactApplicationContext reactContext) {
+  public DatePickerModule(ReactApplicationContext reactContext) {
     super(reactContext);
   }
 
   @Override
   public @NonNull String getName() {
-    return RNDatePickerDialogModule.FRAGMENT_TAG;
+    return NAME;
   }
 
   private class DatePickerDialogListener implements OnDateSetListener, OnDismissListener, OnClickListener {
@@ -115,7 +115,7 @@ public void onClick(DialogInterface dialog, int which) {
   @ReactMethod
   public void dismiss(Promise promise) {
     FragmentActivity activity = (FragmentActivity) getCurrentActivity();
-    dismissDialog(activity, FRAGMENT_TAG, promise);
+    dismissDialog(activity, NAME, promise);
   }
   /**
    * Show a date picker dialog.
@@ -147,8 +147,8 @@ public void open(final ReadableMap options, final Promise promise) {
     FragmentActivity activity = (FragmentActivity) getCurrentActivity();
     if (activity == null) {
       promise.reject(
-        RNConstants.ERROR_NO_ACTIVITY,
-        "Tried to open a DatePicker dialog while not attached to an Activity");
+              RNConstants.ERROR_NO_ACTIVITY,
+              "Tried to open a DatePicker dialog while not attached to an Activity");
       return;
     }
 
@@ -158,7 +158,7 @@ public void open(final ReadableMap options, final Promise promise) {
       @Override
       public void run() {
         RNDatePickerDialogFragment oldFragment =
-                (RNDatePickerDialogFragment) fragmentManager.findFragmentByTag(FRAGMENT_TAG);
+                (RNDatePickerDialogFragment) fragmentManager.findFragmentByTag(NAME);
 
         if (oldFragment != null) {
           oldFragment.update(createFragmentArguments(options));
@@ -173,7 +173,7 @@ public void run() {
         fragment.setOnDismissListener(listener);
         fragment.setOnDateSetListener(listener);
         fragment.setOnNeutralButtonActionListener(listener);
-        fragment.show(fragmentManager, FRAGMENT_TAG);
+        fragment.show(fragmentManager, NAME);
       }
     });
   }

android/src/main/java/com/reactcommunity/rndatetimepicker/RNDatePickerDialogFragment.java

@@ -25,6 +25,7 @@
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.fragment.app.DialogFragment;
+
 import android.widget.DatePicker;
 
 import java.util.Calendar;

android/src/main/java/com/reactcommunity/rndatetimepicker/RNDateTimePickerPackage.java

@@ -1,25 +1,71 @@
 package com.reactcommunity.rndatetimepicker;
 
-import java.util.Arrays;
-import java.util.Collections;
-import java.util.List;
 
-import com.facebook.react.ReactPackage;
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.TurboReactPackage;
 import com.facebook.react.bridge.NativeModule;
 import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.uimanager.ViewManager;
-
-public class RNDateTimePickerPackage implements ReactPackage {
-    @Override
-    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
-      return Arrays.<NativeModule>asList(
-        new RNDatePickerDialogModule(reactContext),
-        new RNTimePickerDialogModule(reactContext)
-      );
-    }
+import com.facebook.react.module.model.ReactModuleInfo;
+import com.facebook.react.module.model.ReactModuleInfoProvider;
+
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
 
-    @Override
-    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-      return Collections.emptyList();
+public class RNDateTimePickerPackage extends TurboReactPackage {
+  @Nullable
+  @Override
+  public NativeModule getModule(String name, ReactApplicationContext reactContext) {
+    if (name.equals(DatePickerModule.NAME)) {
+      return new DatePickerModule(reactContext);
+    } else if (name.equals(TimePickerModule.NAME)) {
+      return new TimePickerModule(reactContext);
+    } else {
+      return null;
     }
+  }
+
+  @Override
+  public ReactModuleInfoProvider getReactModuleInfoProvider() {
+    return () -> {
+      boolean isTurboModule = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
+      final Map<String, ReactModuleInfo> moduleInfos = new HashMap<>();
+      moduleInfos.put(
+        DatePickerModule.NAME,
+        new ReactModuleInfo(
+          DatePickerModule.NAME,
+          DatePickerModule.NAME,
+          false, // canOverrideExistingModule
+          false, // needsEagerInit
+          false, // hasConstants
+          false, // isCxxModule
+          isTurboModule // isTurboModule
+        ));
+      moduleInfos.put(
+        TimePickerModule.NAME,
+        new ReactModuleInfo(
+          TimePickerModule.NAME,
+          TimePickerModule.NAME,
+          false, // canOverrideExistingModule
+          false, // needsEagerInit
+          false, // hasConstants
+          false, // isCxxModule
+          isTurboModule // isTurboModule
+        ));
+      return moduleInfos;
+    };
+  }
+
+  @NonNull
+  @Override
+  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
+    List<NativeModule> modules = new ArrayList<>();
+    modules.add(new DatePickerModule(reactContext));
+    modules.add(new TimePickerModule(reactContext));
+
+    return modules;
+  }
 }