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])
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")}}
}
){