Reputation: 280
I am new to react native and trying to add a check box in the view but I am unable to get check box in the view of react native.
Thanks in advance.
import React from 'react';
import {View, CheckBox } from 'react-native';
export default class SimpleCheckBox extends React.Component{
constructor(){
super();
}
render(){
return(
<View>
<CheckBox value={true} onValueChange={() => console.log("value might change")}/>
</View>
)
}
}
Upvotes: 3
Views: 6038
Reputation: 1957
import React, { Component } from 'react'
import styled from 'styled-components'
import { TouchableOpacity, View } from 'react-native'
const CustomCheckBox = styled(View)`
height: 24px;
width: 24px;
background: ${props => (props.checkBoxActive ? '#448ccb' : 'transparent')};
border-radius: 0px;
position: relative;
justify-content: center;
margin: 0px 8px 0 0;
border: solid 1px #e1e4e5;
`
const CheckIcon = styled(View)`
border-radius: 0px;
align-self: center;
transform: rotate(-30deg);
`
/*==============================
Custom checkbox styled
===============================*/
const CheckIconWrapper = styled(View)`
position: relative;
left: 2px;
top: -2px;
`
const CheckIconVertical = styled(View)`
height: 5px;
width: 2px;
background: ${props => (props.checkBoxActive ? '#fff' : 'transparent')};
`
const CheckIconHorizontal = styled(View)`
height: 2px;
width: 16px;
background: ${props => (props.checkBoxActive ? '#fff' : 'transparent')};
`
class CheckBox extends Component {
state = {
checkBox: false
}
render() {
return (
<TouchableOpacity
onPress={() => {
this.setState({ checkBox: !this.state.checkBox })
}}>
<CustomCheckBox checkBoxActive={this.state.checkBox}>
<CheckIcon>
<CheckIconWrapper>
<CheckIconVertical checkBoxActive={this.state.checkBox} />
<CheckIconHorizontal checkBoxActive={this.state.checkBox} />
</CheckIconWrapper>
</CheckIcon>
</CustomCheckBox>
</TouchableOpacity>
)
}
}
export default CheckBox
Upvotes: -1
Reputation: 3977
CheckBox
has only been added into React-Native in version 0.49, and only for Android. Which means that if you are developing for iOS or aren't able to upgrade your app version - you will need to use a custom checkbox component.
You can check out all the changes that this new version introduced at: https://github.com/facebook/react-native/releases/tag/v0.49.0
Upvotes: 7