Text doesn't wrap when the font size is increased in react native

I'm trying to increase font size of title text an also make it wrap but, it does not wrap once I crease the font size. I want to make the heading text wrap and still be able to increase the fontzise. But textAlign: "center" seems to have no effect on it.

Please, how can I achieve it as it is in the second Image?

This is my code currently.

function OnboardingScreen() {
    return (
        <SafeAreaScreen>
            <View style={styles.container}>
                
                <View style={styles.swiperContainer}>
                    <Swiper>

                        <View style={styles.slide}>
                            <Text style={styles.titleText}>Hello there,</Text>
                            <Text style={styles.textSubTitle}>Welcome to Sherz, We are glad to have you.</Text>
                        </View>
                        <View style={styles.slide}>
                            <Text
                                // numberOfLines={2}
                                style={styles.titleText}>Easy, smart
                                and reliable</Text>
                            <Text style={styles.textSubTitle}>You don’t have to worry about
                                market hassle, we are here for you.</Text>
                        </View>
                        <View style={styles.slide}>
                            <Text style={styles.titleText}>Hello there,</Text>
                            <Text style={styles.textSubTitle}>Welcome to Sherz, We are glad to have you.</Text>
                        </View>
                        <View style={styles.slide}>
                            <Text style={styles.titleText}>Hello there,</Text>
                            <Text style={styles.textSubTitle}>Welcome to Sherz, We are glad to have you.</Text>
                        </View>

                    </Swiper>
                </View>
            </View>
        </SafeAreaScreen>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    image: {
        flex: 0.5,
    },
    closeIcon: {
        width: WP(5),
        height: WP(5),
        left: WP(90),
        top: HP(2),
    },
    swiperContainer: {
        flex: 0.5,
    },
    slide: {
        height: WP(15),
        width: WP(70),
        alignItems: 'center',
        justifyContent: 'center',
        marginTop: HP(5),
        alignSelf: 'center',
    },
    titleText: {
        fontSize: WP(8),
        // width: WP(70),
        fontWeight: 'bold',
        textAlign: 'center',
        // backgroundColor: 'red',
    },
    textSubTitle: {
        fontSize: WP(4),
        marginTop: HP(2),
        textAlign: 'center',
    },
})

This is what I have achieved now

This is what I want to achieve