I'm struggling with separating some flat-lists into different components. How can I arrange the rendering of the flat-list like the sample form (Picture "Sample UI")? I've tried, but it's not working correctly as it renders flat list A first and then flat list B. Please help me solve this issue. Is there another way to approach this problem? Thank you.
Here is my code:
Header component
import React, {Component} from 'react'
import {View,Text,StyleSheet,FlatList,Image} from 'react-native'
import data from '../data/FlatListData.json'
// Component to render flat-list showing artist names and albums.
export default class Header extends Component{
renderItem(item) {
return(
<View style = {styles.flatlist}>
<Image
source = {{uri: item.item.thumbnail_image}} style ={styles.imageThumbnail}>
</Image>
<View style= {{
flex: 1,
flexDirection: 'column'
}}>
// Show title
<Text style = {styles.textTitle}>{item.item.title}</Text>
// Show name of artist
<Text style = {styles.textArtist}>{item.item.artist}</Text>
</View>
</View>
);
}
render(){
return(
<View style = {{flex: 1}}>
<View style = {{flex: 1}}>
<FlatList
data = {data}
renderItem = {this.renderItem}
keyExtractor = { (item) => item.title.toString() }
/>
</View>
</View>
);
}
}
// Styles
const styles = StyleSheet.create({
container: {
marginTop: 20,
justifyContent: 'center',
alignItems: 'center',
borderColor: '#d6d7da',
borderRadius: 4,
borderWidth: 0.5,
fontSize: 1,
height: 50,
marginLeft: 10,
marginRight:10
},
text: {
fontSize: 20,
},
flatlist: {
flex: 1,
flexDirection: 'row',
marginRight: 20,
marginLeft: 20,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 4,
borderWidth: 0.4,
borderColor: '#d6d7da',
marginTop: 20,
height: 60
},
imageThumbnail: {
width: 50,
height: 50,
margin: 5
},
image: {
width: 320,
height: 240,
margin: 5
},
})
Image Component
import React, {Component} from 'react'
import {View,Text,StyleSheet,FlatList,Image} from 'react-native'
import data from '../data/FlatListData.json'
// Component to show images of albums
export default class ImageCom extends Component{
renderItem(item) {
return(
<View style = {styles.flatlist}>
// Image of albums
<Image
source = {{uri: item.item.image}} style ={styles.image}>
</Image>
</View>
);
}
render(){
return(
<View style = {{flex: 1}}>
<View style = {{flex: 1}}>
<FlatList
data = {data}
renderItem = {this.renderItem}
keyExtractor = { (item) => item.title.toString() }
/>
</View>
</View>
);
}
}
// Style sheet
const styles = StyleSheet.create({
flatlist: {
flex: 1,
flexDirection: 'row',
marginRight: 20,
marginLeft: 20,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 4,
borderWidth: 0.4,
borderColor: '#d6d7da',
marginTop: 5,
height: 250
},
image: {
width: 320,
height: 240,
margin: 5
},
})
App.js
import React, {Component} from 'react'
import {View,Text,StyleSheet,FlatList} from 'react-native'
import Tabbar from './src/components/Tabbar'
import Header from './src/components/Header'
import ImageCom from './src/components/ImageCom'
// Combine components and display them on the UI
export default class App extends Component{
render() {
return(
<View style = {styles.container}>
<Tabbar /> // Hello
<Header /> // Artist and albums
<ImageCom /> // Images of albums
</View>
);
}
}
const styles = StyleSheet.create ({
container: {
flex: 1,
},
});