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

Question

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

Please include the code for `props.finish` and what you see when you log out `data` — Abe, Aug 02 '23 at 01:21

score 0 · Accepted Answer · answered Aug 02 '23 at 05:19

0

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

answered Aug 02 '23 at 05:19

Abe

4,500
2
11
25

That has fixed it, thanks. I did have a boolean there at one point and for whatever reason changed it. – Multiple Sources Aug 02 '23 at 12:53
If you are up for it, I have another question about another issue in this same project: https://stackoverflow.com/questions/76815157/react-native-how-do-i-focus-on-a-textinput-which-is-inside-a-flatlist-programma – Multiple Sources Aug 02 '23 at 12:56
No problem. If the answer helped, please accept it as the solution, or if you solved it another way, feel free to add your own answer and accept that. – Abe Aug 02 '23 at 13:40

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

1 Answers1