react-native-typescript-styles

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #golang #machine-learning #deep-learning #docker #nodejs #vue #awesome-list #pytorch #security

react-native-typescript-styles

(★ 19)

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

react-native-typescript-styles Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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
```

```
// 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](https://github.com/hectahertz/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

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

2. Use the styles

```typescript
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

```typescript
// 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](https://github.com/thoughtbot/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:

```typescript
color: Colors.primary.blue
```

Style guide: [Style Guide][style-guide]

Blog post: ["React Native Styling: Structure for Style Organization"][blog-post]

[style-guide]: ./STYLE_GUIDE.md
[blog-post]: https://thoughtbot.com/blog/structure-for-styling-in-react-native

About thoughtbot
----------------

![thoughtbot](https://presskit.thoughtbot.com/images/thoughtbot-logo-for-readmes.svg)

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][community] or
[hire us][hire] to design, develop, and grow your product.

[community]: https://thoughtbot.com/community?utm_source=github
[hire]: https://thoughtbot.com/hire-us?utm_source=github

react-native-typescript-styles

react-native-typescript-styles Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

react-native-typescript-styles

react-native-typescript-styles Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README