Questions tagged [react-native-flexbox]
137 questions
105
votes
14 answers
Make an item stick to the bottom using flex in react-native
Suppose this is the layout:
...
...
...
...
…
Karl
- 1,689
- 3
- 15
- 23
35
votes
5 answers
React-native: how to wrap FlatList items
I have a list of Terms that are returned by a query. Each is a single word. Currently my FlatList renders each word into a button on the same row (horizontal={true})
I would like the buttons to wrap like normal text would. But I absolutely do not…
mrmagoo
- 453
- 1
- 4
- 5
27
votes
7 answers
Spacing before and after a horizontal FlatList (React Native)
I'm trying to create a horizontal FlatList that has some spacing around it. I was able to get the beginning spacing correct with paddingLeft on the list, but paddingRight on the list doesn't seem to put any space after it (if I scroll all the way to…
Saad
- 49,729
- 21
- 73
- 112
21
votes
2 answers
React-Native: Margin with percentage value
I'm trying to use percentage value for margin style attribute on my React Native project but it seems to reduce the height of one of my View component. If I replace percentage value by an absolute value, there is no more issue and it works fine. Did…
Thomas Lupo
- 231
- 1
- 2
- 5
16
votes
6 answers
ScrollView minHeight to take up all the space
I have a ScrollView which content doesn't necessarily exceeds it's size. Let's say it's a form where, upon errors, it expands to add error messages and then it exceeds the ScrollView size and thus is why I'm using that scroll.
The thing is that I…
Felipe92
- 341
- 1
- 2
- 6
12
votes
1 answer
Wrap children inside view React native
I have the following code:
renderActionButtons(actionButtons){
let actionButtonsContent = actionButtons.map((button, i) => {
return {this.updateConversation(button);}}…
Sooraj
- 9,717
- 9
- 64
- 99
10
votes
8 answers
how to make react native web full height?
I am using react native web library but I can't make full height on web
Code:
import React from 'react';
import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';
class index extends React.Component {
render() {
return (
…
amorenew
- 10,760
- 10
- 47
- 69
9
votes
4 answers
How to Wrap Flatlist items in React Native
I am trying to render the list of items like in this image.
Items in each row will vary based on their text size. Flatlist is using for rendering items.
TagView.js
Muhsin Keloth
- 7,855
- 7
- 39
- 59
9
votes
6 answers
how to set background color to the text only in react native
in html I can achieve this by
ketan
but in react native how to implement this so that color will be applied to the text only.
ketan kulkarni
- 355
- 1
- 4
- 11
9
votes
2 answers
React Native overflows when in a flex
So for the above image, I am attempting to get the "green" box to wrap around the dynamic text. Notice how the blue and yellow text boxes are in a flex: 'row' configuration, and the blue box of text is at a flex: 2 and the yellow is flex:…
Chris
- 1,418
- 2
- 16
- 34
8
votes
2 answers
how to create circle shape in react native with flex box
this is my component:
const styles = {
menuContainer: {
flex: 1,
flexDirection: 'column'
},
menuItem: {
flex: 1,
borderRadius: ??
}
}
hossein derakhshan
- 771
- 2
- 10
- 23
6
votes
1 answer
Bottom sheet over map content, similar to google maps UI, in React Native
I am trying to implement a UI layout similar to google maps "explore" on Android, (see gif) in React Native.
In my UI design I have app navigation tabs at the bottom of the screen, with a full page map background, overlaid with a "bottom sheet"…
rcbevans
- 7,101
- 4
- 30
- 46
6
votes
2 answers
Flex direction: row-reverse in react-native
How can i reproduce flex-direction: row-reverse in React-Native? When in element' style i'm doing:
flexDirection: 'row-reverse'
i'm getting error:
Invalid prop flexDirection of value row-reverse supplied to
StyleSheet
UPDATE: They just added…
Ivan Chernykh
- 41,617
- 13
- 134
- 146
5
votes
3 answers
React Native Text Input fields not taking full width even though flex: 1
I am making a form on formik and want it to take the full screen width. I have tried flex: 1, changing the flex direction, and changing the padding. When text goes wider than the input field it expands to fit it. I don't want to set the width…
anonymous
- 319
- 1
- 5
- 16
5
votes
4 answers
How do I create this layout in Flexbox?
I'm trying to create this layout in Flexbox (and React Native) but I can't get it to work. Specifically, the Left and Right buttons refuse to expand to 50% of the width of the container no matter what I do. They are always the size of their…
Barry Fruitman
- 12,316
- 13
- 72
- 135