React-Native <Text> omits the last character

Question

Whenever I put a string of more than 5 characters inside a element, the last one is not rendered. Here's my code and the outputted string.

const Header = () => {
    const { textStyles, viewStyles } = styles;

    return (
        <View style={viewStyles}>
            <Text style={textStyles}>Albums</Text>        
        </View>
    );
};

const styles = {
    viewStyles: {
        backgroundColor: '#F8F8F8',
        alignItems: 'center',
        justifyContent: 'center',
        height: 60,
        paddingTop: 15,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        elevation: 2
    },
    textStyles: {
        fontSize: 20
    },
};

Outputted string: Album

If I change the string inside the Text element to something like 'Albums!', the output will be Albums. It always show n-1 characters.

Answer 1

I tested your code buddy Its working fine

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const Header = () => {
  const { textStyles, viewStyles } = styles;

  return (
      <View style={viewStyles}>
          <Text style={textStyles}>Albums!!!!</Text>
      </View>
  );
};
export default class App extends React.Component {

  render() {
    return (
      <View>
        <Header></Header>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  viewStyles: {
        backgroundColor: '#F8F8F8',
        alignItems: 'center',
        justifyContent: 'center',
        height: 60,
        paddingTop: 15,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        elevation: 2
    },
    textStyles: {
        fontSize: 20
    },
});

Here is the output

Answer 2

I experienced the same issue on my OnePlus 6. I fixed it by using textAlign: "center" instead of using alignItems: "center".

I propose changing your styles to:

const styles = {
    viewStyles: {
        backgroundColor: '#F8F8F8',
        justifyContent: 'center',
        height: 60,
        paddingTop: 15,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        elevation: 2
    },
    textStyles: {
        fontSize: 20,
        textAlign: "center"
    },
};