Is there any option for assigning the textAlign property for message?

[sadeghhosseini]

I need to align the message text of the snackbar center.

[sadeghhosseini]

I don't know if there is but this is my solution:

import React, {Component} from 'react';
import {Animated, StyleSheet, Text, TouchableOpacity, View, PanResponder, Dimensions} from 'react-native';
import Events from 'react-native-simple-events';
import Snackbar from '@prince8verma/react-native-snackbar'
const width = Dimensions.get('window').width;
export const showSnackBar = (data = {}) => {
    let {
        message = "Your custom message", textColor = '#FFF',
        position = "bottom", confirmText = "OK", buttonColor = '#03a9f4',
        duration = 4000, animationTime = 250, backgroundColor = "#323232",
        textAlign='center',
        onConfirm = () => {
        }, ...otherProps
    } = data;

    Events.trigger('showSnackBar', {
        message,
        textColor,      // message text color
        position,  // enum(top/bottom).
        confirmText, // button text.
        buttonColor, // default button text color
        duration,// (in ms), duartion for which snackbar is visible.
        animationTime, // time duration in which snackbar will complete its open/close animation.
        backgroundColor, //background color for snackbar
        textAlign,
        onConfirm,    //  perform some task here on snackbar button press.
        ...otherProps
    });
};

export default class MySnackbar extends Snackbar {
    constructor(props) {
        super(props);
    }
    render() {
        let {
            height, show,
            message, confirmText,
            position, top, bottom,
            textColor, buttonColor, backgroundColor,
            textAlign,
            onConfirm = () => {
            }
        } = this.state;

        let snackbarStyle = [{
            position: 'absolute', flexDirection: 'row',
            minHeight: height, maxHeight: 80,
            width, // left: 0, right: 0,
            backgroundColor: backgroundColor,
            paddingHorizontal: 24,
            shadowRadius: 2, shadowColor: 'black',
            shadowOffset: {height: 3, width: 1},
            shadowOpacity: 0.4, elevation: 24,
        }, this.snackBarSwipeAbleStyle,
            position === 'top' && {top: top},
            position === 'bottom' && {bottom: bottom}
        ];
        let buttonTextStyle = [{color: buttonColor, fontFamily: "Roboto-Medium", textAlign: 'left', fontSize: 14}];
        let messageTextStyle = [{color: textColor, fontFamily: "Roboto-Regular", textAlign: textAlign, fontSize: 14}];

        if (show) {
            return (
                <Animated.View
                    style={snackbarStyle}
                    ref={(snackBar) => {
                        this.snackBar = snackBar;
                    }}
                    {...this.panResponder.panHandlers}>
                    <View style={[{flex: 10, paddingVertical: 14, justifyContent: 'center'}]}>
                        <Text ellipsizeMode="tail" numberOfLines={2} style={messageTextStyle}>
                            {message}
                        </Text>
                    </View>
                    {
                        confirmText ?
                        <View style={[{flex: 2, paddingLeft: 24}]}>
                            <TouchableOpacity activeOpacity={0.7}
                                              onPress={() => {
                                                  onConfirm && onConfirm();
                                                  this.hideSnackBar();
                                              }} style={{flex: 1}}>
                                <View style={[{
                                    flex: 1, alignItems: 'center', justifyContent: 'center'
                                }]}>
                                    <Text style={buttonTextStyle}>
                                        {confirmText.toUpperCase()}
                                    </Text>
                                </View>
                            </TouchableOpacity>
                        </View> : null
                    }
                </Animated.View>
            )
        } else {
            return (<View/>);
        }
    }
}