rn-reactive-styles

KO | EN

gitlite — search

#react #ai #typescript #llm #android #machine-learning #rust #deep-learning #linux #macos #java #awesome #cli #awesome-list

rn-reactive-styles

(★ 14)

Ract Native reactive styles example

rn-reactive-styles Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Reactive styles in React Native example

This repository contains example code for my article published on [Medium](https://medium.com/supercharges-mobile-product-guide/reactive-styles-in-react-native-79a41fbdc404).

| Light Theme | Dark Theme |
| :------------- | :----------: |
| ![AndroidLightTheme](https://raw.githubusercontent.com/tmenyhart/rn-reactive-styles/main/.wiki/android_light_theme.png) | ![AndroidDarkTheme](https://raw.githubusercontent.com/tmenyhart/rn-reactive-styles/main/.wiki/android_dark_theme.png) |
| ![iOSLightTheme](https://raw.githubusercontent.com/tmenyhart/rn-reactive-styles/main/.wiki/ios_light_theme.png) | ![iOSDarkTheme](https://raw.githubusercontent.com/tmenyhart/rn-reactive-styles/main/.wiki/ios_dark_theme.png) |

## Overview

The example project contains the following:
- `Theme.interface` for defining the Theme
- `DefaultLight.theme` and `DefaultDark.theme` as Theme variations
- `Theme.context` for poviding and managing the Theme
- `ThemeAwareObject.hook` for reusing the creation logic of reactive Style objects
- `Card.component` for consuming and updating the Theme
- `RenderCounter.component` for counting the number of renders
- Other components (`ScreeenView.component`, `Toolbar.component`) for consuming the Theme

## How to run

Install dependencies:
```
npm install
```

Run Android:
```
npm run android
```

Run iOS:
```
npm run ios
```

rn-reactive-styles

rn-reactive-styles Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

rn-reactive-styles

rn-reactive-styles Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README