How to show two views per rows in scollview in 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