@native-material-ui/styles v0.0.18

Native Material UI – styles

A Wrapper for Material UI in React Native

Installation

yarn add @material-ui/styles

or

npm install @material-ui/styles

NOTE:

If your bundler can't import TypeScript files, you must import js/ folder. The reason is both Webpack & Metro in React Native (or Expo) can do, so it's weird to not use the feature.

createStyles(styles) => styles

An equivalent to Stylesheet.create

Arguments

1. styles (Object) A styles object

Returns

styles

Examples

import { Text, View } from "react-native";
import { createStyles } from "@native-material-ui/styles";

const App = () => (
	<View style={styles.container}>
		<Text style={styles.title}>React Native</Text>
	</View>
);

const styles = createStyles({
	container: {
		flex: 1,
		padding: 24,
		backgroundColor: "#eaeaea"
	},
	title: {
		marginTop: 16,
		paddingVertical: 8,
		borderWidth: 4,
		borderColor: "#20232a",
		borderRadius: 6,
		backgroundColor: "#61dafb",
		color: "#20232a",
		textAlign: "center",
		fontSize: 30,
		fontWeight: "bold"
	}
});

import { View } from "react-native";
import { makeStyles, createStyles } from "@native-material-ui/styles";

const useStyles = makeStyles((theme: Theme) => createStyles({
	root: {
		backgroundColor: theme.color.red,
	},
}));

export default function MyComponent {
	const styles = useStyles();
	return <View style={styles.root} />;
}

makeStyles(styles, [options]) => hook

Link a style sheet with a function component using the hook pattern.

Arguments

1. styles (Function | Object): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument.
2. options (object optional):

• options.defaultTheme (object optional): The default theme to use if a theme isn't supplied through a Theme Provider.
• options.name (string optional): The name of the style sheet. Useful for debugging.
• options.flip (bool optional): When set to false, this sheet will opt-out the rtl transformation. When set to true, the styles are inversed. When set to null, it follows theme.direction.
• The other keys are forwarded to the options argument of jss.createStyleSheet([styles], [options]).

Returns

hook: A hook. This hook can be used in a function component. The documentation often calls this returned hook useStyles. It accepts one argument: the props that will be used for "interpolation" in the style sheet.

Examples

import { View } from 'react-native';
import { makeStyles } from '@native-material-ui/styles';

const useStyles = makeStyles({
	root: {
		backgroundColor: 'red',
		color: (props) => props.color,
	},
});

export default function MyComponent(props) {
	const styles = useStyles(props);
	return <View className={styles.root} />;
}

ThemeProvider

This component takes a theme prop, and makes it available down the React tree thanks to the context. It should preferably be used at the root of your component tree.

Props

Examples

import * as React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from '@native-material-ui/styles';

const theme = {};

function App() {
	return <ThemeProvider theme={theme}>...</ThemeProvider>;
}

useTheme() => theme

This hook returns the theme object so it can be used inside a function component.

Returns

theme: The theme object previously injected in the context.

Examples

import { Text } from 'react-native';
import { useTheme } from '@native-material-ui/styles';

export default function MyComponent() {
	const theme = useTheme();

	return <Text>{`spacing ${theme.spacing}`}</Text>;
}

withStyles(styles, [options]) => higher-order component

Link a style sheet with a component using the higher-order component pattern. It does not modify the component passed to it; instead, it returns a new component with a styles prop. This styles object contains CSS stylesheet passed in styles.

Some implementation details that might be interesting to being aware of:

• It adds a styles prop so you can override the injected class names from the outside.
• It forwards refs to the inner component.
• It does not copy over statics. For instance, it can be used to define a getInitialProps() static method (next.js).

Arguments

1. styles (Function | Object): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument.
2. options (object optional):

• options.defaultTheme (object optional): Defaults to null. The default theme to use if a theme isn't supplied through a Theme Provider.
• options.withTheme (bool optional): Defaults to false. Provide the theme object to the component as a prop.

Returns

higher-order component: Should be used to wrap a component.

Examples

import { View } from 'react';
import { withStyles } from '@native-material-ui/styles';

const styles = {
	root: {
		backgroundColor: 'red',
	},
};

function MyComponent(props) {
	return <View className={props.styles.root} />;
}

export default withStyles(styles)(MyComponent);

withTheme(Component) => Component

Provide the theme object as a prop of the input component so it can be used in the render method.

Arguments

1. Component: The component that will be wrapped.

Returns

Component: The new component created. Does forward refs to the inner component.

Examples

import { View } from 'react-native';
import { withTheme } from '@native-material-ui/styles';

function MyComponent(props) {
	return <View>{props.theme.direction}</View>;
}

export default withTheme(MyComponent);

useMediaQuery(string) => boolean | null

Emulator for CSS media queries. These are suppported:

We support these length units:

• rem
• em
• mm
• cm
• pc
• pt
• px
• in

However, the em unit is equal to the rem because it's impossible to get current font-size. Other units are exact.

Examples

import * as React from 'react';
import {Text} from 'react-native';
import useMediaQuery from '@material-ui/core/useMediaQuery';

export default function SimpleMediaQuery() {
  const matches = useMediaQuery('(min-width:600px)');

  return <Text>(min-width:600px) matches: {matches}</Text>;
}

You can also use it with makeStyles and withStyles:

const useStyles = makeStyles({
	css: {
		width: 600,

		"@media (min-width: 200px) and (max-width: 300px)": {
			width: 250
		}
	}
});