In the example below, just add your image source. import * as React from 'react'; import { Text, View, StyleSheet, Image } from 'react-native'; // or any pure javascript modules available in npm export default class App extends React. Component { render() { return ( <View style={styles. container}> <Text style={styles.
First, go to your android studio and run the emulator. Now start the server again. Example 2: In this example, the entire code will be the same we will just change the value of alignItems property to center and provide the height to the item.
flexGrow describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
why does the Text take up the full space of the View, instead of just the space for "Hello"?
Because the View
is a flex container and by default has flexDirection: 'column'
and alignItems: 'stretch'
, which means that its children should be stretched out to fill its width.
(Note, per the docs, that all components in React Native are display: 'flex'
by default and that display: 'inline'
does not exist at all. In this way, the default behaviour of a Text
within a View
in React Native differs from the default behaviour of span
within a div
on the web; in the latter case, the span would not fill the width of the div
because a span
is an inline element by default. There is no such concept in React Native.)
How can the Text be floated / aligned to the right?
The float
property doesn't exist in React Native, but there are loads of options available to you (with slightly different behaviours) that will let you right-align your text. Here are the ones I can think of:
textAlign: 'right'
on the Text
element<View>
<Text style={{textAlign: 'right'}}>Hello, World!</Text>
</View>
(This approach doesn't change the fact that the Text
fills the entire width of the View
; it just right-aligns the text within the Text
.)
alignSelf: 'flex-end'
on the Text
<View>
<Text style={{alignSelf: 'flex-end'}}>Hello, World!</Text>
</View>
This shrinks the Text
element to the size required to hold its content and puts it at the end of the cross direction (the horizontal direction, by default) of the View
.
alignItems: 'flex-end'
on the View
<View style={{alignItems: 'flex-end'}}>
<Text>Hello, World!</Text>
</View>
This is equivalent to setting alignSelf: 'flex-end'
on all the View
's children.
flexDirection: 'row'
and justifyContent: 'flex-end'
on the View
<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
<Text>Hello, World!</Text>
</View>
flexDirection: 'row'
sets the main direction of layout to be horizontal instead of vertical; justifyContent
is just like alignItems
, but controls alignment in the main direction instead of the cross direction.
flexDirection: 'row'
on the View
and marginLeft: 'auto'
on the Text
<View style={{flexDirection: 'row'}}>
<Text style={{marginLeft: 'auto'}}>Hello, World!</Text>
</View>
This approach is demonstrated, in the context of the web and real CSS, at https://stackoverflow.com/a/34063808/1709587.
position: 'absolute'
and right: 0
on the Text
:<View>
<Text style={{position: 'absolute', right: 0}}>Hello, World!</Text>
</View>
Like in real CSS, this takes the Text
"out of flow", meaning that its siblings will be able to overlap it and its vertical position will be at the top of the View
by default (although you can explicitly set a distance from the top of the View
using the top
style property).
Naturally, which of these various approaches you want to use - and whether the choice between them even matters at all - will depend upon your precise circumstances.
You can directly specify the item's alignment, for example:
textright: {
alignSelf: 'flex-end',
},
For me setting alignItems
to a parent did the trick, like:
var styles = StyleSheet.create({
container: {
alignItems: 'flex-end'
}
});
You are not supposed to use floats in React Native. React Native leverages the flexbox to handle all that stuff.
In your case, you will probably want the container to have an attribute
justifyContent: 'flex-end'
And about the text taking the whole space, again, you need to take a look at your container.
Here is a link to really great guide on flexbox: A Complete Guide to Flexbox
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
<Text>
Some Text
</Text>
</View>
flexDirection
: If you want to move horizontally (row) or vertically (column)
justifyContent
: the direction you want to move.
using flex
<View style={{ flexDirection: 'row',}}>
<Text style={{fontSize: 12, lineHeight: 30, color:'#9394B3' }}>left</Text>
<Text style={{ flex:1, fontSize: 16, lineHeight: 30, color:'#1D2359', textAlign:'right' }}>right</Text>
</View>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With