fix: mirror switch in RTL mode

Author: szuperaz

examples/SampleApp/src/components/MenuDrawer.tsx

@@ -19,6 +19,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { Group } from '../icons/Group.tsx';
 import { User } from '../icons/User';
 import { useLegacyColors } from '../theme/useLegacyColors';
+import { getRtlMirrorSwitchStyle } from '../utils/rtlMirrorSwitchStyle';
 
 export const styles = StyleSheet.create({
   avatar: {
@@ -220,6 +221,7 @@ export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
               </View>
               <Switch
                 onValueChange={setRTLEnabled}
+                style={getRtlMirrorSwitchStyle()}
                 thumbColor={white}
                 trackColor={{
                   false: grey,

examples/SampleApp/src/screens/GroupChannelDetailsScreen.tsx

@@ -34,6 +34,7 @@ import { LeaveGroup } from '../icons/LeaveGroup';
 import { Mute } from '../icons/Mute';
 import { Picture } from '../icons/Picture';
 import type { StackNavigatorParamList } from '../types';
+import { getRtlMirrorSwitchStyle } from '../utils/rtlMirrorSwitchStyle';
 
 const MAX_VISIBLE_MEMBERS = 5;
 
@@ -278,6 +279,7 @@ export const GroupChannelDetailsScreen: React.FC<GroupChannelDetailsProps> = ({
             trailing={
               <Switch
                 onValueChange={handleMuteToggle}
+                style={getRtlMirrorSwitchStyle()}
                 trackColor={{
                   false: semantics.controlToggleSwitchBg,
                   true: semantics.accentPrimary,

examples/SampleApp/src/screens/OneOnOneChannelDetailScreen.tsx

@@ -26,6 +26,7 @@ import { Mute } from '../icons/Mute';
 import { Picture } from '../icons/Picture';
 import type { StackNavigatorParamList } from '../types';
 import { getUserActivityStatus } from '../utils/getUserActivityStatus';
+import { getRtlMirrorSwitchStyle } from '../utils/rtlMirrorSwitchStyle';
 
 type OneOnOneChannelDetailScreenRouteProp = RouteProp<
   StackNavigatorParamList,
@@ -183,6 +184,7 @@ export const OneOnOneChannelDetailScreen: React.FC<Props> = ({
             trailing={
               <Switch
                 onValueChange={handleMuteToggle}
+                style={getRtlMirrorSwitchStyle()}
                 trackColor={{
                   false: semantics.controlToggleSwitchBg,
                   true: semantics.accentPrimary,

examples/SampleApp/src/utils/rtlMirrorSwitchStyle.ts

@@ -0,0 +1,8 @@
+import { I18nManager, ViewStyle } from 'react-native';
+
+/** Mirrors Switch horizontally in RTL so thumb/track match layout direction. */
+export function getRtlMirrorSwitchStyle(): Pick<ViewStyle, 'transform'> {
+  return {
+    transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+  };
+}

package/src/components/Poll/CreatePollContent.tsx

@@ -24,6 +24,7 @@ import {
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useStateStore } from '../../hooks/useStateStore';
 import { primitives } from '../../theme';
+import { getRtlMirrorSwitchStyle } from '../../utils/rtlMirrorSwitchStyle';
 
 const pollComposerStateSelector = (state: PollComposerState) => ({
   options: state.data.options,
@@ -171,7 +172,11 @@ export const CreatePollContent = () => {
               <Switch
                 onValueChange={onAnonymousPollChangeHandler}
                 value={isAnonymousPoll}
-                style={[styles.optionCardSwitch, anonymousPoll.optionCardSwitch]}
+                style={[
+                  styles.optionCardSwitch,
+                  getRtlMirrorSwitchStyle(),
+                  anonymousPoll.optionCardSwitch,
+                ]}
               />
             </View>
             <View style={[styles.optionCard, suggestOption.wrapper]}>
@@ -185,7 +190,11 @@ export const CreatePollContent = () => {
               <Switch
                 onValueChange={onAllowUserSuggestedOptionsChangeHandler}
                 value={allowUserSuggestedOptions}
-                style={[styles.optionCardSwitch, suggestOption.optionCardSwitch]}
+                style={[
+                  styles.optionCardSwitch,
+                  getRtlMirrorSwitchStyle(),
+                  suggestOption.optionCardSwitch,
+                ]}
               />
             </View>
             <View style={[styles.optionCard, addComment.wrapper]}>
@@ -199,7 +208,11 @@ export const CreatePollContent = () => {
               <Switch
                 onValueChange={onAllowAnswersChangeHandler}
                 value={allowAnswers}
-                style={[styles.optionCardSwitch, addComment.optionCardSwitch]}
+                style={[
+                  styles.optionCardSwitch,
+                  getRtlMirrorSwitchStyle(),
+                  addComment.optionCardSwitch,
+                ]}
               />
             </View>
           </Animated.View>

package/src/components/Poll/components/MultipleAnswersField.tsx

@@ -8,6 +8,7 @@ import { MultipleVotesSettings } from './MultipleVotesSettings';
 import { useTheme, useTranslationContext } from '../../../contexts';
 import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer';
 import { primitives } from '../../../theme';
+import { getRtlMirrorSwitchStyle } from '../../../utils/rtlMirrorSwitchStyle';
 
 export const MultipleAnswersField = () => {
   const [allowMultipleVotes, setAllowMultipleVotes] = useState<boolean>(false);
@@ -49,7 +50,11 @@ export const MultipleAnswersField = () => {
         <Switch
           onValueChange={onEnforceUniqueVoteHandler}
           value={allowMultipleVotes}
-          style={[styles.optionCardSwitch, multipleAnswers.optionCardSwitch]}
+          style={[
+            styles.optionCardSwitch,
+            getRtlMirrorSwitchStyle(),
+            multipleAnswers.optionCardSwitch,
+          ]}
         />
       </View>
       {allowMultipleVotes ? <MultipleVotesSettings /> : null}

package/src/components/Poll/components/MultipleVotesSettings.tsx

@@ -11,6 +11,7 @@ import { useStableCallback } from '../../../hooks';
 import { useStateStore } from '../../../hooks/useStateStore';
 import { Minus, Plus } from '../../../icons';
 import { primitives } from '../../../theme';
+import { getRtlMirrorSwitchStyle } from '../../../utils/rtlMirrorSwitchStyle';
 import { Button } from '../../ui';
 
 const pollComposerStateSelector = (state: PollComposerState) => ({
@@ -152,7 +153,11 @@ export const MultipleVotesSettings = () => {
         <Switch
           onValueChange={onMaxVotesPerPersonHandler}
           value={allowMaxVotesPerPerson}
-          style={[styles.optionCardSwitch, multipleAnswers.optionCardSwitch]}
+          style={[
+            styles.optionCardSwitch,
+            getRtlMirrorSwitchStyle(),
+            multipleAnswers.optionCardSwitch,
+          ]}
         />
       </View>
       {allowMaxVotesPerPerson ? (

package/src/utils/rtlMirrorSwitchStyle.ts

@@ -0,0 +1,8 @@
+import { I18nManager, ViewStyle } from 'react-native';
+
+/** Mirrors Switch horizontally in RTL so thumb/track match layout direction. */
+export function getRtlMirrorSwitchStyle(): Pick<ViewStyle, 'transform'> {
+  return {
+    transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+  };
+}