Stack Overflow
Stack Overflow

Questions tagged [react-native-flexbox]

137 questions
1
vote
2 answers

Vertically align a component in React Native

I want my items to be aligned like this: But somehow its like this: The code is:
nanakondor
  • 615
  • 11
  • 25
1
vote
0 answers

React Native Flexbox alignment discrepancy on bare RN project vs Expo Snack demo

I'm developing a personal project to experiment with TypeScript, React Native and styled-components, in which I have a layout that is supposed to look like this: But I'm kinda struggling to align the two lines of text together with Flexbox. Below…
sandmann
  • 363
  • 2
  • 13
1
vote
0 answers

Flex Box Styling

I have a problem with styling 3 nested components. Background: I want the user to enter tags. On testing it became clear, that many user, didn't know that they have to press space to save the tag (a problem, when a user only wants to enter one…
Fredyonge
  • 300
  • 1
  • 4
  • 17
1
vote
3 answers

React Native: Make Each Child of ScrollView Full Height

I have a ScrollView which has two children, and I want each of the children to be the full height of the available space on the screen, meaning view 1 fills the whole screen, and then I scroll down to start to see part of slide 2. If I scroll all…
Nick Tiberi
  • 1,132
  • 12
  • 20
1
vote
1 answer

React Native flexShrink default is 1, but it seems to be 0

According to the Docs, default value for flexShrink in RN is 1. But, given the code below, I have to explicitly set it to 1 to make it work, it seems to be 0 by default. The expected behaviour is that all the inner containers should shrink in width,…
nikoloz
  • 67
  • 7
1
vote
1 answer

React Native text and image side by side alignment issue

I'm trying to adjust the forward icon on bottom right corner and text center aligned horizontally having both in same row. NOTE: I have local images that works but here I've just used sizes for dummy image URL which is not…
IsmailS
  • 10,797
  • 21
  • 82
  • 134
1
vote
1 answer

ScrollView isn't appering

I was messing with my code and suddenly the ScrollView decided to disappear. For some reason, the ScrollView works "properly" inside the Character bar View but when it is inside of the base View it just isn't there. export default class…
minipepsi
  • 13
  • 3
1
vote
1 answer

Overriding a Single Style Prop from Stylesheet Using React Native

With React Native, I'm looking to use StyleSheet to define a style and then use that style in numerous components, but I would like to change or override individual props for a few components. For example, a stack of 10 views with 5 different colors…
SunnyNonsense
  • 410
  • 3
  • 22
1
vote
1 answer

React Native: Make a view take the whole screen when other view is not present

This may seem like a basic question, but I can't seem to figure it out or properly word a search on this. I have a View with two other Views in it, one of which sometimes is hidden. So the component looks something like this: function MyComponent…
theJuls
  • 6,788
  • 14
  • 73
  • 160
1
vote
2 answers

React-Native fill space

I have some view in my app, first and last have fixed dimension, but the middle view I would fill the remaining space. How can I do it? let probableView = (!someVariable) ? null : (); ...
Vito Lipari
  • 795
  • 8
  • 35
1
vote
1 answer

Adding items into n column grids using flex

I am trying to create a list of items which looks similar to the below image. Currently I am creating a RowComponent and including ItemContainer component inside to create the mentioned effect. const styles = StyleSheet.create({ containerStyle: { …
Muljayan
  • 3,588
  • 10
  • 30
  • 54
1
vote
2 answers

How do I make one take all available space when there is something else on the same row?

Im trying to make a flatlist with some data and a button on each row. I have tried to do it in a typical "web" fashion, with nested views and formating the elements relative to their parent, but with no success. this is the current structure of the…
Sondre Ljovshin
  • 112
  • 9
1
vote
2 answers

Is it possible to row-reverse in a 2 columns Flatlist?

I create a 2 columns FLatlist in react-native-android 1 | 2 ------------ 3 | 4 I want this 2 | 1 4 | 3 I try these:
Ali
  • 1,127
  • 1
  • 10
  • 23
1
vote
1 answer

React Native - Issues with / overflow

I'm struggling trying to set the correct styles to avoid some issues with views overflow. So, for the image above I need that the the yellow box shrinks as the orange box grows(as the text grows), but limiting the yellow box to a minWidth=100 and…
Jose Ortegano
  • 41
  • 1
  • 2
1
vote
2 answers

Aligning with flexbox in react native

I have this screen on my app which corresponds to this code render() { return ( …
David Geismar
  • 3,152
  • 6
  • 41
  • 80
1 2 3
…
9 10