paddingStart begins from the left on an RTL app. However, marginStart begins from the right, as expected

Please provide the following:

  1. SDK Version: 48
  2. Platforms(Android/iOS/web/all): Android
  3. Add the appropriate “Tag” based on what Expo library you have a question on: expo-localization

Hi all,

My device is configured with an RTL language. However, running the below code result in strange behavior. Here’s the code I’m running:

import { I18nManager, Text, View } from 'react-native';
import { getLocales } from 'expo-localization';

const { textDirection } = getLocales()[0];

const StartPage = () =>
   (<View>
      {console.log(I18nManager?.isRTL)}
      {console.log(textDirection)}
      <Text style={{
          marginStart: 50,
          paddingStart: 12,
          backgroundColor: 'yellow',
      }}>marginStart, paddingStart</Text>
  </View>)
;

Emulator + console:

As you can see, marginStart works as expected, it starts from the right, but the paddingStart starts from the left. Do you have any explanation for this? Why paddingStart works this way? How can it be fixed?

Thanks,
Oran

I’m not 100% sure what youre trying to achieve, but i’m curious if flex justify would help

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.