CODEWITHSUNDEEP
androidreactjsreact-native
psudo
psudo

Reputation: 1558

Text position center React Native

App screenshot. Title bar says "Albums!", rest of app is blank I have the following header component for my app:

const Header = () => {
const { textStyle, viewStyle } = styles;

return (
    <View style={viewStyle}>
        <Text style={textStyle}>Albums!</Text>        
    </View>
 );
};

And styles for this component are as follows:

const styles = {
viewStyle: {
    backgroundColor: '#F8F8F8',        
    justifyContent: 'center', //Y-axis
    alighItems: 'center', // x-axis 
    height: 60,
    paddingTop: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.8,
    elevation: 2,
    position: 'relative'
},
textStyle: {
    fontSize: 20
 }
};

I'm learning react native from Udemy. With this code the tutor positions the text in the center of the container [Red color box]. But it doesn't work in my emulator.

Does react styles render differently in ios and android ? As the tutor was running/writing codes in mac.

Upvotes: 0

Views: 276

Answers (2)

user11359248
user11359248

Reputation:

Try this ;)

textStyle: {
    fontSize: 20,
    textAlign: 'center',
}

Upvotes: 0

Tim
Tim

Reputation: 10709

On android devices you need to add textAlign: 'center' to your Text Component style as well: 

textStyle: {
    fontSize: 20,
    textAlign: 'center',
}

Output:

output

Example:

https://snack.expo.io/@tim1717/tactless-chocolates

Upvotes: 1

Related Questions