React native: Inline image with text

Question

I am new to react native layout.

I want to put inline sentences separated by images, in which sentences are inline and images are like commas...

I did a json file that contains an array, which i make map function on it and in it I put text tag and image tag.

But the output did not match my design.

import React, { Component } from 'react';
import image1 from './assets/image.jpg'
import {
  StyleSheet,
  ScrollView,
  View,
  Text,
  Image,
} from 'react-native';
import Monday1 from "./data/monday1";
class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <ScrollView>
        <View style={{ marginRight: 20, marginLeft: 20, marginTop: 20 }}>
          <View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap' }}>
            {Monday1.map((Monday1Text, key) =>
              <View style={styles.border2}>
                <View style={styles.border}>
                  <Text key={key} style={styles.text}>
                    {Monday1Text}
                  </Text>
                </View>
                <Image style={{ width: 50, height: 50, borderRadius: 50 }} source={{ uri: 'https://www.theladders.com/wp-content/uploads/Lion_030818-800x450.jpg' }} ></Image>
              </View>
            )}
          </View>
        </View>
      </ScrollView>
    )
  };
}

const styles = StyleSheet.create({
  border: {
    borderColor: 'red',
    borderStyle: 'solid',
    borderWidth: 2,
  },
  border2: {
    borderColor: 'green',
    borderStyle: 'solid',
    borderWidth: 5,
  },
  text: {
    fontSize: 22,
  },
  image: {
    overflow: 'hidden',
    ...Platform.select({
      android: {
        borderRadius: 25
      }
    }),
    height: 50,
    margin: 20,
    width: 50,
  },
});
export default App;

I hope I gave enough information and I appreciate any help, thank you :)

Answer 1

React Native supports inline images in text natively: thanks to this - commit you can just put the image into the Text component and it will be rendered inline.

For example:

<Text>
  <Image
    style={{
      width: 20,
      height: 20,
      borderRadius: 10,
    }}

    // Please. use the correct source =)) 
    source={require('../../static/user-ico.png')} 
  />
   Comments like this are just amazing. 
   You can write whatever you want and after that, you can check the result of this. 
   It can have more than 3 lines
</Text>

For sure you can combine any Text component and Image as needed in your particular task.

P.S. checked on android and RNWeb.

Answer 2

I suggest you set { flexDirection: 'row', flexWrap: 'wrap' } to the <View style={styles.border2}>, and wrap every word (not a block of words, but every word) within a Text, and setting the lineHeight of those Texts to the same height as the Image, and you should be done