Center Text Vertically In React-native

As given in the image, the text 10 shares is on the top left corner. I want to center 10 shares vertically. I have tried some methods to make it come to the center of the yellow vi

Solution 1:

add textAlignVertical property and set it to center and change textAlign to center in your bottomLeftView style.

  bottomLeftView: {
    flex: 1,
    color: "black",
    marginVertical: 5,
    marginHorizontal: 5,
    backgroundColor: "yellow",
    height: 50,
    alignSelf: "stretch",
    textAlign: "center",
    paddingLeft: 5,
    textAlignVertical: "center"
  }

Solution 2:

Just add textAlignVerticle property in bottomLeftView style and set it to center

bottomLeftView: {
    flex: 1,
    color: "black",
    marginVertical: 5,
    marginHorizontal: 5,
    backgroundColor: "yellow",
    height: 50,
    alignSelf: "stretch",
    textAlign: "left",
    paddingLeft: 5,
   textAlignVertical: "center"
  }