Skip to content

Commit 44e24dd

Browse files
TheHypnooTheHypnoo
authored
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
1 parent 9c3f7f2 commit 44e24dd

File tree

12 files changed

+2708
-2442
lines changed

12 files changed

+2708
-2442
lines changed

‎example/android/app/build.gradle‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ def enableProguardInReleaseBuilds = false
7070
* give correct results when using with locales other than en-US. Note that
7171
* this variant is about 6MiB larger per architecture than default.
7272
*/
73-
def jscFlavor = 'org.webkit:android-jsc:+'
73+
def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
7474

7575
android {
7676
ndkVersion rootProject.ext.ndkVersion

‎example/android/app/src/main/java/com/autocomletedropdownplayground/MainApplication.kt‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import com.facebook.react.ReactPackage
99
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
1010
import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
1111
import com.facebook.react.defaults.DefaultReactNativeHost
12+
import com.facebook.react.soloader.OpenSourceMergedSoMapping
1213
import com.facebook.soloader.SoLoader
1314

1415
class MainApplication : Application(), ReactApplication {
@@ -34,10 +35,10 @@ class MainApplication : Application(), ReactApplication {
3435

3536
override fun onCreate() {
3637
super.onCreate()
37-
SoLoader.init(this, false)
38+
SoLoader.init(this, OpenSourceMergedSoMapping)
3839
if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
3940
// If you opted-in for the New Architecture, we load the native entry point for this app.
4041
load()
4142
}
4243
}
43-
}
44+
}

‎example/android/build.gradle‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
buildscript {
22
ext {
3-
buildToolsVersion = "34.0.0"
4-
minSdkVersion = 23
5-
compileSdkVersion = 34
6-
targetSdkVersion = 34
7-
ndkVersion = "26.1.10909125"
8-
kotlinVersion = "1.9.24"
3+
buildToolsVersion = "35.0.0"
4+
minSdkVersion = 24
5+
compileSdkVersion = 35
6+
targetSdkVersion = 35
7+
ndkVersion = "27.2.12479018"
8+
kotlinVersion = "2.1.20"
99
}
1010
repositories {
1111
google()

‎example/android/gradle.properties‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
3232
# your application. You should enable this flag either if you want
3333
# to write custom TurboModules/Fabric components OR use libraries that
3434
# are providing them.
35-
newArchEnabled=false
35+
newArchEnabled=true
3636

3737
# Use this property to enable or disable the Hermes JS engine.
3838
# If set to false, you will be using JSC instead.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
distributionBase=GRADLE_USER_HOME
22
distributionPath=wrapper/dists
3-
distributionUrl=https\://services.gradle.org/distributions/gradle-8.8-all.zip
3+
distributionUrl=https\://services.gradle.org/distributions/gradle-8.14-bin.zip
44
networkTimeout=10000
55
validateDistributionUrl=true
66
zipStoreBase=GRADLE_USER_HOME

‎example/package.json‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,38 +5,40 @@
55
"license": "MIT",
66
"author": "Alexandr Kozhevnikov <onmotion1@gmail.com>",
77
"scripts": {
8-
"android": "react-native run-android",
8+
"android": "rnc-cli run-android",
99
"ios": "react-native run-ios",
1010
"lint": "eslint .",
1111
"pods": "npx pod-install --repo-update",
12-
"start": "react-native start",
12+
"start": "rnc-cli start",
1313
"test": "jest"
1414
},
1515
"dependencies": {
16-
"react": "18.3.1",
17-
"react-native": "0.75.4",
16+
"react": "19.0.0",
17+
"react-native": "0.79.2",
1818
"react-native-feather": "^1.1.2",
19-
"react-native-svg": "^15.1.0"
19+
"react-native-svg": "^15.11.2"
2020
},
2121
"devDependencies": {
22-
"@babel/core": "^7.24.5",
23-
"@babel/preset-env": "^7.24.5",
24-
"@babel/runtime": "^7.24.5",
25-
"@react-native/babel-preset": "0.75.4",
22+
"@babel/core": "^7.27.1",
23+
"@babel/preset-env": "^7.27.2",
24+
"@babel/runtime": "^7.27.1",
25+
"@react-native-community/cli": "18.0.0",
26+
"@react-native-community/cli-platform-android": "18.0.0",
27+
"@react-native/babel-preset": "0.79.2",
2628
"@react-native/eslint-config": "0.75.4",
27-
"@react-native/metro-config": "0.75.4",
28-
"@react-native/typescript-config": "0.75.4",
29-
"@types/react": "^18.2.6",
30-
"@types/react-test-renderer": "^18.3.0",
31-
"babel-jest": "^29.6.3",
29+
"@react-native/metro-config": "0.79.2",
30+
"@react-native/typescript-config": "0.79.2",
31+
"@types/react": "^19.0.0",
32+
"@types/react-test-renderer": "^19.0.0",
33+
"babel-jest": "^29.7.0",
3234
"eslint": "^8.19.0",
3335
"eslint-config-prettier": "^9.0.0",
3436
"eslint-plugin-prettier": "^5.0.1",
3537
"eslint-plugin-unused-imports": "^4.1.0",
3638
"jest": "^29.6.3",
37-
"metro-react-native-babel-preset": "0.76.8",
39+
"metro-react-native-babel-preset": "0.77.0",
3840
"prettier": "^3.0.0",
39-
"react-test-renderer": "18.3.1",
41+
"react-test-renderer": "19.0.0",
4042
"typescript": "5.1.6"
4143
},
4244
"engines": {

‎package.json‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -58,22 +58,22 @@
5858
"react-native-size-matters": "^0.4.2"
5959
},
6060
"devDependencies": {
61-
"@babel/core": "^7.24.5",
61+
"@babel/core": "^7.27.1",
6262
"@babel/eslint-parser": "^7.24.5",
63-
"@babel/preset-env": "^7.24.5",
64-
"@babel/preset-react": "^7.24.5",
65-
"@babel/runtime": "^7.24.5",
63+
"@babel/preset-env": "^7.27.2",
64+
"@babel/preset-react": "^7.27.1",
65+
"@babel/runtime": "^7.27.1",
6666
"@commitlint/config-conventional": "^17.0.2",
6767
"@evilmartians/lefthook": "^1.5.0",
68-
"@react-native/babel-preset": "0.75.4",
68+
"@react-native/babel-preset": "0.79.2",
6969
"@react-native/eslint-config": "0.75.4",
70-
"@react-native/metro-config": "0.75.4",
71-
"@react-native/typescript-config": "0.75.4",
70+
"@react-native/metro-config": "0.79.2",
71+
"@react-native/typescript-config": "0.79.2",
7272
"@release-it/conventional-changelog": "^5.0.0",
7373
"@types/jest": "^29.5.12",
7474
"@types/lodash.debounce": "^4.0.9",
75-
"@types/react": "^18.2.6",
76-
"@types/react-test-renderer": "^18.0.0",
75+
"@types/react": "^19.1.3",
76+
"@types/react-test-renderer": "^19.0.0",
7777
"babel-jest": "^29.6.3",
7878
"commitlint": "^17.0.2",
7979
"del-cli": "^5.1.0",
@@ -86,11 +86,11 @@
8686
"eslint-plugin-unused-imports": "^4.1.3",
8787
"jest": "^29.6.3",
8888
"prettier": "^3.0.0",
89-
"react": "18.3.1",
90-
"react-native": "0.75.4",
91-
"react-native-builder-bob": "^0.30.2",
92-
"react-native-svg": "^15.1.0",
93-
"react-test-renderer": "18.3.1",
89+
"react": "19.0.0",
90+
"react-native": "0.79.2",
91+
"react-native-builder-bob": "^0.40.10",
92+
"react-native-svg": "^15.11.2",
93+
"react-test-renderer": "19.0.0",
9494
"release-it": "^15.0.0",
9595
"typescript": "5.1.6"
9696
},

‎src/AutocompleteDropdownContext.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const AutocompleteDropdownContextProvider: FC<IAutocompleteDropdownContex
4848
const wrapperRef = useRef<View>(null)
4949
const activeControllerRef = useRef<IAutocompleteDropdownRef | null>(null)
5050
const controllerRefs = useRef<IAutocompleteDropdownRef[]>([])
51-
const positionTrackingIntervalRef = useRef<NodeJS.Timeout>()
51+
const positionTrackingIntervalRef = useRef<NodeJS.Timeout | null>(null)
5252

5353
useEffect(() => {
5454
if (!inputMeasurements?.height) {
@@ -113,11 +113,14 @@ export const AutocompleteDropdownContextProvider: FC<IAutocompleteDropdownContex
113113
})
114114
}, 16)
115115
} else {
116-
clearInterval(positionTrackingIntervalRef.current)
117-
}
118-
119-
return () => {
120-
clearInterval(positionTrackingIntervalRef.current)
116+
if (positionTrackingIntervalRef.current) {
117+
clearInterval(positionTrackingIntervalRef.current)
118+
}
119+
return () => {
120+
if (positionTrackingIntervalRef.current) {
121+
clearInterval(positionTrackingIntervalRef.current)
122+
}
123+
}
121124
}
122125
}, [recalculatePosition, opacity, show])
123126

