RTL support

[Hostname47]

I'm using i18n on my application, and in case the language is arabic, I want to show the toast in rtl manner (left colored border should become on the right side in case of RTL).

[elabayoub]

I tweaked it to get this result (as i wanted it reversed) Not the best solution, but you can check the below solution (since issue is only on RTL and on Android):

First add a prop for testing when to apply changes as following on "/react-native-toast-message/src/components/base/styles.js":

const { color, icon, text1, text2, textStyle, isRTL, onClose, style } = props;

Then make following changes (same file):

<View style={[baseStyle, isRTL && styles.transformStyle]}> <View style={[styles.iconContainer, isRTL && styles.transformStyle]}> <View style={[styles.contentContainer, isRTL && styles.transformStyle]}>

Next add the following class on "/react-native-toast-message/src/components/base/styles.js":

transformStyle: { transform: [{scaleX: -1}], }

Finally, when you call '<BaseToast' send following:

<BaseToast color={color} style={[styles.border, { borderColor: color}]} textStyle={styles.rtlSupport} isRTL={(isRTL && platform.is.android) ?? false} {...props} />

To preserve changes for your project you can run (generates a patch that contains your changes): npx patch-package react-native-toast-message

You can also use writingDirection to specify 'rtl' and customize it as you wish..