Render variable number of items n per row (2 in my example) in react native without using Flatlist - react-native

Question

I have a case in which I am using a ScrollView.
I receive n number of paymentMediums from api which I need to render 2 per row.
With Flatlist this is just easy and I have implemented as
<FlatList
scrollEnabled={false}
numColumns={2}
data={this.state.paymentMediums}
keyExtractor={item => String(item.paymentMasterIdentifier)}
renderItem={({ item, index }) => (
<TouchableOpacity
key={item.paymentMasterIdentifier}
onPress={() => this.setState({ selectedPaymentMedium: item.paymentMasterIdentifier, selectedPaymentMediumName: item.paymentMethodName })}
style={[styles.checkboxView, { marginBottom: 10, width: (width - 32) / 2, alignSelf: 'center' }]}>
<View style={{ borderRadius: 10, borderWidth: 3, borderColor: this.state.selectedPaymentMedium == item.paymentMasterIdentifier ? MyColors.COLOR_ACCENT : '#F1D3C3' }}>
<Image
resizeMode="contain"
style={styles.paymentImage}
source={{ uri: item.imageUrl }}
/>
</View>
<Text style={{ color: this.state.selectedPaymentMedium == item.paymentMasterIdentifier ? MyColors.COLOR_ACCENT : '#7A7A7A' }}>{item.paymentMethodName}</Text>
</TouchableOpacity>
)}
/>
However this gives the obvious warning of virtualized list should never be nested inside plain scrollview. So, I need to render them in a normal way without Flatlists.
I tried it as, {this.renderPaymentMediums()} inside render() where
renderPaymentMediums() {
let paymentMediums = this.state.paymentMediums;
console.log('incoming', paymentMediums.length)
for (let index = 0; index < paymentMediums.length; index += 2) {
return (<View style={{}}>
{ this.renderEachPaymentMediums(paymentMediums[index], paymentMediums[index + 1] ? paymentMediums[index + 1] : null)
}
</View>)
}
}
renderEachPaymentMediums = (item, item2 = null) => {
return (
<View style={{ flexDirection: 'row', flex: 1, marginBottom: 10 }}>
<View style={{ alignItems: 'center' }}>
<TouchableOpacity
key={item.paymentMasterIdentifier}
onPress={() => this.setState({ selectedPaymentMedium: item.paymentMasterIdentifier, selectedPaymentMediumName: item.paymentMethodName })}
style={[styles.checkboxView, { width: (width - 32) / 2, }]}>
<View style={{ padding: 3, borderRadius: 10, borderWidth: 3, borderColor: this.state.selectedPaymentMedium == item.paymentMasterIdentifier ? MyColors.COLOR_ACCENT : '#F1D3C3' }}>
<Image
resizeMode="contain"
style={styles.paymentImage}
source={{ uri: item.imageUrl }}
/>
</View>
<Text style={{ color: this.state.selectedPaymentMedium == item.paymentMasterIdentifier ? MyColors.COLOR_ACCENT : '#7A7A7A' }}>{item.paymentMethodName}</Text>
</TouchableOpacity>
</View>
<View style={{ alignItems: 'center' }}>
{item2 !== null && (
<TouchableOpacity
key={item2.paymentMasterIdentifier}
onPress={() => this.setState({ selectedPaymentMedium: item2.paymentMasterIdentifier, selectedPaymentMediumName: item2.paymentMethodName })}
style={[styles.checkboxView, { width: (width - 32) / 2 }]}>
<View style={{ padding: 3, borderRadius: 10, borderWidth: 3, borderColor: this.state.selectedPaymentMedium == item2.paymentMasterIdentifier ? MyColors.COLOR_ACCENT : '#F1D3C3' }}>
<Image
resizeMode="contain"
style={styles.paymentImage}
source={{ uri: item2.imageUrl }}
/>
</View>
<Text style={{ color: this.state.selectedPaymentMedium == item2.paymentMasterIdentifier ? MyColors.COLOR_ACCENT : '#7A7A7A' }}>{item2.paymentMethodName}</Text>
</TouchableOpacity>
)}
</View>
</View>
)
}
This does not work since it returns from the first iteration of loop with the return.
So, how do I make this work.
Also, I want to ask if using using Flatlists inside ScrollView takes a toll on the performance. I have disabled the scroll of the inside Flatlist so that 2 scrolling behaviours dont overlap and hence I dont get the warning.But the warning persists. Does this step do any good??