react-nativereact-hooksnsmutabledictionary

NSMutableDictionary cannot be converted to a YGValue


I am working in React Native and heave never heard of a YGValue or an NSMutableDictionary, yet somehow using a boolean useState, renderCondition, I get the following error...

JSON value '{
  renderCondition = 0;
}' of type NSMutableDictionary cannot be converted to a YGValue

This sincerely makes no sense to me. I've never heard of these things, how is a boolean being read as a JSON, and where the hell is it getting renderCondition = 0 from??? This is my code...

PARENT COMPONENT

// Tracks whether the proper info has been added to trigger button loading
   const [buttonReady, setButtonReady] = useState(false)

// Changes the Validity of the contents based on user data
            useEffect(() => {
                if (tab === 0){
                    if (userData.email.length > 3 && userData.password.length > 6){
                        setButtonReady(true)
                    }
                }
                else if (tab === 1){
                    if (
                        userData.password.length > 5 && 
                        userData.email.length > 5 &&
                        userData.firstname.length > 1 &&
                        userData.lastname.length > 1 &&
                        userData.phoneNumber.length > 8 &&
                        userData.password.length > 5 &&
                        userData.confirmPassword.length == userData.password.length
                    ){
                        setButtonReady(true)
                    }
                }
            }, [userData])

const renderButton = () => {
  return (<LoadingButton 
    renderConditionOG={buttonReady} 
    onButtonPress={navigation.navigate("Home")} 
  />)
}

CHILD COMPONENT

export default function LoadingButton(
    defaultButtonHeight=50,
    nonLoadedButton={defaultInactive},
    loadedButton={defaultActive},
    renderConditionOG=false,
    onButtonPress={function(){console.log("No Press Function Added")}}
){

    // States for Render Toggling and Height
    const [buttonLoading, setButtonLoading] = useState(false)
    const [buttonLoaded, setButtonLoaded] = useState(false)
    const [buttonHeight, setButtonHeight] = useState(0)
    const [renderCondition, setRenderCondition] = useState(renderConditionOG)


// Toggles the Loading once the renderCondition is met
    useEffect(() => {
        if (renderCondition){
            setTimeout(() => {
                if (buttonHeight < defaultButtonHeight){
                    setButtonHeight(buttonHeight + 5)
                }
                else{
                    setButtonLoaded(true)
                    setButtonLoading(false)
                }
            }, 0.5)
        }
    }, [renderCondition])

Solution

  • This was a stupid mistake on my part, as I did not include curly braces, {} inside of the LoadingButton parameters. So the issue was my code looked like this...

    export default function LoadingButton(
        defaultButtonHeight=50,
        nonLoadedButton={defaultInactive},
        loadedButton={defaultActive},
        renderConditionOG=false,
        onButtonPress={function(){console.log("No Press Function Added")}}
    ){
    

    Instead of this...

    export default function LoadingButton(
       {
        defaultButtonHeight=50,
        nonLoadedButton={defaultInactive},
        loadedButton={defaultActive},
        renderConditionOG=false,
        onButtonPress={function(){console.log("No Press Function Added")}}
       }
    ){