React 19 support (#170)

* Working with React 19 (#168)

* fix: update MutableRefObject import to use React namespace

* fix: update dependencies in useEffect hooks for better stability and clean up props spreading

* fix: update devDependencies and dependencies for compatibility with latest versions

* fix: update dependencies and scripts for compatibility with latest versions

* fix: update Android build configuration for compatibility and enable new architecture

* fix: update dependencies in yarn

* fix: update type definitions

* chore: rebase (#169)

* fix: typo

* fix: keyboardAvoidingView bahavior

---------

Co-authored-by: Sergi Gonzalez <[email protected]>

Author: onmotion

example/.bundle/config

@@ -38,7 +38,7 @@ const App = () => {
         <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
         <KeyboardAvoidingView
           style={styles.scrollContainer}
-          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
           enabled>
           <ScrollView
             nestedScrollEnabled

example/App.tsx

@@ -1,8 +1,16 @@
-source 'https://rubygems.org'
+source "https://rubygems.org"
 
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
 ruby ">= 2.6.10"
 
 # Exclude problematic versions of cocoapods and activesupport that causes build failures.
-gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
-gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+gem "cocoapods", ">= 1.13", "!= 1.15.0", "!= 1.15.1"
+gem "activesupport", ">= 6.1.7.5", "!= 7.1.0"
+gem "xcodeproj", "< 1.26.0"
+gem "concurrent-ruby", "< 1.3.4"
+
+# Ruby 3.4.0 has removed some libraries from the standard library.
+gem "bigdecimal"
+gem "logger"
+gem "benchmark"
+gem "mutex_m"

example/Gemfile

@@ -2,16 +2,12 @@
  * @format
  */
 
-import 'react-native'
 import React from 'react'
-
-// Note: import explicitly to use the types shiped with jest.
-import { it } from '@jest/globals'
-
-// Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer'
+import ReactTestRenderer from 'react-test-renderer'
 import App from '../App'
 
-it('renders correctly', () => {
-  renderer.create(<App />)
+test('renders correctly', async () => {
+  await ReactTestRenderer.act(() => {
+    ReactTestRenderer.create(<App />)
+  })
 })

example/__tests__/App.test.tsx

@@ -63,23 +63,23 @@ def enableProguardInReleaseBuilds = false
  * The preferred build flavor of JavaScriptCore (JSC)
  *
  * For example, to use the international variant, you can use:
- * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ * `def jscFlavor = io.github.react-native-community:jsc-android-intl:2026004.+`
  *
  * The international variant includes ICU i18n library and necessary data
  * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
  * give correct results when using with locales other than en-US. Note that
  * this variant is about 6MiB larger per architecture than default.
  */
-def jscFlavor = 'org.webkit:android-jsc:+'
+def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
 
 android {
     ndkVersion rootProject.ext.ndkVersion
     buildToolsVersion rootProject.ext.buildToolsVersion
     compileSdk rootProject.ext.compileSdkVersion
 
-    namespace "com.autocomletedropdownplayground"
+    namespace "com.autocompletedropdownplayground"
     defaultConfig {
-        applicationId "com.autocomletedropdownplayground"
+        applicationId "com.autocompletedropdownplayground"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1

example/android/app/build.gradle

@@ -1,4 +1,4 @@
-package com.autocomletedropdownplayground
+package com.autocompletedropdownplayground
 
 import com.facebook.react.ReactActivity
 import com.facebook.react.ReactActivityDelegate
@@ -11,7 +11,7 @@ class MainActivity : ReactActivity() {
    * Returns the name of the main component registered from JavaScript. This is used to schedule
    * rendering of the component.
    */
-  override fun getMainComponentName(): String = "AutocomleteDropdownPlayground"
+  override fun getMainComponentName(): String = "AutocompleteDropdownPlayground"
 
   /**
    * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]

example/android/app/src/main/java/com/autocomletedropdownplayground/MainActivity.kt renamed to example/android/app/src/main/java/com/autocompletedropdownplayground/MainActivity.kt

@@ -1,4 +1,4 @@
-package com.autocomletedropdownplayground
+package com.autocompletedropdownplayground
 
 import android.app.Application
 import com.facebook.react.PackageList
@@ -9,6 +9,7 @@ import com.facebook.react.ReactPackage
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
 import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
 import com.facebook.react.defaults.DefaultReactNativeHost
+import com.facebook.react.soloader.OpenSourceMergedSoMapping
 import com.facebook.soloader.SoLoader
 
 class MainApplication : Application(), ReactApplication {
@@ -34,7 +35,7 @@ class MainApplication : Application(), ReactApplication {
 
   override fun onCreate() {
     super.onCreate()
-    SoLoader.init(this, false)
+    SoLoader.init(this, OpenSourceMergedSoMapping)
     if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
       // If you opted-in for the New Architecture, we load the native entry point for this app.
       load()

example/android/app/src/main/java/com/autocomletedropdownplayground/MainApplication.kt renamed to example/android/app/src/main/java/com/autocompletedropdownplayground/MainApplication.kt

@@ -1,3 +1,3 @@
 <resources>
-    <string name="app_name">AutocomleteDropdownPlayground</string>
+    <string name="app_name">AutocompleteDropdownPlayground</string>
 </resources>

example/android/app/src/main/res/values/strings.xml

@@ -1,11 +1,11 @@
 buildscript {
     ext {
-        buildToolsVersion = "34.0.0"
-        minSdkVersion = 23
-        compileSdkVersion = 34
-        targetSdkVersion = 34
-        ndkVersion = "26.1.10909125"
-        kotlinVersion = "1.9.24"
+        buildToolsVersion = "35.0.0"
+        minSdkVersion = 24
+        compileSdkVersion = 35
+        targetSdkVersion = 35
+        ndkVersion = "27.1.12297006"
+        kotlinVersion = "2.0.21"
     }
     repositories {
         google()

example/android/build.gradle

@@ -32,7 +32,7 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
 # your application. You should enable this flag either if you want
 # to write custom TurboModules/Fabric components OR use libraries that
 # are providing them.
-newArchEnabled=false
+newArchEnabled=true
 
 # Use this property to enable or disable the Hermes JS engine.
 # If set to false, you will be using JSC instead.

example/android/gradle.properties

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

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

@@ -15,6 +15,8 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 #
+# SPDX-License-Identifier: Apache-2.0
+#
 
 ##############################################################################
 #
@@ -84,7 +86,7 @@ done
 # shellcheck disable=SC2034
 APP_BASE_NAME=${0##*/}
 # Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
-APP_HOME=$( cd "${APP_HOME:-./}" > /dev/null && pwd -P ) || exit
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
 MAX_FD=maximum
@@ -203,7 +205,7 @@ fi
 DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
 
 # Collect all arguments for the java command:
-#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
 #     and any embedded shellness will be escaped.
 #   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
 #     treated as '${Hostname}' itself on the command line.

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

@@ -13,6 +13,8 @@
 @rem See the License for the specific language governing permissions and
 @rem limitations under the License.
 @rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
 
 @if "%DEBUG%"=="" @echo off
 @rem ##########################################################################

example/android/gradlew

@@ -1,6 +1,6 @@
 pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
 plugins { id("com.facebook.react.settings") }
 extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
-rootProject.name = 'AutocomleteDropdownPlayground'
+rootProject.name = 'AutocompleteDropdownPlayground'
 include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')

example/android/gradlew.bat

@@ -1,4 +1,4 @@
 {
-  "name": "AutocomleteDropdownPlayground",
-  "displayName": "AutocomleteDropdownPlayground"
+  "name": "AutocompleteDropdownPlayground",
+  "displayName": "AutocompleteDropdownPlayground"
 }

example/android/settings.gradle

@@ -17,8 +17,8 @@ export const ModalExample = memo(() => {
           <SafeAreaView style={{ flex: 1 }}>
             <KeyboardAvoidingView
               style={{ flex: 1 }}
-              behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-              keyboardVerticalOffset={Platform.select({ ios: 75, default: 0 })}>
+              behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+              keyboardVerticalOffset={Platform.select({ ios: 75, default: 60 })}>
               <ScrollView
                 nestedScrollEnabled
                 keyboardDismissMode="on-drag"

example/app.json

@@ -16,12 +16,20 @@ export const RemoteDataSetExample = memo((props: Omit<IAutocompleteDropdownProps
       return
     }
     setLoading(true)
-    const response = await fetch('https://jsonplaceholder.typicode.com/posts').then(
-      data =>
-        new Promise(res => {
-          setTimeout(() => res(data.json()), 2000) // imitate of a long response
-        }),
-    )
+    const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+      .then(
+        data =>
+          new Promise(res => {
+            setTimeout(() => res(data.json()), 2000) // imitate of a long response
+          }),
+      )
+      .catch(error => {
+        console.error('Error fetching data:', error)
+        throw error
+      })
+      .finally(() => {
+        setLoading(false)
+      })
     const items = (await response) as Record<string, string>[]
 
     const suggestions = items

example/components/ModalExample.tsx

@@ -1,4 +1,5 @@
 import React, { memo, useCallback, useRef, useState } from 'react'
+import type { TextInput } from 'react-native'
 import { Button, Dimensions, Text, View } from 'react-native'
 import type {
   IAutocompleteDropdownRef,
@@ -13,7 +14,7 @@ export const RemoteDataSetExample2 = memo((props: Omit<IAutocompleteDropdownProp
   const [selectedItem, setSelectedItem] = useState<string | null>(null)
   const dropdownController = useRef<IAutocompleteDropdownRef | null>(null)
 
-  const searchRef = useRef(null)
+  const searchRef = useRef<TextInput>(null)
 
   const getSuggestions = useCallback(async (q: string) => {
     const filterToken = q.toLowerCase()
@@ -23,7 +24,15 @@ export const RemoteDataSetExample2 = memo((props: Omit<IAutocompleteDropdownProp
       return
     }
     setLoading(true)
+    console.log('fetching data')
     const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+      .catch(error => {
+        console.error('Error fetching data:', error)
+        throw error
+      })
+      .finally(() => {
+        setLoading(false)
+      })
     const items = (await response.json()) as AutocompleteDropdownItem[]
     const suggestions = items
       .filter(item => item.title?.toLowerCase().includes(filterToken))
@@ -40,7 +49,7 @@ export const RemoteDataSetExample2 = memo((props: Omit<IAutocompleteDropdownProp
   }, [])
 
   const onOpenSuggestionsList = useCallback((isOpened: boolean) => {
-    console.log({ isOpened })
+    console.log('onOpenSuggestionsList cb', { isOpened })
   }, [])
 
   return (

example/components/RemoteDataSetExample.tsx

@@ -20,6 +20,13 @@ export const RemoteDataSetExample3 = memo(() => {
     }
     setLoading(true)
     const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+      .catch(error => {
+        console.error('Error fetching data:', error)
+        throw error
+      })
+      .finally(() => {
+        setLoading(false)
+      })
     const items = (await response.json()) as AutocompleteDropdownItem[]
     const suggestions = items
       .filter(item => item.title?.toLowerCase().includes(filterToken))