I am trying to create a simple to do list app. Everything is working in the web, but on android I am getting the error written in the title.
I have no issues when I comment out value and onValueChange inside the CheckBox, but a crash with that code included.
I have looked for some issues mentioned elsewhere, such as whitespace and conditional rendering, but none apply here as far as I can tell.
Here is my code:
import { StyleSheet, View, TextInput } from 'react-native';
import { useState } from 'react';
import CheckBox from 'expo-checkbox';
const Task = props => {
let data = props.data;
//console.log(data.created, data.done, data.text, data.focus);
const [valueDisplayed, onChangeText] = useState(data.text);
return (
<View style={styles.task}>
<CheckBox
value={data.done}
onValueChange={(value)=>{props.finish(data.created)}}
/>
<TextInput
value={valueDisplayed}
onChangeText={input => {
onChangeText(input);
props.update(data.created, input);
}}
style={styles.textBox}
onKeyPress={keyPress => {
console.log(keyPress.nativeEvent.key);
if (keyPress.nativeEvent.key == "Enter") {
props.add(data.created);
} else if (data.text.length == 0 &&
keyPress.nativeEvent.key == "Backspace") {
props.delete(data.created);
}
}}
onSubmitEditing={() => {
props.add(data.created);
}}
autoFocus={data.focus}
/>
</View>
);
}
const styles = StyleSheet.create({
task: {
flexDirection: "row",
},
textBox: {
flex: 1,
fontSize: 32,
}
});
export default Task;
Thanks for your help :)
...as requested, here is an extract from the parent component:
const finishItem = async (list, created, setTasks) => {
let array = await loadList(list);
for (let i = 0; i < array.length; i++)
if (array[i].created == created)
if (array[i].done == 0)
array[i].done = Date.now();
else
array[i].done = 0;
sortTasks(array);
setTasks(array);
await saveList(list, array);
}
const TaskList = (props) => {
const [tasks, setTasks] = useState([]);
useEffect(()=>{
getInitialList(props.list, setTasks);
}, []);
return (
<FlatList
data={tasks}
extraData={tasks}
renderItem={({item}) => (
<Task
data={item}
add={(createdFrom) => {
addItem(props.list, createdFrom, setTasks);
}}
update={(created, text) => {
updateItem(props.list, created, text, setTasks);
}}
delete={(created) => {
deleteItem(props.list, created, setTasks);
}}
finish={(created) => {
finishItem(props.list, created, setTasks);
}}
/>
)}
keyExtractor={(item) => {
return item.created
}}
showsHorizontalScrollIndicator={false}
/>
);
}
Logging the attributes of data gives:
1690929274428 0 'f' false
expo-checkbox only expects a boolean in its value
prop. You should only send it values of true
or false
.
On the web, expo runs Javascript, which will coerce the 'f' to true
, since all non-empty strings are truthy in Javascript. In Java/Kotlin (and Objective-C/Swift - I would expect a similar error on iOS), type mismatches are not as forgiving.
Check the props here - https://docs.expo.dev/versions/latest/sdk/checkbox/#value