Force breakpoint?

[Dan Tamas]

Hi,

Is there a way to force a breakpoint? or some ideas on how could be achieved?
The use case would be a "preview" for the styles we apply, I'd like to be able to showcase the different styles of each of the break points :)

🙏

[Dan Tamas]

Ok, I think I found a way, however it has an issue, not sure I'm doing something wrong?

export default function Test() {
    const [preview, setPreview] = useState(1025);

    useDeviceContext(tw);

    tw.setWindowDimensions({ width: preview, height: preview }); // if I don't call this, the onPress setWindowDimensions doesn't have any effect
    
    return (
        <Text
            style={tw.style('text-4 md:text-[#333] sm:text-red-500 lg:text-green-500 xl:text-blue-500')}
            onPress={() => {
                setPreview(800);
                tw.setWindowDimensions({ width: preview, height: preview });
            }}
        >
            Hello World!
        </Text>
    );
}

If I don't call the initial setWindowDimensions the onPress setWindowDimensions doesn't have any effect

I'm testing in web ( yes, I know 😅) however this should not influence in this case

[Dan Tamas]

Ignore me, I'm dumb 🫠