Questions tagged [react-native-flexbox]
137 questions
0
votes
2 answers
How to make a cropped image fill all the View with flexbox and React-Native?
I want to make a cropedd image to fill all the view in my app.
My Code now is right this:
But I wanted that this small square with Homer eating this donuts fill all the screen, like this simulation I did:
This is my code:
import * as React…
Fernando Maymone
- 665
- 1
- 8
- 17
0
votes
3 answers
ScrollView children height relative to container
I'm looking to create a react-native scrollable feed of views whose heights are 80% of the container. My code currently looks like
const FeedItem = () => (
Hello
);
const Feed = ()…
Cody Johnson
- 45
- 8
0
votes
0 answers
TextInput Appearing at Botton in React Native
I am making a form which has Logo at its top with a back button, when I put TextInput in it, it appears at the bottom of my screen, if I try to style it on top my logo gets out of screen, Even any change in TextInput stylesheet ruin all my design, I…
Talha Nadeem
- 99
- 1
- 4
- 22
0
votes
0 answers
Why is the 'flex' property not working on my ScrollView as expected?
I'm having trouble getting 'scrollView' to take up 8 times the space as 'adContainer', using 'Flex'. Instead, the screen renders as if both are set to 'Flex: 1', each taking up an equal amount of space.
Code:
const CreateAccountScreen = (props) =>…
Fabian
- 59
- 9
0
votes
1 answer
react native grid (flex) view overlapping with list view
There are basically constructed by two parts: grid (flex view) and listview.
The elements used are from native base.
I have also use but the problem is still the same.
View style={{flex: 1, flexDirection: 'row'}}>
The snippet of codes are:
…
fmchan
- 760
- 1
- 11
- 29
0
votes
1 answer
Is it possible to arrange 2 text elements in a line so that the second element is at the level of the last line of the first text
I code a simple react-native messaging application with kind of message baloons containing 2 text elements: a message text and message time. A message text can be multiline and the time text has fixed width.
However, i ran into the problem that I…
0
votes
1 answer
React native layout misbehaving
I am trying to learn React native with Ignite. Been fighting with the layout.
Here is my main container render function:
render () {
return (
cromestant
- 652
- 2
- 10
- 21
0
votes
1 answer
React-native aligning header left, right suffixes along with title
Here is the problem I am facing:
I have a component in react native called Header. Header has 3 properties - left suffix (for back button for example), right suffix (for additional actions, sometimes 1 button, sometimes 2 buttons, sometimes none)…
AyJay
- 488
- 7
- 12
0
votes
0 answers
React native, image not scaling - resizeMode has no useful effect
I have code that looks like this:
{siteName}
Alex
- 2,270
- 3
- 33
- 65
0
votes
2 answers
Flex box not expected result in react native?
I am designing the UI of react native app using flex-box. But It code is not showing the expected result?
Problem
Margin property for InnerContainer2 is margin:'5%' not covering the equal space vertically.
Code:
import React, {Component} from…
Muhammad Usman
- 1,220
- 13
- 22
0
votes
1 answer
RNNv2 CustomBackButton leaves a gap on the Nav Bar
I have made a custom back button component simply to pop up an alert to the user on certain screens where they may be changing data for an entity and will lose those changes if they do not hit Save before navigating away from the screen.
Link to…
kinghenry14
- 1,187
- 1
- 11
- 34
0
votes
1 answer
Alignment of elements in flexWrap depends on number of elements
I'm trying to vertically center some text in a box that's in a flexWrap. But it's slightly above or below center, depending on how many boxes there are (???). Watch all the Hellos move up as more boxes are added:
The Expo snack is here:…
Dan B.
- 1,451
- 2
- 14
- 23
0
votes
1 answer
React Native: how to combine inline elements so they get wrapped together
I have a list of comma-separated inline touchables like this:
[(a , ),
(b , ),
…
Denis Kulagin
- 8,472
- 17
- 60
- 129
0
votes
2 answers
React-Native Flexbox - Position One Item at Vertical Center and other at Bottom
Within a parent view, I would like to vertically center align one piece of text and have another at the bottom of the view.Whenever I add the bottom text, it shifts the position of the vertical centered view upwards (to make it the vertical center…
learningAngular
- 231
- 3
- 14
0
votes
1 answer
Flexbox layout on child view not working React Native
Trying to use put space-between and stretch out the buttons that appear in the overlay pop-up screen using flexbox. This is a child view of the main view of the screen. Nothing but alignItems: 'center' seems to be working to align these buttons.
Any…
James Mulcahy
- 43
- 1
- 5