React Native Paper Checkbox Item put label on right after checkbox

Viewed 4361
2 Answers

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

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.

Related