How to align child views to left with even space in React-Native?2019 Community Moderator ElectionHow to justify (left, right, center) each child independently?What is the difference between using constructor vs getInitialState in React / React Native?What is the difference between React Native and React?alignItems: center prevents flex row text wrapping in React NativeHow to use alignItems with flex value and wrap?React Native - image pushes text out screen - fixed with 3rd view?Show splash screen before show main screen in react native without using 3rd party libraryComponent won't stay wrapped within bounds (React Native)React-Native error adding a video using expo to the app.js for backgroundNot able to navigate to other page in react nativeHow to fix this error 'undefined is not an object'?
Windows Server Data Center Edition - Unlimited Virtual Machines
(Codewars) Linked Lists - Remove Duplicates
Should I take out a loan for a friend to invest on my behalf?
How to design an organic heat-shield?
How many characters using PHB rules does it take to be able to have access to any PHB spell at the start of an adventuring day?
What materials can be used to make a humanoid skin warm?
This Alpine town?
Signed and unsigned numbers
Is it possible to avoid unpacking when merging Association?
Doubts in understanding some concepts of potential energy
Does an unused member variable take up memory?
Has a sovereign Communist government ever run, and conceded loss, on a fair election?
What do *foreign films* mean for an American?
Is it possible that a question has only two answers?
What do you call someone who likes to pick fights?
Source permutation
Street obstacles in New Zealand
What is the generally accepted pronunciation of “topoi”?
What will happen if my luggage gets delayed?
What is the population of Romulus in the TNG era?
Finitely many repeated replacements
Professor forcing me to attend a conference, I can't afford even with 50% funding
How exactly does an Ethernet collision happen in the cable, since nodes use different circuits for Tx and Rx?
I reported the illegal activity of my boss to his boss. My boss found out. Now I am being punished. What should I do?
How to align child views to left with even space in React-Native?
2019 Community Moderator ElectionHow to justify (left, right, center) each child independently?What is the difference between using constructor vs getInitialState in React / React Native?What is the difference between React Native and React?alignItems: center prevents flex row text wrapping in React NativeHow to use alignItems with flex value and wrap?React Native - image pushes text out screen - fixed with 3rd view?Show splash screen before show main screen in react native without using 3rd party libraryComponent won't stay wrapped within bounds (React Native)React-Native error adding a video using expo to the app.js for backgroundNot able to navigate to other page in react nativeHow to fix this error 'undefined is not an object'?
I'm trying to create a menu for my application in React-Native which should have multiple icons in the below way
The icons should be in the same row and wrapped so that if screen is bigger more icons will be on the same row.
My current code is as follows
import React from 'react';
import StyleSheet, View from 'react-native';
export default class App extends React.Component
render()
return (
<View style=styles.container>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
</View>
);
const styles = StyleSheet.create(
container:
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'space-evenly',
flexDirection: 'row',
flexWrap: 'wrap',
paddingTop: 40
,
box:
width: 100,
height: 100,
backgroundColor: 'aqua',
margin: 10,
);
The current output is as below
The children count may change in the future but i need to have spacing on the sides, using flex-start will give the below output which is wrong.i want to have spacing in both sides as well.
How do i align it to left and have the items with even space around as the image above ?
javascript react-native
add a comment |
I'm trying to create a menu for my application in React-Native which should have multiple icons in the below way
The icons should be in the same row and wrapped so that if screen is bigger more icons will be on the same row.
My current code is as follows
import React from 'react';
import StyleSheet, View from 'react-native';
export default class App extends React.Component
render()
return (
<View style=styles.container>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
</View>
);
const styles = StyleSheet.create(
container:
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'space-evenly',
flexDirection: 'row',
flexWrap: 'wrap',
paddingTop: 40
,
box:
width: 100,
height: 100,
backgroundColor: 'aqua',
margin: 10,
);
The current output is as below
The children count may change in the future but i need to have spacing on the sides, using flex-start will give the below output which is wrong.i want to have spacing in both sides as well.
How do i align it to left and have the items with even space around as the image above ?
javascript react-native
alignItems: 'center'
would center the blocks. Change it toalignItems: 'left'
and it should align to the left
– Aniket G
Mar 7 at 5:04
its react-native and left is not supported :)
– Guruparan Giritharan
Mar 7 at 5:05
Right. ChangejustifyContent: 'space-evenly'
tojustifyContent: 'flex-start'
stackoverflow.com/questions/36008969/…
– Aniket G
Mar 7 at 5:06
Possible duplicate of How to justify (left, right, center) each child independently?
– Aniket G
Mar 7 at 5:07
@AniketG flext-start i'm trying to use the same row so flex start will have more space at the right which is the problem, as this is the same row its not a duplicate
– Guruparan Giritharan
Mar 7 at 5:10
add a comment |
I'm trying to create a menu for my application in React-Native which should have multiple icons in the below way
The icons should be in the same row and wrapped so that if screen is bigger more icons will be on the same row.
My current code is as follows
import React from 'react';
import StyleSheet, View from 'react-native';
export default class App extends React.Component
render()
return (
<View style=styles.container>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
</View>
);
const styles = StyleSheet.create(
container:
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'space-evenly',
flexDirection: 'row',
flexWrap: 'wrap',
paddingTop: 40
,
box:
width: 100,
height: 100,
backgroundColor: 'aqua',
margin: 10,
);
The current output is as below
The children count may change in the future but i need to have spacing on the sides, using flex-start will give the below output which is wrong.i want to have spacing in both sides as well.
How do i align it to left and have the items with even space around as the image above ?
javascript react-native
I'm trying to create a menu for my application in React-Native which should have multiple icons in the below way
The icons should be in the same row and wrapped so that if screen is bigger more icons will be on the same row.
My current code is as follows
import React from 'react';
import StyleSheet, View from 'react-native';
export default class App extends React.Component
render()
return (
<View style=styles.container>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
</View>
);
const styles = StyleSheet.create(
container:
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'space-evenly',
flexDirection: 'row',
flexWrap: 'wrap',
paddingTop: 40
,
box:
width: 100,
height: 100,
backgroundColor: 'aqua',
margin: 10,
);
The current output is as below
The children count may change in the future but i need to have spacing on the sides, using flex-start will give the below output which is wrong.i want to have spacing in both sides as well.
How do i align it to left and have the items with even space around as the image above ?
javascript react-native
javascript react-native
edited Mar 7 at 5:16
Guruparan Giritharan
asked Mar 7 at 4:57
Guruparan GiritharanGuruparan Giritharan
5001620
5001620
alignItems: 'center'
would center the blocks. Change it toalignItems: 'left'
and it should align to the left
– Aniket G
Mar 7 at 5:04
its react-native and left is not supported :)
– Guruparan Giritharan
Mar 7 at 5:05
Right. ChangejustifyContent: 'space-evenly'
tojustifyContent: 'flex-start'
stackoverflow.com/questions/36008969/…
– Aniket G
Mar 7 at 5:06
Possible duplicate of How to justify (left, right, center) each child independently?
– Aniket G
Mar 7 at 5:07
@AniketG flext-start i'm trying to use the same row so flex start will have more space at the right which is the problem, as this is the same row its not a duplicate
– Guruparan Giritharan
Mar 7 at 5:10
add a comment |
alignItems: 'center'
would center the blocks. Change it toalignItems: 'left'
and it should align to the left
– Aniket G
Mar 7 at 5:04
its react-native and left is not supported :)
– Guruparan Giritharan
Mar 7 at 5:05
Right. ChangejustifyContent: 'space-evenly'
tojustifyContent: 'flex-start'
stackoverflow.com/questions/36008969/…
– Aniket G
Mar 7 at 5:06
Possible duplicate of How to justify (left, right, center) each child independently?
– Aniket G
Mar 7 at 5:07
@AniketG flext-start i'm trying to use the same row so flex start will have more space at the right which is the problem, as this is the same row its not a duplicate
– Guruparan Giritharan
Mar 7 at 5:10
alignItems: 'center'
would center the blocks. Change it to alignItems: 'left'
and it should align to the left– Aniket G
Mar 7 at 5:04
alignItems: 'center'
would center the blocks. Change it to alignItems: 'left'
and it should align to the left– Aniket G
Mar 7 at 5:04
its react-native and left is not supported :)
– Guruparan Giritharan
Mar 7 at 5:05
its react-native and left is not supported :)
– Guruparan Giritharan
Mar 7 at 5:05
Right. Change
justifyContent: 'space-evenly'
to justifyContent: 'flex-start'
stackoverflow.com/questions/36008969/…– Aniket G
Mar 7 at 5:06
Right. Change
justifyContent: 'space-evenly'
to justifyContent: 'flex-start'
stackoverflow.com/questions/36008969/…– Aniket G
Mar 7 at 5:06
Possible duplicate of How to justify (left, right, center) each child independently?
– Aniket G
Mar 7 at 5:07
Possible duplicate of How to justify (left, right, center) each child independently?
– Aniket G
Mar 7 at 5:07
@AniketG flext-start i'm trying to use the same row so flex start will have more space at the right which is the problem, as this is the same row its not a duplicate
– Guruparan Giritharan
Mar 7 at 5:10
@AniketG flext-start i'm trying to use the same row so flex start will have more space at the right which is the problem, as this is the same row its not a duplicate
– Guruparan Giritharan
Mar 7 at 5:10
add a comment |
3 Answers
3
active
oldest
votes
for Box use Dimensions, Based on screen width divide box width
const styles = StyleSheet.create(
container:
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'flex-start',
flexDirection: 'row',
flexWrap: 'wrap',
paddingTop: 40
,
box:
width: (Dimensions.get('window').width / 3) - 20, /* minus some value for adjust the gap between boxes */
height: 100,
backgroundColor: 'aqua',
margin: 10,
);
Whats the logic behind 3.2 ?
– Guruparan Giritharan
Mar 7 at 7:21
pre row if you need 3 box width / 3 but it will divide equally based on screen size. you need some gape between each box so I divided with 3.2
– koneri ranjith kumar
Mar 7 at 8:33
3 may change based on screen size, i'm trying a way to calculate that
– Guruparan Giritharan
Mar 7 at 8:36
you can do this way also ==> width: (Dimensions.get('window').width / 3) - 20 // minus 20 is for some value for adjust the gap between boxes, I added the StyleSheet code. can you check is this working?
– koneri ranjith kumar
Mar 7 at 9:39
I took a different approach and solved the problem, thanks for your suggestion.
– Guruparan Giritharan
Mar 7 at 10:50
add a comment |
One option is to add extra 'fake' boxes which will fill the available space in last row:
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=[styles.box, styles.boxFake]></View>
<View style=[styles.box, styles.boxFake]></View>
<View style=[styles.box, styles.boxFake]></View>
<View style=[styles.box, styles.boxFake]></View>
<View style=[styles.box, styles.boxFake]></View>
// reset all styles like backgroundColor, border, etc.
const styles = StyleSheet.create(
boxFake:
backgroundColor: 'transparent'
);
You can easy calculate the number of necessary 'fake' boxes by the formula:
fakeBoxes = boxesPerRow - totalBoxes % boxesPerRow
add a comment |
I took a different approach by using another view as a wrapper and doing the calculation of its width, this is easier to decide the column widths.
The only problem is that we should know the width of the item, wont be a problem in my case.
The code will be as below.
import React from 'react';
import StyleSheet, View, ScrollView from 'react-native';
export default class App extends React.Component
constructor(props)
super(props);
this.state =
width: 110
;
render()
//width of child is 110
const width = `$100 / parseInt(this.state.width / 110)%`;
return (
<ScrollView>
<View style=styles.container onLayout=this.onLayout.bind(this)>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
</View>
</ScrollView>
);
onLayout(e)
if (this.state.width !== e.nativeEvent.layout.width)
this.setState(
width: e.nativeEvent.layout.width
)
const styles = StyleSheet.create(
container:
flex: 1,
backgroundColor: '#fff',
alignItems: 'flex-start',
justifyContent: 'flex-start',
flexDirection: 'row',
flexWrap: 'wrap',
paddingTop: 40
,
box:
width: 100,
height: 100,
backgroundColor: 'green',
,
wrapper:
marginVertical: 10, alignItems: 'center'
);
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%2f55036364%2fhow-to-align-child-views-to-left-with-even-space-in-react-native%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
for Box use Dimensions, Based on screen width divide box width
const styles = StyleSheet.create(
container:
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'flex-start',
flexDirection: 'row',
flexWrap: 'wrap',
paddingTop: 40
,
box:
width: (Dimensions.get('window').width / 3) - 20, /* minus some value for adjust the gap between boxes */
height: 100,
backgroundColor: 'aqua',
margin: 10,
);
Whats the logic behind 3.2 ?
– Guruparan Giritharan
Mar 7 at 7:21
pre row if you need 3 box width / 3 but it will divide equally based on screen size. you need some gape between each box so I divided with 3.2
– koneri ranjith kumar
Mar 7 at 8:33
3 may change based on screen size, i'm trying a way to calculate that
– Guruparan Giritharan
Mar 7 at 8:36
you can do this way also ==> width: (Dimensions.get('window').width / 3) - 20 // minus 20 is for some value for adjust the gap between boxes, I added the StyleSheet code. can you check is this working?
– koneri ranjith kumar
Mar 7 at 9:39
I took a different approach and solved the problem, thanks for your suggestion.
– Guruparan Giritharan
Mar 7 at 10:50
add a comment |
for Box use Dimensions, Based on screen width divide box width
const styles = StyleSheet.create(
container:
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'flex-start',
flexDirection: 'row',
flexWrap: 'wrap',
paddingTop: 40
,
box:
width: (Dimensions.get('window').width / 3) - 20, /* minus some value for adjust the gap between boxes */
height: 100,
backgroundColor: 'aqua',
margin: 10,
);
Whats the logic behind 3.2 ?
– Guruparan Giritharan
Mar 7 at 7:21
pre row if you need 3 box width / 3 but it will divide equally based on screen size. you need some gape between each box so I divided with 3.2
– koneri ranjith kumar
Mar 7 at 8:33
3 may change based on screen size, i'm trying a way to calculate that
– Guruparan Giritharan
Mar 7 at 8:36
you can do this way also ==> width: (Dimensions.get('window').width / 3) - 20 // minus 20 is for some value for adjust the gap between boxes, I added the StyleSheet code. can you check is this working?
– koneri ranjith kumar
Mar 7 at 9:39
I took a different approach and solved the problem, thanks for your suggestion.
– Guruparan Giritharan
Mar 7 at 10:50
add a comment |
for Box use Dimensions, Based on screen width divide box width
const styles = StyleSheet.create(
container:
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'flex-start',
flexDirection: 'row',
flexWrap: 'wrap',
paddingTop: 40
,
box:
width: (Dimensions.get('window').width / 3) - 20, /* minus some value for adjust the gap between boxes */
height: 100,
backgroundColor: 'aqua',
margin: 10,
);
for Box use Dimensions, Based on screen width divide box width
const styles = StyleSheet.create(
container:
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'flex-start',
flexDirection: 'row',
flexWrap: 'wrap',
paddingTop: 40
,
box:
width: (Dimensions.get('window').width / 3) - 20, /* minus some value for adjust the gap between boxes */
height: 100,
backgroundColor: 'aqua',
margin: 10,
);
edited Mar 7 at 9:28
answered Mar 7 at 6:10
koneri ranjith kumarkoneri ranjith kumar
75111
75111
Whats the logic behind 3.2 ?
– Guruparan Giritharan
Mar 7 at 7:21
pre row if you need 3 box width / 3 but it will divide equally based on screen size. you need some gape between each box so I divided with 3.2
– koneri ranjith kumar
Mar 7 at 8:33
3 may change based on screen size, i'm trying a way to calculate that
– Guruparan Giritharan
Mar 7 at 8:36
you can do this way also ==> width: (Dimensions.get('window').width / 3) - 20 // minus 20 is for some value for adjust the gap between boxes, I added the StyleSheet code. can you check is this working?
– koneri ranjith kumar
Mar 7 at 9:39
I took a different approach and solved the problem, thanks for your suggestion.
– Guruparan Giritharan
Mar 7 at 10:50
add a comment |
Whats the logic behind 3.2 ?
– Guruparan Giritharan
Mar 7 at 7:21
pre row if you need 3 box width / 3 but it will divide equally based on screen size. you need some gape between each box so I divided with 3.2
– koneri ranjith kumar
Mar 7 at 8:33
3 may change based on screen size, i'm trying a way to calculate that
– Guruparan Giritharan
Mar 7 at 8:36
you can do this way also ==> width: (Dimensions.get('window').width / 3) - 20 // minus 20 is for some value for adjust the gap between boxes, I added the StyleSheet code. can you check is this working?
– koneri ranjith kumar
Mar 7 at 9:39
I took a different approach and solved the problem, thanks for your suggestion.
– Guruparan Giritharan
Mar 7 at 10:50
Whats the logic behind 3.2 ?
– Guruparan Giritharan
Mar 7 at 7:21
Whats the logic behind 3.2 ?
– Guruparan Giritharan
Mar 7 at 7:21
pre row if you need 3 box width / 3 but it will divide equally based on screen size. you need some gape between each box so I divided with 3.2
– koneri ranjith kumar
Mar 7 at 8:33
pre row if you need 3 box width / 3 but it will divide equally based on screen size. you need some gape between each box so I divided with 3.2
– koneri ranjith kumar
Mar 7 at 8:33
3 may change based on screen size, i'm trying a way to calculate that
– Guruparan Giritharan
Mar 7 at 8:36
3 may change based on screen size, i'm trying a way to calculate that
– Guruparan Giritharan
Mar 7 at 8:36
you can do this way also ==> width: (Dimensions.get('window').width / 3) - 20 // minus 20 is for some value for adjust the gap between boxes, I added the StyleSheet code. can you check is this working?
– koneri ranjith kumar
Mar 7 at 9:39
you can do this way also ==> width: (Dimensions.get('window').width / 3) - 20 // minus 20 is for some value for adjust the gap between boxes, I added the StyleSheet code. can you check is this working?
– koneri ranjith kumar
Mar 7 at 9:39
I took a different approach and solved the problem, thanks for your suggestion.
– Guruparan Giritharan
Mar 7 at 10:50
I took a different approach and solved the problem, thanks for your suggestion.
– Guruparan Giritharan
Mar 7 at 10:50
add a comment |
One option is to add extra 'fake' boxes which will fill the available space in last row:
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=[styles.box, styles.boxFake]></View>
<View style=[styles.box, styles.boxFake]></View>
<View style=[styles.box, styles.boxFake]></View>
<View style=[styles.box, styles.boxFake]></View>
<View style=[styles.box, styles.boxFake]></View>
// reset all styles like backgroundColor, border, etc.
const styles = StyleSheet.create(
boxFake:
backgroundColor: 'transparent'
);
You can easy calculate the number of necessary 'fake' boxes by the formula:
fakeBoxes = boxesPerRow - totalBoxes % boxesPerRow
add a comment |
One option is to add extra 'fake' boxes which will fill the available space in last row:
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=[styles.box, styles.boxFake]></View>
<View style=[styles.box, styles.boxFake]></View>
<View style=[styles.box, styles.boxFake]></View>
<View style=[styles.box, styles.boxFake]></View>
<View style=[styles.box, styles.boxFake]></View>
// reset all styles like backgroundColor, border, etc.
const styles = StyleSheet.create(
boxFake:
backgroundColor: 'transparent'
);
You can easy calculate the number of necessary 'fake' boxes by the formula:
fakeBoxes = boxesPerRow - totalBoxes % boxesPerRow
add a comment |
One option is to add extra 'fake' boxes which will fill the available space in last row:
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=[styles.box, styles.boxFake]></View>
<View style=[styles.box, styles.boxFake]></View>
<View style=[styles.box, styles.boxFake]></View>
<View style=[styles.box, styles.boxFake]></View>
<View style=[styles.box, styles.boxFake]></View>
// reset all styles like backgroundColor, border, etc.
const styles = StyleSheet.create(
boxFake:
backgroundColor: 'transparent'
);
You can easy calculate the number of necessary 'fake' boxes by the formula:
fakeBoxes = boxesPerRow - totalBoxes % boxesPerRow
One option is to add extra 'fake' boxes which will fill the available space in last row:
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=styles.box></View>
<View style=[styles.box, styles.boxFake]></View>
<View style=[styles.box, styles.boxFake]></View>
<View style=[styles.box, styles.boxFake]></View>
<View style=[styles.box, styles.boxFake]></View>
<View style=[styles.box, styles.boxFake]></View>
// reset all styles like backgroundColor, border, etc.
const styles = StyleSheet.create(
boxFake:
backgroundColor: 'transparent'
);
You can easy calculate the number of necessary 'fake' boxes by the formula:
fakeBoxes = boxesPerRow - totalBoxes % boxesPerRow
answered Mar 7 at 7:28
King JulienKing Julien
3,8342271115
3,8342271115
add a comment |
add a comment |
I took a different approach by using another view as a wrapper and doing the calculation of its width, this is easier to decide the column widths.
The only problem is that we should know the width of the item, wont be a problem in my case.
The code will be as below.
import React from 'react';
import StyleSheet, View, ScrollView from 'react-native';
export default class App extends React.Component
constructor(props)
super(props);
this.state =
width: 110
;
render()
//width of child is 110
const width = `$100 / parseInt(this.state.width / 110)%`;
return (
<ScrollView>
<View style=styles.container onLayout=this.onLayout.bind(this)>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
</View>
</ScrollView>
);
onLayout(e)
if (this.state.width !== e.nativeEvent.layout.width)
this.setState(
width: e.nativeEvent.layout.width
)
const styles = StyleSheet.create(
container:
flex: 1,
backgroundColor: '#fff',
alignItems: 'flex-start',
justifyContent: 'flex-start',
flexDirection: 'row',
flexWrap: 'wrap',
paddingTop: 40
,
box:
width: 100,
height: 100,
backgroundColor: 'green',
,
wrapper:
marginVertical: 10, alignItems: 'center'
);
add a comment |
I took a different approach by using another view as a wrapper and doing the calculation of its width, this is easier to decide the column widths.
The only problem is that we should know the width of the item, wont be a problem in my case.
The code will be as below.
import React from 'react';
import StyleSheet, View, ScrollView from 'react-native';
export default class App extends React.Component
constructor(props)
super(props);
this.state =
width: 110
;
render()
//width of child is 110
const width = `$100 / parseInt(this.state.width / 110)%`;
return (
<ScrollView>
<View style=styles.container onLayout=this.onLayout.bind(this)>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
</View>
</ScrollView>
);
onLayout(e)
if (this.state.width !== e.nativeEvent.layout.width)
this.setState(
width: e.nativeEvent.layout.width
)
const styles = StyleSheet.create(
container:
flex: 1,
backgroundColor: '#fff',
alignItems: 'flex-start',
justifyContent: 'flex-start',
flexDirection: 'row',
flexWrap: 'wrap',
paddingTop: 40
,
box:
width: 100,
height: 100,
backgroundColor: 'green',
,
wrapper:
marginVertical: 10, alignItems: 'center'
);
add a comment |
I took a different approach by using another view as a wrapper and doing the calculation of its width, this is easier to decide the column widths.
The only problem is that we should know the width of the item, wont be a problem in my case.
The code will be as below.
import React from 'react';
import StyleSheet, View, ScrollView from 'react-native';
export default class App extends React.Component
constructor(props)
super(props);
this.state =
width: 110
;
render()
//width of child is 110
const width = `$100 / parseInt(this.state.width / 110)%`;
return (
<ScrollView>
<View style=styles.container onLayout=this.onLayout.bind(this)>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
</View>
</ScrollView>
);
onLayout(e)
if (this.state.width !== e.nativeEvent.layout.width)
this.setState(
width: e.nativeEvent.layout.width
)
const styles = StyleSheet.create(
container:
flex: 1,
backgroundColor: '#fff',
alignItems: 'flex-start',
justifyContent: 'flex-start',
flexDirection: 'row',
flexWrap: 'wrap',
paddingTop: 40
,
box:
width: 100,
height: 100,
backgroundColor: 'green',
,
wrapper:
marginVertical: 10, alignItems: 'center'
);
I took a different approach by using another view as a wrapper and doing the calculation of its width, this is easier to decide the column widths.
The only problem is that we should know the width of the item, wont be a problem in my case.
The code will be as below.
import React from 'react';
import StyleSheet, View, ScrollView from 'react-native';
export default class App extends React.Component
constructor(props)
super(props);
this.state =
width: 110
;
render()
//width of child is 110
const width = `$100 / parseInt(this.state.width / 110)%`;
return (
<ScrollView>
<View style=styles.container onLayout=this.onLayout.bind(this)>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
<View style=[styles.wrapper, width: width ]>
<View style=styles.box></View>
</View>
</View>
</ScrollView>
);
onLayout(e)
if (this.state.width !== e.nativeEvent.layout.width)
this.setState(
width: e.nativeEvent.layout.width
)
const styles = StyleSheet.create(
container:
flex: 1,
backgroundColor: '#fff',
alignItems: 'flex-start',
justifyContent: 'flex-start',
flexDirection: 'row',
flexWrap: 'wrap',
paddingTop: 40
,
box:
width: 100,
height: 100,
backgroundColor: 'green',
,
wrapper:
marginVertical: 10, alignItems: 'center'
);
answered Mar 7 at 10:50
Guruparan GiritharanGuruparan Giritharan
5001620
5001620
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%2f55036364%2fhow-to-align-child-views-to-left-with-even-space-in-react-native%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
alignItems: 'center'
would center the blocks. Change it toalignItems: 'left'
and it should align to the left– Aniket G
Mar 7 at 5:04
its react-native and left is not supported :)
– Guruparan Giritharan
Mar 7 at 5:05
Right. Change
justifyContent: 'space-evenly'
tojustifyContent: 'flex-start'
stackoverflow.com/questions/36008969/…– Aniket G
Mar 7 at 5:06
Possible duplicate of How to justify (left, right, center) each child independently?
– Aniket G
Mar 7 at 5:07
@AniketG flext-start i'm trying to use the same row so flex start will have more space at the right which is the problem, as this is the same row its not a duplicate
– Guruparan Giritharan
Mar 7 at 5:10