Stack Overflow
Stack Overflow

Questions tagged [react-native-flexbox]

137 questions
0
votes
1 answer

How to get all child views to overlap and fill their parent w/ React Native Flexbox

I want to have all children filling the available space, and overlapping one another, so only the last child is visible. // Not visible (if bg color set on next child) I've…
Shane
  • 2,315
  • 3
  • 21
  • 33
0
votes
2 answers

Layouting textbox with Flexbox in react native

I am trying to layouting my textbox like this And here is my code that I am trying to do render() { return (
wapt49
  • 213
  • 2
  • 16
0
votes
2 answers

In React Native, how do I position and slide an element thats bigger than screen view?

In the diagram below, each panel is the be the size of the screen and they are to slide very quickly left and right as one large element. If the slide transition is problematic its okay for time = 0 so it's instantaneous. The contents of each panel…
PrimeLens
  • 2,547
  • 4
  • 23
  • 28
0
votes
1 answer

React-Native display image without declaring dimensions

In, React-Native, is it possible to display an image without declaring width and height inside style prop ? I would like the image to take all the space it has or to be rendered at its actual dimensions. (whether resizeMode is set to cover for…
Kevin Amiranoff
  • 13,440
  • 11
  • 59
  • 90
0
votes
1 answer

React Native: How to styling the TextInput?

So I have component in my React Native app This component should render the TextInput at the bottom. When the keyboard is showing, the container (includes TextInput and Send Button) should move above the keyboard. Also, I want to make the input…
yogieputra
  • 637
  • 2
  • 14
  • 28
0
votes
2 answers

I can't seem to change the flex property on this react native view

I'm using shoutem/ui http://shoutem.github.io/docs/ui-toolkit/components/rows components and I can't seem to get this row item to have a smaller height - it seems to be taking the full flex height. how do I get the orange area to be smaller? I…
MonkeyBonkey
  • 46,433
  • 78
  • 254
  • 460
0
votes
1 answer

React Native - how to catch touch events behind an absolute position component

I'm trying to have a popup dialog (created as a component with position: 'absolute') and to close it when user clicks outside of the popup. I'm new to React Native so other things I did might be wrong, forgive me for that :) This is a screenshot of…
gioravered
  • 1,758
  • 3
  • 19
  • 30
0
votes
1 answer

React Native `alignItems: 'flex-end'` hides content in TabBarIOS component

This question is similar to this one however I have different requirements. I have a component that renders a from react-native-camera. I need to place a button to take a picture at the bottom of the component but above…
rosendin
  • 611
  • 1
  • 10
  • 18
0
votes
1 answer

Change active state and flex transition

I have a react component class like below both touchableopacity components have the value of flex 2 so they equally…
T. Cem Yılmaz
  • 500
  • 9
  • 30
0
votes
1 answer

React native Scrollview/flex layout behaves inconsistent after minimizing the app on Android

I’m taking my first step in react native land and trying to understand the layouting in regards to the soft keyboard. I’ve created a new react project via rect-native init and written the following component:
Pomi Form
  • 23
  • 5
0
votes
1 answer

React Native require() network vs. static image resize

How come when I use a network image,
AnthonyJoeseph
  • 223
  • 3
  • 10
0
votes
1 answer

Flexbox positioning text inside image

I'm using React Native and trying to create a specific layout. I have an image, vertically & horizontally centred (within a View) and some Text on top of the image also vertically & horizontally centred. The Text needs to come on top of…
John
  • 3,529
  • 14
  • 42
  • 48
0
votes
1 answer

React Native: as overflow = hidden on Android, how can we design floating action button

As mentioned in the documentation, on Android overflow is set to hidden and cannot be changed. Hence this raises this kind of problems. My question is how can we make floating action buttons with react native. I want to have a button like this…
user2015762
  • 488
  • 3
  • 12
-1
votes
1 answer

Flex grid with either 1 column or 2 columns

I have a design spec that looks like this: As you can see, the container can either have a row of 2 columns or a row of 1 column. The row with 2 columns also has a space between. Using flex, how can I make this possible? The columns comprise of…
user023425
  • 169
  • 8
-1
votes
1 answer

react native how will two cards align in a row (when dynamically fetching data from server to card)

Code for mapping data from server: { this.state.items.map((item, key) => ( …
Nazeer c s
  • 15
  • 1
  • 8
1 2 3
…
9
10