textAlignVertical help

#1

Hello, i am newbie on expo and react native.
I’m testing the layers of the components in expo. I have a question, I can not order three lines of text in a view, in the top, center and bottom positions. This is my code:

<View style={{
flex: 1,
marginTop: 20,
flexDirection: ‘column’,
justifyContent: ‘center’,
}}>
<View style={{justifyContent: ‘flex-start’, height: ‘25%’, width: ‘100%’, backgroundColor: ‘powderblue’}}>

Field One


<View style={{height: ‘50%’, width: ‘100%’, backgroundColor: ‘skyblue’}}>
<Text style={{textAlignVertical: ‘top’}}>
TOP FIELD

<Text style={{textAlignVertical: ‘center’}}>
CENTER FIELD

<Text style={{textAlignVertical: ‘bottom’}}>
BOTTON FIELD


<View style={{justifyContent: ‘flex-end’, height: ‘25%’, width: ‘100%’, backgroundColor: ‘steelblue’}}>

Field Three


I appreciate any help

#2

Hey @ocascante,

Welcome to the Expo community! When sharing code like this, it’s best if you throw it in a Snack http://snack.expo.io so others can run your code and attempt to debug it rather than attempt to read the unformatted code in a forum post. Also, there is an option in the top bar when making forum posts </> that allows you write preformatted text.

Cheers,

Adam

closed #3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.