RTL Support

[HamoBoker]

Current behaviour

Hi

First of all thanks a lot for your great work i really appreciate it.

i have issue when switching the app to RTL and opening DatePickerModal the dates doesn't appear and stays empty, on LTR everything works properly.

Thank you in advance

Expected behaviour

Dates appear

How to reproduce?

// index.js
import {I18nManager} from 'react-native'
import {ar, registerTranslation} from 'react-native-paper-dates'

registerTranslation('ar', ar)
I18nManager.allowRTL(true)
I18nManager.forceRTL(true)

open date picker modal

Preview

Your Environment

software	version
ios	18.1
android	13
react-native	0.75.4
react-native-paper	5.12.5
node	20

[github-actions]

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.dev. If it's not possible to repro it on snack.expo.dev, then you can also provide the repro in a GitHub repository.

[iM-GeeKy]

PRs are welcome!

[github-actions]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

[OriGummy]

+1
have a look at #36 , @0had0 solved it there

[github-actions]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

[RichardLindhout]

@OriGummy do you have maybe time to make a PR for this? Would be cool addition!

[TrangThaiPizza]

RTL Support Solution ✅

I've successfully fixed the RTL support issue with platform-specific patches. Here's the working solution:

Problem

The library doesn't handle RTL layouts properly on both iOS and Android, causing dates to not appear or display incorrectly.

Solution

Create platform-specific fixes using patch-package:

1. Fix Swiper.native.tsx

// Add imports
import {
  // ... existing imports
  I18nManager,
  Platform,
} from 'react-native'

// In contentContainerStyle
contentContainerStyle={{
  transform: [{ scaleX: (Platform.OS === 'android' && I18nManager.isRTL) ? -1 : 1 }],
  flexDirection: (Platform.OS === 'android' && I18nManager.isRTL) ? 'row-reverse' : 'row',
}}

// In inner View style
{
  // ... other styles
  transform: [{ scaleX: (Platform.OS === 'android' && I18nManager.isRTL) ? -1 : 1 }],
  flexDirection: (Platform.OS === 'android' && I18nManager.isRTL) ? 'row-reverse' : 'row',
}

// Fix positioning for horizontal mode
left: isHorizontal
  ? (Platform.OS === 'android' && I18nManager.isRTL)
    ? width * getTotalMonths(startYear, endYear) - getHorizontalMonthOffset(visibleIndexes[vi], width) - width
    : getHorizontalMonthOffset(visibleIndexes[vi], width)
  : 0,

2. Fix shared/styles.tsx

import { StyleSheet, Platform, I18nManager } from 'react-native'

export const sharedStyles = StyleSheet.create({
  // ... other styles
  root: {
    flex: 1,
    ...(Platform.OS === 'ios' && I18nManager.isRTL && { direction: 'ltr' }),
  },
})

Why Platform-Specific?

• Android: Needs transform and flexDirection changes for proper RTL layout
• iOS: Uses native RTL handling, only needs direction override to prevent conflicts

Implementation

1. Make the changes above
2. Run npx patch-package react-native-paper-dates
3. Commit the generated patch file

Result

✅ Works perfectly on both iOS and Android
✅ Respects platform-native RTL handling
✅ Maintains proper date picker functionality

This solution handles the exact issue described - dates now appear correctly in RTL mode on both platforms.

Hope this helps! 🎉