Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 327
N Sharma Avatar asked Dec 07 '22 16:12

N Sharma


2 Answers

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

like image 200
VolkanSahin45 Avatar answered Dec 11 '22 07:12

VolkanSahin45


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.

like image 24
Xenolion Avatar answered Dec 11 '22 07:12

Xenolion