callstack / callstack/react-native-paper

RTL problem on Expo web

Open
#3,736 0 comments 0 reactions 1 assignee Claimed by @pac-guerreiro View on GitHub
bug RTL web
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

### Current behaviour

as you can see in the screenshot using expo web, react native paper components aren't RTL

### Expected behaviour

it's expected that the Exclamation mark becomes after RTL text (direction is not RTL). other components aren't RTL too.

### How to reproduce?

here is the source code of GitHub repo:
[rtl-test-react-native-paper](https://github.com/MMTE/react-native-paper-rtl-expo-web)

also steps to reproduce:
```
npx create-expo-app
npx expo install react-native-web@~0.18.10 react-dom@18.2.0
npx expo install @expo/webpack-config@^18.0.1
npx expo start
add a react-paper-component
press w to start expo web
press a to run emulator or use expo-go
```

### Preview

![Screenshot from 2023-03-08 08-18-08](https://user-images.githubusercontent.com/6337624/223622755-2808e669-00db-49ed-98a4-3accfb5cfa08.png)

### What have you tried so far?

I have tried to change styles for each component manually for example for Cards title by changing the properties of the title in the card, but I believe it's not the solution.
also, I don't know whether this problem would be resolved using the [Using on the Web](https://callstack.github.io/react-native-paper/docs/guides/react-native-web) or not. because the expo web approach is more straight forward and the guide on react native paper wasn't clear to me.

I would appreciate any suggestions.

### Your Environment

| software | version
| --------------------- | -------
| ios | -
| android | 13
| react-native | 0.71.3
| react-native-paper | 5.3.1
| node | 16.19.0
| npm or yarn | 8.19.3
| expo sdk | 48.0.5

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.