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>
);