Skip to main content

Open source · Beta

react-native-rtl-kit: Automatic RTL-Safe Styles for React Native (Beta)

react-native-rtl-kit is an open source TypeScript library, currently in beta. It wraps StyleSheet.create and automatically converts physical style properties (for example marginLeft) into their RTL-safe logical equivalents, so an Urdu or Arabic React Native app does not need hand-written left/right conditionals.

  • Betarelease status
  • TypeScriptlanguage
View on npmView on GitHub

The problem

Physical style properties like marginLeft, paddingRight and borderTopLeftRadius leak into React Native codebases easily and break right-to-left layouts. Fixing them one by one, and catching new ones in review, does not scale.

The solution

The kit sits at the style-definition layer. You keep writing styles the way you already do, and it resolves physical properties to logical ones (start/end) in one place, so layouts mirror correctly when the app switches to RTL.

Before and after

Before
// Physical properties: these break in RTL
const styles = StyleSheet.create({
  card: {
    marginLeft: 16,
    paddingRight: 8,
    borderTopLeftRadius: 12,
  },
});
After
// What the kit resolves them to (RTL-safe)
{
  card: {
    marginStart: 16,
    paddingEnd: 8,
    borderTopStartRadius: 12,
  },
}

What it does

  • Drop-in at the StyleSheet layer

    Wraps StyleSheet.create, so existing style objects keep their shape.

  • Physical to logical conversion

    Properties such as marginLeft become their start/end equivalents automatically.

  • TypeScript first

    Written in TypeScript with types for the wrapped style objects.

  • Beta and open to feedback

    Issues and pull requests are welcome on GitHub.

My role

Author and maintainer.

Tech stack

  • TypeScript
  • React Native
  • npm

Work like this for your team

Building something similar?

I'm open to remote React Native roles worldwide and to projects in Rawalpindi, Islamabad and across Pakistan.

Get in touchDownload CV