search

gluestack / gluestack-ui

React & React Native Components & Patterns (copy-paste components & patterns crafted with Tailwind CSS (NativeWind))
https://gluestack.io/
MIT License
2.7k stars 120 forks source link

I cannot update Badge action by state #2307

Open llr101 opened 3 months ago

llr101 commented 3 months ago

Description

I cannot update Badge action by state

CodeSandbox/Snack link

below

Steps to reproduce

const [isMuted, setIsMuted] = useState(false);

useEffect(() => {
  setTimeout(() => setMuted(prev => !prev), 1000);
}, [])

return (
  <Badge action={isMuted ? 'muted' : 'info'}>
    <BadgeText>test badge</Badge>
  </Badge>
)

gluestack-ui Version

1.1.39

Platform

Other Platform

No response

Additional Information

No response

jkearney126 commented 3 months ago

Had the same issue trying to use state for updates. A workaround is to set a key prop that changes with state - forces a new component render.