Skip to main content
Version: 0.0.4

Migrating from v0.0.3 to v0.0.4

In version 0.0.4 of React Native Smart Styles, we have made significant changes to the useTheme hook to enhance functionality and clarify usage. If you are upgrading from version 0.0.3, please follow these steps to ensure a smooth transition:

Changes to useTheme

  • Old Behavior: In version 0.0.3, the useTheme hook returned a styles object configured according to the current theme ('dark' or 'light').
  • New Behavior: In version 0.0.4, useTheme has been simplified to only return a string that indicates the current theme ('dark' or 'light'). This change makes the hook more versatile and focused.

Introduction of useThemeStyles

  • New Feature: To accommodate the previous functionality of useTheme, we have introduced a new hook called useThemeStyles. This hook now returns the styles object configured according to the current theme.

Required Changes for Migration

If you previously used useTheme to obtain themed styles, you will need to replace it with useThemeStyles in your code. Here is an example of how to update your code:

Before (v0.0.3)

import { useTheme } from 'react-native-smart-styles';

const MyComponent = () => {
const styles = useTheme(unformattedStyles); // Returns styles object
return <View style={styles.container}></View>;
};

After (v0.0.4)

import { useThemeStyles } from 'react-native-smart-styles';

const MyComponent = () => {
const styles = useThemeStyles(unformattedStyles); // New hook for obtaining themed styles
return <View style={styles.container}></View>;
};

// If you need to access the theme directly:
import { useTheme } from 'react-native-smart-styles';

const MyOtherComponent = () => {
const theme = useTheme(); // Returns 'dark' or 'light'
return <Text>{theme === 'dark' ? 'Dark Mode' : 'Light Mode'}</Text>;
};

Why This Change?

This update helps clarify the purpose of each hook, improving code readability and maintainability. It allows developers to easily integrate theme-aware styling while also providing direct access to the current theme for other conditional rendering or logic.