Merge pull request #3 from chsdwn/chsdwn-rtl_mode_support

feat: add rtl mode support
chsdwn · May 15, 2024 · 5edae63 · 5edae63
2 parents 9fb8007 + c075c3d
commit 5edae63
Show file tree

Hide file tree

Showing 5 changed files with 2,575 additions and 1,768 deletions.
diff --git a/example/app.json b/example/app.json
@@ -6,6 +6,9 @@
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
+    "extra": {
+      "supportsRTL": true
+    },
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",

diff --git a/example/package.json b/example/package.json
@@ -8,23 +8,23 @@
     "ios": "expo start --ios"
   },
   "dependencies": {
-    "@react-navigation/native": "^6.1.8",
-    "@react-navigation/native-stack": "^6.9.14",
-    "@shopify/react-native-skia": "0.1.196",
-    "expo": "~49.0.13",
-    "expo-status-bar": "~1.6.0",
+    "@react-navigation/native": "^6.1.17",
+    "@react-navigation/native-stack": "^6.9.26",
+    "@shopify/react-native-skia": "1.2.3",
+    "expo": "~51.0.6",
+    "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.5",
-    "react-native-safe-area-context": "4.6.3",
-    "react-native-screens": "~3.22.0",
-    "react-native-web": "~0.19.6"
+    "react-native": "0.74.1",
+    "react-native-safe-area-context": "4.10.1",
+    "react-native-screens": "3.31.1",
+    "react-native-web": "~0.19.10"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@expo/webpack-config": "^19.0.0",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-module-resolver": "^5.0.0"
+    "@babel/core": "^7.24.5",
+    "@expo/webpack-config": "~19.0.1",
+    "babel-loader": "^8.3.0",
+    "babel-plugin-module-resolver": "^5.0.2"
   },
   "private": true
 }
diff --git a/package.json b/package.json
@@ -58,34 +58,33 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.7.2",
-    "@commitlint/config-conventional": "^17.7.0",
+    "@commitlint/cli": "^17.8.1",
+    "@commitlint/config-conventional": "^17.8.1",
     "@evilmartians/lefthook": "^1.5.0",
-    "@react-native/eslint-config": "^0.72.2",
+    "@react-native/eslint-config": "^0.74.83",
     "@release-it/conventional-changelog": "^5.0.0",
     "@shopify/react-native-skia": "^0.1.196",
     "@testing-library/react-hooks": "^8.0.1",
-    "@types/jest": "^28.1.2",
-    "@types/react": "~17.0.21",
-    "@types/react-native": "0.70.0",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.44",
     "commitlint": "^17.0.2",
-    "del-cli": "^5.0.0",
-    "eslint": "^8.4.1",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "husky": "^8.0.0",
-    "jest": "^28.1.1",
-    "lint-staged": "^14.0.1",
-    "prettier": "^2.0.5",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "husky": "^9.0.11",
+    "jest": "^29.7.0",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
     "react": "18.2.0",
-    "react-native": "0.72.5",
-    "react-native-builder-bob": "^0.20.0",
-    "react-test-renderer": "^18.2.0",
+    "react-native": "0.74.1",
+    "react-native-builder-bob": "^0.23.2",
+    "react-test-renderer": "^18.3.1",
     "release-it": "^15.0.0",
-    "typescript": "^5.0.2"
+    "typescript": "^5.2.2"
   },
   "resolutions": {
-    "@types/react": "17.0.21"
+    "@types/react": "^18.2.44"
   },
   "peerDependencies": {
     "@shopify/react-native-skia": ">= 0.1.196",

diff --git a/src/SkiaShadow.tsx b/src/SkiaShadow.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { LayoutChangeEvent, StyleSheet, View } from 'react-native';
+import { I18nManager, LayoutChangeEvent, StyleSheet, View } from 'react-native';
 import { Canvas, Color, Path, Shadow } from '@shopify/react-native-skia';
 
 import { usePath, useShadowDimensions } from './hooks';
@@ -16,24 +16,33 @@ export type SkiaShadowProps = {
   borderBottomRightRadius?: number;
   children: React.ReactNode;
 };
+
+const isRTL = I18nManager.isRTL;
+
 export const SkiaShadow = (props: SkiaShadowProps) => {
-  const { blur, dx, dy, borderRadius = 0, color = 'black', children } = props;
+  const { blur, dy, borderRadius = 0, color = 'black', children } = props;
   const { borderTopLeftRadius = borderRadius } = props;
   const { borderTopRightRadius = borderRadius } = props;
   const { borderBottomLeftRadius = borderRadius } = props;
   const { borderBottomRightRadius = borderRadius } = props;
 
+  const dx = props.dx * (isRTL ? -1 : 1);
+
   const [shadowHeight, setShadowHeight] = useState(0);
   const [shadowWidth, setShadowWidth] = useState(0);
 
   const { top, bottom, left, right } = useShadowDimensions({ blur, dx, dy });
   const path = usePath({
     top,
     left,
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    borderBottomLeftRadius,
-    borderBottomRightRadius,
+    borderTopLeftRadius: isRTL ? borderTopRightRadius : borderTopLeftRadius,
+    borderTopRightRadius: isRTL ? borderTopLeftRadius : borderTopRightRadius,
+    borderBottomLeftRadius: isRTL
+      ? borderBottomRightRadius
+      : borderBottomLeftRadius,
+    borderBottomRightRadius: isRTL
+      ? borderBottomLeftRadius
+      : borderBottomRightRadius,
     shadowWidth,
     shadowHeight,
   });
@@ -45,7 +54,7 @@ export const SkiaShadow = (props: SkiaShadowProps) => {
         height: shadowHeight + top + bottom,
         width: shadowWidth + left + right,
         top: -top,
-        left: -left,
+        left: isRTL ? -right : -left,
       },
     ]);
   }, [top, bottom, left, right, shadowHeight, shadowWidth]);