Skip to content

Commit 11f406a

Browse files
gosha212d4vidi
gosha212
and
d4vidi
authored
Feat/8190 support react native 083 (#8191)
* Support for RN 0.83 * Updated react version * Fix missing newline at end of package.json files in root and playground directories * Update gradle wrapper * Upgrade to rn 0.83 * Added 0.83 pipelines * Removed usage of CSSBackgroundDrawable * Fixed docs * Update website/docs/docs/docs-Installing.mdx Co-authored-by: d4vidi <amit.d4vidi@gmail.com> * Update website/docs/docs/docs-Installing.mdx Co-authored-by: d4vidi <amit.d4vidi@gmail.com> --------- Co-authored-by: d4vidi <amit.d4vidi@gmail.com>
1 parent d2bd33b commit 11f406a

11 files changed

Lines changed: 414 additions & 193 deletions

File tree

‎.buildkite/jobs/pipeline.android_rn_83.yml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
- label: ":android: Android (RN 0.83.0)"
2+
env:
3+
JAVA_HOME: /opt/openjdk/jdk-17.0.9.jdk/Contents/Home/
4+
REACT_NATIVE_VERSION: 0.83.0
5+
command:
6+
- "nvm install"
7+
- "./scripts/ci.android.sh"
8+
key: "android_rn_83"
9+
timeout_in_minutes: 90
10+
artifact_paths: "/Users/builder/uibuilder/work/playground/artifacts/**/*"
11+
12+
13+

‎.buildkite/jobs/pipeline.ios_rn_83.yml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
- label: ":ios: iOS (RN 0.83.0)"
2+
env:
3+
REACT_NATIVE_VERSION: 0.83.0
4+
command:
5+
- "nvm install"
6+
- "./scripts/ci.ios.sh"
7+
key: "ios_rn_83"
8+
timeout_in_minutes: 90
9+
artifact_paths: "/Users/builder/uibuilder/work/playground/artifacts/**/*"
10+
11+
12+

‎.buildkite/pipeline.sh‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ cat .buildkite/jobs/pipeline.release.yml
66
cat .buildkite/jobs/pipeline.android_rn_77.yml
77
cat .buildkite/jobs/pipeline.android_rn_78.yml
88
cat .buildkite/jobs/pipeline.android_rn_82.yml
9+
cat .buildkite/jobs/pipeline.android_rn_83.yml
910
cat .buildkite/jobs/pipeline.ios_rn_77.yml
1011
cat .buildkite/jobs/pipeline.ios_rn_78.yml
1112
cat .buildkite/jobs/pipeline.ios_rn_82.yml
13+
cat .buildkite/jobs/pipeline.ios_rn_83.yml
1214
cat .buildkite/jobs/pipeline.publish.yml

‎android/src/main/java/com/reactnativenavigation/utils/ReactViewGroup.kt‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
package com.reactnativenavigation.utils
22

3-
import com.facebook.react.common.annotations.UnstableReactNativeAPI
4-
import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable
53
import com.facebook.react.views.view.ReactViewGroup
64

7-
@OptIn(UnstableReactNativeAPI::class)
85
val ReactViewGroup.borderRadius: Float
9-
get() = (background as? CSSBackgroundDrawable)?.fullBorderWidth ?: 0f
6+
get() = 0f // CSSBackgroundDrawable is no longer available, return 0f as fallback

‎android/src/main/java/com/reactnativenavigation/utils/ViewUtils.java‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
package com.reactnativenavigation.utils;
22

3+
import android.graphics.Color;
34
import android.graphics.Point;
5+
import android.graphics.drawable.ColorDrawable;
6+
import android.graphics.drawable.Drawable;
47
import android.view.View;
58
import android.view.ViewGroup;
69
import android.view.ViewParent;
@@ -12,9 +15,6 @@
1215

1316
import static com.reactnativenavigation.utils.ObjectUtils.perform;
1417

15-
import com.facebook.react.common.annotations.UnstableReactNativeAPI;
16-
import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable;
17-
1818
public class ViewUtils {
1919
@Nullable
2020
public static <T extends View> T findChildByClass(ViewGroup root, Class<T> clazz) {
@@ -108,15 +108,15 @@ public static int getIndexInParent(View view) {
108108
return ((ViewGroup) parent).indexOfChild(view);
109109
}
110110

111-
@UnstableReactNativeAPI
112111
public static int getBackgroundColor(View view) {
113-
if (view.getBackground() instanceof CSSBackgroundDrawable) {
114-
return ((CSSBackgroundDrawable) view.getBackground()).getColor();
112+
Drawable background = view.getBackground();
113+
if (background instanceof ColorDrawable) {
114+
return ((ColorDrawable) background).getColor();
115115
}
116-
throw new RuntimeException(view.getBackground().getClass().getSimpleName() + " is not ReactViewBackgroundDrawable");
116+
// Fallback: return transparent if background is not a ColorDrawable
117+
return Color.TRANSPARENT;
117118
}
118119

119-
120120
public static boolean isVisible(View view) {
121121
return perform(view, false, v -> v.getVisibility() == View.VISIBLE);
122122
}

‎android/src/main/java/com/reactnativenavigation/views/element/animators/BackgroundColorAnimator.kt‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,43 @@ import android.animation.Animator
44
import android.animation.ObjectAnimator
55
import android.view.View
66
import android.view.ViewGroup
7-
import com.facebook.react.common.annotations.UnstableReactNativeAPI
8-
import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable
7+
import android.graphics.drawable.ColorDrawable
98
import com.facebook.react.views.text.ReactTextView
109
import com.reactnativenavigation.options.SharedElementTransitionOptions
1110
import com.reactnativenavigation.utils.*
1211

13-
@OptIn(UnstableReactNativeAPI::class)
1412
class BackgroundColorAnimator(from: View, to: View) : PropertyAnimatorCreator<ViewGroup>(from, to) {
1513
override fun shouldAnimateProperty(fromChild: ViewGroup, toChild: ViewGroup): Boolean {
16-
return fromChild.background is CSSBackgroundDrawable &&
17-
toChild.background is CSSBackgroundDrawable && (fromChild.background as CSSBackgroundDrawable).color != (toChild.background as CSSBackgroundDrawable).color
14+
// Only animate if both backgrounds are ColorDrawable and colors are different
15+
val fromBg = fromChild.background
16+
val toBg = toChild.background
17+
return fromBg is ColorDrawable &&
18+
toBg is ColorDrawable &&
19+
fromBg.color != toBg.color
1820
}
1921

2022
override fun excludedViews() = listOf(ReactTextView::class.java)
2123

2224
override fun create(options: SharedElementTransitionOptions): Animator {
23-
val backgroundColorEvaluator = BackgroundColorEvaluator(to.background as CSSBackgroundDrawable)
24-
val fromColor = ColorUtils.colorToLAB(ViewUtils.getBackgroundColor(from))
25-
val toColor = ColorUtils.colorToLAB(ViewUtils.getBackgroundColor(to))
25+
val toBackground = to.background
26+
if (toBackground !is ColorDrawable) {
27+
// Fallback: return a no-op animator if background is not a ColorDrawable but this should happen.
28+
// Just for code safety
29+
return ObjectAnimator.ofFloat(to, "alpha", 1f, 1f).apply {
30+
duration = 0
31+
}
32+
}
33+
34+
val backgroundColorEvaluator = BackgroundColorEvaluator(toBackground)
35+
val fromColor = try {
36+
ColorUtils.colorToLAB(ViewUtils.getBackgroundColor(from))
37+
} catch (e: Exception) {
38+
// Fallback to transparent if we can't get the color
39+
ColorUtils.colorToLAB(android.graphics.Color.TRANSPARENT)
40+
}
41+
val toColor = ColorUtils.colorToLAB(toBackground.color)
2642

2743
backgroundColorEvaluator.evaluate(0f, fromColor, toColor)
2844
return ObjectAnimator.ofObject(backgroundColorEvaluator, fromColor, toColor)
2945
}
30-
}
46+
}

‎android/src/main/java/com/reactnativenavigation/views/element/animators/BackgroundColorEvaluator.kt‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,20 @@ package com.reactnativenavigation.views.element.animators
22

33
import android.animation.TypeEvaluator
44
import androidx.core.graphics.ColorUtils
5-
import com.facebook.react.common.annotations.UnstableReactNativeAPI
6-
import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable
5+
import android.graphics.drawable.Drawable
6+
import android.graphics.drawable.ColorDrawable
7+
import com.reactnativenavigation.utils.ColorUtils.*
78

8-
class BackgroundColorEvaluator @OptIn(UnstableReactNativeAPI::class) constructor(private val background: CSSBackgroundDrawable) : TypeEvaluator<DoubleArray> {
9+
class BackgroundColorEvaluator(private val background: Drawable) : TypeEvaluator<DoubleArray> {
910
private val color = DoubleArray(3)
1011

11-
@OptIn(UnstableReactNativeAPI::class)
1212
override fun evaluate(ratio: Float, from: DoubleArray, to: DoubleArray): DoubleArray {
1313
ColorUtils.blendLAB(from, to, ratio.toDouble(), color)
14-
background.color = com.reactnativenavigation.utils.ColorUtils.labToColor(color)
14+
val colorInt = labToColor(color)
15+
// Try to set color on ColorDrawable if the background is a ColorDrawable
16+
if (background is ColorDrawable) {
17+
background.color = colorInt
18+
}
1519
return color
1620
}
1721
}

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -93,18 +93,18 @@
9393
"@react-native-community/cli-platform-ios": "20.0.0",
9494
"@react-native-community/datetimepicker": "^8.2.0",
9595
"@react-native-community/netinfo": "^11.4.1",
96-
"@react-native/babel-preset": "0.82.1",
97-
"@react-native/eslint-config": "0.82.1",
98-
"@react-native/metro-config": "0.82.1",
99-
"@react-native/typescript-config": "0.82.1",
96+
"@react-native/babel-preset": "0.83.0",
97+
"@react-native/eslint-config": "0.83.0",
98+
"@react-native/metro-config": "0.83.0",
99+
"@react-native/typescript-config": "0.83.0",
100100
"@testing-library/jest-native": "^5.4.2",
101101
"@testing-library/react-native": "^13.0.1",
102102
"@types/hoist-non-react-statics": "^3.3.6",
103103
"@types/jasmine": "3.5.10",
104104
"@types/jest": "^29.5.13",
105105
"@types/lodash": "^4.17.20",
106106
"@types/prop-types": "^15.7.14",
107-
"@types/react": "^19.1.1",
107+
"@types/react": "^19.2.0",
108108
"@types/react-test-renderer": "^19.1.0",
109109
"@typescript-eslint/eslint-plugin": "8.21.0",
110110
"@typescript-eslint/parser": "8.21.0",
@@ -124,15 +124,15 @@
124124
"pixelmatch": "^5.2.1",
125125
"pngjs": "^6.0.0",
126126
"prettier": "2.8.8",
127-
"react": "19.1.1",
128-
"react-native": "0.82.1",
127+
"react": "19.2.0",
128+
"react-native": "0.83.0",
129129
"react-native-builder-bob": "^0.40.13",
130130
"react-native-fast-image": "^8.6.3",
131131
"react-native-gesture-handler": "^2.29.1",
132132
"react-native-reanimated": "4.1.5",
133133
"react-native-worklets": "0.5.0",
134134
"react-redux": "9.1.2",
135-
"react-test-renderer": "19.1.1",
135+
"react-test-renderer": "19.2.0",
136136
"redux": "^5.0.1",
137137
"remx": "3.x.x",
138138
"semver": "5.x.x",

‎playground/package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,17 @@
3737
"@react-native-community/cli-platform-ios": "20.0.0",
3838
"@react-native-community/datetimepicker": "^8.2.0",
3939
"@react-native-community/netinfo": "^11.4.1",
40-
"@react-native/babel-preset": "0.82.1",
41-
"@react-native/eslint-config": "0.82.1",
42-
"@react-native/metro-config": "0.82.1",
43-
"@react-native/typescript-config": "0.82.1",
40+
"@react-native/babel-preset": "0.83.0",
41+
"@react-native/eslint-config": "0.83.0",
42+
"@react-native/metro-config": "0.83.0",
43+
"@react-native/typescript-config": "0.83.0",
4444
"@testing-library/jest-native": "^5.4.2",
4545
"@testing-library/react-native": "^13.0.1",
4646
"@types/hoist-non-react-statics": "^3.3.6",
4747
"@types/jasmine": "3.5.10",
4848
"@types/jest": "^29.5.13",
4949
"@types/lodash": "^4.17.20",
50-
"@types/react": "^19.1.1",
50+
"@types/react": "^19.2.0",
5151
"@types/react-test-renderer": "^19.1.0",
5252
"@typescript-eslint/eslint-plugin": "8.21.0",
5353
"@typescript-eslint/parser": "8.21.0",
@@ -67,15 +67,15 @@
6767
"pixelmatch": "^5.2.1",
6868
"pngjs": "^6.0.0",
6969
"prettier": "2.8.8",
70-
"react": "19.1.1",
71-
"react-native": "0.82.1",
70+
"react": "19.2.0",
71+
"react-native": "0.83.0",
7272
"react-native-fast-image": "^8.6.3",
7373
"react-native-gesture-handler": "^2.29.1",
7474
"react-native-monorepo-config": "^0.3.0",
7575
"react-native-reanimated": "4.2.0",
7676
"react-native-worklets": "0.7.1",
7777
"react-redux": "9.1.2",
78-
"react-test-renderer": "19.1.1",
78+
"react-test-renderer": "19.2.0",
7979
"redux": "^5.0.1",
8080
"remx": "3.x.x",
8181
"semver": "5.x.x",

‎website/docs/docs/docs-Installing.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ sidebar_label: Installation
66

77
## Requirements
88

9-
- node >= 18.18
10-
- react-native >0.77 - 0.81 (0.82 - 0.83 support is in progress)
11-
- new architecture enabled (if you are not using the new architecture, you can still use react-native-navigation of version 7.x.x with react-native 0.73 and lower)
9+
- node ≥ 18.18
10+
- react-native ≥ 0.77
11+
- new architecture enabled
1212

1313
## npm or yarn
1414

0 commit comments

Comments
 (0)