Handle language with right alignment.

[mark-yacoub]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-simple-dialogs@1.4.0 for the project I'm working on.

I had trouble aligning the message to the right to handle Arabic which is written form right to left on Progress Dialog I wasn't able to use contentStyle because of how the Dialog is structure. The activity indicator and the message are wrapped by 2 views. one view is in Progress dialog with noway to overwrite it. and another view wrapping the children in renderContent() in class Dialog and that's the one that can be overridden with contentStyle - so basically no way to do row-reverse on the message+indicator.

This is a quick fix for me that i thought i would share. Ideally we have some props that can override every view needed, or maybe merge both views. this is how it looks like now:

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-simple-dialogs/src/ProgressDialog.js b/node_modules/react-native-simple-dialogs/src/ProgressDialog.js
index 56fdf29..1239871 100644
--- a/node_modules/react-native-simple-dialogs/src/ProgressDialog.js
+++ b/node_modules/react-native-simple-dialogs/src/ProgressDialog.js
@@ -36,14 +36,26 @@ import Dialog from './Dialog'
 class ProgressDialog extends Component {
     render() {
         const {
-            message, messageStyle, activityIndicatorColor, activityIndicatorSize, activityIndicatorStyle
+            message, messageStyle, activityIndicatorColor, activityIndicatorSize, activityIndicatorStyle, isTextRightAligned,
         } = this.props;

+        const messageContainerStyle = {
+            flexDirection: isTextRightAligned ? 'row-reverse' : 'row',
+            alignItems: 'center',
+          };
+          const messageTextStyle = {
+            marginLeft: isTextRightAligned ? 0 : 20,
+            marginRight: isTextRightAligned ? 20 : 0,
+            fontSize: 18,
+            color: '#00000089',
+            ...messageStyle,
+          };
+
         return (
-            <Dialog {...this.props} >
-                <View style={{ flexDirection: 'row', alignItems: 'center' }} >
+            <Dialog {...this.props}>
+                <View style={messageContainerStyle} >
                     <ActivityIndicator animating={true} color={activityIndicatorColor} size={activityIndicatorSize} style={activityIndicatorStyle} />
-                    <Text style={[{ marginLeft: 20, fontSize: 18, color: "#00000089" }, messageStyle]}>{message}</Text>
+                    <Text style={messageTextStyle}>{message}</Text>
                 </View>
             </Dialog>
         )

This issue body was partially generated by patch-package.

[douglasjunior]

Hi @mark-yacoub, thank you for your feedback!

As I can see, you just need a way to customize the "message container style", right?

[mark-yacoub]

Hey, yes i believe the title is already centered so it works in all ways. The message is the one that isn't right aligned friendly.

[douglasjunior]

You can use titleStyle for the title text, and messageStyle for the message text.

I think that only a contentContainerStyle will be necessary.

[mark-yacoub]

Yup, that's basically it. But I think it might be confusing having content style and content container style, cause it's just a view inside a view. Maybe we can simplify by having 1 View wrapping the message and the indicator