[FIXED] How to align Text in React Native

Issue

I'm trying to style my work, I've included a slug description now and simply hardcoded it in whilst I try to make it look better. I'm having two problems that I'm looking to resolve. I can't get the slug text to align between one another. And the second issue is that when it is took long it wraps and distorts everything, I'd rather it reduced down and showed an ellipsis (...) are these things achieveable?

import { StyleSheet, Text, View, FlatList, SafeAreaView, Image } from 'react-native'

export default function App() {
    const present = [{
        id: 1,
        name: 'PresentOne',
        slug: 'PresentOne Slug',
        image: require('../assets/present.jpeg')
    },
    {
        id:2,
        name: 'PresentTwo',
        slug: 'PresentTwo Slug',
        image: require('../assets/present2.jpeg')
    }, 
    {
        id:3,
        name: 'PresentThree',
        slug: 'PresentThree Slug',
        image: require('../assets/present3.jpeg')
    }, 
    {
        id:4,
        name: 'PresentFour',
        slug: 'PresentFour Slug',
        image: require('../assets/present4.jpeg')
    }, 
    {
        id:5,
        name: 'PresentFive',
        slug: 'PresentFive Slug',
        image: require('../assets/present5.jpeg')
    },  
];

const onePresent = ( { item } ) => (
    <View style={styles.item}>
        <View style={styles.avatarContainer}>
            <Image source = {item.image} style={styles.avatarContainer}/>
        </View>
            <Text style={styles.name}> {item.name}</Text>
            <Text style={styles.slug}>{item.slug}</Text>
    </View>
)

const headerComponent = () => {
  return <Text style={styles.listHeadline}>Presents</Text>
}

const itemSeperator = () => {
    return <View style = {styles.seperator}/>
}

return (
        <SafeAreaView >
            <FlatList
            ListHeaderComponentStyle={styles.listHeader}
            ListHeaderComponent={headerComponent}
            data = { present }
            renderItem = { onePresent }
            ItemSeperatorComponent = { itemSeperator }
            ListEmptyComponent = { <Text>Empty</Text>}
            />
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    slug:{
        transform: [{translateX: -100}],
        // alignContent: 'center',
        flexDirection: 'column',
        alignItems: 'center',
    },
    name:{
        transform: [{translateY: -30},{translateX: 10}],
        fontSize: 20,
    },
    listHeadline:{
        color:'#333',
        fontSize: 21,
        fontWeight: 'bold',
    },
    item: {
        flex:1,
        flexDirection:'row',
        alignItems:'center',
        paddingVertical:13,
    },
    avatarContainer:{
        backgroundColor:'#D9D9D9',
        borderRadius:100,
        height:89,
        width:89,
        justifyContent:'center',
        alignItems: 'center',
        margin:10,
    },
    listHeader:{
        height:55,
        alignItems:'center',
        justifyContent: 'center'
    },
    seperator: {
        height: 1,
        width: '100%',
        backgroundColor: '#CCC', 
    }
})

Solution

The textAlign prop is what I think you want. However I noticed you were using transform to position the text in your view and I found a way to layout your components so that you dont have to do so (demo).

import {
  StyleSheet,
  Text,
  View,
  FlatList,
  SafeAreaView,
  Image,
} from 'react-native';

export default function App() {
  const present = [
    {
      id: 1,
      name: 'PresentOne',
      slug: 'PresentOne Slug',
      image: require('./assets/snack-icon.png'),
    },
    {
      id: 2,
      name: 'PresentTwo',
      slug: 'PresentTwo Slug',
      image: require('./assets/snack-icon.png'),
    },
    {
      id: 3,
      name: 'PresentThree',
      slug: 'PresentThree Slug',
      image: require('./assets/snack-icon.png'),
    },
    {
      id: 4,
      name: 'PresentFour',
      slug: 'PresentFour Slug',
      image: require('./assets/snack-icon.png'),
    },
    {
      id: 5,
      name: 'PresentFive',
      slug: 'PresentFive Slug',
      image: require('./assets/snack-icon.png'),
    },
  ];

  const onePresent = ({ item }) => (
    <View style={styles.item}>
      <View style={styles.avatarContainer}>
        <Image source={item.image} style={styles.avatarContainer} />
      </View>
      <View style={styles.slug}>
        <Text style={styles.name}>{item.name}</Text>
        <Text style={styles.slug}>{item.slug}</Text>
      </View>
    </View>
  );

  const headerComponent = () => {
    return <Text style={styles.listHeadline}>Presents</Text>;
  };

  const itemSeperator = () => {
    return <View style={styles.seperator} />;
  };

  return (
    <SafeAreaView>
      <FlatList
        ListHeaderComponentStyle={styles.listHeader}
        ListHeaderComponent={headerComponent}
        data={present}
        renderItem={onePresent}
        ItemSeperatorComponent={itemSeperator}
        ListEmptyComponent={<Text>Empty</Text>}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  slug: {
    // transform: [{translateX: -100}],
    // alignContent: 'center',
    flexDirection: 'column',
    alignItems: 'center',
  },
  name: {
    // transform: [{translateY: -30},{translateX: 10}],
    fontSize: 20,
  },
  listHeadline: {
    width: '100%',
    color: '#333',
    fontSize: 21,
    fontWeight: 'bold',
  },
  item: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 13,
  },
  avatarContainer: {
    backgroundColor: '#D9D9D9',
    borderRadius: 100,
    height: 89,
    width: 89,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
  },
  listHeader: {
    height: 55,
    alignItems: 'center',
    justifyContent: 'center',
  },
  seperator: {
    height: 1,
    width: '100%',
    backgroundColor: '#CCC',
  },
});

Answered By - PhantomSpooks
Answer Checked By - - Robin (ReactFix Admin)