Skip to content

Commit 482b782

Browse files
szuperazszuperaz
authored
fix: RTL mode fixes (#3546)
## 🎯 Goal RTL mode fixes from [QA test](https://www.notion.so/stream-wiki/RN-QA-New-Design-30d6a5d7f9f680d29ba1f9eadfcc787e) ## πŸ›  Implementation details ### 1. Mirror icons based on [Figma](https://www.figma.com/design/Us73erK1xFNcB5EH3hyq6Y/Chat-SDK-Design-System?node-id=13696-41010&t=9ujyMjzsjIngT6jR-0) All icons from this table should be mirrored after this PR is merged: | Old name | New name | src | already mirrored | |----------|----------|-----|------------------| | `IconArrowBoxLeft` | `leave` | `package/src/icons/leave.tsx` (`ArrowBoxLeft`) | no | | `IconArrowLeft` | `arrow-left` | `examples/SampleApp/src/icons/GoBack.tsx` (`GoBack`) β€” back chevron; in core, closest directional stroke icon is `package/src/icons/chevron-left.tsx` (`ChevronLeft`) | yes (SampleApp `GoBack` only) | | `IconArrowRight` | `arrow-right` | `examples/SampleApp/src/icons/RightArrow.tsx` (`RightArrow`) β€” arrow path flipped with a **fixed** `matrix(-1 …)`; optional chevron-style: `examples/SampleApp/src/icons/GoForward.tsx` (`GoForward`) | no for `RightArrow`; yes for `GoForward` | | `IconArrowUpRight` | `arrow-left` | `package/src/icons/arrow-up-right.tsx` (`ArrowUpRight`) | no | | `IconBubbles` | `message-bubbles` | No `message-bubbles` file. Closest in SampleApp: `examples/SampleApp/src/icons/ChatsTab.tsx` (overlapping chat bubbles). In core, only single-outline bubble: `package/src/icons/message-bubble.tsx` (`MessageBubbleEmpty`) | no | | `IconBubbleText6ChatMessage` | `thread` | `package/src/icons/thread.tsx` (`ThreadReply`) | no | | `IconBubbleText6Solid` | `thread-fill` | *(none β€” no filled thread / `thread-fill` icon in these folders)* | β€” | | `IconBubble2` | `message-bubble` | `package/src/icons/message-bubble.tsx` (`MessageBubbleEmpty`) | no | | `IconBubble2Solid` | `message-bubble-fill` | *(none β€” no filled `message-bubble` variant in these folders)* | β€” | | `IconChevronLeft` | `chevron-left` | `package/src/icons/chevron-left.tsx` (`ChevronLeft`) β€” not re-exported from `package/src/icons/index.ts` but used via direct import | no | | `IconChevronRight` | `chevron-right` | No `chevron-right` in core icons. `examples/SampleApp/src/icons/GoForward.tsx` (`GoForward`) matches chevron-right behavior | yes | | `IconArrowShareLeft` | `reply` | `package/src/icons/reply.tsx` (`CurveLineLeftUp` / alias `ArrowShareLeft`) | no | | `IconLayoutLeft` | `sidebar` | *(none β€” no sidebar / layout-left icon in these folders)* | β€” | | `IconMagnifyingGlassSearch` | `search` | `package/src/icons/search.tsx` (`Search`); SampleApp duplicate: `examples/SampleApp/src/icons/Search.tsx` | no | | `IconMinusSmall` | `mute` | `package/src/icons/mute.tsx` (`Mute`); SampleApp: `examples/SampleApp/src/icons/Mute.tsx` | no | | `IconPaperPlane` | `send` | `package/src/icons/send.tsx` (`SendRight`) | no | | `IconVideo` | `video` | `package/src/icons/video.tsx` (`VideoIcon`) | no | | `IconVideoSolid` | `video-fill` | `package/src/icons/video-fill.tsx` (`Recorder` β€” filled camera / video glyph; filename is `video-fill`) | no | | `IconVolumeFull` | `audio` | `package/src/icons/audio.tsx` (`Sound`) | no | Relevant issues from QA Notion: - Some issues with channel preview -> Muted icon wrong direction - Some issues with channel preview -> Video icon wrong direction - Some issues with Channel info screen -> Arrows (wrong direction) - Some issues with Channel info screen -> Muted icon (wrong direction) - [RTL] Swipe to reply icon has a wrong direction - [RTL] Some issues with composer -> Send button (wrong direction) ### 2. Channel preview fixes Relevant [block in Notion](https://www.notion.so/stream-wiki/RN-QA-New-Design-30d6a5d7f9f680d29ba1f9eadfcc787e?source=copy_link#3346a5d7f9f68041a8dce1c570fe45b3): - [RTL] Some issues with channel preview -> Voice recording (expected order: mic icon, text, duration) - [RTL] Some issues with channel preview -> Β Multiple attachments (expected order: attachments icon, count, text) `useMessagePreviewText` didn't translate message labels like "Voice Recording (0:05)" <img width="334" height="83" alt="Screenshot 2026-04-10 at 13 06 36" src="https://github.com/user-attachments/assets/c81afec3-2a55-4ccf-84db-5a2a6a99ad27" /> ### 3. Mirroring switch in RTL mode Relevant Notion block: [RTL] Some issues with Polls screen -> The pointer moves to the wrong direction when user is typing [RTL] Some issues with Channel info screen -> [iOS] Toggle (wrong direction) Added a mirroring to all switch elements (off state is on the right side, instead of left) on iOS. On Android the default behavior is correct, no need for mirroring. <img width="463" height="999" alt="Screenshot 2026-04-10 at 15 18 31" src="https://github.com/user-attachments/assets/ded00711-91b9-49bf-853a-645bb6aa5434" /> ![Screenshot_Ω’Ω Ω’Ω¦Ω Ω€Ω‘Ω£_Ω‘Ω₯Ω£Ω’Ω’Ω£_Chat Sample React Native](https://github.com/user-attachments/assets/3492aa39-a40e-4b7b-8d41-adbf22deb8ba) ### 4. Search bar not mirrored in RTL mode These are changes in the SampleApp: From Notion: [RTL] Search field is not mirrored, both channel search and user search Channel search: <img width="480" height="995" alt="Screenshot 2026-04-14 at 10 10 32" src="https://github.com/user-attachments/assets/fc5c4c1d-6ca3-46b7-8e61-ad8a63adecf7" /> User search - I assume this is the new DM screen, but this one seems fine to me without any change: <img width="427" height="910" alt="Screenshot 2026-04-10 at 16 29 28" src="https://github.com/user-attachments/assets/5d269bec-04af-45f8-be3f-9d1c5ab1824a" /> ### 5. Fix quoted message layout From Notion: "[RTL] Quoted reply has a wrong direction in both composer and message list" Fix: - Missing translation keys - `renderText` wrong text alignment <img width="407" height="502" alt="Screenshot 2026-04-13 at 14 00 37" src="https://github.com/user-attachments/assets/9493afe5-9ea1-4b0a-af52-cd3d8b2f57b8" /> <img width="398" height="467" alt="Screenshot 2026-04-13 at 14 03 47" src="https://github.com/user-attachments/assets/92cd8c1b-c423-4b25-9c1d-14c6e2e41a4a" /> ### 6. Fix channel details screen [RTL] Some issues with Channel info screen -> [iOS] Members title (wrong direction) [RTL] Some issues with Channel info screen -> [iOS] In general many things are shifted -> I think the icon fixes + title fixes all issues (see attached screenshot) <img width="456" height="908" alt="Screenshot 2026-04-14 at 8 32 03" src="https://github.com/user-attachments/assets/dd8c5f88-50de-46f7-8489-a9adef645b12" /> ## 🎨 UI Changes ## πŸ§ͺ Testing Tested on iOS and Android ## β˜‘οΈ Checklist - [ ] I have signed the [Stream CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform) (required) - [ ] PR targets the `develop` branch - [ ] Documentation is updated - [ ] New code is tested in main example apps, including all possible scenarios - [ ] SampleApp iOS and Android - [ ] Expo iOS and Android
1 parent 439be22 commit 482b782

44 files changed

Lines changed: 621 additions & 230 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

β€Žexamples/SampleApp/src/components/MenuDrawer.tsxβ€Ž

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
1919
import { Group } from '../icons/Group.tsx';
2020
import { User } from '../icons/User';
2121
import { useLegacyColors } from '../theme/useLegacyColors';
22+
import { useRtlMirrorSwitchStyle } from '../utils/rtlMirrorSwitchStyle';
2223

2324
export const styles = StyleSheet.create({
2425
avatar: {
@@ -100,6 +101,7 @@ export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
100101
}, []);
101102

102103
const { chatClient, logout, rtlEnabled, setRTLEnabled } = useAppContext();
104+
const rtlMirrorSwitchStyle = useRtlMirrorSwitchStyle();
103105

104106
if (!chatClient) {
105107
return null;
@@ -220,6 +222,7 @@ export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
220222
</View>
221223
<Switch
222224
onValueChange={setRTLEnabled}
225+
style={rtlMirrorSwitchStyle}
223226
thumbColor={white}
224227
trackColor={{
225228
false: grey,

β€Žexamples/SampleApp/src/icons/ChatsTab.tsxβ€Ž

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
2-
import Svg, { Path } from 'react-native-svg';
2+
import { I18nManager } from 'react-native';
3+
import Svg, { G, Path } from 'react-native-svg';
34

45
import { IconProps } from '../utils/base';
56
import { useLegacyColors } from '../theme/useLegacyColors';
@@ -8,12 +9,14 @@ export const ChatsTab: React.FC<IconProps> = ({ active, height = 24, width = 24
89
const { black, grey } = useLegacyColors();
910
return (
1011
<Svg fill='none' height={height} viewBox={`0 0 ${height} ${width}`} width={width}>
11-
<Path
12-
clipRule='evenodd'
13-
d='M12 5C7.46774 5 4 8.24148 4 12C4 15.7585 7.46774 19 12 19C12.6209 19 13.224 18.9381 13.8023 18.8215C13.9231 18.7971 14.0473 18.7953 14.1687 18.8161L19.4315 19.717L18.3869 17.0167C18.258 16.6833 18.3168 16.3064 18.5412 16.0282C19.4673 14.8799 20 13.4904 20 12C20 8.24148 16.5323 5 12 5ZM2 12C2 6.92196 6.59113 3 12 3C17.4089 3 22 6.92196 22 12C22 13.7774 21.4276 15.4282 20.4527 16.8133L21.9327 20.6392C22.0625 20.9749 22.0019 21.3545 21.774 21.6332C21.5461 21.9118 21.1861 22.0464 20.8313 21.9857L14.0104 20.8181C13.3601 20.9375 12.6877 21 12 21C6.59113 21 2 17.078 2 12Z'
14-
fill={active ? black : grey}
15-
fillRule='evenodd'
16-
/>
12+
<G transform={I18nManager.isRTL ? `matrix(-1 0 0 1 ${height} 0)` : undefined}>
13+
<Path
14+
clipRule='evenodd'
15+
d='M12 5C7.46774 5 4 8.24148 4 12C4 15.7585 7.46774 19 12 19C12.6209 19 13.224 18.9381 13.8023 18.8215C13.9231 18.7971 14.0473 18.7953 14.1687 18.8161L19.4315 19.717L18.3869 17.0167C18.258 16.6833 18.3168 16.3064 18.5412 16.0282C19.4673 14.8799 20 13.4904 20 12C20 8.24148 16.5323 5 12 5ZM2 12C2 6.92196 6.59113 3 12 3C17.4089 3 22 6.92196 22 12C22 13.7774 21.4276 15.4282 20.4527 16.8133L21.9327 20.6392C22.0625 20.9749 22.0019 21.3545 21.774 21.6332C21.5461 21.9118 21.1861 22.0464 20.8313 21.9857L14.0104 20.8181C13.3601 20.9375 12.6877 21 12 21C6.59113 21 2 17.078 2 12Z'
16+
fill={active ? black : grey}
17+
fillRule='evenodd'
18+
/>
19+
</G>
1720
</Svg>
1821
);
1922
};

β€Žexamples/SampleApp/src/icons/Mute.tsxβ€Ž

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,43 @@
11
import React from 'react';
2-
import Svg, { Path, Mask } from 'react-native-svg';
2+
import { I18nManager } from 'react-native';
3+
import Svg, { G, Path, Mask } from 'react-native-svg';
34

45
import { IconProps } from '../utils/base';
56

67
export const Mute: React.FC<IconProps> = ({ height = 20, width = 20, ...rest }) => {
78
return (
89
<Svg fill='none' height={height} viewBox={`0 0 20 20`} width={width}>
9-
<Mask id='path-1-inside-1_13026_9690' fill='white'>
10+
<G transform={I18nManager.isRTL ? 'matrix(-1 0 0 1 20 0)' : undefined}>
11+
<Mask id='path-1-inside-1_13026_9690' fill='white'>
12+
<Path
13+
fillRule='evenodd'
14+
clipRule='evenodd'
15+
d='M14.1667 4.94798V3.52008C14.1667 2.67101 13.2054 2.17862 12.5163 2.67473L8.40442 5.63533C8.22712 5.76297 8.01421 5.83164 7.79576 5.83164H6.45833C5.19268 5.83164 4.16666 6.85766 4.16666 8.12331V11.8733C4.16666 12.7069 4.61171 13.4365 5.27714 13.8375L2.68306 16.4316C2.43898 16.6757 2.43898 17.0714 2.68306 17.3155C2.92713 17.5595 3.32286 17.5595 3.56694 17.3155L17.3169 3.56548C17.561 3.3214 17.561 2.92567 17.3169 2.68159C17.0728 2.43752 16.6772 2.43752 16.4331 2.68159L14.1667 4.94798ZM6.22574 12.889C5.76241 12.7832 5.41666 12.3686 5.41666 11.8733V8.12331C5.41666 7.54802 5.88303 7.08164 6.45833 7.08164H7.79576C8.27634 7.08164 8.74475 6.93055 9.13475 6.64974L12.9167 3.92679V6.19798L6.22574 12.889Z'
16+
{...rest}
17+
/>
18+
<Path
19+
d='M12.9167 16.0699L9.23183 13.4168L8.33391 14.3147C8.35791 14.3293 8.3815 14.3448 8.40441 14.3613L12.5163 17.3219C13.2054 17.818 14.1667 17.3256 14.1667 16.4765V8.48195L12.9167 9.73195V16.0699Z'
20+
{...rest}
21+
/>
22+
</Mask>
1023
<Path
1124
fillRule='evenodd'
1225
clipRule='evenodd'
1326
d='M14.1667 4.94798V3.52008C14.1667 2.67101 13.2054 2.17862 12.5163 2.67473L8.40442 5.63533C8.22712 5.76297 8.01421 5.83164 7.79576 5.83164H6.45833C5.19268 5.83164 4.16666 6.85766 4.16666 8.12331V11.8733C4.16666 12.7069 4.61171 13.4365 5.27714 13.8375L2.68306 16.4316C2.43898 16.6757 2.43898 17.0714 2.68306 17.3155C2.92713 17.5595 3.32286 17.5595 3.56694 17.3155L17.3169 3.56548C17.561 3.3214 17.561 2.92567 17.3169 2.68159C17.0728 2.43752 16.6772 2.43752 16.4331 2.68159L14.1667 4.94798ZM6.22574 12.889C5.76241 12.7832 5.41666 12.3686 5.41666 11.8733V8.12331C5.41666 7.54802 5.88303 7.08164 6.45833 7.08164H7.79576C8.27634 7.08164 8.74475 6.93055 9.13475 6.64974L12.9167 3.92679V6.19798L6.22574 12.889Z'
27+
fill='black'
1428
{...rest}
1529
/>
1630
<Path
1731
d='M12.9167 16.0699L9.23183 13.4168L8.33391 14.3147C8.35791 14.3293 8.3815 14.3448 8.40441 14.3613L12.5163 17.3219C13.2054 17.818 14.1667 17.3256 14.1667 16.4765V8.48195L12.9167 9.73195V16.0699Z'
32+
fill='black'
1833
{...rest}
1934
/>
20-
</Mask>
21-
<Path
22-
fillRule='evenodd'
23-
clipRule='evenodd'
24-
d='M14.1667 4.94798V3.52008C14.1667 2.67101 13.2054 2.17862 12.5163 2.67473L8.40442 5.63533C8.22712 5.76297 8.01421 5.83164 7.79576 5.83164H6.45833C5.19268 5.83164 4.16666 6.85766 4.16666 8.12331V11.8733C4.16666 12.7069 4.61171 13.4365 5.27714 13.8375L2.68306 16.4316C2.43898 16.6757 2.43898 17.0714 2.68306 17.3155C2.92713 17.5595 3.32286 17.5595 3.56694 17.3155L17.3169 3.56548C17.561 3.3214 17.561 2.92567 17.3169 2.68159C17.0728 2.43752 16.6772 2.43752 16.4331 2.68159L14.1667 4.94798ZM6.22574 12.889C5.76241 12.7832 5.41666 12.3686 5.41666 11.8733V8.12331C5.41666 7.54802 5.88303 7.08164 6.45833 7.08164H7.79576C8.27634 7.08164 8.74475 6.93055 9.13475 6.64974L12.9167 3.92679V6.19798L6.22574 12.889Z'
25-
fill='black'
26-
{...rest}
27-
/>
28-
<Path
29-
d='M12.9167 16.0699L9.23183 13.4168L8.33391 14.3147C8.35791 14.3293 8.3815 14.3448 8.40441 14.3613L12.5163 17.3219C13.2054 17.818 14.1667 17.3256 14.1667 16.4765V8.48195L12.9167 9.73195V16.0699Z'
30-
fill='black'
31-
{...rest}
32-
/>
33-
<Path
34-
d='M14.1667 4.94798H12.6667V8.56928L15.2273 6.00865L14.1667 4.94798ZM12.5163 2.67473L11.6399 1.4574L11.6399 1.45743L12.5163 2.67473ZM8.40442 5.63533L9.28083 6.85265L9.28088 6.85262L8.40442 5.63533ZM5.27714 13.8375L6.3378 14.8982L7.69345 13.5425L6.05147 12.5529L5.27714 13.8375ZM2.68306 16.4316L1.6224 15.371L1.62238 15.371L2.68306 16.4316ZM3.56694 17.3155L2.50628 16.2548L2.50626 16.2548L3.56694 17.3155ZM17.3169 3.56548L16.2563 2.5048L16.2563 2.50482L17.3169 3.56548ZM16.4331 2.68159L15.3724 1.62091L15.3724 1.62093L16.4331 2.68159ZM6.22574 12.889L5.89197 14.3513L6.7002 14.5358L7.2864 13.9496L6.22574 12.889ZM9.13475 6.64974L8.2583 5.43244L8.25827 5.43245L9.13475 6.64974ZM12.9167 3.92679H14.4167V0.99846L12.0402 2.70949L12.9167 3.92679ZM12.9167 6.19798L13.9773 7.25864L14.4167 6.8193V6.19798H12.9167ZM12.9167 16.0699L12.0402 17.2872L14.4167 18.9982V16.0699H12.9167ZM9.23183 13.4168L10.1083 12.1995L9.07313 11.4542L8.17117 12.3561L9.23183 13.4168ZM8.33391 14.3147L7.27325 13.254L5.9226 14.6047L7.55498 15.5966L8.33391 14.3147ZM8.40441 14.3613L9.28087 13.144H9.28087L8.40441 14.3613ZM12.5163 17.3219L13.3928 16.1046L13.3928 16.1046L12.5163 17.3219ZM14.1667 8.48195H15.6667V4.86063L13.106 7.42129L14.1667 8.48195ZM12.9167 9.73195L11.856 8.67129L11.4167 9.11063V9.73195H12.9167ZM14.1667 4.94798H15.6667V3.52008H14.1667H12.6667V4.94798H14.1667ZM14.1667 3.52008H15.6667C15.6667 1.44832 13.3212 0.24697 11.6399 1.4574L12.5163 2.67473L13.3928 3.89205C13.0897 4.11027 12.6667 3.8937 12.6667 3.52008H14.1667ZM12.5163 2.67473L11.6399 1.45743L7.52795 4.41803L8.40442 5.63533L9.28088 6.85262L13.3928 3.89202L12.5163 2.67473ZM8.40442 5.63533L7.528 4.418C7.60596 4.36187 7.69963 4.33164 7.79576 4.33164V5.83164V7.33164C8.32878 7.33164 8.84828 7.16407 9.28083 6.85265L8.40442 5.63533ZM7.79576 5.83164V4.33164H6.45833V5.83164V7.33164H7.79576V5.83164ZM6.45833 5.83164V4.33164C4.36425 4.33164 2.66666 6.02923 2.66666 8.12331H4.16666H5.66666C5.66666 7.68609 6.02111 7.33164 6.45833 7.33164V5.83164ZM4.16666 8.12331H2.66666V11.8733H4.16666H5.66666V8.12331H4.16666ZM4.16666 11.8733H2.66666C2.66666 13.2543 3.40584 14.461 4.50281 15.1222L5.27714 13.8375L6.05147 12.5529C5.81757 12.4119 5.66666 12.1595 5.66666 11.8733H4.16666ZM5.27714 13.8375L4.21648 12.7769L1.6224 15.371L2.68306 16.4316L3.74372 17.4923L6.3378 14.8982L5.27714 13.8375ZM2.68306 16.4316L1.62238 15.371C0.792541 16.2008 0.792541 17.5462 1.62238 18.3761L2.68306 17.3155L3.74373 16.2548C4.08542 16.5965 4.08542 17.1506 3.74373 17.4923L2.68306 16.4316ZM2.68306 17.3155L1.62238 18.3761C2.45224 19.206 3.79775 19.206 4.62762 18.3761L3.56694 17.3155L2.50626 16.2548C2.84798 15.9131 3.40202 15.9131 3.74373 16.2548L2.68306 17.3155ZM3.56694 17.3155L4.6276 18.3761L18.3776 4.62614L17.3169 3.56548L16.2563 2.50482L2.50628 16.2548L3.56694 17.3155ZM17.3169 3.56548L18.3776 4.62615C19.2075 3.79629 19.2075 2.45078 18.3776 1.62091L17.3169 2.68159L16.2563 3.74227C15.9145 3.40056 15.9145 2.84651 16.2563 2.5048L17.3169 3.56548ZM17.3169 2.68159L18.3776 1.62091C17.5477 0.791077 16.2023 0.791077 15.3724 1.62091L16.4331 2.68159L17.4937 3.74227C17.152 4.08396 16.598 4.08396 16.2563 3.74227L17.3169 2.68159ZM16.4331 2.68159L15.3724 1.62093L13.106 3.88732L14.1667 4.94798L15.2273 6.00865L17.4937 3.74226L16.4331 2.68159ZM6.22574 12.889L6.55951 11.4266C6.76332 11.4731 6.91666 11.6534 6.91666 11.8733H5.41666H3.91666C3.91666 13.0839 4.76149 14.0933 5.89197 14.3513L6.22574 12.889ZM5.41666 11.8733H6.91666V8.12331H5.41666H3.91666V11.8733H5.41666ZM5.41666 8.12331H6.91666C6.91666 8.37644 6.71147 8.58164 6.45833 8.58164V7.08164V5.58164C5.0546 5.58164 3.91666 6.7196 3.91666 8.12331H5.41666ZM6.45833 7.08164V8.58164H7.79576V7.08164V5.58164H6.45833V7.08164ZM7.79576 7.08164V8.58164C8.59092 8.58164 9.36594 8.33165 10.0112 7.86703L9.13475 6.64974L8.25827 5.43245C8.12355 5.52945 7.96176 5.58164 7.79576 5.58164V7.08164ZM9.13475 6.64974L10.0112 7.86705L13.7931 5.1441L12.9167 3.92679L12.0402 2.70949L8.2583 5.43244L9.13475 6.64974ZM12.9167 3.92679H11.4167V6.19798H12.9167H14.4167V3.92679H12.9167ZM12.9167 6.19798L11.856 5.13733L5.16508 11.8283L6.22574 12.889L7.2864 13.9496L13.9773 7.25864L12.9167 6.19798ZM12.9167 16.0699L13.7931 14.8526L10.1083 12.1995L9.23183 13.4168L8.35537 14.6341L12.0402 17.2872L12.9167 16.0699ZM9.23183 13.4168L8.17117 12.3561L7.27325 13.254L8.33391 14.3147L9.39457 15.3754L10.2925 14.4774L9.23183 13.4168ZM8.33391 14.3147L7.55498 15.5966C7.54867 15.5928 7.53944 15.5869 7.52796 15.5786L8.40441 14.3613L9.28087 13.144C9.22355 13.1027 9.16716 13.0658 9.11285 13.0328L8.33391 14.3147ZM8.40441 14.3613L7.52796 15.5786L11.6399 18.5392L12.5163 17.3219L13.3928 16.1046L9.28087 13.144L8.40441 14.3613ZM12.5163 17.3219L11.6398 18.5391C13.3212 19.7498 15.6667 18.5482 15.6667 16.4765H14.1667H12.6667C12.6667 16.103 13.0896 15.8863 13.3928 16.1046L12.5163 17.3219ZM14.1667 16.4765H15.6667V8.48195H14.1667H12.6667V16.4765H14.1667ZM14.1667 8.48195L13.106 7.42129L11.856 8.67129L12.9167 9.73195L13.9773 10.7926L15.2273 9.54261L14.1667 8.48195ZM12.9167 9.73195H11.4167V16.0699H12.9167H14.4167V9.73195H12.9167Z'
35-
mask='url(#path-1-inside-1_13026_9690)'
36-
{...rest}
37-
/>
35+
<Path
36+
d='M14.1667 4.94798H12.6667V8.56928L15.2273 6.00865L14.1667 4.94798ZM12.5163 2.67473L11.6399 1.4574L11.6399 1.45743L12.5163 2.67473ZM8.40442 5.63533L9.28083 6.85265L9.28088 6.85262L8.40442 5.63533ZM5.27714 13.8375L6.3378 14.8982L7.69345 13.5425L6.05147 12.5529L5.27714 13.8375ZM2.68306 16.4316L1.6224 15.371L1.62238 15.371L2.68306 16.4316ZM3.56694 17.3155L2.50628 16.2548L2.50626 16.2548L3.56694 17.3155ZM17.3169 3.56548L16.2563 2.5048L16.2563 2.50482L17.3169 3.56548ZM16.4331 2.68159L15.3724 1.62091L15.3724 1.62093L16.4331 2.68159ZM6.22574 12.889L5.89197 14.3513L6.7002 14.5358L7.2864 13.9496L6.22574 12.889ZM9.13475 6.64974L8.2583 5.43244L8.25827 5.43245L9.13475 6.64974ZM12.9167 3.92679H14.4167V0.99846L12.0402 2.70949L12.9167 3.92679ZM12.9167 6.19798L13.9773 7.25864L14.4167 6.8193V6.19798H12.9167ZM12.9167 16.0699L12.0402 17.2872L14.4167 18.9982V16.0699H12.9167ZM9.23183 13.4168L10.1083 12.1995L9.07313 11.4542L8.17117 12.3561L9.23183 13.4168ZM8.33391 14.3147L7.27325 13.254L5.9226 14.6047L7.55498 15.5966L8.33391 14.3147ZM8.40441 14.3613L9.28087 13.144H9.28087L8.40441 14.3613ZM12.5163 17.3219L13.3928 16.1046L13.3928 16.1046L12.5163 17.3219ZM14.1667 8.48195H15.6667V4.86063L13.106 7.42129L14.1667 8.48195ZM12.9167 9.73195L11.856 8.67129L11.4167 9.11063V9.73195H12.9167ZM14.1667 4.94798H15.6667V3.52008H14.1667H12.6667V4.94798H14.1667ZM14.1667 3.52008H15.6667C15.6667 1.44832 13.3212 0.24697 11.6399 1.4574L12.5163 2.67473L13.3928 3.89205C13.0897 4.11027 12.6667 3.8937 12.6667 3.52008H14.1667ZM12.5163 2.67473L11.6399 1.45743L7.52795 4.41803L8.40442 5.63533L9.28088 6.85262L13.3928 3.89202L12.5163 2.67473ZM8.40442 5.63533L7.528 4.418C7.60596 4.36187 7.69963 4.33164 7.79576 4.33164V5.83164V7.33164C8.32878 7.33164 8.84828 7.16407 9.28083 6.85265L8.40442 5.63533ZM7.79576 5.83164V4.33164H6.45833V5.83164V7.33164H7.79576V5.83164ZM6.45833 5.83164V4.33164C4.36425 4.33164 2.66666 6.02923 2.66666 8.12331H4.16666H5.66666C5.66666 7.68609 6.02111 7.33164 6.45833 7.33164V5.83164ZM4.16666 8.12331H2.66666V11.8733H4.16666H5.66666V8.12331H4.16666ZM4.16666 11.8733H2.66666C2.66666 13.2543 3.40584 14.461 4.50281 15.1222L5.27714 13.8375L6.05147 12.5529C5.81757 12.4119 5.66666 12.1595 5.66666 11.8733H4.16666ZM5.27714 13.8375L4.21648 12.7769L1.6224 15.371L2.68306 16.4316L3.74372 17.4923L6.3378 14.8982L5.27714 13.8375ZM2.68306 16.4316L1.62238 15.371C0.792541 16.2008 0.792541 17.5462 1.62238 18.3761L2.68306 17.3155L3.74373 16.2548C4.08542 16.5965 4.08542 17.1506 3.74373 17.4923L2.68306 16.4316ZM2.68306 17.3155L1.62238 18.3761C2.45224 19.206 3.79775 19.206 4.62762 18.3761L3.56694 17.3155L2.50626 16.2548C2.84798 15.9131 3.40202 15.9131 3.74373 16.2548L2.68306 17.3155ZM3.56694 17.3155L4.6276 18.3761L18.3776 4.62614L17.3169 3.56548L16.2563 2.50482L2.50628 16.2548L3.56694 17.3155ZM17.3169 3.56548L18.3776 4.62615C19.2075 3.79629 19.2075 2.45078 18.3776 1.62091L17.3169 2.68159L16.2563 3.74227C15.9145 3.40056 15.9145 2.84651 16.2563 2.5048L17.3169 3.56548ZM17.3169 2.68159L18.3776 1.62091C17.5477 0.791077 16.2023 0.791077 15.3724 1.62091L16.4331 2.68159L17.4937 3.74227C17.152 4.08396 16.598 4.08396 16.2563 3.74227L17.3169 2.68159ZM16.4331 2.68159L15.3724 1.62093L13.106 3.88732L14.1667 4.94798L15.2273 6.00865L17.4937 3.74226L16.4331 2.68159ZM6.22574 12.889L6.55951 11.4266C6.76332 11.4731 6.91666 11.6534 6.91666 11.8733H5.41666H3.91666C3.91666 13.0839 4.76149 14.0933 5.89197 14.3513L6.22574 12.889ZM5.41666 11.8733H6.91666V8.12331H5.41666H3.91666V11.8733H5.41666ZM5.41666 8.12331H6.91666C6.91666 8.37644 6.71147 8.58164 6.45833 8.58164V7.08164V5.58164C5.0546 5.58164 3.91666 6.7196 3.91666 8.12331H5.41666ZM6.45833 7.08164V8.58164H7.79576V7.08164V5.58164H6.45833V7.08164ZM7.79576 7.08164V8.58164C8.59092 8.58164 9.36594 8.33165 10.0112 7.86703L9.13475 6.64974L8.25827 5.43245C8.12355 5.52945 7.96176 5.58164 7.79576 5.58164V7.08164ZM9.13475 6.64974L10.0112 7.86705L13.7931 5.1441L12.9167 3.92679L12.0402 2.70949L8.2583 5.43244L9.13475 6.64974ZM12.9167 3.92679H11.4167V6.19798H12.9167H14.4167V3.92679H12.9167ZM12.9167 6.19798L11.856 5.13733L5.16508 11.8283L6.22574 12.889L7.2864 13.9496L13.9773 7.25864L12.9167 6.19798ZM12.9167 16.0699L13.7931 14.8526L10.1083 12.1995L9.23183 13.4168L8.35537 14.6341L12.0402 17.2872L12.9167 16.0699ZM9.23183 13.4168L8.17117 12.3561L7.27325 13.254L8.33391 14.3147L9.39457 15.3754L10.2925 14.4774L9.23183 13.4168ZM8.33391 14.3147L7.55498 15.5966C7.54867 15.5928 7.53944 15.5869 7.52796 15.5786L8.40441 14.3613L9.28087 13.144C9.22355 13.1027 9.16716 13.0658 9.11285 13.0328L8.33391 14.3147ZM8.40441 14.3613L7.52796 15.5786L11.6399 18.5392L12.5163 17.3219L13.3928 16.1046L9.28087 13.144L8.40441 14.3613ZM12.5163 17.3219L11.6398 18.5391C13.3212 19.7498 15.6667 18.5482 15.6667 16.4765H14.1667H12.6667C12.6667 16.103 13.0896 15.8863 13.3928 16.1046L12.5163 17.3219ZM14.1667 16.4765H15.6667V8.48195H14.1667H12.6667V16.4765H14.1667ZM14.1667 8.48195L13.106 7.42129L11.856 8.67129L12.9167 9.73195L13.9773 10.7926L15.2273 9.54261L14.1667 8.48195ZM12.9167 9.73195H11.4167V16.0699H12.9167H14.4167V9.73195H12.9167Z'
37+
mask='url(#path-1-inside-1_13026_9690)'
38+
{...rest}
39+
/>
40+
</G>
3841
</Svg>
3942
);
4043
};

β€Žexamples/SampleApp/src/icons/RightArrow.tsxβ€Ž

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { I18nManager } from 'react-native';
23
import { G, Path, Svg } from 'react-native-svg';
34

45
import { IconProps } from '../utils/base';
@@ -17,7 +18,7 @@ export const RightArrow = ({
1718

1819
return (
1920
<Svg fill='none' height={height ?? size} viewBox='0 0 20 20' width={width ?? size} {...rest}>
20-
<G transform='matrix(-1 0 0 1 20 0)'>
21+
<G transform={I18nManager.isRTL ? undefined : 'matrix(-1 0 0 1 20 0)'}>
2122
<Path
2223
d='M16.875 10H3.125M3.125 10L8.75 4.375M3.125 10L8.75 15.625'
2324
stroke={color}

β€Žexamples/SampleApp/src/icons/Search.tsxβ€Ž

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
import React from 'react';
2+
import { I18nManager } from 'react-native';
23
import Svg, { G, Path } from 'react-native-svg';
34

45
import { IconProps } from '../utils/base';
56
import { useLegacyColors } from '../theme/useLegacyColors';
67

78
export const Search: React.FC<IconProps> = ({ fill, height = 24, scale = 1, width = 24 }) => {
89
const { black } = useLegacyColors();
10+
const vbWidth = width * scale;
911
return (
1012
<Svg
1113
fill='none'
1214
height={height * scale}
13-
viewBox={`0 0 ${height * scale} ${width * scale}`}
14-
width={width * scale}
15+
viewBox={`0 0 ${vbWidth} ${height * scale}`}
16+
width={vbWidth}
1517
>
16-
<G scale={scale}>
18+
<G scale={scale} transform={I18nManager.isRTL ? `matrix(-1 0 0 1 ${vbWidth} 0)` : undefined}>
1719
<Path
1820
clipRule='evenodd'
1921
d='M11 2c4.968 0 9 4.032 9 9s-4.032 9-9 9-9-4.032-9-9 4.032-9 9-9zm0 16c3.867 0 7-3.133 7-7 0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7zm11.314 2.899l-2.829-2.828-1.414 1.414 2.828 2.829 1.415-1.415z'

0 commit comments

Comments
Β (0)