ScrollView items in two Equal Columns React Native-CodePudding

below code works fine where there are only two elements in ScrollView container. but if there are more items they remain in a single row despite giving them a flex: wrap property

import React, { Component } from 'react';
import { Button, View, StyleSheet, ScrollView } from 'react-native';

export default class GridView extends Component {

   render() {
        return (
            <ScrollView contentContainerStyle={styles.container}>
              <View style={styles.buttonContainer}>
                <Button title="Button 1"/>
              </View>
              <View style={styles.buttonContainer}>
                <Button title="Button 2"/>
              </View>
              <View style={styles.buttonContainer}>
                <Button title="Button 1"/>
              </View>
              <View style={styles.buttonContainer}>
                <Button title="Button 2"/>
              </View>
            </ScrollView>
        );
    }
}



const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 10,
        gap: 10,
    },
    buttonContainer: {
        flex: 1,
    }
});

https://snack.expo.dev/OxHKR0PQT

CodePudding user response：

My suggestion is to do something like this,

pass all the buttons to GridView component from the parent component

inside the Gridview transform your buttons array to something like this.

 const allButtons = [["button_1", "button_2"], ["button_3", "button_4"]];

above you have paired two buttons into subarrays. Then do something like below,

     export default class GridView extends Component {
    
       render() {
            return (
                <ScrollView contentContainerStyle={styles.container}>
                  {allButtons.map(buttonRow => <ButtonRow row={buttonRow}/>)}
                </ScrollView>
            );
        }
    }
    
    const ButtonRow = (props) => {
    
    return (
    <View style={{flexDirection: 'row'}}>
    {props.row.map(buttonTitle => <Button title={buttonTitle}/>)}
    </View>
    )

}

CodePudding user response：

Remove "flex: 1" from buttonContainer and change styles of container according to below code.

import React, { Component } from 'react';
import { Button, View, StyleSheet, ScrollView } from 'react-native';

export default class GridView extends Component {

   render() {
        return (
            <ScrollView contentContainerStyle={styles.container}>
              <View style={styles.buttonContainer}>
                <Button title="Button 1"/>
              </View>
              <View style={styles.buttonContainer}>
                <Button title="Button 2"/>
              </View>
              <View style={styles.buttonContainer}>
                <Button title="Button 1"/>
              </View>
              <View style={styles.buttonContainer}>
                <Button title="Button 2"/>
              </View>
            </ScrollView>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'center',
        padding: 10,
        gap: 10,
    },
    buttonContainer: {
        flexBasis: '40%,
    }
});