Question 34231 in React native Question posted in
The official React Native documentation can be found here.

ScrollView items in two Equal Columns React Native

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

Tags:

2

Answers


  1. 0

    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%,
    }
});
    Login or Signup to reply.
  2. 0

    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>
    )

}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search