# react-native-typescript-styles-example

**Repository Path**: mirrors_thoughtbot/react-native-typescript-styles-example

## Basic Information

- **Project Name**: react-native-typescript-styles-example
- **Description**: A template react native project for ergonomic styling structure and patterns.
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-28
- **Last Updated**: 2026-01-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React Native TypeScript Styles Example

React Native TypeScript Styles is an example project demonstrating how to apply
styles in react native using [react-native-typescript-styles][react-native-typescript-styles].

[react-native-typescript-styles]: https://github.com/thoughtbot/react-native-typescript-styles

## Setup

Install the JavaScript packages

```
yarn install
```

Install the Pods

```
npx pod-install
```

Build and run the app

```
yarn ios

// or

yarn android
```

## Organization

The example app is a single screen with a section for each style module.

### Base Example

<img src="./docs/base_example.png" alt="The first section of the app, showing a header, some text, and a button." width="400" />

### Colors

<img src="./docs/colors_1.png" alt="A section of the app, showing a list of neutral colors." width="400" />

<img src="./docs/colors_2.png" alt="A section of the app, showing a list of primary and secondary colors." width="400" />

### Typography

<img src="./docs/typography.png" alt="A section of the app, showing the typographic options." width="400" />

## About thoughtbot

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

React Native TypeScript Styles Example 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