React-native <Text> not wrapped in inner flex

Question

First some pseudo code:

render(){
    return(
        <View style={{flexDirection:'row', flexWrap:'wrap'}}>
            <View style={{flexDirection:'column', flexWrap:'wrap'}}>
                <View style={{flexDirection:'row', flexWrap:'wrap', flexShrink:1}}>
                    <Text>azeaeazeazeazeazeazeazearzetareutaeriauzertaiueyrtaieuyrtaieyrtaieuyrtaieuyrtaieuzyrt</Text>
                </View>
            </View>
            <View style={{borderWidth:1}}/>
            <View style={{flexDirection:'column', flexWrap:'wrap'}}>
                <Text>azeaeazeazeazeazeazeazearzetareutaeriauzertaiueyrtaieuyrtaieyrtaieuyrtaieuyrtaieuzyrt</Text>
            </View>
        </View>
    )
}

What I want is to have my screen split and that the text gets wrapped on both sides.

What happens is the first textis written on one line (so it gets off the screen), to its right is the "borderWidth:1" and next line is the second text, overflowing

The final goal is a sign form which displays correctly as long as I don't put it in a "flexDirection:row" view, which I need to since I want both forms side by side (and up and down for responsive if on mobile)

Any hint ?

By the way the correctly displaying form is set like this :

render(){
    return(

            <View style={{justifyContent: "flex-start", alignItems: "stretch", minWidth:wp(10)}}>
                <View style={{flexWrap:'wrap', flexShrink:1}}>
                    <Text style={{textAlign:'center'}}>Create your WaitForMe account.</Text>
                    <Text style={{textAlign:'center'}}>It’s free and only takes a minute.</Text>
                    <Text style={{fontWeight:'bold', margin: 2}}>Email</Text>
                    <TextInput style={{borderWidth: 1, margin: 2}} placeholder="E-mail address" onChangeText={(mail) => this.setState({mail})} onBlur={()=>this.validateSignUpForm()}/>
                    <Text style={{color:'red', margin: 2}}>{this.state.errors.mail}</Text>
                    <Text style={{fontWeight:'bold', margin: 2}}>Password</Text>
                    <TextInput style={{borderWidth: 1, margin: 2}} placeholder="Password" onChangeText={(password) => this.setState({password})} onBlur={()=>this.validateSignUpForm()}/>
                    <Text style={{color:'red', margin: 2}}>{this.state.errors.password}</Text>
                    <Text style={{margin:2, flexShrink:1}}>Passwords must be at least 8 characters long and contain at least 1 letter, 1 number and a special character</Text>
                    <Text style={{fontWeight:'bold', margin: 2}}>Confirm password</Text>
                    <TextInput style={{borderWidth: 1, margin: 2}} placeholder="Confirm password" onChangeText={(confirm) => this.setState({confirm})} onBlur={()=>this.validateSignUpForm()}/>
                    <Text style={{color:'red', margin: 2}}>{this.state.errors.confirm}</Text>
                </View>
                <Button title="Sign up" onPress={()=>this.signUp()} disabled={this.state.signUpDisabled}/>
            </View>
    )
}

Correct behaviour: large screen: small screen:

Bad behaviour (when put inside a flexDirection:'row'

small screen cropped:

username-yj username-yj · Accepted Answer · 2019-09-10T15:28:41

you should be specifying display: 'flex' in your parent component(s). This is the only way its children will be treated as flex items.

Your "good" examples are just working out of coincidence. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox#The_flex_container

here's some pseudocode so you knwow ht

<View style={{ display: 'flex', flexDirection: 'column' }}>
    <View style={{ display: 'flex', flex: 5 }}>                   
        <Text style={{ flex: 1, flexWrap:'wrap', flexShrink:1 }}></Text>
        <Text style={{ flex: 1, flexWrap:'wrap', flexShrink:1 }}></Text>
        <Text style={{ flex: 1 }}></Text>
        <TextInput style={{ flex: 3 }}/>
        <Text style={{ flex: 1, flexWrap:'wrap', flexShrink:1 }}></Text>
    </View>
    <Button style={{ flex: 1 }} />
</View>

React-native <Text> not wrapped in inner flex

1 Answers