CODEWITHSUNDEEP
react-native
Josh Loo
Josh Loo

Reputation: 51

React-native How to Wrap the content of Text and Image in a View

I have a problem wrapping the content of text and image in a View..

What I want:

--Image-Text line 1

--Image-Text line 2

Basically I have tried to code in this structure with flex style configured to 'wrap'.

-Code syle 1:

<Image>
</Image>
<Text>
    Text 1
</Text>
<Text>
    Text 2
</Text>

-Code syle 2: 

<Text> 
    <Image>
    </Image>
    Text 1
    Text 2
</Text>

Both did not achieve the goal I wish. What goes wrong here?

Upvotes: 5

Views: 18143

Answers (2)

Babou
Babou

Reputation: 171

@Noitidart You should type the text first and use a new line to break and display the image below the text. It should something like this:

 <Text>
      Line 1 {'\n'}
      <Image style={styles.image} source={{uri: 'http://loremflickr.com/g/50/50/paris'}}/>
      
    </Text>

Upvotes: 1

Jean Regisser
Jean Regisser

Reputation: 6716

Here's one way of doing it:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
} from 'react-native';

var SampleApp = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text>
          <Image style={styles.image} source={{uri: 'http://loremflickr.com/g/50/50/paris'}}/>
          Line 1
        </Text>
        <Text>
          <Image style={styles.image} source={{uri: 'http://loremflickr.com/g/50/50/paris'}}/>
          Line 2
        </Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    marginTop: 40,
    marginHorizontal: 10,
  },
  image: {
    width: 50,
    height: 50,
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

Here's how it looks:

sample output

Upvotes: 3

Related Questions