feat: add a secondary layout argument in createStyleSheet

[justblender]

Summary

This PR adds a secondary layout argument for the callback function passed into createStyleSheet. This is not a breaking change for existing users who only accept one theme argument, and will only improve developer experience by providing an easier access to current breakpoint, screen orientation, dimensions, and insets without requiring users to import UnistylesRuntime every time.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-native-unistyles-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 2, 2024 11:59pm

[jpudysz]

Hey @justblender, thanks for the PR. I think injecting the second argument is a great idea. However, I'm curious, why don't we inject UnistylesRuntime itself?

By focusing solely on layout props, we might overlook additional metadata such as colorScheme, hasAdaptiveThemes, themeName, breakpoints, and other properties soon to be exposed from the native side. If this approach is intended as a shortcut, it should be equivalent to importing UnistylesRuntime.

[justblender]

Hey @jpudysz! Yeah, I might've rushed this PR a little bit 😅 Initially I wanted to pass the whole runtime too. I started reconsidering this after noticing that stylesheets are only invalidated when the stylesheet itself, theme or layout changes, so I was concerned that extra runtime properties like colorScheme might be out of sync.

react-native-unistyles/src/useStyles.ts

Lines 28 to 30 in ca4752c

	const parsedStyles = useMemo(() => typeof stylesheet === 'function'
	? stylesheet(theme, layout)
	: stylesheet, [theme, stylesheet, layout])

But after looking again, I might've been mistaken as colorScheme change does trigger onThemeChange callback, so I guess it would work...

[jpudysz]

Also please add yourself to the list of contributors:

react-native-unistyles/docs/src/content/docs/other/sponsors.mdx

Line 65 in bba3e9f

### Contributors