Ad

ReactNative: How To Position Text-Elements One Under Another

- 1 answer

I have to create a ListView having Rows which contains an Icon on the left and two text elements like so:

enter image description here

But what i get is this: enter image description here

How to archieve this?

This is my render method for the row:

        return (
            <TouchableHighlight underlayColor='#dddddd'>
                <View style={styles.container}>
                    <Icon
                                name='fontawesome|phone'
                                size={30}
                                color='gray'
                                style={styles.contactIcon}
                                />

                        <Text style={styles.headline}>Anrufen</Text>
                        <Text style={styles.details}>{item.text}</Text>
                    <View style={styles.separator}/>
                </View>
            </TouchableHighlight>
        );

And these are my styles:

container: {
    flex         </View>
            </TouchableHighlight>
        );

And these are my styles:

container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    padding: 15,
},

details: {
    fontSize: 14,
    marginBottom: 8
},
headline: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
    flex: 1
},

I tried to play with a width-statement for each text-element making it as wide as possible, nothing helped.

Ad

Answer

You have to wrap your both text-nodes in a parent-textnode giving style "flex=1" :

check this out:

<View style={{ flex: 1 }} >
   <Text style={styles.headline}>Anrufen</Text>
   <Text style={styles.details}>{item.text}</Text>
</View>
Ad
source: stackoverflow.com
Ad