React Native Flex Two Rows having ununsual spaces

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