react-nativeandroid-checkbox

React Native: Text strings must be rendered within a <Text> component. Using expo-checkbox on Android


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


Solution

  • 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