theme param in createStylesheet's callback is empty object on web with react-native-web

[Aman Kumar]

Description

theme.ts

export const darkTheme = {
	colors: {
		typography: '#ffffff',
		typographyLight: '#555',
		backgroundLightBlack: '#1C1A1F',
		backgroundDarkBlack: '#0E0E0E',
		borderGray: '#555',
		black: '#000',
		primary: '#E9BF99',
		success: '#83C778',
		destructive: '#F65F5F',
		verifiedBlue: '#466EFC',
	},
}

unistyles.ts

import { UnistylesRegistry } from 'react-native-unistyles';
import { darkTheme } from './theme';

type AppThemes = {
	dark: typeof darkTheme;
};

declare module 'react-native-unistyles' {
	export interface UnistylesThemes extends AppThemes {}
}

UnistylesRegistry.addThemes({
	dark: darkTheme,
}).addConfig({
	adaptiveThemes: true,
});

App.tsx

import React from 'react';
import { Text, View } from 'react-native';
import { createStyleSheet, useStyles } from 'react-native-unistyles';
import './unistyles';

const stylesheet = createStyleSheet({
	container: {
		flex: 1,
		backgroundColor: '#fff',
		alignItems: 'center',
		justifyContent: 'center',
	},
});

function App() {
	const { styles } = useStyles(stylesheet);
	return (
		<View style={styles.container}>
			<Text>Open up App.tsx to start working on your app!</Text>
		</View>
	);
}

let AppEntryPoint = App;

if (process.env.STORYBOOK_ENABLED) {
	AppEntryPoint = require('./.ondevice').default;
}

export default AppEntryPoint;

Button.tsx

import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { createStyleSheet, useStyles } from 'react-native-unistyles';

export type ButtonProps = {
	onPress: () => void;
	text: string;
	color?: string;
	textColor?: string;
};

const stylesheet = createStyleSheet((theme) => {
	console.log("THEME", theme);
	return {
		button: {
			paddingVertical: 8,
			paddingHorizontal: 16,
			borderRadius: 4,
			alignSelf: 'flex-start',
			flexGrow: 0,
			backgroundColor: theme.colors.primary,
		},
		buttonText: {
			color: 'white',
			fontSize: 16,
			fontWeight: 'bold',
		},
		buttonContainer: {
			alignItems: 'flex-start',
			flex: 1,
		}
	}
});

const MyButton = ({ text, onPress, color, textColor }: ButtonProps) => {
	const { styles } = useStyles(stylesheet);

	return (
		<View style={styles.buttonContainer}>
			<TouchableOpacity
				style={[styles.button, !!color && { backgroundColor: color }]}
				onPress={onPress}
				activeOpacity={0.8}>
				<Text
					style={[
						styles.buttonText,
						!!textColor && { color: textColor },
					]}>
					{text}
				</Text>
			</TouchableOpacity>
		</View>
	);
}

export default MyButton

It's working correctly in mobile builds, on web i'm getting the value of theme as an empty object but on mobile it's displaying the values correctly as full object with all the keys and values.[attached images, please check]

[on web]

[on mobile]

info Fetching system and libraries information...
System:
OS: macOS 14.2.1
CPU: (8) arm64 Apple M2
Memory: 88.34 MB / 8.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 21.5.0
path: /opt/homebrew/bin/node
Yarn:
version: 1.22.21
path: /opt/homebrew/bin/yarn
npm:
version: 10.2.4
path: /opt/homebrew/bin/npm
Watchman:
version: 2023.12.04.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.14.3
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.4
- iOS 17.4
- macOS 14.4
- tvOS 17.4
- visionOS 1.1
- watchOS 10.4
Android SDK:
API Levels:
- "33"
- "34"
Build Tools:
- 30.0.3
- 33.0.0
- 33.0.1
- 34.0.0
System Images:
- android-33 | Google Play ARM 64 v8a
- android-34 | Google APIs ARM 64 v8a
- android-34 | Google Play ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2023.1 AI-231.9392.1.2311.11076708
Xcode:
version: 15.3/15E204a
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.9
path: /opt/homebrew/opt/openjdk@17/bin/javac
Ruby:
version: 3.1.2
path: /Users/a_man/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.73.6
wanted: ^0.73.4
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

verion of the lib i'm using: ^2.5.4

Steps to reproduce

clone https://github.com/imtheaman/ui
run(for mobile) yarn storybook:ios
run(for web) yarn storybook:web

Snack or a link to a repository (optional)

https://github.com/imtheaman/ui

Unistyles version

2.5.4

React Native version

0.73.6

Platforms

Android, iOS, React Native Web

Engine

Hermes

Architecture

Paper (old)

[Jacek Pudysz]

Hello 👋

Something is off with your Storybook configuration.

Here is a demo with a single theme that works perfectly fine (tested a few seconds ago): https://github.com/jpudysz/react-native-unistyles/blob/main/examples/expo/src/examples/SingleThemeScreen.tsx

You can run it using expo and by pressing w in the console.

Sorry, I have no experience with Storybook, so I won't be able to help.

[Aman Kumar]

I has checked that before raising the issue but i couldn't find any difference bw the two

[Aman Kumar]

@jpudysz Thanks for your quick response

[Jacek Pudysz]

But, unistyles example is working fine?

Maybe for Storybook you need to init Unistyles somewhere else?
Someone already discussed this on Unistyles Discord.

[Aman Kumar]

okay, i'll check on discord first if i can find it

[Jacek Pudysz]

Please let me know if that helped!
If not, I will try to reproduce it 🙏

[Aman Kumar]

so, the problem was mine, i had to include unistyles registry in the storybook's preview as well.
the change which resolved it:
in .storybook/preview.tsx added the import '../unistyles'

[Jacek Pudysz]

Cool! I'm glad it was resolved so quickly 😇