React native app crash when app more layers of view components - reactjs

Question

when ever I add this line of code in my react native app it
crashes.The expo app closes with out no error being thrown to the
console and its quite hard to debug because I don't see anything wrong
with the code.
What am thinking is it is wrong to have many views inside of a view component but I have not seen anyone complain about such error
<View>
<View style={styles.sameRowContainer}>
<View style={[styles.iconContainer, { backgroundColor: "#0CCE6B" }]}>
<Feather name="repeat" size={14} color="white" />
</View>
<Text style={styles.title}>Goal</Text>
</View>
<View>
<Text style={styles.title}>hello</Text>
</View>
</View>
this is the code that is render for the screen
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<ScrollView
showsVerticalScrollIndicator={false}
style={styles.container}
// contentContainerStyle={{ alignItems: "center" }}
>
<View style={styles.habitNameContainer}>
<Text style={styles.title}>Habit Name</Text>
<TextInput
style={styles.input}
onChangeText={onChangeTitle}
value={title}
placeholder={"Learn photography..."}
placeholderTextColor={"hsla(224, 100%, 10%, 0.343)"}
/>
</View>
<View style={styles.timeOfDay}>
<Text style={styles.title}>Select time of day to complete habit</Text>
<TimeOfDay
currentView={currentView}
setCurrentView={setCurrentView}
/>
</View>
<View>
<View style={styles.sameRowContainer}>
<View
style={[styles.iconContainer, { backgroundColor: "#0CCE6B" }]}
>
<Feather name="repeat" size={14} color="white" />
</View>
<Text style={styles.title}>Goal</Text>
</View>
<View>
<Text style={styles.title}>hello</Text>
</View>
</View>
<View style={styles.dummyView}></View>
</ScrollView>
</TouchableWithoutFeedback>
);
this is the style for the component as well
const styles = StyleSheet.create({
container: {
backgroundColor: "white",
paddingHorizontal: 20,
paddingVertical: 20,
},
dummyView: {
height: 50,
},
habitNameContainer: {
// width: "90%",
marginBottom: 40,
},
title: {
marginLeft: 10,
fontSize: 16,
marginBottom: 5,
color: "hsl(0, 0%, 50%)",
},
input: {
flexDirection: "row",
fontSize: 18,
paddingLeft: 15,
height: 50,
borderRadius: 30,
backgroundColor: "hsl(224, 100%, 98%)",
fontWeight: "500",
},
timeOfDay: {
// flexDirection: "row",
marginBottom: 40,
},
sameRowContainer: {
flexDirection: "row",
alignItems: "baseline",
},
iconContainer: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
height: 26,
width: 26,
borderRadius: 8,
backgroundColor: "#0CCE6B",
},
});