Style Variants: A Solution for Dynamic and Reusable Styles in React Native

Style Variants is a powerful and easy-to-use solution for creating dynamic and reusable styles in React Native applications. It helps developers build consistent UI components with predefined styles and variants that are easy to maintain and update.

To install the package, developers can use the following command:

npm install style-variants

Once installed, developers can define style variants for their custom components and apply them dynamically based on their desired behavior. For example, to create style variants for a Button component with multiple size and color variants, and a disabled state, developers can use the following code snippet:

import { createStyleVariant } from 'style-variants';

const Button = ({ size, color, disabled, children }) => {
  const styleVariant = createStyleVariant({
    base: {
      borderRadius: 8,
      paddingVertical: 12,
      paddingHorizontal: 16,
      backgroundColor: color,
      color: '#fff',
      fontSize: 16,
      fontWeight: 'bold',
      textAlign: 'center',
    },
    size: {
      small: {
        paddingVertical: 8,
        paddingHorizontal: 12,
        fontSize: 14,
      },
      large: {
        paddingVertical: 16,
        paddingHorizontal: 20,
        fontSize: 18,
      },
    },
    disabled: {
      opacity: 0.5,
    },
  }, { size, color, disabled });

  return (
    <TouchableOpacity style={styleVariant}>
      {children}
    </TouchableOpacity>
  );
};

With Style Variants, developers can easily create and apply style variants to their components, making their code more organized and easier to maintain.