Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sntx/react-native-reflect
Responsive, themeable style system for React Native and React Native Web
https://github.com/sntx/react-native-reflect
Last synced: about 2 months ago
JSON representation
Responsive, themeable style system for React Native and React Native Web
- Host: GitHub
- URL: https://github.com/sntx/react-native-reflect
- Owner: sntx
- License: mit
- Created: 2020-06-21T08:57:02.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-07-21T05:56:17.000Z (about 4 years ago)
- Last Synced: 2024-07-30T08:31:00.416Z (about 2 months ago)
- Language: TypeScript
- Size: 3.7 MB
- Stars: 106
- Watchers: 5
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - react-native-reflect
README
# React Native Reflect
Responsive, theme-based style system for React Native and React Native Web
https://sntx.github.io/react-native-reflect
[![spectrum-badge][]][spectrum]
![MIT License][license]
[](https://www.npmjs.com/package/react-native-reflect)
[spectrum-badge]: https://badgen.net/badge/spectrum/community/cyan
[spectrum]: https://spectrum.chat/react-native-reflect
[license]: https://badgen.net/badge/license/MIT/blue
```sh
npm i react-native-reflect
```
## Description
**Reflect makes it easy to create universal React Native applications for Native and Web** by providing tools for **responsive styles and props**, a **theme system** and other utilities.
Reflect is an alternative to libraries such as Styled Components and Styled System, built from the ground up for React Native and React Native Web. It provides exports such as: **styled()**, **useStyled()** and **ThemeProvider**, with an API that is **React Native friendly**.
The library is also minimal, has no dependencies on other styling libraries and it is designed to be used alone or with other React Native UI libraries such as React Native Elements. Use it to define styling for a whole application, as the building blocks for creating your own UI library, or just as needed, to handle different screen sizes or platforms.
# Getting Started
The following example shows how to use Reflect to create theme-based responsive components. The components created will display as a single column on small screens and as two columns on larger screens.
## Installation
Create an Expo project and install Reflect:
```bash
expo init my-reflect-app
cd my-reflect-app
# with yarn
yarn add react-native-reflect
# with npm
npm i react-native-reflect
```
## Usage
Replace contents of App.js or App.tsx with the code below:
```javascript
import React from "react";
import { View, SafeAreaView } from "react-native";
import { styled, ThemeProvider, defaultTheme } from "react-native-reflect";
// (1) Define your theme
const theme = {
...defaultTheme,
colors: {
red: "#FF4B48",
blue: "#2AB7CA",
yellow: "#FFD766",
grey: "#E6E6EA",
},
};
// (2) Define your theme-based, responsive components
const Flex = styled(View, {
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
});
const Box = styled(View, {
// Responsive -> 100% on smaller screens, 50% on larger screens
width: ["100%", "50%"],
// Theme based values -> height: 6 = theme.size[6] = 96
height: 6,
});
// (3) Create variations of your components
const RedBox = styled(Box, { backgroundColor: "red" });
const BlueBox = styled(Box, { backgroundColor: "blue" });
const YellowBox = styled(Box, { backgroundColor: "yellow" });
const GreyBox = styled(Box, { backgroundColor: "grey" });
// (4) Enjoy a fully responsive native/web UI with a clean markup!
export default function App() {
return (
);
}
```
Start Expo app and run it on a web browser and on a simulator. From the command line: "Press a for Android emulator, or i for iOS simulator, or w to run on web."
```bash
# with yarn
yarn start
# with npm
npm run start
```
# Docs
- [Getting Started](https://sntx.github.io/react-native-reflect/#/?id=getting-started)
- [styled()](https://sntx.github.io/react-native-reflect/#/?id=styled)
- [useStyled()](https://sntx.github.io/react-native-reflect/#/?id=usestyled)
- [os()](https://sntx.github.io/react-native-reflect/#/?id=os)
- [Theme](https://sntx.github.io/react-native-reflect/#/?id=theme)
- [API / TypeScript](https://sntx.github.io/react-native-reflect/#/?id=api-typescript)
# Tutorials
- [Responsive UX Design with React Native Reflect (Part 1)](https://dev.to/sntx/build-a-responsive-react-native-photo-album-part-1-4doe)
- [Responsive UX Design with React Native Reflect (Part 2)](https://dev.to/sntx/responsive-ux-design-with-react-native-reflect-part-2-m24)
- [Responsive UX Design with React Native Reflect (Part 3)](https://dev.to/sntx/responsive-ux-design-with-react-native-reflect-part-3-2i6f)