failed to align checkbox in react-native elements

Question

I am new to react-native,I am trying to create a simple page using all input components from react-native elements 1.00 beta4.My problem is I failed to align checkbox near my text component even if the parent view flexdirection is in 'row'.

register.js

import React,{ Component } from 'react';
import { Field,reduxForm } from 'redux-form';
import { View,Button } from 'react-native';
import {Icon,CheckBox,Text,Input} from 'react-native-elements';
 const renderField=({label,keyboardType,name,icon,iconType}) => {
    return(
            <View style={{flexDirection:'row'}}>
                <Input placeholder={label} inputContainerStyle={{borderWidth:2,borderColor:'lightgrey',borderRadius:20}} inputStyle={{color:'grey'}} leftIcon={<Icon size={25} type={iconType} name={icon} color="grey" />} errorStyle={{fontSize:15}} errorMessage="error" />
            </View>
    )
}
 const checkBoxField=({label,keyboardType,name}) => {
    return(
            <View style={{flexDirection:'row'}}>
                <Text>{label}</Text>
                <CheckBox  title='Male' checkedIcon='dot-circle-o' uncheckedIcon='circle-o' checked={true} containerStyle={{backgroundColor:'transparent'}} />      
            </View>
    )
}

const RegisterForm=props => {
    const {handleSubmit}=props;
    return(
            <View style={{flex:1,flexDirection:'column',margin:20,justifyContent:'flex-start',alignItems:'center'}}>

                <Field label="Username" component={renderField} name="username" icon="user" iconType="font-awesome" />
                <Field label="Email" component={renderField} name="username" icon="email" iconType="zocial" />
                <Field label="Gender" component={checkBoxField} name="gender"  />
                <Button title='SUBMIT' onPress={handleSubmit} />

            </View>
    )
}
const Register=reduxForm({
    form:'register',
})(RegisterForm);
export default Register;

output

what is the problem here?How can I align my checkbox (using flexbox algorithm)

Answer 1

For people searching this and having issues with the title prop from React Native Elements not aligning, which is a property for the component Checkbox, for labelling the checkbox "title" on the right side of it.

While trying to use it, I discovered that even though React Native Elements has a property called textStyle, they don't align well and don't work when I set the alignments using this property, only the colour of the title/label. While debugging, I thought they likely have props that can be overridden to set the styles there, with that in mind, I looked at the source code and found titleProps. Here's the reference of what looked like only setting the title/label with a text, before:

After checking the code, I found out that the <CheckBox/> they have has a prop called titleProps, which accepts a style property; you can pass and then set alignItems and justifyContent on the "center" without adding an extra JSX element for the text/label/title. Here's what it looked like after the fix. After:

For reference, only styles are being set here as example:

<CheckBox
  containerStyle={{ backgroundColor: 'transparent', borderWidth: 0, padding: 0, margin: 0 }}
  checked={checked}
  disabled={disabled}
  title={label && label}
  fontFamily={FONTS.regular}
  textStyle={{ color: BASE_COLORS.taekusBlack, fontFamily: FONTS.regular }}
  checkedColor={BASE_COLORS.taekusBlack}
  titleProps={{ style: { justifyContent: "center", alignItems: "center", marginLeft: 10 } }} // HERE IS THE CODE
/>

The complete reusable component for CheckBox from React Native Elements:

/**
 * @exports Checkbox component
 * @description toggles a checkbox and runs a function optionally.
 * Note: By default disabled is false and isChecked is false.
 * It can be used as follows: 
    <Checkbox 
      isChecked=(isCheckedUseState) 
      onPress={(e: GestureResponderEvent) => functionToRun(e)} 
      disabled={isDisabledUseState} 
    />
 */


import React, { useState } from 'react';
import { GestureResponderEvent, View, Text } from 'react-native';
import { CheckBox } from '@rneui/base';

import { ICheckbox } from './Checkbox.types';
import FONTS from '@app/design/theme/fonts.theme';
import { BASE_COLORS } from '@app/design/theme/colors.theme';

export const Checkbox = ({
  isChecked = false,
  label,
  disabled = false,
  onPress,
}: ICheckbox) => {

  const [checked, setChecked] = useState(isChecked);
  const toggleCheckbox = () => setChecked(!checked);

  const handleOnPress = (e: GestureResponderEvent) => {
    toggleCheckbox();
    onPress && onPress(e);
  };

  return (
      <CheckBox
        containerStyle={{ backgroundColor: 'transparent', borderWidth: 0, padding: 0, margin: 0 }}
        checked={checked}
        disabled={disabled}
        title={label && label}
        onPress={(e) => handleOnPress(e)}
        iconType="material-community"
        checkedIcon="checkbox-outline"
        uncheckedIcon="checkbox-blank-outline"
        fontFamily={FONTS.regular}
        textStyle={{ color: BASE_COLORS.taekusBlack, fontFamily: FONTS.regular }}
        checkedColor={BASE_COLORS.taekusBlack}
        titleProps={{ style: { justifyContent: "center", alignItems: "center", marginLeft: 10 } }} // HERE IS THE CODE
      />
  );
};

• CheckBox props - React Native Elements

Answer 2

you can use flex property like justifyContent and alginItem or you can also use Text property like alignText, and alignSelf.

 const checkBoxField=({label,keyboardType,name}) => {
    return(
            <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
                <Text style={{alignSelf:'center',textAlign:'center'}}>{label}</Text>
                <CheckBox  title='Male' checkedIcon='dot-circle-o' uncheckedIcon='circle-o' checked={true} containerStyle={{backgroundColor:'transparent'}} />      
            </View>
    )
}