How to align button's title to right using react-native-elements?

Question

I am using react-native-elements to add button in my app, but i am unable to align the text inside the button to right.

I tried titleStyle property with alignText:'right' but with no success

<Button title={'Hello World'} titleStyle={{ textAlign:'right' }} />

I wanted the button title to align to the right but it just stays in the center.

Answer 1

You can easily do this by adding justifyContent 'flex-end' to React Native Elements Button buttonStyle props

<Button
  title="My Button"
  type="clear"
  buttonStyle={{ justifyContent: 'flex-end' }}
/>

Answer 2

Passing your own Text as children into Button would solve your problems. But in React-native you can't call a Text as children into Button. Because "The Title props of a Button must be a string".

So Instead of using Button you can use TouchableOpacity.

<TouchableOpacity onPress={() => {console.log('button press')}}>
   <Text style={{textAlign:'right'}}>Hello World</Text>
</TouchableOpacity>

Or you can create a Button Component. like this.

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

const Button = ({ onPress, children }) => {
  const { buttonStyle, textStyle } = styles;
  return (
    <TouchableOpacity onPress={onPress} style={buttonStyle}>
      <Text style={textStyle}>
        {children}
      </Text>
    </TouchableOpacity>
  );
};

export default Button;

const styles = {
  textStyle: {
    textAlign: 'right',
    color: '#336633',
    fontSize: 16,
    fontWeight: '600',
    paddingTop: 10,
    paddingBottom: 10
  },
  buttonStyle: {
    backgroundColor: '#fff',
    borderWidth: 1,
    borderColor: '#336633',
    paddingTop: 4,
    paddingBottom: 4,
    paddingRight: 25,
    paddingLeft: 25,
    marginTop: 10,
    marginLeft: 15,
    marginRight:15,
    width: 380
  }
};