React Native Flex Two Rows having ununsual spaces - react-native

Question

I'm trying to do some setup for flex with a flexDirection: row
But not able to get the successful outcome.
Basically it needs to be two rows without a gap. 1st row with a text label. 2nd row has 2 components (text / switch)
<View style={{
flex: 1, flexDirection:'row',
}}>
<View>
<Text style={codeModalStyles.onlyYouCanText}>
{...}
</Text>
</View>
<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-around', padding: 14}}>
<Text style={codeModalStyles.onlyYouCanText}>
{..}
</Text>
<Switch
value={props.switchValue}
style={{transform: [{scaleX: 1.5}, {scaleY: 1.5}]}}
onValueChange={.. }
/>
</View>
</View>
But it appears like this
I tried something else like this (removing flex direction on the main container view). But i got a big space.
<View style ={{flex:1}}>
<Text style={codeModalStyles.onlyYouCanText}>
{..}
</Text>
</View>
<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-around', padding: 14}}>
<Text style={codeModalStyles.onlyYouCanText}>
{..}
</Text>
<Switch
value={props.switchValue}
style={{transform: [{scaleX: 1.5}, {scaleY: 1.5}]}}
onValueChange={.. }
/>
</View>
</View>

Answer 1

Do you want like this ?
<View
style={{
flex: 1,
flexDirection: "column"
}}
>
<View>
<Text>Auto set reminders?</Text>
</View>
<View
style={{
width: "100%",
flexDirection: "row",
justifyContent: "flex-start"
//padding: 14
}}
>
<Text
style={{
width: "50%",
flexDirection: "row",
justifyContent: "space-around"
//padding: 14
}}
>
Do students need to do a new post? A reminder will be sent daily fro
3 days until they post and tag your task during posting.
</Text>
<View
style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
>
<Switch
style={{ transform: [{ scaleX: 1.5 }, { scaleY: 1.5 }] }}
onValueChange={this.toggleSwitch}
value={this.state.isEnabled}
/>
</View>
</View>
</View>
sandbox