feat: updated replication config screen with result messages

Author: biozal

expo-example/android/app/build.gradle

@@ -4,6 +4,27 @@ apply plugin: "com.facebook.react"
 
 def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
 
+static def versionToNumber(major, minor, patch) {
+  return patch * 100 + minor * 10000 + major * 1000000
+}
+
+def getRNVersion() {
+  def version = providers.exec {
+    workingDir(projectDir)
+    commandLine("node", "-e", "console.log(require('react-native/package.json').version);")
+  }.standardOutput.asText.get().trim()
+
+  def coreVersion = version.split("-")[0]
+  def (major, minor, patch) = coreVersion.tokenize('.').collect { it.toInteger() }
+
+  return versionToNumber(
+      major,
+      minor,
+      patch
+  )
+}
+def rnVersion = getRNVersion()
+
 /**
  * This is the configuration block to customize your React Native Android app.
  * By default you don't need to apply any configuration, just uncomment the lines you need.
@@ -57,6 +78,11 @@ react {
     //
     //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
     // hermesFlags = ["-O", "-output-source-map"]
+
+    if (rnVersion >= versionToNumber(0, 75, 0)) {
+        /* Autolinking */
+        autolinkLibrariesWithApp()
+    }
 }
 
 /**
@@ -169,5 +195,7 @@ dependencies {
     }
 }
 
-apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
-applyNativeModulesAppBuildGradle(project)
+if (rnVersion < versionToNumber(0, 75, 0)) {
+    apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
+    applyNativeModulesAppBuildGradle(project)
+}

expo-example/android/build.gradle

@@ -39,4 +39,4 @@ allprojects {
         maven { url 'https://www.jitpack.io' }
     }
 }
-apply from: "../../android/build.gradle"apply from: "../../android/build.gradle"apply from: "../../android/build.gradle"apply from: "../../android/build.gradle"apply from: "../../android/build.gradle"apply from: "../../android/build.gradle"apply from: "../../android/build.gradle"apply from: "../../android/build.gradle"apply from: "../../android/build.gradle"apply from: "../../android/build.gradle"apply from: "../../android/build.gradle"apply from: "../../android/build.gradle"apply from: "../../android/build.gradle"apply from: "../../android/build.gradle"apply from: "../../android/build.gradle"apply from: "../../android/build.gradle"apply from: "../../android/build.gradle"apply from: "../../android/build.gradle"
+apply from: "../../android/build.gradle"

expo-example/android/gradle/wrapper/gradle-wrapper.jar

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.6-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.8-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

expo-example/android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,19 @@
+import org.jetbrains.kotlin.gradle.tasks.KotlinCompile
+
+plugins {
+    kotlin("jvm") version "1.9.24"
+    id("java-gradle-plugin")
+}
+
+repositories {
+    mavenCentral()
+}
+
+gradlePlugin {
+    plugins {
+        create("reactSettingsPlugin") {
+            id = "com.facebook.react.settings"
+            implementationClass = "expo.plugins.ReactSettingsPlugin"
+        }
+    }
+}

expo-example/android/react-settings-plugin/build.gradle.kts

@@ -0,0 +1,10 @@
+package expo.plugins
+
+import org.gradle.api.Plugin
+import org.gradle.api.initialization.Settings
+
+class ReactSettingsPlugin : Plugin<Settings> {
+  override fun apply(settings: Settings) {
+    // Do nothing, just register the plugin.
+  }
+}

expo-example/android/react-settings-plugin/src/main/kotlin/expo/plugins/ReactSettingsPlugin.kt

@@ -1,3 +1,49 @@
+pluginManagement {
+  def version = providers.exec {
+    commandLine("node", "-e", "console.log(require('react-native/package.json').version);")
+  }.standardOutput.asText.get().trim()
+  def (_, reactNativeMinor, reactNativePatch) = version.split("-")[0].tokenize('.').collect { it.toInteger() }
+
+  includeBuild(new File(["node", "--print", "require.resolve('@react-native/gradle-plugin/package.json')"].execute(null, rootDir).text.trim()).getParentFile().toString())
+  if(reactNativeMinor == 74 && reactNativePatch <= 3){
+    includeBuild("react-settings-plugin")
+  }
+}
+
+plugins { id("com.facebook.react.settings") }
+
+def getRNMinorVersion() {
+  def version = providers.exec {
+    commandLine("node", "-e", "console.log(require('react-native/package.json').version);")
+  }.standardOutput.asText.get().trim()
+
+  def coreVersion = version.split("-")[0]
+  def (major, minor, patch) = coreVersion.tokenize('.').collect { it.toInteger() }
+
+  return minor
+}
+
+if (getRNMinorVersion() >= 75) {
+  extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
+    if (System.getenv('EXPO_UNSTABLE_CORE_AUTOLINKING') == '1') {
+      println('\u001B[32mUsing expo-modules-autolinking as core autolinking source\u001B[0m')
+      def command = [
+        'node',
+        '--no-warnings',
+        '--eval',
+        'require(require.resolve(\'expo-modules-autolinking\', { paths: [require.resolve(\'expo/package.json\')] }))(process.argv.slice(1))',
+        'react-native-config',
+        '--json',
+        '--platform',
+        'android'
+      ].toList()
+      ex.autolinkLibrariesFromCommand(command)
+    } else {
+      ex.autolinkLibrariesFromCommand()
+    }
+  }
+}
+
 rootProject.name = 'expo-example'
 
 dependencyResolutionManagement {
@@ -11,8 +57,10 @@ dependencyResolutionManagement {
 apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle");
 useExpoModules()
 
-apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
-applyNativeModulesSettingsGradle(settings)
+if (getRNMinorVersion() < 75) {
+  apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
+  applyNativeModulesSettingsGradle(settings)
+}
 
 include ':app'
 includeBuild(new File(["node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile())

expo-example/android/settings.gradle

@@ -1,12 +1,18 @@
 import React, { useState } from 'react';
-import defaultCollection from '@/service/collection/default';
 import { Database } from 'cbl-reactnative';
-import { SafeAreaView, ScrollView, Text } from 'react-native';
+import { SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';
 import { useStyleScheme } from '@/components/Themed/Themed';
 import ReplicatorConfigGeneralForm from '@/components/ReplicationConfigGeneralForm/ReplicatorConfigGeneralForm';
 import ReplicatorAuthenticationForm from '@/components/ReplicatorAuthenticationForm/ReplicatorAuthenticationForm';
+import ReplicatorConfigCollectionForm from '@/components/ReplicationConfigCollectionForm/ReplicatorConfigCollectionForm';
+import ResultListView from '@/components/ResultsListView/ResultsListView';
+import { useNavigation } from '@react-navigation/native';
+import { useRouter } from 'expo-router';
+import useNavigationBarTitleOption from '@/hooks/useNativgationBarTitle';
 
 export default function ReplicationConfigCreateScreen() {
+  const navigation = useNavigation();
+  useNavigationBarTitleOption('Add Replicator Config', navigation);
   //general form
   const [replicatorType, setReplicatorType] = useState<string>('');
   const [connectionString, setConnectionString] = useState<string>('');
@@ -26,6 +32,8 @@ export default function ReplicationConfigCreateScreen() {
   const [password, setPassword] = useState<string>('');
   const [sessionId, setSessionId] = useState<string>('');
   const [cookieName, setCookieName] = useState<string>('');
+  //used for displaying result messages
+  const [resultMessages, setResultMessages] = useState<string[]>([]);
 
   function reset() {
     setConnectionString('');
@@ -45,13 +53,14 @@ export default function ReplicationConfigCreateScreen() {
     setPassword('');
     setSessionId('');
     setCookieName('');
+    setResultMessages([]);
   }
 
   async function update(
     database: Database,
     scopeName: string,
     collections: string[]
-  ) {
+  ): Promise<void> {
     try {
       //const collection = await defaultCollection(database);
       //return [
@@ -62,11 +71,18 @@ export default function ReplicationConfigCreateScreen() {
       return [error.message];
     }
   }
+
+  function updateResultMessage(messages: string[]) {}
   const styles = useStyleScheme();
 
   return (
     <SafeAreaView style={styles.container}>
       <ScrollView>
+        <ReplicatorConfigCollectionForm
+          handleResetPressed={reset}
+          handleUpdatePressed={update}
+          updateResultMessage={updateResultMessage}
+        />
         <ReplicatorAuthenticationForm
           selectedAuthenticationType={selectedAuthenticationType}
           setSelectedAuthenticationType={setSelectedAuthenticationType}
@@ -98,7 +114,18 @@ export default function ReplicationConfigCreateScreen() {
           setAcceptOnlySelfSignedCerts={setAcceptOnlySelfSignedCerts}
           setReplicatorType={setReplicatorType}
         />
+        <ResultListView
+          style={localStyles.resultMessages}
+          useScrollView={false}
+          messages={resultMessages}
+        />
       </ScrollView>
     </SafeAreaView>
   );
 }
+
+const localStyles = StyleSheet.create({
+  resultMessages: {
+    paddingBottom: 40,
+  },
+});

expo-example/app/replication/config.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AddIcon, Fab, Icon } from '@gluestack-ui/themed';
-import { Link, useRouter } from 'expo-router';
+import { useRouter } from 'expo-router';
 import { SafeAreaView, StyleSheet, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useStyleScheme } from '@/components/Themed/Themed';

expo-example/app/replication/configListing.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useState } from 'react';
 import { ReplicatorConfigCollectionFormProps } from '@/components/ReplicationConfigCollectionForm/ReplicatorConfigCollectionFormProps.type';
-import { Database } from '../../../lib/typescript/src';
+import { Database } from 'cbl-reactnative';
 import DatabaseContext from '@/providers/DatabaseContext';
 import DatabaseNameActionForm from '@/components/DatabaseNameActionForm/DatabaseNameActionForm';
 import HeaderView from '@/components/HeaderView/HeaderView';