Mixing
How to make View height expand based on the height of its siblings in a row?
I currently have a simple legend component that produces an output like so:
The problem is that I manually set the height for the blue rectangle to be as tall as the text. Is there any way I can tell that View to just expand naturally based on the height of the text instead of having to manually set some number as the height?
You can try out the Snack or check out the code:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.legend}>
<View style={styles.item}>
<View style={styles.shape} />
<View>
<Text>Food</Text>
<Text>25%</Text>
</View>
</View>
<View style={styles.item}>
<View style={styles.shape} />
<View>
<Text>Utilities</Text>
<Text>35%</Text>
</View>
</View>
<View style={styles.item}>
<View style={styles.shape} />
<View>
<Text>Misc.</Text>
<Text>40%</Text>
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
marginHorizontal: 50,
},
legend: {
width: '100%',
flexDirection: 'row',
justifyContent: 'space-between'
},
item: {
flexDirection: 'row',
alignItems: 'center'
},
shape: {
backgroundColor: 'blue',
width: 15,
height: 30, // I DONT WANT TO HAVE TO DO THIS
marginRight: 5
}
});
export default App;
Any help would be appreciated, thanks!
react-native flexbox react-native-flexbox
edited Jan 2 at 17:53
saadq
10.1k103773
asked Jan 2 at 17:33
inhwrbpinhwrbp
1377
add a comment |
I currently have a simple legend component that produces an output like so:
The problem is that I manually set the height for the blue rectangle to be as tall as the text. Is there any way I can tell that View to just expand naturally based on the height of the text instead of having to manually set some number as the height?
You can try out the Snack or check out the code:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.legend}>
<View style={styles.item}>
<View style={styles.shape} />
<View>
<Text>Food</Text>
<Text>25%</Text>
</View>
</View>
<View style={styles.item}>
<View style={styles.shape} />
<View>
<Text>Utilities</Text>
<Text>35%</Text>
</View>
</View>
<View style={styles.item}>
<View style={styles.shape} />
<View>
<Text>Misc.</Text>
<Text>40%</Text>
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
marginHorizontal: 50,
},
legend: {
width: '100%',
flexDirection: 'row',
justifyContent: 'space-between'
},
item: {
flexDirection: 'row',
alignItems: 'center'
},
shape: {
backgroundColor: 'blue',
width: 15,
height: 30, // I DONT WANT TO HAVE TO DO THIS
marginRight: 5
}
});
export default App;
Any help would be appreciated, thanks!
react-native flexbox react-native-flexbox
edited Jan 2 at 17:53
saadq
10.1k103773
asked Jan 2 at 17:33
inhwrbpinhwrbp
1377
add a comment |
I currently have a simple legend component that produces an output like so:
The problem is that I manually set the height for the blue rectangle to be as tall as the text. Is there any way I can tell that View to just expand naturally based on the height of the text instead of having to manually set some number as the height?
You can try out the Snack or check out the code:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.legend}>
<View style={styles.item}>
<View style={styles.shape} />
<View>
<Text>Food</Text>
<Text>25%</Text>
</View>
</View>
<View style={styles.item}>
<View style={styles.shape} />
<View>
<Text>Utilities</Text>
<Text>35%</Text>
</View>
</View>
<View style={styles.item}>
<View style={styles.shape} />
<View>
<Text>Misc.</Text>
<Text>40%</Text>
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
marginHorizontal: 50,
},
legend: {
width: '100%',
flexDirection: 'row',
justifyContent: 'space-between'
},
item: {
flexDirection: 'row',
alignItems: 'center'
},
shape: {
backgroundColor: 'blue',
width: 15,
height: 30, // I DONT WANT TO HAVE TO DO THIS
marginRight: 5
}
});
export default App;
Any help would be appreciated, thanks!
react-native flexbox react-native-flexbox
edited Jan 2 at 17:53
saadq
10.1k103773
asked Jan 2 at 17:33
inhwrbpinhwrbp
1377
I currently have a simple legend component that produces an output like so:
The problem is that I manually set the height for the blue rectangle to be as tall as the text. Is there any way I can tell that View to just expand naturally based on the height of the text instead of having to manually set some number as the height?
You can try out the Snack or check out the code:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.legend}>
<View style={styles.item}>
<View style={styles.shape} />
<View>
<Text>Food</Text>
<Text>25%</Text>
</View>
</View>
<View style={styles.item}>
<View style={styles.shape} />
<View>
<Text>Utilities</Text>
<Text>35%</Text>
</View>
</View>
<View style={styles.item}>
<View style={styles.shape} />
<View>
<Text>Misc.</Text>
<Text>40%</Text>
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
marginHorizontal: 50,
},
legend: {
width: '100%',
flexDirection: 'row',
justifyContent: 'space-between'
},
item: {
flexDirection: 'row',
alignItems: 'center'
},
shape: {
backgroundColor: 'blue',
width: 15,
height: 30, // I DONT WANT TO HAVE TO DO THIS
marginRight: 5
}
});
export default App;
Any help would be appreciated, thanks!
react-native flexbox react-native-flexbox
react-native flexbox react-native-flexbox
edited Jan 2 at 17:53
saadq
10.1k103773
asked Jan 2 at 17:33
inhwrbpinhwrbp
1377
edited Jan 2 at 17:53
saadq
10.1k103773
asked Jan 2 at 17:33
inhwrbpinhwrbp
1377
edited Jan 2 at 17:53
saadq
10.1k103773
edited Jan 2 at 17:53
saadq
10.1k103773
edited Jan 2 at 17:53
saadq
10.1k103773
10.1k103773
asked Jan 2 at 17:33
inhwrbpinhwrbp
1377
asked Jan 2 at 17:33
inhwrbpinhwrbp
1377
asked Jan 2 at 17:33
inhwrbpinhwrbp
1377
1377
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
You can use height: '100%' on the shape style, and all the shapes will have the max height of the text
answered Jan 2 at 19:19
Julian BonominiJulian Bonomini
262
add a comment |
If i understand correctly, firstly you should wrap your each item with a view and after that you should add a second view with flexGrow.
<View>
<View style={{flexGrow: 1}}/>
<View style={styles.item}>
The first view helps you for changing the flexDirection to column and second view which has flexGrow helps you to push down your blue shape. And you should set shape height to 100%.
shape: {
backgroundColor: 'blue',
width: 15,
height: "100%", //here
marginRight: 5,
}
Also i edited your snack code and save it. Link: https://snack.expo.io/HkZ3a5q-V
answered Jan 2 at 20:38
sdkcysdkcy
1,111512
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%2f54010710%2fhow-to-make-view-height-expand-based-on-the-height-of-its-siblings-in-a-row%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can use height: '100%' on the shape style, and all the shapes will have the max height of the text
answered Jan 2 at 19:19
Julian BonominiJulian Bonomini
262
add a comment |
You can use height: '100%' on the shape style, and all the shapes will have the max height of the text
answered Jan 2 at 19:19
Julian BonominiJulian Bonomini
262
add a comment |
You can use height: '100%' on the shape style, and all the shapes will have the max height of the text
answered Jan 2 at 19:19
Julian BonominiJulian Bonomini
262
You can use height: '100%' on the shape style, and all the shapes will have the max height of the text
answered Jan 2 at 19:19
Julian BonominiJulian Bonomini
262
answered Jan 2 at 19:19
Julian BonominiJulian Bonomini
262
answered Jan 2 at 19:19
Julian BonominiJulian Bonomini
262
answered Jan 2 at 19:19
Julian BonominiJulian Bonomini
262
262
add a comment |
add a comment |
If i understand correctly, firstly you should wrap your each item with a view and after that you should add a second view with flexGrow.
<View>
<View style={{flexGrow: 1}}/>
<View style={styles.item}>
The first view helps you for changing the flexDirection to column and second view which has flexGrow helps you to push down your blue shape. And you should set shape height to 100%.
shape: {
backgroundColor: 'blue',
width: 15,
height: "100%", //here
marginRight: 5,
}
Also i edited your snack code and save it. Link: https://snack.expo.io/HkZ3a5q-V
answered Jan 2 at 20:38
sdkcysdkcy
1,111512
add a comment |
If i understand correctly, firstly you should wrap your each item with a view and after that you should add a second view with flexGrow.
<View>
<View style={{flexGrow: 1}}/>
<View style={styles.item}>
The first view helps you for changing the flexDirection to column and second view which has flexGrow helps you to push down your blue shape. And you should set shape height to 100%.
shape: {
backgroundColor: 'blue',
width: 15,
height: "100%", //here
marginRight: 5,
}
Also i edited your snack code and save it. Link: https://snack.expo.io/HkZ3a5q-V
answered Jan 2 at 20:38
sdkcysdkcy
1,111512
add a comment |
If i understand correctly, firstly you should wrap your each item with a view and after that you should add a second view with flexGrow.
<View>
<View style={{flexGrow: 1}}/>
<View style={styles.item}>
The first view helps you for changing the flexDirection to column and second view which has flexGrow helps you to push down your blue shape. And you should set shape height to 100%.
shape: {
backgroundColor: 'blue',
width: 15,
height: "100%", //here
marginRight: 5,
}
Also i edited your snack code and save it. Link: https://snack.expo.io/HkZ3a5q-V
answered Jan 2 at 20:38
sdkcysdkcy
1,111512
If i understand correctly, firstly you should wrap your each item with a view and after that you should add a second view with flexGrow.
<View>
<View style={{flexGrow: 1}}/>
<View style={styles.item}>
The first view helps you for changing the flexDirection to column and second view which has flexGrow helps you to push down your blue shape. And you should set shape height to 100%.
shape: {
backgroundColor: 'blue',
width: 15,
height: "100%", //here
marginRight: 5,
}
Also i edited your snack code and save it. Link: https://snack.expo.io/HkZ3a5q-V
answered Jan 2 at 20:38
sdkcysdkcy
1,111512
answered Jan 2 at 20:38
sdkcysdkcy
1,111512
answered Jan 2 at 20:38
sdkcysdkcy
1,111512
answered Jan 2 at 20:38
sdkcysdkcy
1,111512
1,111512
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%2f54010710%2fhow-to-make-view-height-expand-based-on-the-height-of-its-siblings-in-a-row%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
