Css

La función css acepta estilos como una plantilla literal, objeto o matriz de objetos y devuelve estilos aceptados por cualquier componente de react-native.


String Styles

jsx
import { View, Text } from "react-native";
import { css } from "[path-to]/blocks.config";
 
const color = "red";
 
render(
  <Text
    style={css`
      font-size: 20px;
      color: ${color};
    `}
  >
    This is a text
  </Text>
);

Object Styles

jsx
import { View, Text } from "react-native";
import { css } from "[path-to]/blocks.config";
 
const color = "red";
 
render(
  <View
    style={css({
      backgroundColor: color,
      padding: 10,
    })}
  >
    <Text> This is a text </Text>
  </View>
);

Array of Object Styles

jsx
import { View, Text } from "react-native";
import { css } from "[path-to]/blocks.config";
 
const isDanger = true;
 
render(
  <View
    className={css([
      {
        backgroundColor: "hotpink",
      },
      isDanger && {
        backgroundColor: "red",
      },
    ])}
  >
    <Text> This is a text </Text>
  </View>
);