React Native Button: Fit to text layout
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
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?
react-native react-native-button
asked Nov 26 '18 at 15:53
Moritz PfeifferMoritz Pfeiffer
157319
add a comment |
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?
react-native react-native-button
asked Nov 26 '18 at 15:53
Moritz PfeifferMoritz Pfeiffer
157319
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
add a comment |
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?
react-native react-native-button
asked Nov 26 '18 at 15:53
Moritz PfeifferMoritz Pfeiffer
157319
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?
react-native react-native-button
react-native react-native-button
asked Nov 26 '18 at 15:53
Moritz PfeifferMoritz Pfeiffer
157319
asked Nov 26 '18 at 15:53
Moritz PfeifferMoritz Pfeiffer
157319
asked Nov 26 '18 at 15:53
Moritz PfeifferMoritz Pfeiffer
157319
asked Nov 26 '18 at 15:53
Moritz PfeifferMoritz Pfeiffer
157319
asked Nov 26 '18 at 15:53
Moritz PfeifferMoritz Pfeiffer
157319
157319
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
add a comment |
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
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
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
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
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
add a comment |
1 Answer
1
active
oldest
votes
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.
answered Nov 26 '18 at 16:10
Hugo LaplaceHugo Laplace
18010
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53484773%2freact-native-button-fit-to-text-layout%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Nov 26 '18 at 16:10
Hugo LaplaceHugo Laplace
18010
add a comment |
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.
answered Nov 26 '18 at 16:10
Hugo LaplaceHugo Laplace
18010
add a comment |
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.
answered Nov 26 '18 at 16:10
Hugo LaplaceHugo Laplace
18010
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.
answered Nov 26 '18 at 16:10
Hugo LaplaceHugo Laplace
18010
answered Nov 26 '18 at 16:10
Hugo LaplaceHugo Laplace
18010
answered Nov 26 '18 at 16:10
Hugo LaplaceHugo Laplace
18010
answered Nov 26 '18 at 16:10
Hugo LaplaceHugo Laplace
18010
18010
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53484773%2freact-native-button-fit-to-text-layout%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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