BoolEditor.js 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. import React, { useState } from 'react';
  2. import {View , Text, StyleSheet} from 'react-native';
  3. import { CheckBox } from 'native-base'
  4. export default function BoolEditor(props) {
  5. let [checked, setChecked] = useState(props.value || false);
  6. let title = props.title || "Input";
  7. return (
  8. <View style={styles.container}>
  9. <Text style={[styles.title, styles.capFirst]}>{title}</Text>
  10. <CheckBox checked={checked}
  11. style={{borderColor: "#36bbad", backgroundColor: checked && "#36bbad"}}
  12. onPress={() => {
  13. props.onChange && props.onChange(!checked);
  14. setChecked(!checked);
  15. }}/>
  16. </View>
  17. );
  18. }
  19. const styles = StyleSheet.create({
  20. container:{
  21. flexDirection: 'row',
  22. justifyContent: 'space-between',
  23. alignItems: 'baseline'
  24. },
  25. capFirst: {
  26. fontSize: 14,
  27. fontFamily: 'roboto-light',
  28. textTransform: 'capitalize'
  29. },
  30. defaultInput: {
  31. marginTop:6,
  32. borderWidth:1,
  33. backgroundColor: 'white',
  34. boxShadow: '0px 3px 6px #00000029',
  35. borderColor: '#FFFFFF66',
  36. borderRadius: 14
  37. },
  38. title: {
  39. }
  40. })