React Native Reflect
Responsive, theme-based style system for React Native and React Native Web https://sntx.github.io/react-native-reflect
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:
expo init my-reflect-appcd 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:
;;; // (1) Define your themeconst theme = ...defaultTheme colors: red: "#FF4B48" blue: "#2AB7CA" yellow: "#FFD766" grey: "#E6E6EA" ; // (2) Define your theme-based, responsive componentsconst Flex = ; const Box = ; // (3) Create variations of your componentsconst RedBox = ;const BlueBox = ;const YellowBox = ;const GreyBox = ; // (4) Enjoy a fully responsive native/web UI with a clean markup! { return <SafeAreaView> <ThemeProvider value=theme> <Flex> <RedBox /> <BlueBox /> <YellowBox /> <GreyBox /> </Flex> </ThemeProvider> </SafeAreaView> ;}
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."
# with yarn yarn start # with npm npm run start