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?
-
You would be better to create your own button component that does what you want. That way you have complete control over.– AndrewNov 26, 2018 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 PfeifferNov 26, 2018 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.– AndrewNov 26, 2018 at 16:43
2 Answers
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.
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>