react-native-elements#CheckBox JavaScript Examples
The following examples show how to use
react-native-elements#CheckBox.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: NormalForms.js From guardioes-app with Apache License 2.0 | 6 votes |
|
CheckBoxStyled = styled(CheckBox).attrs((props) => ({
containerStyle: {
flex: 1,
width: props.full ? '100%' : 'auto',
alignSelf: 'center',
backgroundColor: '#ffffff',
borderRadius: scale(15),
borderWidth: 0,
marginLeft: 0,
marginRight: 0,
},
wrapperStyle: {
width: '95%',
},
textStyle: {
fontFamily: 'ArgentumSans',
fontSize: scale(14),
color: '#32323B',
},
iconType: 'feather',
checkedIcon: 'check-circle',
uncheckedIcon: 'circle',
checkedColor: '#348EAC',
uncheckedColor: '#c4c4c4',
size: scale(25),
}))``
Example #2
| Source File: styles.js From guardioes-app with Apache License 2.0 | 6 votes |
|
CheckBoxStyled = styled(CheckBox).attrs({
containerStyle: {
width: '100%',
alignSelf: 'center',
backgroundColor: '#ffffff',
borderRadius: scale(15),
borderWidth: 0,
marginLeft: 0,
marginRight: 0,
},
textStyle: {
fontFamily: 'ArgentumSans',
fontSize: scale(14),
color: '#32323B',
},
iconType: 'feather',
checkedIcon: 'check-circle',
uncheckedIcon: 'circle',
checkedColor: '#348EAC',
uncheckedColor: '#c4c4c4',
size: scale(25),
})``
Example #3
| Source File: checkBox.js From intentional-walk with MIT License | 6 votes |
|
export default function CustomCheckBox(props) {
return (
<View
style={[styles.row, props.style]}
pointerEvents={props.editable ? 'auto' : 'none'}>
<CheckBox
checked={props.checked}
iconType="material"
uncheckedIcon="check-box-outline-blank"
checkedIcon="check-box"
size={32}
uncheckedColor={
props.editable ? Colors.primary.purple : Colors.primary.gray2
}
checkedColor={
props.editable ? Colors.primary.purple : Colors.primary.gray2
}
containerStyle={styles.container}
onPress={() => props.onPress()}
/>
{props.children}
</View>
);
}
Example #4
| Source File: multipleChoiceAnswer.js From intentional-walk with MIT License | 6 votes |
|
export default function MultipleChoiceAnswer(props) {
return (
<TouchableOpacity
style={[styles.row, props.style]}
pointerEvents={props.editable ? 'auto' : 'none'}
onPress={() => props.onPress()}>
<CheckBox
checked={props.checked}
iconType="material"
uncheckedIcon="check-box-outline-blank"
checkedIcon="check-box"
size={32}
uncheckedColor={
props.editable ? Colors.primary.purple : Colors.primary.gray2
}
checkedColor={
props.editable ? Colors.primary.purple : Colors.primary.gray2
}
containerStyle={styles.container}
onPress={() => props.onPress()}
/>
<View>
<Text style={styles.text}>{props.text}</Text>
{props.subText ? (
<Text style={styles.subText}>{props.subText}</Text>
) : (
<></>
)}
</View>
</TouchableOpacity>
);
}
Example #5
| Source File: SignupFormComponent.js From CoughCheckApp with MIT License | 4 votes |
|
export default function SignupFormComponent(props) {
const passwordInput = React.useRef(null)
const { dispatch } = useAuthContext()
return (
<KeyboardAvoidingView behavior={'position'} style={styles.signupFormWrapper}>
<Formik
initialValues={{ email: '', password: '', check: false }}
validationSchema={Yup.object({
email: Yup.string().email('Invalid Email').required('Required'),
password: Yup.string().required('Required'),
check: Yup.string().required('Required').oneOf([true]),
})}
onSubmit={(values, formikActions) => {
setTimeout(() => {
Alert.alert(JSON.stringify(values))
// Important: Make sure to setSubmitting to false so our loading indicator
// goes away.
formikActions.setSubmitting(false)
}, 500)
}}
>
{(props) => (
<View>
<TextInput
onChangeText={props.handleChange('email')}
onBlur={props.handleBlur('email')}
value={props.values.email}
// autoFocus
placeholder="Email Address"
style={styles.input}
onSubmitEditing={() => {
passwordInput.current.focus()
}}
/>
{props.touched.email && props.errors.email ? (
<Text style={styles.error}>{props.errors.email}</Text>
) : null}
<TextInput
onChangeText={props.handleChange('password')}
onBlur={props.handleBlur('password')}
value={props.values.password}
placeholder="Password"
secureTextEntry={true}
style={styles.input}
ref={passwordInput}
/>
{props.touched.password && props.errors.password ? (
<Text style={styles.error}>{props.errors.password}</Text>
) : null}
<ButtonCTALarge
text="Sign Up"
onPress={() => {
// Should we handle some kind of props.handleSubmit here when Auth is reactivated?
dispatch({
type: 'SIGN_IN',
token: 'TODO_SAVE_HERE_ANY_DATA_USEFUL_FOR_FUTURE_CALLS',
})
}}
accessibilityLabel="Submit button"
/>
<CheckBox
containerStyle={styles.checkboxContainer}
wrapperStyle={styles.checkboxWrapper}
checkedIcon="check-box"
iconType="material"
uncheckedIcon="check-box-outline-blank"
title="Check to agree to our terms and conditions"
checkedTitle="I agree to our terms and conditions"
checked={props.values.check}
onPress={() => props.setFieldValue('check', !props.values.check)}
/>
</View>
)}
</Formik>
<View style={styles.textWrapper}>
<StyledText>Have an account? Sign In</StyledText>
</View>
</KeyboardAvoidingView>
)
}
Example #6
| Source File: ProfileScreen.js From react-native-booking-app with MIT License | 4 votes |
|
render() {
const {goBack} = this.props.navigation;
return (
<SafeAreaView style={styles.container}>
<KeyboardAwareScrollView contentContainerStyle={styles.container} enableOnAndroid={true}
resetScrollToCoords={{ x: 0, y: 0 }}
scrollEnabled={true}>
<Spinner
visible={this.state.spinner}
textContent={'Please wait...'}
overlayColor='rgba(0, 0, 0, 0.5)'
textStyle={{color: 'white'}}
/>
<View style={styles.logoContainer}>
<Image source={require('../../assets/images/logo.png')} style={styles.logo}/>
</View>
<View style={styles.itemContainer}>
<Input ref={(input) => { this._firstNameInput = input; }}
inputContainerStyle={styles.inputStyle}
leftIcon={<Icon name='user' style={styles.iconNormalStyle} />}
inputStyle={styles.inputInnerStyle}
placeholder='First Name' returnKeyType='next'
onSubmitEditing={() => { this._lastNameInput.focus(); }}
blurOnSubmit={false}
onChangeText={(firstName) => { this.setState({firstName});}}
value={this.state.firstName}
errorMessage={this.state.errorMessage1} errorStyle={{paddingLeft: 20}} />
<Text style={styles.required}>*</Text>
</View>
<View style={styles.itemContainer}>
<Input ref={(input) => { this._lastNameInput = input; }}
inputContainerStyle={styles.inputStyle}
leftIcon={<Icon name='user' style={styles.iconNormalStyle} />}
inputStyle={styles.inputInnerStyle}
placeholder='Last Name' returnKeyType='next'
onSubmitEditing={() => { this._phoneInput.focus(); }}
blurOnSubmit={false}
onChangeText={(lastName) => { this.setState({lastName}); }}
value={this.state.lastName}
errorMessage={this.state.errorMessage2} errorStyle={{paddingLeft: 20}} />
<Text style={styles.required}>*</Text>
</View>
<View style={styles.itemContainer}>
<Input ref={(input) => { this._phoneInput = input; }}
inputContainerStyle={styles.inputStyle}
leftIcon={<Icon name='phone' style={styles.iconNormalStyle} />}
inputStyle={styles.inputInnerStyle}
placeholder='Phone' keyboardType='phone-pad' returnKeyType='next'
onChangeText={(phone) => { this.setState({phone}); }}
value={this.state.phone}
errorMessage={this.state.errorMessage3} errorStyle={{paddingLeft: 20}} />
<Text style={styles.required}> </Text>
</View>
<View style={styles.frameContainer}>
<View style={styles.checkBoxContainer}>
<CheckBox containerStyle={styles.checkBoxStyle} title='Change Password' checked={this.state.checkedChangePassword}
onPress={this.onChangePasswordCheckBox}/>
</View>
<View style={styles.itemContainer}>
<Input ref={(input) => { this._passwordInput = input; }}
inputContainerStyle={this.state.checkedChangePassword? styles.inputStyle : styles.disabledInputStyle}
disabled={!this.state.checkedChangePassword}
leftIcon={<Icon name='lock' style={this.state.checkedChangePassword? styles.iconNormalStyle : styles.disableIconNormalStyle} />}
inputStyle={styles.inputInnerStyle} secureTextEntry={true}
placeholder='Password' returnKeyType='next'
onSubmitEditing={() => { this._confirmPasswordInput.focus(); }}
blurOnSubmit={false}
onChangeText={(password) => { this.setState({password}); }}
value={this.state.password}
errorMessage={this.state.errorMessage4} errorStyle={{paddingLeft: 20}} />
<Text style={[styles.required, this.state.checkedChangePassword? {opacity: 1.0} : {opacity: 0.0} ]}>*</Text>
</View>
<View style={styles.itemContainer}>
<Input ref={(input) => { this._confirmPasswordInput = input; }}
inputContainerStyle={this.state.checkedChangePassword? styles.inputStyle : styles.disabledInputStyle}
disabled={!this.state.checkedChangePassword}
leftIcon={<Icon name='lock' style={this.state.checkedChangePassword? styles.iconNormalStyle : styles.disableIconNormalStyle} />}
inputStyle={styles.inputInnerStyle} secureTextEntry={true}
placeholder='Confirm Password'
onChangeText={(confirmPassword) => { this.setState({confirmPassword}); }}
value={this.state.confirmPassword}
errorMessage={this.state.errorMessage5} errorStyle={{paddingLeft: 20}}/>
<Text style={[styles.required, this.state.checkedChangePassword? {opacity: 1.0} : {opacity: 0.0} ]}>*</Text>
</View>
</View>
<View style={[styles.frameContainer, { marginTop: 30 }]}>
<View style={styles.checkBoxContainer}>
<CheckBox containerStyle={styles.checkBoxStyle} title='Coach Information' checked={this.state.checkedCoachInfo}
onPress={this.onCoachInfoCheckBox}/>
</View>
<View style={styles.itemContainer}>
<Input ref={(input) => { this._coachNameInput = input; }}
inputContainerStyle={this.state.checkedCoachInfo? styles.inputStyle : styles.disabledInputStyle}
disabled={!this.state.checkedCoachInfo}
leftIcon={<Icon name='user' style={this.state.checkedCoachInfo? styles.iconNormalStyle : styles.disableIconNormalStyle} />}
inputStyle={styles.inputInnerStyle}
placeholder='Name' returnKeyType='next'
onSubmitEditing={() => { this._coachEmailInput.focus(); }}
blurOnSubmit={false}
onChangeText={(coachName) => { this.setState({coachName});}}
value={this.state.coachName}
errorMessage={this.state.errorMessage6} errorStyle={{paddingLeft: 20}} />
<Text style={[styles.required, this.state.checkedCoachInfo? {opacity: 1.0} : {opacity: 0.0} ]}>*</Text>
</View>
<View style={styles.itemContainer}>
<Input ref={(input) => { this._coachEmailInput = input; }}
inputContainerStyle={this.state.checkedCoachInfo? styles.inputStyle : styles.disabledInputStyle}
disabled={!this.state.checkedCoachInfo}
leftIcon={<Icon name='envelope' style={this.state.checkedCoachInfo? styles.iconNormalStyle : styles.disableIconNormalStyle} />}
inputStyle={styles.inputInnerStyle}
placeholder='Email' autoCapitalize='none' keyboardType='email-address' returnKeyType='next'
onSubmitEditing={() => { this._coachPhoneInput.focus(); }}
blurOnSubmit={false}
onChangeText={(coachEmail) => { this.setState({coachEmail}); }}
value={this.state.coachEmail}
errorMessage={this.state.errorMessage7} errorStyle={{paddingLeft: 20}} />
<Text style={[styles.required, this.state.checkedCoachInfo? {opacity: 1.0} : {opacity: 0.0} ]}>*</Text>
</View>
<View style={styles.itemContainer}>
<Input ref={(input) => { this._coachPhoneInput = input; }}
inputContainerStyle={this.state.checkedCoachInfo? styles.inputStyle : styles.disabledInputStyle}
disabled={!this.state.checkedCoachInfo}
leftIcon={<Icon name='phone' style={this.state.checkedCoachInfo? styles.iconNormalStyle : styles.disableIconNormalStyle} />}
inputStyle={styles.inputInnerStyle}
placeholder='Phone' keyboardType='phone-pad' returnKeyType='next'
onChangeText={(coachPhone) => { this.setState({coachPhone}); }}
value={this.state.coachPhone}
errorMessage={this.state.errorMessage8} errorStyle={{paddingLeft: 20}} />
<Text style={styles.required}> </Text>
</View>
</View>
<View style={styles.buttonsContainer}>
<Button raised buttonStyle={styles.backButton} title='Back' onPress={() => goBack()} />
<Button raised buttonStyle={styles.createButton} title='Save' onPress={this.onSave} />
</View>
<View style={styles.hintContainer}>
<Text style={styles.required}>* </Text>
<Text style={styles.requiredDesc}>Denotes a required field.</Text>
</View>
</KeyboardAwareScrollView>
</SafeAreaView>
)
}
Example #7
| Source File: ReportScreen.js From react-native-booking-app with MIT License | 4 votes |
|
render() {
return (
<SafeAreaView style={styles.container}>
<KeyboardAwareScrollView contentContainerStyle={styles.container} enableOnAndroid={true}
resetScrollToCoords={{ x: 0, y: 0 }}
scrollEnabled={true}>
<Spinner
visible={this.state.spinner}
textContent={'Please wait...'}
overlayColor='rgba(0, 0, 0, 0.5)'
textStyle={{color: 'white'}}
/>
<View style={styles.dateContainer}>
<View style={styles.itemContainer}>
<Text style={styles.labelStyle}>From Date</Text>
<DatePicker style={styles.dateTimeStyle} showIcon={false}
mode="date" placeholder="Select Date" format="MM-DD-YYYY"
date={this.state.fromDate}
confirmBtnText="OK" cancelBtnText="Cancel"
customStyles={{
dateInput: {borderWidth: 0,},
dateText: styles.dateTimeInputStyle,
placeholderText: styles.dateTimeInputStyle,
btnTextConfirm: {color: 'mediumvioletred'},
btnTextCancel: {color: 'lightseagreen'},
}}
onDateChange={(date) => {this.setState({fromDate: date})}} />
<Text style={styles.errorStyle}>{this.state.errorMessage1}</Text>
</View>
<View style={styles.itemContainer}>
<Text style={styles.labelStyle}>To Date</Text>
<DatePicker style={styles.dateTimeStyle} showIcon={false}
mode="date" placeholder="Select Date" format="MM-DD-YYYY"
date={this.state.toDate}
confirmBtnText="OK" cancelBtnText="Cancel"
customStyles={{
dateInput: {borderWidth: 0,},
dateText: styles.dateTimeInputStyle,
placeholderText: styles.dateTimeInputStyle,
btnTextConfirm: {color: 'mediumvioletred'},
btnTextCancel: {color: 'lightseagreen'},
}}
onDateChange={(date) => {this.setState({toDate: date})}} />
<Text style={styles.errorStyle}>{this.state.errorMessage2}</Text>
</View>
</View>
<View style={styles.checkBoxContainer}>
<CheckBox containerStyle={styles.checkBoxStyle} title='Food' checked={this.state.checkedFood}
onPress={()=> this.setState({checkedFood: !this.state.checkedFood}, () => this.onRefreshTable())}/>
<CheckBox containerStyle={styles.checkBoxStyle} title='Water' checked={this.state.checkedWater}
onPress={()=> this.setState({checkedWater: !this.state.checkedWater}, () => this.onRefreshTable())}/>
<CheckBox containerStyle={styles.checkBoxStyle} title='Weight' checked={this.state.checkedWeight}
onPress={()=> this.setState({checkedWeight: !this.state.checkedWeight}, () => this.onRefreshTable())}/>
<CheckBox containerStyle={styles.checkBoxStyle} title='Inch' checked={this.state.checkedInch}
onPress={()=> this.setState({checkedInch: !this.state.checkedInch}, () => this.onRefreshTable())}/>
</View>
<View style={styles.buttonsContainer}>
<Button raised buttonStyle={styles.backButton} title='Submit' onPress={this.onSubmit} />
</View>
<View style={styles.tableContainer}>
<ScrollView>
<ScrollView style={styles.tableWrapper} horizontal={true}>
<View>
<Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
<Row data={this.state.tableHead} widthArr={this.state.widthArr} style={styles.tableHeader} textStyle={[styles.tableText, {color: 'white', fontWeight: '600'}]}/>
</Table>
{ this.state.tableData.length == 0 ?
<View style={styles.noDataWaringContainer}>
<Icon name='not-interested' iconStyle={styles.selectDateArrowStyle} color='tomato' />
<Text style={styles.noDataWaringStyle}>There is no data.</Text>
</View>
:
<Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
{
this.state.tableData.map((rowData, index) => (
<TableWrapper key={index} style={[styles.tableRow, index%2 && {backgroundColor: '#F7F6E7'}]}>
{
rowData.map((cellData, cellIndex) => (
<Cell key={cellIndex} data={cellData} textStyle={styles.tableText} width={this.state.widthArr[cellIndex]} />
))
}
</TableWrapper>
))
}
</Table>
}
</View>
</ScrollView>
</ScrollView>
</View>
<View style={styles.buttonsContainer}>
<Button raised buttonStyle={styles.createButton} title='Send to Coach' onPress={this.onSendToCoach} />
</View>
</KeyboardAwareScrollView>
</SafeAreaView>
)
}
Example #8
| Source File: checkbox.playground.jsx From playground with MIT License | 4 votes |
|
HeaderPlayground = () => {
const params = useView({
componentName: "CheckBox",
props: {
center: {
type: PropTypes.Boolean,
value: false,
description: "Aligns checkbox to center (optional)",
},
right: {
type: PropTypes.Boolean,
value: false,
description: "Aligns checkbox to right (optional)",
},
checked: {
type: PropTypes.Boolean,
value: false,
stateful: true,
description: "Flag for checking the icon (required)",
},
checkedColor: {
type: PropTypes.String,
value: "#0F0",
description: "Default checked color (optional)",
},
checkedIcon: {
type: PropTypes.Object,
value: ``,
description: `string OR React Native Component `,
},
checkedTitle: {
type: PropTypes.String,
value: `Great!`,
description: "Specify a custom checked message (optional)",
},
Component: {
type: PropTypes.ReactNode,
value: null,
description: "React Native Component",
},
containerStyle: {
type: PropTypes.Object,
value: `{width: "75%"}`,
description: "Style of main container (optional)",
},
fontFamily: {
type: PropTypes.String,
value: null,
description: "Specify different font family",
},
iconRight: {
type: PropTypes.Boolean,
value: false,
description: "Moves icon to right of text (optional)",
},
iconType: {
type: PropTypes.String,
value: null,
description: "type of icon set",
},
onIconPress: {
type: PropTypes.Function,
value: `() => setChecked(!checked)`,
propHook: {
what: "!checked",
into: "checked",
},
description: "onPress function for checkbox (required)",
},
onLongIconPress: {
type: PropTypes.Function,
value: `() => console.log("onLongIconPress()")`,
description: "onLongPress function for checkbox (optional)",
},
onLongPress: {
type: PropTypes.Function,
value: `() => console.log("onLongPress()")`,
description: "onLongPress function for checkbox (optional)",
},
onPress: {
type: PropTypes.Function,
value: `() => console.log("onPress()")`,
description: "onPress function for container (optional)",
},
size: {
type: PropTypes.Number,
value: 30,
description: "Size of the checkbox",
},
textStyle: {
type: PropTypes.Object,
value: `{}`,
description: "Style of text (optional)",
},
title: {
type: PropTypes.Object,
value: `"Check for Awesomeness"`,
description: "Title of checkbox",
},
titleProps: {
type: PropTypes.Object,
value: `{}`,
description: "Additional props for the title Text component (optional)",
},
uncheckedColor: {
type: PropTypes.String,
value: `#F00`,
description: "Default unchecked color (optional)",
},
uncheckedIcon: {
type: PropTypes.Object,
value: null,
description: "string OR React Native Component",
},
},
scope: {
CheckBox,
},
imports: {
"react-native-elements": {
named: ["CheckBox"],
},
},
});
return (
<React.Fragment>
<Playground params={params} />
</React.Fragment>
);
}
