Getting Started

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-mmkv react-native-smart-styles
 # or
 yarn add react-native-mmkv react-native-smart-styles
 
 # after install
 pod install

info

If you're facing any issues related to MMKV please refer to react-native-mmkv docs for more native installations at https://github.com/mrousavy/react-native-mmkv

Configuration

On installation

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

Using 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.

warning

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