Need help with dynamic theme using Unistyles v2

[ryan-brs]

Hi,

I have a project that need to use dynamic theme. I had no issue using v1 but couldn't find a way to make it work with v2.

const ThemeProvider = ({
  children,
  appTheme = theme,
}: PropsWithChildren<{ appTheme?: Theme }>): JSX.Element => {
  const [newTheme, setNewTheme] = useState(appTheme);

  const deviceSize = useDeviceSize();

  const colorTheme = 'light';

  useEffect(() => {
    setNewTheme({
      ...appTheme,
      colors: getThemeColor(colorTheme),
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [colorTheme]);

  useEffect(() => {
   
      const { isMobileWidth, isTabletWidth, isDesktopWidth } = getDeviceWidth(deviceSize);

      const nTheme = {
        ...theme,
        typography: getTypography(deviceSize),
        devices: {
          ...theme.devices,
          isMobileWidth,
          isTabletWidth,
          isDesktopWidth,
        },
      };

      setNewTheme(nTheme);
    
  }, [deviceSize]);

  return <UnistylesTheme theme={newTheme}>{children}</UnistylesTheme>;
};

Above is the code how I use the style with v1. useDeviceSize() will dynamically get screen size as you dragging the browser and change the size. newTheme will be set to new if deviceSize or colorTheme are changed. And I can pass the newTheme down using UnistylesTheme. So I can get something like isDesktopWidth from theme and render different layout based on it.

But I could not find a way to do it if UnistylesTheme is removed from v2. Is there a way to achieve the same purpose?

Thanks a lot in advance.

[jpudysz]

No worries, that's super easy!

1. First of all you need to define your themes. In your example theme is unnecessarly dynamic.

More info: https://reactnativeunistyles.vercel.app/reference/theming/#create-a-theme

Keep in mind that with v2 you can define multiple themes (like light and dark)! So you can share your colors on the theme level

colors: getThemeColor(colorTheme), <- define it in theme

2. Now, lets figure out deviceSize. For me it seems like breakpoints:

More info: https://reactnativeunistyles.vercel.app/reference/breakpoints/

You can remove them from theme and access it with breakpoint

3. Now let's remove some code:

const ThemeProvider = ({
  children,
  appTheme = theme,
}: PropsWithChildren<{ appTheme?: Theme }>): JSX.Element => {
-const [newTheme, setNewTheme] = useState(appTheme);

  const deviceSize = useDeviceSize();

  const colorTheme = 'light';

  useEffect(() => {
-    setNewTheme({
-      ...appTheme,
-      colors: getThemeColor(colorTheme),
-    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [colorTheme]);

-useEffect(() => {
   
-    const { isMobileWidth, isTabletWidth, isDesktopWidth } = getDeviceWidth(deviceSize);

// define it in theme
-     const nTheme = {
-       ...theme,
-      typography: getTypography(deviceSize),
-        devices: {
-          ...theme.devices,
-          isMobileWidth,
-          isTabletWidth,
-          isDesktopWidth,
-        },
-      };

-      setNewTheme(nTheme);
    
-  }, [deviceSize]);

-  return <UnistylesTheme theme={newTheme}>{children}</UnistylesTheme>;
};

4. Add some code (you can follow https://reactnativeunistyles.vercel.app/start/setup/#3-configure-unistyles-with-unistylesregistry)

4.1 Define breakpoints to replace isMobileWidth, isTabletWidth etc.
4.2 Define themes (like/dark)
4.3 Call UnistylesRegistry

5. Replace your example

const ThemeProvider = ({
  children,
  currentThemeName,
}: PropsWithChildren<{ appTheme?: Theme }>): JSX.Element => {
     useEffect(() => {
         if (UnistylesRuntime.themeName !== currentThemeName) {
              // it will auto switch the theme
              UnistylesRuntime.setTheme(currentThemeName)
         }
     }, [currentThemeName])

     return children
}

6. For this line of code

typography: getTypography(deviceSize),

Depending on what it does you can move it to static theme or create a dynamic plugin: https://reactnativeunistyles.vercel.app/reference/plugins/

7. For breakpoints you can access theme with use styles hook or on stylesheet level

https://reactnativeunistyles.vercel.app/reference/breakpoints/#how-to-use-breakpoints
https://reactnativeunistyles.vercel.app/reference/breakpoints/#access-the-current-breakpoint

I hope it will help you to convert your app to v2. Fell free to ask any additional questions!

[ryan-brs]

HI @jpudysz

So theres a couple of things that might make it a bit difficult.

First the appTheme we inject into the provider is used so we can test different themes on screens when writing tests. The default prop it uses is the theme we have created.

You say the theme is unnecessarly dynamic however it only will update and run the useEffect when the screen size gets below or above a certain breakpoint. Its probably not super clear from the code attached. It will then update the theme with the new device sizes. (isMobileWidth: true. etc) The reason for doing this is because we use the app across multiple devices and some components render differently on tablet compared to mobile

The same as well for the typography renders differently based on the screen size.

I understand what you're trying to say, but is the way you're recommending to set up multiple themes with different names compared to just updated the current theme?

[jpudysz]

Can you explain more this part (I'm on mobile I can't highlight it):

"The reason for doing this is because we use the app across multiple devices and some components render differently on tablet compared to mobile"

Are you referring to mock tests or to the real app?

[ryan-brs]

@jpudysz yea for sure.

Its a bit hard to explain.
What we are doing is when the user resizes the window on browser we listen for the screen width to go below a certain breakpoint and then we change the theme to reflect that. eg. isMobileWidth: true, isTabletWith:false.

The reason for doing this is because its a lot more readable to render different styles/components using names rather than breakpoint inside the stylesheet.

const HomePractices = (): JSX.Element => {
    const { isMobileWidth } = theme.devices;
    .........
    if (isMobileWidth) {
      return (
        <Carousel/>
          ))}
        />
      );
    }
}

[jpudysz]

I believe there is a more efficient way to approach this, @ryan-brs. You can actually name your breakpoints whatever you prefer. For instance, you could define them as follows:

export const breakpoints = {
  mobile: 0,
  tablet: 772,
  desktop: 1024
}

After registering them, you can easily access the breakpoint flag in your component like this:

const { breakpoint } = useStyles(stylesheet)
// Here, 'breakpoint' could be 'mobile', 'tablet', or 'desktop'

Reference: Use Styles - Basic Usage Breakpoint

I guess you can also replace other dynamic parts and finalize your themes to be static.

[ryan-brs]

@jpudysz Appreciate it!!!

[jpudysz]

Did it help? Were you able to transition to 2.x?

[ryan-brs]

Hi yes this is helpful and we are looking into it. Thanks again!