Questions tagged [react-native-flexbox]
137 questions
0
votes
0 answers
Make nested flexbox child take all height
In react native, I am trying to make the flex "columns" inside the rows take up the whole height but can't accomplish it. I tried using 'alignItems: "stretch"' but that did not work either.
Here's a live preview:…
varinme
- 45
- 1
- 5
0
votes
2 answers
How to fix commas being inbetween flex components in react native
I am new to react native, and so I am sure there is some very obvious fix to this, but between my flex views in react native, there is a tiny comma there for some reason. It is not very obvious, but still noticeable. I was wondering
At normal zoom,…
James Gaunt
- 119
- 1
- 14
0
votes
2 answers
Bottom content covers the main content when keyboard is visible
I have a problem with device keyboard main content and bottom/footer content when the keyboard is visible. In this example I have 3 InpunTexts as the main content of the screen and a long text in the bottom (in the original source it is the company…
Jon
- 891
- 13
- 32
0
votes
0 answers
CSS FlexBox issue
Can someone tell me how I can reduce width automatically on new child,
const Container = styled(View)(
{
padding: 3,
flex: 1,
minHeight: "50%",
minWidth: 300,
},
variant({
prop: "type",
variants: {
one: { flex:…
Curious_guy
- 161
- 11
0
votes
1 answer
Create Layout with absolute Values and Flexbox in React Native
I am a iOS Developer trying to learn React Native. Currently I am trying to figure out how to create a layout like this with FlexBox:
I am not sure how to use relative values for with in react native. When I am trying to implement it I am getting…
Beeke
- 163
- 1
- 11
0
votes
0 answers
React-Native, space-between and wrap in FlatList
I have implemented what I want with View but not with FlatList, I don't know how to pass some styles to the Flatlist.
FlatList
Giannhs Ker
- 97
- 1
- 8
0
votes
1 answer
React-native: space-between only if content smaller than screen
I've got a simple screen with some text and a button at the bottom. The problem is that on some phones/sizes all the content takes around 3/4 height of the screen leaving a gap at the bottom. That's why I did: flex: 1, and space-between as below.…
Wasteland
- 4,889
- 14
- 45
- 91
0
votes
1 answer
Container with two columns: the first one with fixed width and the second one with flex grow
I'm trying to to an easy layout. I've a View container with flexDirection = row.
The first column should contains an image with fixed width and the second column a lot of text.
This is my code:
whitecircle
- 237
- 9
- 34
0
votes
1 answer
weird layout behavior in react native when typing in keyboard mode
I have an image(logo) on top of a textInput element after initial animation.the animation works fine and puts the logo at the correct place
when i open the keyboard the logo stays at the same place. but when i fill the fields completely the logo…
Swagath Shetty
- 153
- 1
- 2
- 9
0
votes
1 answer
Reduce space between React Native views
I am currently working on a React Native app with the following layout:
(full source code can be found at https://snack.expo.io/@ajaybhatta49/new-project, but I think the issue is in this file)
import React, {useState} from 'react'
import { View,…
ajaybhatta49
- 48
- 8
0
votes
1 answer
react native flexbox row and cloumn
Good Day! I am working on a design task to develop myself in reactnative flex concepts. I am trying to achieve the below design
Anyone can guide me how to get the above output. I have one container which is "FlexDirection:Row" and ItemID, ItemName…
Still_Learning
- 209
- 3
- 14
0
votes
0 answers
View go off my screen with flexDirection "row"
I try to display a comment space with comment bubbles that have variable widths depending on the size of the text or the quote.
If the message is long, my text wrap as it should.
However, when it's my quote that is long, I wish it could only be one…
Viktor Jovanovic
- 491
- 5
- 15
0
votes
2 answers
How to prevent status bar overlap due to "justify-content: center" when keyboard shows?
I center all the content of my screen vertically with justifyContent: center.
When I focus an input in that screen and the keyboard shows up, the top content overlaps with the status bar even though I'm using SafeAreaView.
How to prevent that…
Moaaz Bhnas
- 1,010
- 7
- 18
- 36
0
votes
1 answer
React Native: How to make TouchableOpacity shrink to fit Text contents?
I have a TouchableOpacity with a Text component inside it in my React Native app, and I want the TouchableOpacity to be only as wide as the Text. I've tried doing this:
…
gkeenley
- 6,088
- 8
- 54
- 129
0
votes
1 answer
React Native : Aligning images side by side on one line with a dynamic number of images
I am new to react native and I am trying to implement this view :
The view I try to implement
The first difficulty I encounter is to show the little green circles side by side.
The second comes from the fact that the number of little green circles…
Santo R
- 49
- 3