3

In the Button docs from React-Native here it shows an image which says: Fit to text layout. That is what I am searching for because my button always has full width, but I want it to only be as wide as the text is. But neither in the docs nor in the button code here I can find something related to that a prop or how can it achieve. Somebody has an idea how to get it?

Moritz Pfeiffer
  • 447
  • 1
  • 7
  • 23
  • You would be better to create your own button component that does what you want. That way you have complete control over. – Andrew Nov 26 '18 at 16:10
  • Yes I know that. But I wanted just a very quick solution as react-native offers this directly and wondered how to get that option because the docs show it. Maybe somebody else had discovered how to get that setting... – Moritz Pfeiffer Nov 26 '18 at 16:15
  • I don't think that is what the docs are saying. I think they are saying that you could use a *layout strategy* to get the buttons to fit to text. For that me it would mean wrapping the buttons in a view that has flexDirection of row, probably with a justifyContent set to space-between. Doing that should recreate the example in the docs. – Andrew Nov 26 '18 at 16:43

2 Answers2

1

I suggest making your own button with TouchableOpacity and Text.

For example this is my component I often use :

export default class RoundedButton extends React.Component<Props>{

  render(){
    const defStyles : StyleProp<ViewStyle> = [style.button, {
      backgroundColor: this.props.backgroundColor,
    }, this.props.style];
    if(this.props.shadow)
      defStyles.push(style.shadow);


    return(
      <TouchableOpacity
        disabled={!this.props.onPress}
        onPress={() => {
          if(this.props.onPress)
            this.props.onPress();
        }}
        style={defStyles}
      >
        <Text style={{
          color: this.props.textColor,
          fontFamily: fonts.bold,
          fontSize: 16
        }}>{this.props.centerText}</Text>

      </TouchableOpacity>
    );
  }

}

You can found the full gist here if you want : https://gist.github.com/Sangrene/176c1b87ad5b355e26b5c6aa80b96eae.

Hugo Laplace
  • 609
  • 1
  • 7
  • 16
0

You can pass the prop adjustsFontSizeToFit={true} in your Text component.

If you add a fontSize in the styles of the Text, it will override this prop and won't work.

Example

<View style={{widht: 100, height: 60}}>
   <Text adjustsFontSizeToFit={true}>
     Your Text Here
   </Text>
</View>
Mateus Marinho
  • 1