How to set text in center in react native

Question

Hi I want to set Text in center, I tried justifyContent and alignItems to center but it didn't work for me, text is displaying at the top.

LoginScreenStyles.js

export default StyleSheet.create({
  ...ApplicationStyles.screen,
  container: {
    paddingBottom: Metrics.baseMargin
  },
  centered: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

ApplicationStyles.js

const ApplicationStyles = {
  screen: {
    mainContainer: {
      flex: 1,
      backgroundColor: Colors.transparent
    },
    backgroundImage: {
      position: "absolute",
      top: 0,
      left: 0,
      bottom: 0,
      right: 0
    },
    container: {
      flex: 1,
      paddingTop: Metrics.baseMargin,
      backgroundColor: Colors.transparent
    },
    section: {
      margin: Metrics.section,
      padding: Metrics.baseMargin
    },
    sectionText: {
      ...Fonts.style.normal,
      paddingVertical: Metrics.doubleBaseMargin,
      color: Colors.snow,
      marginVertical: Metrics.smallMargin,
      textAlign: "center"
    },
    subtitle: {
      color: Colors.snow,
      padding: Metrics.smallMargin,
      marginBottom: Metrics.smallMargin,
      marginHorizontal: Metrics.smallMargin
    },
    titleText: {
      ...Fonts.style.h2,
      fontSize: 14,
      color: Colors.text
    }
  },
  darkLabelContainer: {
    padding: Metrics.smallMargin,
    paddingBottom: Metrics.doubleBaseMargin,
    borderBottomColor: Colors.border,
    borderBottomWidth: 1,
    marginBottom: Metrics.baseMargin
  },
  darkLabel: {
    fontFamily: Fonts.type.bold,
    color: Colors.snow
  },
  groupContainer: {
    margin: Metrics.smallMargin,
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center"
  },
  sectionTitle: {
    ...Fonts.style.h4,
    color: Colors.coal,
    backgroundColor: Colors.ricePaper,
    padding: Metrics.smallMargin,
    marginTop: Metrics.smallMargin,
    marginHorizontal: Metrics.baseMargin,
    borderWidth: 1,
    borderColor: Colors.ember,
    alignItems: "center",
    textAlign: "center"
  }
};

export default ApplicationStyles;

LoginScreen.js

import React, { Component } from "react";
import { View, Text } from "react-native";

// Styles
import styles from "./Styles/LoginScreenStyles";

export default class LoginScreen extends Component {
  render() {
    return (
      <View style={styles.mainContainer}>
        <Text style={styles.centered}>
          This probably isn't what your app is going to look like. Unless your
          designer handed you this screen and, in that case, congrats! You're
          ready to ship. For everyone else, this is where you'll see a live
          preview of your fully functioning app using Ignite.
        </Text>
      </View>
    );
  }
}

volkansahin45 · Accepted Answer · 2017-12-16 13:15:22Z

7

You need to write justifyContent: "center", alignItems: "center" in container like this :

container: {
  paddingBottom: Metrics.baseMargin,
  justifyContent: "center", 
  alignItems: "center"
}

If you just want to make text center you can use alignSelf: 'center' in centered

answered Dec 16, 2017 at 13:15

volkansahin45

1,9881 gold badge14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Xenolion · Accepted Answer · 2017-12-16 13:27:09Z

4

The style for container code should include this:

justifyContent: "center",
alignItems: "center"

and NOT to the Text itself. But if you want to make the Text center themselves then you should add this:

alignSelf: 'center'

To the Text styles itself. You can get an example from the official source here for more information.

edited Dec 16, 2017 at 13:27

answered Dec 16, 2017 at 13:18

Xenolion

12.8k7 gold badges37 silver badges51 bronze badges

Comments

Syed Zain Ali · Accepted Answer · 2017-12-17 05:38:13Z

I Believe this Might Clear your concept
1. justifyContent : helps you to control content of View Vertically
2. alignItems: helps you to control content of View Horizontally
3. alignSelf : help you make Text content Center.
Run Sample code for Demonstration.

render() {
    return (
      <View style={styles.container}>
        <View style={{ justifyContent: "center", height: 200 }}>
          <Text>justifyContent works in an View vertically</Text>
          <Text>center,flex-start,flex-end</Text>
        </View>
        <View style={{ alignItems: "center" }}>
          <Text>alignItems works in an View Horizontily</Text>
          <Text>center,flex-start,flex-end</Text>
        </View>
        <Text style={styles.textStyle}>To Make Text Center</Text>
      </View>
    );
  }


const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  textStyle: {
    alignSelf: "center",
    alignItems: "center"
  }
});

Kiran Jadhav · Accepted Answer · 2019-02-28 12:43:05Z

1

Updated:-

  AnyText: {
    textAlign: 'center',
    fontSize: 21,
    fontWeight: 'bold',
  }

answered Feb 28, 2019 at 12:43

Kiran Jadhav

3,33728 silver badges29 bronze badges

Comments

Paramatma Sharan · Accepted Answer · 2019-11-07 09:17:31Z

1

<TouchableOpacity
           style = {styles.submitButton}
           onPress = {
              () => this.login(this.state.email, this.state.password)
           }>
           <Text style = {styles.submitButtonText}> Submit </Text>
        </TouchableOpacity>

for text center

submitButtonText:{
  color: 'white',
  alignSelf: 'center'
}

answered Nov 7, 2019 at 9:17

Paramatma Sharan

4455 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to set text in center in react native

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related