CODEWITHSUNDEEP
reactjsreact-nativeecmascript-6
Aymen Aymen
Aymen Aymen

Reputation: 281

Text out of view in Touchable opacity React native

I'm new to react native and i'm trying to display some text in a custom touchable opacity. but the text keep exceeding the border even when i'm using flex wrap. my code is the following:

 <View style={styles.main_container}  >
       <View style={styles.ctr1}>
                    <TouchableOpacity style={{ flexDirection: 'row' }} >
                       <Image style={styles.img} source={{ uri:`data:image/gif;base64,${encodedData}`}}/>

                        <View>
                            <Text style={styles.txt}> k </Text>
                            <Text style={{ flexWrap:1 }} > ddddddddddddddddddddddddddddddddddddddddd </Text>
                            <Text> kk </Text>
                        </View>
                    </TouchableOpacity>
                </View>
</View>

and here is look of the styles i used:

main_container: {
        flex: 1,
        height: 300,
        flexDirection: 'column',
        backgroundColor: "grey",
        width: '95%',
        margin: 10,
    },
ctr1: {
        flex: 1,
        flexDirection: 'row',
        backgroundColor: 'white',
        //margin: 2,
    },

How can i wrap it

Upvotes: 1

Views: 1316

Answers (1)

Omal Perera
Omal Perera

Reputation: 3119

Issue was not in the <Text> element that you have given the style flexWrap:1. Problem was in the parent elements.

Adding flex: 1 to <TouchableOpacity> and <View> which contains your <text> will solve the problem.

This will do the calculation for width depends on the device width.

<View style={styEdit.main_container}>
            <View style={styEdit.ctr1}>
                <TouchableOpacity style={{ flexDirection: 'row', flex: 1 }} >

                    <Image style={styles.img} source={{ uri:`data:image/gif;base64,${encodedData}`}}/>

                    <View style={{ flexDirection: 'column', flex: 1 }}>
                        <Text style={styEdit.txt}>k</Text>
                        <Text>ddddddddddddddddddddddddddddddddddddddddd---</Text>
                        <Text>kk</Text>
                    </View>
                </TouchableOpacity>
            </View>
        </View>

enter image description here

Tested the code in my machine. Cheers!

Upvotes: 2

Related Questions