Seeking guidance on creating a unique layout in React Native.
I aim to display inline sentences with images acting as separators, akin to commas in a sentence...
I attempted to use a JSON file containing an array, implementing a map function to include text and image tags.
Unfortunately, the output did not align with my intended design.
https://i.sstatic.net/yBr5J.jpg
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;
Your insights and assistance on this matter would be greatly appreciated. Thank you :)