React Native Paper Checkbox Item put label on right after checkbox

Question

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

Answer 1

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.

Answer 2

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