Questions tagged [react-native-flexbox]
137 questions
0
votes
1 answer
Align list with image and two text components
I want to use a FlatList that will display an image and text that includes a name, a date, and a varying section of text. The simplified extracted code below will put the picture on the left like I want, and display the lines of text all conjoined…
Steve Carey
- 2,876
- 23
- 34
0
votes
1 answer
How to align View at the bottom of the page without making it dependent on other Views
I wish to align view toolbar to the bottom of the page without using 'space- around' of justifyContent attribute.
Below is the code how I am making this toolbar:
Ankur Prakash
- 1,417
- 4
- 18
- 31
0
votes
1 answer
React Native - What is the aspectRatio property used for in layout?
I am new to react native. I am exploring the layout properties here but i was stuck to understand the aspectRatio property because it isn't exist in CSS. But after doing a bit of research i understand this property a little bit. But i want to learn…
Stack Overflow
- 1
- 5
- 23
- 51
0
votes
1 answer
Flexbox - responsive right align UL within div?
I am trying to right align a UL within a div. The goal is to have a responsive navbar wherein a change in the size of the div will lead to the UL within it moving in the opposite direction so as not to fall out of view.
However i end up with the…
Joss MT
- 279
- 1
- 6
- 15
0
votes
1 answer
How to position component at bottom of screen
I'm trying to position the SegmentedControlIOS component to the bottom of the screen:
return (
…
DCR
- 14,737
- 12
- 52
- 115
0
votes
1 answer
Aligning label and input by 3:1
I have inputs and labels in inside info class and I want each label and input to align by 1:3 on a single row no matter what the screen size is, plus I won't mind using flex classes, I just want a solution. Cheers
css
.info {
border: 2px solid…
Ninja
- 195
- 1
- 12
0
votes
1 answer
Overlapping and Positioning Elements in React Native
I'm trying to overlap elements as shown in the wireframe, as well as position them.
I've tried
- position: 'relative' and the element disappears
- position: 'absolute' but alignItems: 'center' does nothing
Can anyone help identify what's…
louiedooey
- 3
- 5
0
votes
1 answer
React Native FlexLayout: Alignment item right
I have a list of products and want to display the text "ITEM UNIT" at the right end of my infobox. It is however affected by the position of the text above it.
How do I solve this and put "ITEM UNIT" to the right end of the…
Ranga B.
- 627
- 10
- 20
0
votes
1 answer
Having difficulty in using flexbox in react native
I have this design that I am trying to make in react native but could not properly arrange using flexbox.
Desired Result
.
My Code
import React from 'react';
import { View, Text, StyleSheet } from 'react-native'
import Touchable from…
Sayantan Das
- 1,619
- 4
- 24
- 43
0
votes
1 answer
Position View at the bottom (Sticky Footer), React Native
I have this Component:
render() {
return (
gdfgdfg
- 3,181
- 7
- 37
- 83
0
votes
0 answers
How to make fixed width for item separator in a FlatList with flexbox?
I want to make a grid of elements with a separator with fixed width of 1 "pixel". Like in a Photo app grid for iOS.
For item width in a FlatList I use flex style, because I can not predict their width on different screens.
Code example:…
Yury
- 908
- 4
- 12
- 26
0
votes
1 answer
react native flexbox stretch issue
In react native i want to achieve this effect
of course all buttons should have same width and height.
For that i use flex box. How can i do it with flexbox ?
I try:
const styles = StyleSheet.create({
mainView: {
flex: 1,
flexDirection:…
Juri Bojka
- 305
- 2
- 8
- 18
0
votes
2 answers
How do I add flex-direction and flex-wrap to the same row?
I have this React component:
Test
This is some text
This is some text
Morgan Allen
- 3,291
- 8
- 62
- 86
0
votes
1 answer
Aligning buttons in toolbar using flex
I am new in react native and I really get stuck in aligning a two toolbar buttons for two days! I need to put them in the right part of my tool bar using flex. However, I couldn't do that. Here is the code:
export default class ToolbarHorizontal…
Queen
- 571
- 3
- 10
- 28
0
votes
1 answer
Vertically Stacked Views with Static and Dynamic Heights - React Native
I am trying to acheive what the image below represents with Flexbox in React Native with Views, if you have a basic example of this that would be amazing:
Robert Saunders
- 403
- 8
- 22