Styling button quirks : Centering text, applying a margin

[buddamus]

I cannot:

1. Center the text on a button. The default keeps it to the left. When I apply traditional centering styles, the text disappears. As a hack, I have to use multiple " "
2. Apply a margin so that there is space between buttons. The top and bottom margin will work, but the buttons always flex fully left and right and cannot be separated from each other.

[eli-isbell-h360]

Here's the work-around I'm using for centering text/icons/etc within a button. As you mentioned the text is visible for default but not alignItems: 'center'. If you use alignItems: 'flex-start' for the container they will likewise be forced into view, so to properly center children you can use a second inner container with 'center' and the same width you pass to <Swipeable rightButtonWidth={someNumber}> like so: <Touchable style={{flex: 1, alignItems: 'flex-start', justifyContent: 'center'}}> <View style={{width: someNumber, alignItems: 'center', justifyContent: 'center'}}> <Text>Button text</Text> </View> </Touchable> It won't be responsively centered when you drag past the resting point, but it'll be centered once you let go.

[jifromz09]

Maybe too late but might help somebody, try to add paddingleft on the button style.

[braynm]

If anyone is still having this problem, you can use alignSelf

Example:

import Swipeable from 'react-native-swipeable';

const leftContent = <Text>Pull to activate</Text>;

const rightButtons = [
  <TouchableHighlight style={{ flex: 1, width: 80, justifyContent: 'center' }}>
    <Text style={{ alignSelf: 'center' }}>Button 1</Text>
  </TouchableHighlight>
];

function MyListItem() {
  return (
    <Swipeable rightButtons={rightButtons}>
      <Text>My swipeable content</Text>
    </Swipeable>
  );
}

Note, that you need to put width for the parent flex (e.g. 80)