React Native change container height pixel parameters to flex values and display list as two columns-CodePudding

With the map function i create a radio list with 10 radio buttons. I need to display this list in two columns. The only way i managed to get it work is by setting my container height to 200 pixels and flexWrap:"wrap" so i got 5 list items per column .How could i achieve the same effect only using flex dimensions and not setting height:200 ? To my understanding my styles.flexContainer is parent and i have to set it to flex:1, i am changing flex value to styles.container from 1 to even 15 and i dont see any changes to the containers height. I need the style.container View to be 1/2 size of the parent flexContainer

export function RadioGrid({ label, options, onChange, value }: RadioGridProps) {
    return (
            <View style={styles.flexContainer}>
            <View style={styles.container}>
                {options.map((option) => (
                    <Radio
                        style={styles.radio}
                        checked={option.value === value}
                        key={option.value}
                        label={option.label}
                        onPress={() => onChange(option.value)}
                    />
                ))}
            </View>
           </View>
    );
}

const styles = StyleSheet.create({
    radio: {
        paddingVertical: 8,
        marginRight: 40,
    },
    container: {
        flex:2,
        //height: 200,
        flexWrap: "wrap",
    },
    flexContainer: {
        flex: 1,
    },
});

CodePudding user response：

There is an easy way to achieve what you want. You could use a FlatList with numColumn being equal to two.

export function RadioGrid({ label, options, onChange, value }: RadioGridProps) {
  return (
    <View style={styles.flexContainer}>
      <FlatList
        data={options}
        keyExtractor={(item) => item.value}
        numColumns={2}
        renderItem={({ item }) => {
          return (
            <Radio
              style={styles.radio}
              checked={item.value === value}
              key={item.value}
              label={item.label}
              onPress={() => onChange(item.value)}
            />
          );
        }}
      />
    </View>
  );
}

The FlatList component will manage everything for you.

If you still want to use map, then this could be implemented as follows.

First, convert your options array to an array of pairs.

const pairs = options.reduce(
  (result, _, index, array) =>
    index % 2 === 0 ? [...result, array.slice(index, index   2)] : result,
   []
);

Then, map over pairs and create a new View for each pair with flexDirection: 'row' and add a Radio for each element of the pairs.

return (
    <View style={styles.flexContainer}>
      {pairs.map((pair) => {
        return (
          <View style={{ flexDirection: 'row' }}>
            {pair.map((element) => (
              <Radio
                style={styles.radio}
                checked={element.value === value}
                key={element.value}
                label={element.label}
                onPress={() => onChange(element.value)}
              />
            ))}
          </View>
        );
      })}
    </View>
  );

The complete code:

export function RadioGrid({ label, options, onChange, value }: RadioGridProps) {
  const pairs = options.reduce(
    (result, _, index, array) =>
      index % 2 === 0 ? [...result, array.slice(index, index   2)] : result,
    []
  );
  return (
    <View style={styles.flexContainer}>
      {pairs.map((pair) => {
        return (
          <View style={{ flexDirection: 'row' }}>
            {pair.map((element) => (
              <Radio
                style={styles.radio}
                checked={element.value === value}
                key={element.value}
                label={element.label}
                onPress={() => onChange(element.value)}
              />
            ))}
          </View>
        );
      })}
    </View>
  );
}