Stack Overflow
Stack Overflow

Questions tagged [react-native-flexbox]

137 questions
3
votes
1 answer

alignItems: 'flex-end' doesn't work properly (it doesb't cover the whole page) - react native

So in my homepage I have 4 buttons which I've laid out with flex. I've set the parent's flex: 1, which means it's covering the whole page (I've made sure of that with backgroundColor). My problem is that when I set alignItems: 'flex-end', the…
The Monster
  • 164
  • 3
  • 13
3
votes
0 answers

react native image with resizeMode contain, move inside the sub container

I currently write a react native application, And I want to show 2 image at the top of my component, So I use my image with: resizeMode:'contain' Ah it works, but when I use it, it create a subcontainer and create a marge between the top of my…
user8023733
3
votes
3 answers

How can I get the image width to fill the card and the height to be flexible?

I'm trying to set the dimensions of the image so that the width will always take up the full width of the card (minus the horizontal margin) and with a flexible height, so that it can scale as it needs to. How can I do this? It seems that the style…
bloppit
  • 621
  • 8
  • 22
2
votes
2 answers

not able to wrap the components in reactnative

So i am making a custom multiple select component . when you click on the TextInput the dropdown will appear(the items in the dropdown comes from flatlist component) and from that drop down you can search the item you want to select and after…
Shail Patel
  • 187
  • 2
  • 11
2
votes
1 answer

React Native image: why does parent view stay same height as 'cover' when set to 'contain'?

I have the following image in my React Native app I want to have this image inside a parent element with no space above or below it, and I want the image to not overshoot the left or right sides of the screen When I have the code like this
gkeenley
  • 6,088
  • 8
  • 54
  • 129
2
votes
1 answer

Flexbox does not constraint itself to parent width and always overflows

I am struggling to understand why flexbox will not constraint itself to the parent component width. I have tried multiple approaches without much luck and my buttons are always overflowing the parent component. Here is what I have so far:…
mr3mo
  • 135
  • 1
  • 10
2
votes
1 answer

React Native FlexBox: Why does adding `alignItems` prevent child from having 100% width?

In my React Native app, I have a parent View that container a child View that contains a Text element. By default, the child View's width stretches to fill the parent. But if I add alignItems: 'center', the child moves to the center but also its…
gkeenley
  • 6,088
  • 8
  • 54
  • 129
2
votes
1 answer

React Native vertical text alignment when using explicit height

I want to vertically center my text inside a view with an explicit height. Center text vertically in react-native did not fully answer my question because they don't use explicit height. When I use …
quantumpotato
  • 9,637
  • 14
  • 70
  • 146
2
votes
0 answers

How to fix marginHorizontal property in Flexbox not working?

I'm setting up some screens for an app using React-Native, and I want to fully understand how Flexbox works. I'm trying to set the marginHorizontal property in style of textinput and button, but nothing happens. If I set the specific value of width…
xcsob
  • 837
  • 1
  • 12
  • 27
2
votes
3 answers

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…
inhwrbp
  • 569
  • 2
  • 4
  • 17
2
votes
2 answers

Flexbox container not stretching entire screen

I'm having an issue with flexbox. I want to have a opaque bar over the top of my header. But i just cant seem to make it work. See image: I have no idea how to make it stretch the entire width of the screen. Here is my entire screen file: render()…
Jochem Warmenhoven
  • 43
  • 5
1
vote
2 answers

React native make image layout

If I want to make a layout of this genre how would you do it!? I tried with Flatlist numColumns={3} columnWrapperStyle={{ flex: 1/3, justifyContent: 'space-between' }} But the last two are always one on the right and one on the left... The list can…
kamikazzi
  • 43
  • 9
1
vote
0 answers

React Native: minHeight in percent is not working correctly like in Web

Below are my experimental result. Does those seems right? minHeight in percent is not working correctly like in Web, is there any workaround about it? #--- flexDirection = column; React Native Version = 0.68.4 ; minHeight always cross height and…
Experiment
  • 70
  • 7
1
vote
1 answer

flexbox flex grow View Container that contain DeliverNow! Current location need to take whole space

** here is my home page code ** problem is View Container that contain DeliverNow! Current location need to take whole space. but it doesn't taking the whole left space and UserIcon need to come at…
Ash Ketchum Kento
  • 21
  • 2
1
vote
1 answer

How to add border-image in React Native

How do I add an image border like this CSS in react native? img { border: 20px solid black; border-image: url("xyzborderimage.jpg") 30 round; border-radius: 2px; height: 500px; width: 250; }
Fahad Shaikh
  • 11
  • 2
1 2
3
…
9 10