Function Modifiers

example/app/modifiers.tsx:4–119

()

import { Text, Modifier } from "jetpack-compose-react-native";

export default function Modifiers() {
  return (
    <ScrollView style={{ flex: 1, padding: 20 }}>
      <RNText style={{ fontSize: 30, fontWeight: "bold", marginVertical: 20 }}>
        Shadow
      </RNText>
      <Text
        modifier={Modifier.shadow({
          ambientColor: "blue",
          clip: false,
          elevation: 10,
          shape: "rectangle",
          spotColor: "blue",
        })}
        fontSize={20}
      >
        Hello
      </Text>
      <RNText style={{ fontSize: 30, fontWeight: "bold", marginVertical: 20 }}>
        Border
      </RNText>
      <Text
        modifier={Modifier.border({
          color: "red",
          width: 1,
          brush: "solid",
          shape: "rectangle",
        })}
        fontSize={20}
      >
        Hello
      </Text>
      <RNText style={{ fontSize: 30, fontWeight: "bold", marginVertical: 20 }}>
        Padding
      </RNText>
      <Text
        modifier={Modifier.padding({ horizontal: 10, vertical: 20 })}
        fontSize={20}
      >
        Hello
      </Text>
      <RNText style={{ fontSize: 30, fontWeight: "bold", marginVertical: 20 }}>
        Width
      </RNText>
      <Text modifier={Modifier.width(100)} fontSize={20}>
        Hello
      </Text>
      <RNText style={{ fontSize: 30, fontWeight: "bold", marginVertical: 20 }}>
        Height
      </RNText>
      <Text modifier={Modifier.height(50)} fontSize={20}>
        Hello
      </Text>
      <RNText style={{ fontSize: 30, fontWeight: "bold", marginVertical: 20 }}>
        Size
      </RNText>
      <Text modifier={Modifier.size(100)} fontSize={20}>
        Hello