ReactNative cant center text with height provided to the container-CodePudding

When i add height to my container my text goes out of the center position as in the image provided. How can i center it with height of 24 for the container added? I also taked a look here, where someone has had similar problem - ReactNative: how to center text? but still no luck with the centering. text out of center image

        <View style={styles.container}>
            <Text style={styles.text}>1</Text>
        </View>

    const styles = StyleSheet.create({
        container: {
            alignSelf: "center",
            justifyContent: "center",
            borderRadius: 12,
            minWidth: 24,
            height: 24,
            borderWidth: 3,
            borderColor: "red",
        },
        text: { textAlign: "center", textAlignVertical: "center" },

CodePudding user response：

Try this please :)

container: {
            alignSelf: "center",
            justifyContent: "center",
            borderRadius: 12,
            minWidth: 24,
            height: 24,
            borderWidth: 3,
            borderColor: "red",
            alignItems:"center // try this
        },