Questions tagged [react-native-flexbox]
137 questions
5
votes
5 answers
Rendering equal width buttons in React Native
I want to render 7 buttons in a row with equal width to fill up all the available space horizontally.
render() {
return (
marchello
- 2,016
- 3
- 29
- 39
5
votes
2 answers
React Native: Flex for ScrollView doesn't work
I have a simple View which has two children, another View and a ScrollView. The ScrollView should be 5x higher than the View on the same level, using flexbox.
pfust75
- 401
- 1
- 5
- 17
5
votes
2 answers
justifyContent: 'space-evenly' in React Native
Can I use the justifyContent: 'space-evenly' on any elements in React Native? On which ones? What should the syntax look like?
Thanks!
p-syche
- 575
- 1
- 5
- 17
5
votes
2 answers
How to layout with nine square view in React Native?
How to achieve the square layout like the image below?
Or any related package exist?
junlin
- 1,835
- 2
- 25
- 38
5
votes
2 answers
How to float a text over another text in React Native
Here is an example of what am trying to achieve and below is a breakdown of the component structure
and this is how currently the code is:
…
KD.
- 2,015
- 3
- 28
- 59
5
votes
2 answers
How to design screens in react native compatible for all devices
I am trying to design this design react-native. This is what I have coded for this but this is not what I want. This works on one screen only, if I change screen size then things are not working.
This looks like absolute layout. What changes should…
N Sharma
- 33,489
- 95
- 256
- 444
5
votes
1 answer
Is there something like Relativelayout for React Native?
In my case, i want a fullscreen viewpager with a button on the top of it. It's easy in Android.
Here is the sample code
gonglong
- 582
- 7
- 14
3
votes
2 answers
Width of multiline React-Native Text component won't resize to length of longest line of text on Android
I have a multiline React-Native Text component whose width should auto-adjust to the width of the longest line of text. This is working on iOS but not on Android, and I'm not sure why.
Please see this expo snack for a demo.
on iOS it looks like…
JMLdev
- 846
- 2
- 10
- 21
3
votes
3 answers
React Native flexbox - detect last element in row
I have a dynamic list with text (tags, for example) rendered in a row with flex-wrap. I want to add a bullet separator between all items, except for every last one in each row.
For example, let's say I have the list ['apple', 'peach', 'orange',…
Ilcho Taleski
- 103
- 1
- 8
3
votes
1 answer
flexwrap: 'wrap' items padding issue in React Native
I have an issue that I wasn't able to solve.
Take a look at this screenshot:
The code that renders the Utility & Sequences buttons is the following:
Utility
Agustin Meriles
- 4,866
- 3
- 29
- 44
3
votes
1 answer
How to align label and input in react native?
I have to build a simple form where I have 3 labels and 3 TextInput. I want to have them on top of each other with a space between the rows.
I can't figure out the right way to do it properly.
My first attempt is to have a top View with…
anon
3
votes
1 answer
React native rotation transformations break flex box layout
I want to make a slider vertical on ios. I have a component that looks like this, the text labels are just for visualisation
export class VerticalSlider extends React.Component {
render() {
return (
…
Luke De Feo
- 2,025
- 3
- 22
- 40
3
votes
1 answer
How to vertically stretch two Views that are in a column formation - React Native Flex?
I have this view, where there are two Views in a column:
Test
…
slimbean
- 35
- 1
- 4
3
votes
1 answer
React native elements list width is too narrow
I am using react-native-elements list from here: https://react-native-training.github.io/react-native-elements/API/lists/
When I render it with flex: 1 it is very narrow. When I render it with width: 400 it is OK.
Here are the styles:
container: {
…
mikeb
- 10,578
- 7
- 62
- 120
3
votes
1 answer
Right is Left on React Native
Trying to display a List item within renderRow.
I already implemented RTL in my project as defined on react native documentation, and I am getting a positive for console.log(I18nManager.isRTL ? 'yes' : 'no').
I am trying to present a designed table…
Ted
- 3,805
- 14
- 56
- 98