‎src/Dropdown.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { fadeInDownShort, fadeInUpShort } from './helpers'
66
import { theme } from './theme'
77
import type { AutocompleteDropdownItem, IAutocompleteDropdownProps } from './types'
88
interface DropdownProps extends Omit<IAutocompleteDropdownProps, 'renderItem' | 'ref'> {
9-
ListEmptyComponent: JSX.Element
9+
ListEmptyComponent: React.ReactElement
1010
renderItem: ListRenderItem<AutocompleteDropdownItem>
1111
}
1212

‎src/index.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -227,8 +227,7 @@ export const AutocompleteDropdown = memo<
227227
if (activeControllerRef?.current) {
228228
controllerRefs?.current.push(activeControllerRef?.current)
229229
}
230-
// eslint-disable-next-line react-hooks/exhaustive-deps
231-
}, [])
230+
}, [activeControllerRef, controllerRefs])
232231

233232
const closeAll = useCallback(() => {
234233
controllerRefs?.current.forEach(c => {
@@ -266,15 +265,13 @@ export const AutocompleteDropdown = memo<
266265
if (typeof onSelectItemProp === 'function') {
267266
onSelectItemProp(selectedItem)
268267
}
269-
// eslint-disable-next-line react-hooks/exhaustive-deps
270-
}, [selectedItem])
268+
}, [selectedItem, onSelectItemProp])
271269

272270
useEffect(() => {
273271
if (typeof onOpenSuggestionsListProp === 'function') {
274272
onOpenSuggestionsListProp(isOpened)
275273
}
276-
// eslint-disable-next-line react-hooks/exhaustive-deps
277-
}, [isOpened])
274+
}, [isOpened, onOpenSuggestionsListProp])
278275

279276
useEffect(() => {
280277
// renew state on close
@@ -366,6 +363,10 @@ export const AutocompleteDropdown = memo<
366363
[debounceDelay, onTextChange],
367364
)
368365

366+
useEffect(() => {
367+
return () => debouncedEvent.cancel()
368+
}, [debouncedEvent])
369+
369370
const onChangeText = useCallback(
370371
(text: string) => {
371372
setSearchText(text)

0 commit comments

Comments
 (0)