3

I am using react native Expo
From the library react-native-paper/checkbox-item Link
I got the clickable label feature in which by clicking on the text the checkbox gets checked.

I got the tag Checkbox.Itemcode from this Expo Snack Link

<Checkbox.Item label="Item" status="checked" />

But in this, how do I put label after the checkbox ?

Like [ checkbox ] Label

Sujay U N
  • 4,974
  • 11
  • 52
  • 88

3 Answers3

5

For that, I would suggest to make a custom component for CheckBoxes

Create a file called CheckBox.js, it should look like this

import * as React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { Checkbox } from 'react-native-paper';

function CheckBox({ label, status, onPress }) {
  return (
    <TouchableOpacity onPress={onPress}>
      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        <Checkbox status={status} />
        <Text style={{ fontWeight: 'bold' }}>{label}</Text>
      </View>
    </TouchableOpacity>
  );
}

export default CheckBox;

Then use it as this whenever required.

import CheckBox from './CheckBox'; // Make sure you import it correctly

<CheckBox label="Name" status="checked" onPress={null} />

Working Example

Kartikey
  • 4,516
  • 4
  • 15
  • 40
  • Thank you for this reference, I am using this method with success to create custom component with react native community checkbox :-) Please note that `CheckBox` component `onPress` also needs to be handled otherwise only text clicks will be handled if component does not toggle itself (i.e. `@react-native-community/checkbox`). What is more I am using simpler `export const MyCheckBox = ({label, value, onPress}) => ( )` syntax :-) – CeDeROM Sep 18 '21 at 04:16
5

Maybe a way too late reply, but there is a prop called "position" in the Checkbox item which can take "leading" or "trailing" value. The default is trailing and if you set it to "leading", the checkbox will be put before the label.

Kristi Beshello
  • 51
  • 1
  • 2
0

Solution without creating custom component

style={{ justifyContent: 'flex-start' }}
labelStyle={{ textAlign: 'left', flexGrow: 0 }}
position="leading"
Kris-Gerhard Aabrams
  • 61
  • 5