Is there a way to add a custom widget?

[rodrigost23]

I was trying to use a toast from libadwaita (via @girs/adw-1), but I couldn't manage to create a React component from it. Is there a way to do such a thing using this lib?

[eugeniodepalo]

Hi @rodrigost23, thanks for opening this issue!

There is no way at the moment to extend the reconciler with custom widgets, but you can wrap external widgets in your own components to achieve a similar effect.

For example, to implement the Toast component, you could write something like this:

import React, { useEffect, useRef } from "react"
import { Box } from "react-native-gtk4"
import Adw from "@girs/node-adw-1"

export const Toast = () => {
    const boxRef = useRef(null)

    useEffect(() => {
        const box = boxRef.current

        if (!box) return

        const overlay = new Adw.ToastOverlay()
        const toast = new Adw.Toast({ title: "Hello, World!" })

        overlay.addToast(toast)
        box.append(overlay)

        return () => {
            box.remove(overlay)
        }
    }, [])

    return (
        <Box ref={boxRef} />
    )
}

At the moment you might run into some issues with TypeScript types because @girs/node-adw-1 uses a more recent version of @girs/node-gtk-4.0, so the Gtk.Widget signatures do not match. I'm soon going to update the Gtk version used by this package which should solve that issue.

[rodrigost23]

Thank you very much! This helps a lot!