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

Question

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?

Answer 1

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: