Created
July 6, 2021 20:27
-
-
Save ajsmth/55d9f16e6ef3e38707c16ee7d46413c6 to your computer and use it in GitHub Desktop.
Checkbox Sandbox
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Checkbox from 'expo-checkbox'; | |
import React, { useState } from 'react'; | |
import { StyleSheet, Text, View } from 'react-native'; | |
export default function App() { | |
const [isChecked, setChecked] = useState(false); | |
return ( | |
<View style={styles.container}> | |
<View style={styles.section}> | |
<Checkbox style={styles.checkbox} value={isChecked} onValueChange={setChecked} /> | |
<Text style={styles.paragraph}>Normal checkbox</Text> | |
</View> | |
<View style={styles.section}> | |
<Checkbox | |
style={styles.checkbox} | |
value={isChecked} | |
onValueChange={setChecked} | |
color={isChecked ? '#4630EB' : undefined} | |
/> | |
<Text style={styles.paragraph}>Custom colored checkbox</Text> | |
</View> | |
<View style={styles.section}> | |
<Checkbox style={styles.checkbox} disabled value={isChecked} onValueChange={setChecked} /> | |
<Text style={styles.paragraph}>Disabled checkbox</Text> | |
</View> | |
</View> | |
); | |
} | |
const styles = StyleSheet.create({ | |
container: { | |
flex: 1, | |
marginHorizontal: 16, | |
marginVertical: 32, | |
}, | |
section: { | |
flexDirection: 'row', | |
alignItems: 'center', | |
}, | |
paragraph: { | |
fontSize: 15, | |
}, | |
checkbox: { | |
margin: 8, | |
}, | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment