Push Notification UI

Code walkthrough

A compact notification card with an app icon, title, message, and timestamp — the kind of surface you build for a mobile inbox or a toast. Tap it to dismiss. Hit View full code above for the complete component.

1. One piece of state

The whole interaction hinges on a single boolean: is the notification on screen?

const [visible, setVisible] = useState(true);

2. Auto re-show so the demo loops

After dismissal we schedule a timeout to bring it back, and clear that timeout on cleanup so timers never stack up.

useEffect(() => {
  if (visible) return;
  const id = setTimeout(() => setVisible(true), 1200);
  return () => clearTimeout(id);
}, [visible]);

3. The card and dismiss

When visible, we render the card as a <button> so it's tappable and keyboard accessible; clicking sets visible to false and the animate-fade-in class gives it a soft entrance.

{visible ? (
  <button onClick={() => setVisible(false)} className="animate-fade-in ...">
    {/* icon + title + message + timestamp */}
  </button>
) : (
  <p>Notification dismissed</p>
)}

4. Porting to React Native

The logic is identical on React Native — only the primitives change: <View> for <div>, <Pressable> for the button, and StyleSheet/NativeWind for the classes. The full web source is in the modal above.