Space between components in React Native styling2019 Community Moderator ElectionLoop inside React JSXWhat is the difference between using constructor vs getInitialState in React / React Native?Programmatically navigate using react router100% width in React Native FlexboxDisplay: Inline Equivalent in React NativeWhat is the difference between React Native and React?React Native FlatList stylingbackgroundColor in touchableHighlightCustom section style in sectionList REACT NATIVEReact native flexbox: set grow factor to generic presentational component
Doesn't allowing a user mode program to access kernel space memory and execute the IN and OUT instructions defeat the purpose of having CPU modes?
From an axiomatic set theoric approach why can we take uncountable unions?
PTIJ: Why does only a Shor Tam ask at the Seder, and not a Shor Mu'ad?
I can't die. Who am I?
Shifting between bemols and diesis in the key signature
How does Ehrenfest's theorem apply to the quantum harmonic oscillator?
Trig Subsitution When There's No Square Root
What ability score modifier does a javelin's damage use?
Does a difference of tense count as a difference of meaning in a minimal pair?
What do you call someone who likes to pick fights?
Specifying a starting column with colortbl package and xcolor
Gaining more land
How do we create new idioms and use them in a novel?
Windows Server Data Center Edition - Unlimited Virtual Machines
Recommendation letter by significant other if you worked with them professionally?
For which categories of spectra is there an explicit description of the fibrant objects via lifting properties?
MySQL importing CSV files really slow
Is a piano played in the same way as a harmonium?
What is the population of Romulus in the TNG era?
Proving a statement about real numbers
In the late 1940’s to early 1950’s what technology was available that could melt ice?
Getting the || sign while using Kurier
Why do we say ‘pairwise disjoint’, rather than ‘disjoint’?
Why couldn't the separatists legally leave the Republic?
Space between components in React Native styling
2019 Community Moderator ElectionLoop inside React JSXWhat is the difference between using constructor vs getInitialState in React / React Native?Programmatically navigate using react router100% width in React Native FlexboxDisplay: Inline Equivalent in React NativeWhat is the difference between React Native and React?React Native FlatList stylingbackgroundColor in touchableHighlightCustom section style in sectionList REACT NATIVEReact native flexbox: set grow factor to generic presentational component
I have 6 View components (shown in the picture) , I want to have space between all 6 View components.
My code:
<View style=flexDirection:'column',flex:6>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between'>
<View style=backgroundColor:'red',flex:1>
</View>
<View style=backgroundColor:'blue',flex:1>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between'>
<View style=backgroundColor:'white',flex:1>
</View>
<View style=backgroundColor:'black',flex:1>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between'>
<View style=backgroundColor:'gray',flex:1>
</View>
<View style=backgroundColor:'yellow',flex:1>
</View>
</View>
</View>
reactjs gridview react-native flexbox
asked Aug 4 '17 at 9:35
Behdad AhmadiBehdad Ahmadi
3061618
add a comment |
I have 6 View components (shown in the picture) , I want to have space between all 6 View components.
My code:
<View style=flexDirection:'column',flex:6>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between'>
<View style=backgroundColor:'red',flex:1>
</View>
<View style=backgroundColor:'blue',flex:1>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between'>
<View style=backgroundColor:'white',flex:1>
</View>
<View style=backgroundColor:'black',flex:1>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between'>
<View style=backgroundColor:'gray',flex:1>
</View>
<View style=backgroundColor:'yellow',flex:1>
</View>
</View>
</View>
reactjs gridview react-native flexbox
asked Aug 4 '17 at 9:35
Behdad AhmadiBehdad Ahmadi
3061618
have you tried to simply add amargin: 10to your inner View elements?
– VF_
Aug 4 '17 at 9:55
add a comment |
I have 6 View components (shown in the picture) , I want to have space between all 6 View components.
My code:
<View style=flexDirection:'column',flex:6>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between'>
<View style=backgroundColor:'red',flex:1>
</View>
<View style=backgroundColor:'blue',flex:1>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between'>
<View style=backgroundColor:'white',flex:1>
</View>
<View style=backgroundColor:'black',flex:1>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between'>
<View style=backgroundColor:'gray',flex:1>
</View>
<View style=backgroundColor:'yellow',flex:1>
</View>
</View>
</View>
reactjs gridview react-native flexbox
asked Aug 4 '17 at 9:35
Behdad AhmadiBehdad Ahmadi
3061618
I have 6 View components (shown in the picture) , I want to have space between all 6 View components.
My code:
<View style=flexDirection:'column',flex:6>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between'>
<View style=backgroundColor:'red',flex:1>
</View>
<View style=backgroundColor:'blue',flex:1>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between'>
<View style=backgroundColor:'white',flex:1>
</View>
<View style=backgroundColor:'black',flex:1>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between'>
<View style=backgroundColor:'gray',flex:1>
</View>
<View style=backgroundColor:'yellow',flex:1>
</View>
</View>
</View>
reactjs gridview react-native flexbox
reactjs gridview react-native flexbox
asked Aug 4 '17 at 9:35
Behdad AhmadiBehdad Ahmadi
3061618
asked Aug 4 '17 at 9:35
Behdad AhmadiBehdad Ahmadi
3061618
asked Aug 4 '17 at 9:35
Behdad AhmadiBehdad Ahmadi
3061618
asked Aug 4 '17 at 9:35
Behdad AhmadiBehdad Ahmadi
3061618
asked Aug 4 '17 at 9:35
Behdad AhmadiBehdad Ahmadi
3061618
3061618
have you tried to simply add amargin: 10to your inner View elements?
– VF_
Aug 4 '17 at 9:55
add a comment |
have you tried to simply add amargin: 10to your inner View elements?
– VF_
Aug 4 '17 at 9:55
have you tried to simply add a
margin: 10 to your inner View elements?– VF_
Aug 4 '17 at 9:55
have you tried to simply add a
margin: 10 to your inner View elements?– VF_
Aug 4 '17 at 9:55
add a comment |
4 Answers
4
active
oldest
votes
Try to add padding to the element then and another blank view in each row, padding make space between each item
<View style=
flexDirection:'column',
flex:1,
>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'>
<View style=backgroundColor:'red',flex:2,padding:'10'>
</View>
<View style=flex:0.1/>
<View style=backgroundColor:'blue',flex:2,padding:'10'>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'>
<View style=backgroundColor:'white',flex:2,padding:'10'>
</View>
<View style=flex:0.1/>
<View style=backgroundColor:'black',flex:2,padding:'10'>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'>
<View style=backgroundColor:'gray',flex:1,padding:'10'>
</View>
<View style=flex:0.1/>
<View style=backgroundColor:'yellow',flex:1,padding:'10'>
</View>
</View>
answered Aug 4 '17 at 9:58
Maulana PrambadiMaulana Prambadi
54135
add a comment |
You can simply add margins to the elements and it will work fine.
<View style=flexDirection:'column',flex:6>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'red',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'blue',flex:1, marginLeft: 5>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'white',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'black',flex:1, marginLeft: 5>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'gray',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'yellow',flex:1, marginLeft: 5>
</View>
</View>
</View>answered Aug 4 '17 at 10:02
Tarik FojnicaTarik Fojnica
25626
add a comment |
you have 2 solution in this case
first use margin/padding for make air between flex element
and the other way is set justifyContent to 'space-between' || 'space-aroun'
but you must know about some information for use best solution in different case
1- (margin-padding)
in some case (more case) , padding better margin
as you now , if we have box ( means element ), you have two space ,
first between content and border [ Inner space ]
second , space between border and another foreign box element [ outer space ]
if you have an element and you want move element in your style you must use margin , because if you use padding for your element, inner space changed and in many case this approach create some crash in your element ,
if you want use padding you must create one View and wrap all of your element and set padding for wraper for you
and if you want use space-betwwen || space-around , you must know this ,
space-between and space-around have one diff
in space-between , space produced between elements and not create space between your element with sides
and space-around set space with elements and with sides
answered May 26 '18 at 22:09
hamidreza nikooniahamidreza nikoonia
16210
add a comment |
attachcontainer
flexDirection: 'row',
justifyContent: 'space-between'
add in your style
answered Mar 7 at 4:57
James SivaJames Siva
554
Please format your code properly with some explanation.
– Abhishek Gurjar
Mar 7 at 5:16
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%2f45503294%2fspace-between-components-in-react-native-styling%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try to add padding to the element then and another blank view in each row, padding make space between each item
<View style=
flexDirection:'column',
flex:1,
>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'>
<View style=backgroundColor:'red',flex:2,padding:'10'>
</View>
<View style=flex:0.1/>
<View style=backgroundColor:'blue',flex:2,padding:'10'>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'>
<View style=backgroundColor:'white',flex:2,padding:'10'>
</View>
<View style=flex:0.1/>
<View style=backgroundColor:'black',flex:2,padding:'10'>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'>
<View style=backgroundColor:'gray',flex:1,padding:'10'>
</View>
<View style=flex:0.1/>
<View style=backgroundColor:'yellow',flex:1,padding:'10'>
</View>
</View>
answered Aug 4 '17 at 9:58
Maulana PrambadiMaulana Prambadi
54135
add a comment |
Try to add padding to the element then and another blank view in each row, padding make space between each item
<View style=
flexDirection:'column',
flex:1,
>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'>
<View style=backgroundColor:'red',flex:2,padding:'10'>
</View>
<View style=flex:0.1/>
<View style=backgroundColor:'blue',flex:2,padding:'10'>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'>
<View style=backgroundColor:'white',flex:2,padding:'10'>
</View>
<View style=flex:0.1/>
<View style=backgroundColor:'black',flex:2,padding:'10'>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'>
<View style=backgroundColor:'gray',flex:1,padding:'10'>
</View>
<View style=flex:0.1/>
<View style=backgroundColor:'yellow',flex:1,padding:'10'>
</View>
</View>
answered Aug 4 '17 at 9:58
Maulana PrambadiMaulana Prambadi
54135
add a comment |
Try to add padding to the element then and another blank view in each row, padding make space between each item
<View style=
flexDirection:'column',
flex:1,
>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'>
<View style=backgroundColor:'red',flex:2,padding:'10'>
</View>
<View style=flex:0.1/>
<View style=backgroundColor:'blue',flex:2,padding:'10'>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'>
<View style=backgroundColor:'white',flex:2,padding:'10'>
</View>
<View style=flex:0.1/>
<View style=backgroundColor:'black',flex:2,padding:'10'>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'>
<View style=backgroundColor:'gray',flex:1,padding:'10'>
</View>
<View style=flex:0.1/>
<View style=backgroundColor:'yellow',flex:1,padding:'10'>
</View>
</View>
answered Aug 4 '17 at 9:58
Maulana PrambadiMaulana Prambadi
54135
Try to add padding to the element then and another blank view in each row, padding make space between each item
<View style=
flexDirection:'column',
flex:1,
>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'>
<View style=backgroundColor:'red',flex:2,padding:'10'>
</View>
<View style=flex:0.1/>
<View style=backgroundColor:'blue',flex:2,padding:'10'>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'>
<View style=backgroundColor:'white',flex:2,padding:'10'>
</View>
<View style=flex:0.1/>
<View style=backgroundColor:'black',flex:2,padding:'10'>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'>
<View style=backgroundColor:'gray',flex:1,padding:'10'>
</View>
<View style=flex:0.1/>
<View style=backgroundColor:'yellow',flex:1,padding:'10'>
</View>
</View>
answered Aug 4 '17 at 9:58
Maulana PrambadiMaulana Prambadi
54135
edited Aug 4 '17 at 10:08
answered Aug 4 '17 at 9:58
Maulana PrambadiMaulana Prambadi
54135
answered Aug 4 '17 at 9:58
Maulana PrambadiMaulana Prambadi
54135
answered Aug 4 '17 at 9:58
Maulana PrambadiMaulana Prambadi
54135
54135
add a comment |
add a comment |
You can simply add margins to the elements and it will work fine.
<View style=flexDirection:'column',flex:6>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'red',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'blue',flex:1, marginLeft: 5>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'white',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'black',flex:1, marginLeft: 5>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'gray',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'yellow',flex:1, marginLeft: 5>
</View>
</View>
</View>answered Aug 4 '17 at 10:02
Tarik FojnicaTarik Fojnica
25626
add a comment |
You can simply add margins to the elements and it will work fine.
<View style=flexDirection:'column',flex:6>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'red',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'blue',flex:1, marginLeft: 5>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'white',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'black',flex:1, marginLeft: 5>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'gray',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'yellow',flex:1, marginLeft: 5>
</View>
</View>
</View>answered Aug 4 '17 at 10:02
Tarik FojnicaTarik Fojnica
25626
add a comment |
You can simply add margins to the elements and it will work fine.
<View style=flexDirection:'column',flex:6>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'red',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'blue',flex:1, marginLeft: 5>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'white',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'black',flex:1, marginLeft: 5>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'gray',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'yellow',flex:1, marginLeft: 5>
</View>
</View>
</View>answered Aug 4 '17 at 10:02
Tarik FojnicaTarik Fojnica
25626
You can simply add margins to the elements and it will work fine.
<View style=flexDirection:'column',flex:6>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'red',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'blue',flex:1, marginLeft: 5>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'white',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'black',flex:1, marginLeft: 5>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'gray',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'yellow',flex:1, marginLeft: 5>
</View>
</View>
</View><View style=flexDirection:'column',flex:6>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'red',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'blue',flex:1, marginLeft: 5>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'white',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'black',flex:1, marginLeft: 5>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'gray',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'yellow',flex:1, marginLeft: 5>
</View>
</View>
</View><View style=flexDirection:'column',flex:6>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'red',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'blue',flex:1, marginLeft: 5>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'white',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'black',flex:1, marginLeft: 5>
</View>
</View>
<View style=flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10>
<View style=backgroundColor:'gray',flex:1, marginRight: 5>
</View>
<View style=backgroundColor:'yellow',flex:1, marginLeft: 5>
</View>
</View>
</View>answered Aug 4 '17 at 10:02
Tarik FojnicaTarik Fojnica
25626
answered Aug 4 '17 at 10:02
Tarik FojnicaTarik Fojnica
25626
answered Aug 4 '17 at 10:02
Tarik FojnicaTarik Fojnica
25626
answered Aug 4 '17 at 10:02
Tarik FojnicaTarik Fojnica
25626
25626
add a comment |
add a comment |
you have 2 solution in this case
first use margin/padding for make air between flex element
and the other way is set justifyContent to 'space-between' || 'space-aroun'
but you must know about some information for use best solution in different case
1- (margin-padding)
in some case (more case) , padding better margin
as you now , if we have box ( means element ), you have two space ,
first between content and border [ Inner space ]
second , space between border and another foreign box element [ outer space ]
if you have an element and you want move element in your style you must use margin , because if you use padding for your element, inner space changed and in many case this approach create some crash in your element ,
if you want use padding you must create one View and wrap all of your element and set padding for wraper for you
and if you want use space-betwwen || space-around , you must know this ,
space-between and space-around have one diff
in space-between , space produced between elements and not create space between your element with sides
and space-around set space with elements and with sides
answered May 26 '18 at 22:09
hamidreza nikooniahamidreza nikoonia
16210
add a comment |
you have 2 solution in this case
first use margin/padding for make air between flex element
and the other way is set justifyContent to 'space-between' || 'space-aroun'
but you must know about some information for use best solution in different case
1- (margin-padding)
in some case (more case) , padding better margin
as you now , if we have box ( means element ), you have two space ,
first between content and border [ Inner space ]
second , space between border and another foreign box element [ outer space ]
if you have an element and you want move element in your style you must use margin , because if you use padding for your element, inner space changed and in many case this approach create some crash in your element ,
if you want use padding you must create one View and wrap all of your element and set padding for wraper for you
and if you want use space-betwwen || space-around , you must know this ,
space-between and space-around have one diff
in space-between , space produced between elements and not create space between your element with sides
and space-around set space with elements and with sides
answered May 26 '18 at 22:09
hamidreza nikooniahamidreza nikoonia
16210
add a comment |
you have 2 solution in this case
first use margin/padding for make air between flex element
and the other way is set justifyContent to 'space-between' || 'space-aroun'
but you must know about some information for use best solution in different case
1- (margin-padding)
in some case (more case) , padding better margin
as you now , if we have box ( means element ), you have two space ,
first between content and border [ Inner space ]
second , space between border and another foreign box element [ outer space ]
if you have an element and you want move element in your style you must use margin , because if you use padding for your element, inner space changed and in many case this approach create some crash in your element ,
if you want use padding you must create one View and wrap all of your element and set padding for wraper for you
and if you want use space-betwwen || space-around , you must know this ,
space-between and space-around have one diff
in space-between , space produced between elements and not create space between your element with sides
and space-around set space with elements and with sides
answered May 26 '18 at 22:09
hamidreza nikooniahamidreza nikoonia
16210
you have 2 solution in this case
first use margin/padding for make air between flex element
and the other way is set justifyContent to 'space-between' || 'space-aroun'
but you must know about some information for use best solution in different case
1- (margin-padding)
in some case (more case) , padding better margin
as you now , if we have box ( means element ), you have two space ,
first between content and border [ Inner space ]
second , space between border and another foreign box element [ outer space ]
if you have an element and you want move element in your style you must use margin , because if you use padding for your element, inner space changed and in many case this approach create some crash in your element ,
if you want use padding you must create one View and wrap all of your element and set padding for wraper for you
and if you want use space-betwwen || space-around , you must know this ,
space-between and space-around have one diff
in space-between , space produced between elements and not create space between your element with sides
and space-around set space with elements and with sides
answered May 26 '18 at 22:09
hamidreza nikooniahamidreza nikoonia
16210
answered May 26 '18 at 22:09
hamidreza nikooniahamidreza nikoonia
16210
answered May 26 '18 at 22:09
hamidreza nikooniahamidreza nikoonia
16210
answered May 26 '18 at 22:09
hamidreza nikooniahamidreza nikoonia
16210
16210
add a comment |
add a comment |
attachcontainer
flexDirection: 'row',
justifyContent: 'space-between'
add in your style
answered Mar 7 at 4:57
James SivaJames Siva
554
Please format your code properly with some explanation.
– Abhishek Gurjar
Mar 7 at 5:16
add a comment |
attachcontainer
flexDirection: 'row',
justifyContent: 'space-between'
add in your style
answered Mar 7 at 4:57
James SivaJames Siva
554
Please format your code properly with some explanation.
– Abhishek Gurjar
Mar 7 at 5:16
add a comment |
attachcontainer
flexDirection: 'row',
justifyContent: 'space-between'
add in your style
answered Mar 7 at 4:57
James SivaJames Siva
554
attachcontainer
flexDirection: 'row',
justifyContent: 'space-between'
add in your style
answered Mar 7 at 4:57
James SivaJames Siva
554
edited Mar 7 at 5:18
answered Mar 7 at 4:57
James SivaJames Siva
554
answered Mar 7 at 4:57
James SivaJames Siva
554
answered Mar 7 at 4:57
James SivaJames Siva
554
554
Please format your code properly with some explanation.
– Abhishek Gurjar
Mar 7 at 5:16
add a comment |
Please format your code properly with some explanation.
– Abhishek Gurjar
Mar 7 at 5:16
Please format your code properly with some explanation.
– Abhishek Gurjar
Mar 7 at 5:16
Please format your code properly with some explanation.
– Abhishek Gurjar
Mar 7 at 5:16
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%2f45503294%2fspace-between-components-in-react-native-styling%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
have you tried to simply add a
margin: 10to your inner View elements?– VF_
Aug 4 '17 at 9:55