How to add padding to button/text?

[Kevin]

When my text is longer than 7 characters it gets cut off. I need to add padding and make the component wider but adding padding or margin via primaryTextStyle or secondaryTextStyle results in text wrapping.

I suppose we need a prop that lets us edit the text container's style

Here's my current component:

.
After trying to add some room with padding or margin on text:
primaryTextStyle={{ marginHorizontal: 10 }}

[FreakyCoder]

Hello @thecompoundingdev

Version 1.1.0 is available with two new props: primaryButtonStyle and secondaryButtonStyle.

Here is the example usage:

<DuoToggleSwitch
    primaryText="Customers"
    secondaryText="Employees"
    onPrimaryPress={() => {}}
    onSecondaryPress={() => {}}
    TouchableComponent={Ripple}
    primaryButtonStyle={{ width: 150 }}
    secondaryButtonStyle={{ width: 125 }}
    primaryTextStyle={{ marginRight: 32 }}
    rippleColor="#fff"
    rippleContainerBorderRadius={50}
/>

You can customize it for your use-case :)

[Kevin]

Thanks, it seems like the primaryButtonStyle may be improperly attributed, however. I set margin on both but it's only working on second button.

!
primaryButtonStyle={{ flexDirection: 'row', alignItems: 'center', marginHorizontal: 50, }} secondaryButtonStyle={{ flexDirection: 'row', alignItems: 'center', marginHorizontal: 50, }}

Additionally, flex alignment doesn't work.

[FreakyCoder]

Why are putting the flexDirection row for these? Try to set with width instead of marginHorizontal. Please check out the example