Better styling for react-native
Better styling for react-native
react-native-stylex requires react-native 0.59.0 or later.
yarn add react-native-stylex# or npm install react-native-stylex
<ThemeProvider></ThemeProvider>Stylex provides component, which makes the theme available to the rest of your app:
import { ThemeProvider } from "react-native-stylex";import {createBreakpointsMatcher,createBreakpoints,maxWidth,} from "react-native-stylex/media-query";const breakpoints = {xs: 360,sm: 600,md: 960,lg: 1280,xl: 1920,};const { up, down, only, between } = createBreakpoints(breakpoints);const applyBreakpoints = createBreakpointsMatcher(breakpoints, maxWidth);const theme = {palette: { textColor: "black" },breakpoints: { up, down, only, between, apply: applyBreakpoints },utils: {fade: (color, value) => {},},};const Root = () => (<ThemeProvider value={theme}><App ></App></ThemeProvider>);export default Root;
makeUseStyles(...)Stylex provides a helper function to inject styles to your component.
Normally, you’ll use it in this way:
import { makeUseStyles } from "react-native-stylex";import { maxWidth } from "react-native-stylex/media-query";export const useStyles = makeUseStyles(({ palette, utils, breakpoints }) => ({root: {color: utils.fade(palette.textColor, 0.5),height: 100,// On screens that are 320 or less, set the height to 69...maxWidth(320, { height: 69 }),},text: {fontSize: 16, // default value...breakpoints.down("lg", { fontSize: 18 }), // if window width 0..1280...breakpoints.down("sm", { fontSize: 20 }), // if window width 0..600},// The same example that you see above but unsing a 'applyBreakpoints'title: {fontSize: breakpoints.apply({sm: 20, // if window width 0....600lg: 18, // if window width 601..1280default: 16, // if window width 1281...}),},}));
useStyles(...) & withStyles(...)And finally just use in component:
import React, { Component } from "react";import useStyles from "./styles";// Functional component (hooks variant)const Root = () => {const styles = useStyles();return <View style={styles.root} ></View>;};export default Root;//--------------------------------// Class component (HOC variant)class Root extends Component {render() {const { styles } = this.props;return <View style={styles.root} ></View>;}}export default withStyles(useStyles)(Root);
