0

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,
  },
});
TylerH
  • 20,799
  • 66
  • 75
  • 101
Connor Broekhuizen
  • 1
  • Hello! Changing the 'flexDirection' from 'column' to 'row' (in the 'container' style) should display the icon and the title side, no? – joaocout Nov 15 '22 at 21:47

2 Answers2

0

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:

enter image description here

David Scholz
  • 8,421
  • 12
  • 19
  • 34
  • That didn't work. I need the actual textboxes to appear side by side in a row. I have 7 checkboxes(one for each day of the week) and need them to be displayed horizontally – Connor Broekhuizen Nov 16 '22 at 00:36
-2

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

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

},

Rohit Soni
  • 1