import React, { FC, useMemo } from 'react'; import { CheckBox, Platform, StyleSheet, Text, View } from 'react-native'; import { Field } from 'typescript-fun/src'; import { useTheme } from '../hooks/useTheme'; import { FieldErrorType } from './FieldErrorMessage'; import { useFocus } from '../hooks/useFocus'; export const CheckBoxField: FC<{ field: Field<boolean, FieldErrorType>; label: string; }> = ({ field, label }) => { const theme = useTheme(); const [hasFocus, focusProps] = useFocus(); const { color, ...style } = useMemo( () => StyleSheet.flatten(theme.checkBox), [theme.checkBox], ); return ( <View style={theme.row}> <CheckBox {...focusProps} {...Platform.select({ web: { color } })} value={field.value} onValueChange={field.onChange} style={[style, hasFocus && theme.checkBoxFocus]} /> <Text style={theme.checkBoxLabel}>{label}</Text> </View> ); };