Display Checkboxes Horizontally-CodePudding

I imported some custom checkboxes but they're displaying vertically and I want them to be displayed horizontally in a row

I tried changing the flex-direction and some other things but none of that has changed anything. Here is my code:

import { Pressable, StyleSheet, Text, View } from "react-native";
import React from "react";
import { MaterialCommunityIcons } from "@expo/vector-icons";

const CheckBox = (props) => {
  const iconName = props.isChecked
    ? "checkbox-marked"
    : "checkbox-blank-outline";

  return (
    <View style={styles.container}>
      <Pressable onPress={props.onPress}>
        <MaterialCommunityIcons name={iconName} size={40} color="#000" />
      </Pressable>
      <Text style={styles.title}>{props.title}</Text>
    </View>
  );
};

export default CheckBox;

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "column",
    width: 150,
    marginTop: 5,
    marginHorizontal: 5,
    flexWrap: "wrap",
  },
  title: {
    fontSize: 20,
    color: "#000a",
    textAlign: "left",
    top: 50,
    marginTop: 40,
  },
});

CodePudding user response：

You need to change the flexDirection from column to row. Furthermore, you need to remove the topMargin from the title style for otherwise the checkbox and the text won't be aligned.

The adapted styles:


const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "row",
    width: 150,
    marginTop: 5,
    marginHorizontal: 5,
    flexWrap: "wrap",
  },
  title: {
    fontSize: 20,
    color: "#000a",
  },
});

The final product:

CodePudding user response：

You can do it by just updating your CSS like this in your container stylesheet class : {

flexDirection: "row",
Display:in-line,
float:left,