gbrunofranco / react-native-typescript-styles

Kick-start your new React Native project with simple, organized styles.

react-native-typescript-styles

Kick-start your new React Native TypeScript project with simple, organized styles and have less churn in your style files.

Every React Native project uses styles, but React Native itself is not opinionated in how to organize them. This puts the burden on the developer to decide on and implement a method of organization, which takes time and effort that you could be spending on feature development.

This project is a starter framework for organizing styles in new React Native projects.

💻 Setup

1. Add the CLI to your global packages

// yarn

yarn global add @thoughtbot/react-native-typescript-styles

or

// npm

npm install -g @thoughtbot/react-native-typescript-styles

2. Add the styles to your project using the CLI

rnts

3. Add the dependency react-native-typography to your project

yarn add react-native-typography

The Typography module uses this library as it makes it easy to use the default system font families and weights on both iOS and Android.

🎨 Usage

1. Import the styles modules in your view components

import { Buttons, Colors, Outlines, Sizing, Typography } from "../styles";

2. Use the styles

const style = StyleSheet.create({
  header: {
    paddingBottom: Sizing.x20,
    borderBottomWidth: Outlines.borderWidth.thin,
    borderColor: Colors.neutral.gray6,
  },
  headerText: {
    ...Typography.bold.x50,
  },
  button: {
    ...Buttons.bar.primary,
  },
  buttonText: {
    ...Buttons.barText.primary,
  },
});

3. Update the styles modules with your project's styles as needed

// colors.ts

type Brand = "primary" | "secondary";
export const brand: Record<Brand, string> = {
  primary: "#0c00a6",
  secondary: "#f03f0a",
};

🧪 Example

An example app is located in a separate repository: react-native-typescript-styles-example.

📚 Philosophy

This project is intended to establish a structure for organizing a design system. Therefore, the styles themselves are not opinionated in terms of visual design. Users are expected to adapt the styles to the needs of their project. This may include changing or adding colors, typography, buttons, etc.

The styles within this project are separated by category into modules, including Colors, Sizing, and Buttons. Each module contains a set of objects which provide styles for a specific kind of thing within the module category. For example, the Colors module provides objects for primary and neutral colors. Finally, each of these objects itself provides key/value pairs for specific styles: in this case, particular primary and neutral colors.

Styles are then used as such:

color: Colors.primary.blue

Style guide: Style Guide

Blog post: "React Native Styling: Structure for Style Organization"

About thoughtbot

react-native-typescript-styles is maintained and funded by thoughtbot, inc. The names and logos for thoughtbot are trademarks of thoughtbot, inc.

We love open source software! See our other projects or hire us to design, develop, and grow your product.