padding/margin when using <Text> inside for loop

user_3134215 0
Viewed 146

I am creating multiple Text using for loop, but i have seen some unnecessary padding when i am using this approach.

render(){
    var child = [];
    for (let index = 0; index < 5; index++) {
        child.push(<Text key={index}> {index}</Text >)
    }

    return (
        <View>
            <View style={{ flexDirection: 'row' }}>
                {child}
            </View>
            <View style={{ flexDirection: 'row' }}>
                <Text>0</Text>
                <Text>1</Text>
                <Text>2</Text>
                <Text>3</Text>
                <Text>4</Text>
            </View>
        </View>
    )
}

Output :

enter image description here

As you can observe the Text which i have added through for loop is leaving some space between two Text, but if i write it streight 5 times, it is working fine.

react-native-ios react-native
2 Answers

You missing something at this time. There is a space in your loop.

child.push(<Text key={index}> {index}</Text >)

change to that

child.push(<Text key={index}>{index}</Text >)
user_103594270

Clear the extra spacing before {index} :)

<Text key={index}>{index}</Text >
user_65692240
Related