CODEWITHSUNDEEP
androidreact-native
N Sharma
N Sharma

Reputation: 34487

How to set text in center in react native

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>
    );
  }
}

enter image description here

Upvotes: 4

Views: 17441

Answers (5)

Paramatma Sharan
Paramatma Sharan

Reputation: 445

<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'
}

Upvotes: 1

Kiran Jadhav
Kiran Jadhav

Reputation: 3317

Updated:-

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

Upvotes: 1

Syed Zain Ali
Syed Zain Ali

Reputation: 1226

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"
  }
});

Upvotes: 1

Xenolion
Xenolion

Reputation: 12717

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.

Upvotes: 4

VolkanSahin45
VolkanSahin45

Reputation: 1968

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

Upvotes: 7

Related Questions