Styling text in a React Native ListItem

Question

I am trying to center some text inside of a ListItem in React Native. (The text in the boxes.)

But no matter what I try, I can't get the text to center. Adding margins, padding, or borders to the text, text view, or flat list doesn't change the UI at all. Using textAlign and textAlignVertical will move the text, but it will not center it, and upon hard reloading my emulator, it will reset to the unaligned version regardless of what it says in the style sheet.

UI Code:

import DraggableFlatList, { ScaleDecorator, } from "react-native-draggable-flatlist";
import { ListItem, ThemeProvider, theme } from "react-native-design-system";
import { GestureHandlerRootView } from "react-native-gesture-handler";

// Renderer for DraggableFlatList item
const renderListItem = ({ item, drag, isActive, getIndex }) => {
...
return (
    <ScaleDecorator>
        <ListItem
            style={homeStyle.listItem}
            size="lg"
            onLongPress={drag}
            disabled={isActive}
            background={isActive ? "gray300" : "white"}
            onPress={clicked}
            rightIcon={<Text style={homeStyle.clearText} onPress={() => deleteNote(item)}> Clear </Text>}
        >
            <View style={homeStyle.textView}>
                <Text style={homeStyle.listText}>{item.name}</Text>
            </View>
        </ListItem>
    </ScaleDecorator>
    );
};
// Page UI Code
...
<GestureHandlerRootView style={homeStyle.mainContainer}>
<ThemeProvider theme={theme}>
<View style={homeStyle.mainContainer}>
    <View style={homeStyle.topView}>
        <Text style={homeStyle.title}>Notes</Text>
        <Pressable style={[homeStyle.button]} onPress={() => setModalVisible(true)}>
            <Text style={homeStyle.buttonText}>+</Text>
        </Pressable>
    </View>
    <StatusBar style="auto" />
    <DraggableFlatList
        style={homeStyle.flatList}
        data={data}
        onDragEnd={({ data }) => setData(data)}
        keyExtractor={(item) => item.key}
        renderItem={renderListItem}
    />
...
</View>
</ThemeProvider>
</GestureHandlerRootView>

Style Code:

const homeStyle = StyleSheet.create({
    listItem: {
        height: 60,
        borderColor: '#74b1be',
        backgroundColor: '#2f3241',
        borderWidth: 2,
        margin: 8,
    },
    flatList: {
        height: 650,
    },
    mainContainer: {
        flex: 1,
        backgroundColor: '#2f3241',
    },
    topView: {
        flex: 1,
        flexDirection: "row",
    },
    title: {
        fontFamily: "sans-serif",
        fontSize: 50,
        color: "#74b1be",
        textAlign: 'center',
        alignSelf: 'center',
        margin: 10,
        marginBottom: 0,
    },
    button: {
        borderRadius: 10,
        borderColor: '#74b1be',
        borderWidth: 2,
        backgroundColor: "#2f3241",
        alignSelf: 'center',
        height: 40,
        width: 40,
        marginTop: 17,
    },
    buttonText: {
        color: "#74b1be",
        alignSelf: 'center',
        fontSize: 30,
        margin: -3,
        fontFamily: "sans-serif",
    },
    textView: {
        // flex: 1,
        textAlign: 'center',
        // textAlignVertical: 'center',
        borderWidth: 2,
        borderColor: 'white',
    },
    listText: {
        color: '#74b1be',
        fontSize: 34,
        fontFamily: "sans-serif",
        // flex: 1,
        // textAlign: 'center',
        // textAlignVertical: 'center',
        borderWidth: 2,
        borderColor: 'red',
    },
    clearText: {
        color: "#74b1be",
        fontSize: 20,
        fontFamily: "sans-serif",
    },
});

Answer 1

The problem was that sometimes the content of a ListItem item would not update its style without a complete reload. My solution was just to use the leftIcon property.