https://github.com/verypossible/react-native-responsive-theme-provider
react-native theme provider for styled-components
https://github.com/verypossible/react-native-responsive-theme-provider
react-native responsive styled-components theme-provider
Last synced: 3 months ago
JSON representation
react-native theme provider for styled-components
- Host: GitHub
- URL: https://github.com/verypossible/react-native-responsive-theme-provider
- Owner: verypossible
- Created: 2019-01-21T14:20:48.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-01-22T13:23:55.000Z (over 6 years ago)
- Last Synced: 2024-04-23T12:16:38.728Z (about 1 year ago)
- Topics: react-native, responsive, styled-components, theme-provider
- Language: TypeScript
- Size: 116 KB
- Stars: 2
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-responsive-theme-provider
`Dimensions` aware styled-components theme provider for responsive theming in react-native
## Requirements
* react
* react-native
* styled-components
## Features
* Dimensions aware theme for styled-components
* Theme will update with new `screen` and `window` properties when orientation changes
* Typescript support
## Why?
When building react-native applications there are different orientations
and different screen sizes that need to be supported. In order to detect
the resolution of the screen, we can use the react native `Dimensions` API.
Using styled-components, it would be easy to do something like this:
```js
import { Dimensions, Text } from 'react-native';
import { ThemeProvider } from 'styled-components/native';
const theme = {
bigColor: 'blue',
color: 'red',
screen: Dimensions.get('screen'),
window: Dimensions.get('window'),
};
const ThemedText = styled(Text)`
color: ${(props) => props.theme.screen.width > 800 ? props.theme.bigColor : props.theme.color}
`
const App = () => (
Some text
);
```
This is great, but what happens when the user goes from portrait to landscape?
Using this code, the screen width will not update to the orientation change.
So the primary goal of this library to provide a theme that will update when
the screen orientation changes.
## How?
All end-developers need to do is install the library
```bash
yarn add @very/react-native-theme-provider
```
```js
import { Dimensions, Text } from 'react-native';
import ThemeProvider from 'react-native-responsive-theme-provider';
const theme = {
bigColor: 'blue',
color: 'red',
};
const ThemedText = styled(Text)`
color: ${(props) => props.theme.screen.width > 800 ? props.theme.bigColor : props.theme.color}
`
const App = () => (
Some text
);
```
Under the hood we are listening for `Dimensions` changes and updating the `theme` object
with new screen and width properties.
## Typescript
```js
import { Text } from 'react-native';
import { ThemedStyledComponentsModule } from 'styled-components';
import styledComponents from 'styled-components/native';
import ThemeProvider, { ThemeDimensionProps } from 'react-native-responsive-theme-provider';
interface ThemeInterface {
bigColor: string;
color: string;
}
const { default: styled } = styledComponents as ThemedStyledComponentsModule<
ThemeInterface & ThemeDimensionProps
>;
const theme: ThemeInterface = {
bigColor: 'blue',
color: 'red',
};
// now we have typed support for props.theme
const ThemedText = styled(Text)`
color: ${(props) => props.theme.screen.width > 800 ? props.theme.bigColor : props.theme.color}
`
const App = () => (
Some text
);
```
## Selectors
### getScreen
alias for `props.theme.screen`
### getScreenWidth
alias for `props.theme.screen.width`
### getWindow
alias from `props.theme.window`
### getWindowWidth
alias from `props.theme.window.width`
```js
import { Dimensions, Text } from 'react-native';
import ThemeProvider, { getScreenWidth } from 'react-native-responsive-theme-provider';
const theme = {
bigColor: 'blue',
color: 'red',
};
const ThemedText = styled(Text)`
color: ${(props) => getScreenWidth(props) > 800 ? props.theme.bigColor : props.theme.color}
`
const App = () => (
Some text
);
```