react-native-smart-styles

         

---

Table of Contents

1. Introduction
2. Installation
3. Configuration
4. API Reference
5. Migrating to v0.0.4
6. Contributing

---

• Introduction

  React Native Smart Styles is designed to streamline the creation of style sheets in React Native projects by automatically adjusting styles to accommodate different screen sizes. This package handles all the heavy lifting, allowing developers to write styles quickly and easily without the need to manually account for device variability.

---

• Installation

  To install the package, run the following command in your terminal:

   npm install react-native-smart-styles
   # or
   yarn add react-native-smart-styles
  
   # after install
   pod install

---

• Configuration

  • Using smart-styles.config.json

    You can customize font names and colors by creating a smart-styles.config.json file in the root of your project. This JSON file allows you to specify your preferences which will be automatically applied during the package installation. Here’s an example of what the file might look like:

    {
      "fonts": {
        "primary": "Arial",
        "secondary": "Roboto"
      },
      "colors": {
        "primary": "#333",
        "accent": "#007bff"
      },
      "baseWidth": 375,
      "baseHeight": 812
    }

  • Updating Configuration with CLI

    If you need to update your configuration after installation or if the smart-styles.config.json file does not exist, you can use the provided CLI tool. Simply run the following command:

    smart-styles update

    This command updates the configuration based on the settings specified in smart-styles.config.json.

  Note: After updating the config file you might have to re-run the app

---

• API Reference

  • SmartStyles.create()
  • SmartStyles.helper()
  • Theme Related
    • toggleTheme()
    • getTheme()
    • themeColor()/tc()
    • useThemeStyles()
    • useTheme()
  • widthPixel()/wp()
  • heightPixel()/hp()
  • Snippets ⁠

• Migrating to v0.0.4

  Note: This is not the only migration process but this is the main one, for more information please refer to the docs

  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>;
  };

• Contributing

  Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

  If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
  3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
  4. Push to the Branch (`git push origin feature/AmazingFeature`)
  5. Open a Pull Request