How to show two views per rows in scollview in React native - react-native

Question

How to show two views per rows in scollview in React native?
It is difficult to change the large framework since I made a view by pulling the json with module.
I would like to show views in the scrollview in the form shown below.
enter image description here <-- image link
I’d be glad if you could help me.
** If it have no idea in current method, you can give me a new idea.
this is code (const styles skipped)
import React, { Component } from 'react';
import { StyleSheet, View, Text, Image, StatusBar, FlatList, ScrollView, TouchableOpacity, Button, Dimensions } from 'react-native';
import logoImg from '../../images/logo.png';
import SearchInput, { createFilter } from 'react-native-search-filter';
import Icon from 'react-native-vector-icons/FontAwesome';
import Icon2 from 'react-native-vector-icons/Feather';
import promotion_list from '../../data/market_list.js';
const KEYS_TO_FILTERS = ['name', 'subject'];
const myIcon = (<Icon name="times" size={25} color='#949494' />)
export default class Market extends React.Component {
constructor(props) {
super(props);
this.state = {
searchTerm: ''
}
}
searchUpdated(term) {
this.setState({ searchTerm: term })
}
render() {
const filteredlists = promotion_list.filter(createFilter(this.state.searchTerm, KEYS_TO_FILTERS))
return (
<View style={styles.SearchList}>
<View style={{ flexDirection: 'row', margin: 10, padding: 10, height: 40, borderRadius: 100, backgroundColor: '#f5f5f5' }}>
<Icon name="search" size={20} color='#949494' style={{ flex: 0, marginRight: 10 }} />
<SearchInput
clearIcon={myIcon}
clearIconViewStyles={{ position: 'absolute', right: 6 }}
onChangeText={(term) => { this.searchUpdated(term) }}
placeholder="Search"
inputViewStyles={{ flex: 1 }}
/>
</View>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<Image style={{width:390, height:180}} source={require("../../images/market/topview.png")} />
</View>
<View>
<Text style={{marginLeft:15, marginTop:10, marginBottom:10, fontWeight:'bold', fontSize:20, color: '#494a51'}}>Your Partners</Text>
</View>
<ScrollView style={styles.ScrollView}>
{filteredlists.map(plist => {
function getImage(img_name) {
switch (img_name) {
case "1.png": return require("../../images/par_logo/1.png");
case "2.png": return require("../../images/par_logo/2.png");
case "3.png": return require("../../images/par_logo/3.png");
case "4.png": return require("../../images/par_logo/4.png");
case "5.png": return require("../../images/par_logo/5.png");
case "6.png": return require("../../images/par_logo/6.png");
case "7.png": return require("../../images/par_logo/7.png");
case "p1.png": return require("../../images/promotion_feed/1.png");
case "p2.png": return require("../../images/promotion_feed/2.png");
case "p3.png": return require("../../images/promotion_feed/3.png");
case "p4.png": return require("../../images/promotion_feed/4.png");
case "p5.png": return require("../../images/promotion_feed/5.png");
}
}
return (
<TouchableOpacity activeOpacity={1} key={plist.id} style={styles.ListItem}>
<View style={{ paddingRight: 10, paddingLeft: 10, height: 50, flexDirection: 'row', alignItems: 'center' }}>
<Image style={{ marginRight: 10, width: 30, height: 30, resizeMode: Image.resizeMode.contain }} source={getImage(plist.src1)} />
<Text style={{ fontWeight: 'bold' }}>{plist.name}</Text>
</View>
<View style={{margin:0}}>
<TouchableOpacity onPress={() => { alert("you clicked me") }}>
<Image style={{}} source={getImage(plist.src2)} />
</TouchableOpacity>
</View>
</TouchableOpacity>
)
})}
</ScrollView>
</View>
)
}
}

Answer 1

One possible solution is to use a FlatList which is inherited from ScrollView and use the numColumns prop. FlatList