Incorrect behavior of the “Switch” component when using text direction different from the system one

[whiskeycola]

Description

if I set the RTL language on the device but in the application itself I set LTR via:

I18nManager.allowRTL(false);
I18nManager.forceRTL(false);

then the Switch component will still be inverted, i.e. displayed in RTL style (on: left, off: right).
The same situation if i set the LTR language on the system and switch the RTL direction in the application:

 I18nManager.allowRTL(true);
I18nManager.forceRTL(true);

This component will be displayed in the direction that is used in the system, not in the application. (on: right, off: left)

import {useState} from 'react';
import {
  Button,
  I18nManager,
  SafeAreaView,
  Switch,
  Text,
  View,
} from 'react-native';
import RNRestart from 'react-native-restart';

export default function App() {
  const [selfCheckIn, setSelfCheckIn] = useState(false);
  return (
    <SafeAreaView style={{flex: 1, alignItems: 'flex-start'}}>
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text>RTL: {I18nManager.isRTL ? 'true' : 'false'}</Text>
        <Text>CheckIn: {selfCheckIn ? 'true' : 'false'}</Text>
        <View style={{direction: 'rtl'}}>
          <Switch
            value={selfCheckIn}
            onValueChange={(val: any) => setSelfCheckIn(val)}
          />
        </View>
        <Button
          onPress={() => {
            let shouldBeRTL = !I18nManager.isRTL;
            I18nManager.allowRTL(shouldBeRTL);
            I18nManager.forceRTL(shouldBeRTL);
            RNRestart?.Restart();
          }}
          title={`set RTL = ${!I18nManager.isRTL}`}
        />
      </View>
    </SafeAreaView>
  );
}

Steps to reproduce

1. Install and run app
2. click to change RTL button
3. look Switch component

React Native Version

0.76.6

Affected Platforms

Runtime - Android

Output of npx react-native info

❯ npx react-native info
info Fetching system and libraries information...
System:
  OS: Linux 6.12 Arch Linux
  CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
  Memory: 13.03 GB / 31.26 GB
  Shell:
    version: "5.9"
    path: /usr/bin/zsh
Binaries:
  Node:
    version: 20.10.0
    path: ~/.nvm/versions/node/v20.10.0/bin/node
  Yarn:
    version: 1.22.22
    path: /usr/bin/yarn
  npm:
    version: 10.9.2
    path: ~/.nvm/versions/node/v20.10.0/bin/npm
  Watchman: Not Found
SDKs:
  Android SDK:
    API Levels:
      - "30"
      - "34"
      - "35"
    Build Tools:
      - 30.0.2
      - 34.0.0
      - 35.0.0
    System Images:
      - android-35 | Google Play Intel x86_64 Atom
    Android NDK: Not Found
IDEs:
  Android Studio: AI-242.23339.11.2421.12700392
Languages:
  Java:
    version: javac 23
    path: /usr/bin/javac
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.6
    wanted: 0.76.6
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

not need

Reproducer

https://github.com/whiskeycola/bug-react-native-switch

Screenshots and Videos

The image shows a screenshots from the emulator.

• The system in emulator has the RTL (Hebrew) language installed, but the text direction is switched to LTR. On=right is expected, but “Switch” retains the direction used by the system.
  
  The system in emulator has the LTR(english) language installed, but the text direction is switched to RTL. On=left is expected, but “Switch” retains the direction used by the system.
  

[NickGerleman]

This should be fixed as of 6cf0cfb shipped in 0.77 (should be out this week). Some dependencies, so not easy to backport.