Rotate
Rotate component from the UILaunch design system. Applies a rotation transform to its children using a specified angle.
🔄 Rotate
The Rotate component applies a rotation transformation to its children based on a specified angle. It wraps its content with a Box and adds a rotateZ transform. Use this component to visually rotate any view or element in multiples of 45 degrees, up to a full circle (360°).
📦 Import
import Rotate, { RotateAngle } from '@madefordevs1999/ui-launch-native/system/atoms/Rotate';🧩 Usage
import Box from '@madefordevs1999/ui-launch-native/system/atoms/Box';
import Rotate, { RotateAngle } from '@madefordevs1999/ui-launch-native/system/atoms/Rotate';
import Typography from '@madefordevs1999/ui-launch-native/system/atoms/Typography';
const Example = () => (
<Box flex={1} justifyContent="center" alignItems="center">
<Rotate angle={RotateAngle.NINETY}>
<Typography.Body>This text is rotated 90°</Typography.Body>
</Rotate>
</Box>
);
export default Example;Result
📜 Rotate Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
angle | 0 | 45 | 90 | 180 | 270 | 345 | 360 | — | Rotation angle in degrees. Required. |
...rest | BoxProps (excluding children) | — | Any other props from the Box component. |
📐 RotateAngle Enum
You can also import and use the RotateAngle enum for cleaner usage:
export enum RotateAngle {
ZERO = 0,
FORTY_FIVE = 45,
NINETY = 90,
ONE_EIGHTY = 180,
TWO_SEVENTY = 270,
THREE_HUNDRED_FORTY_FIVE = 345,
THREE_SIXTY = 360,
}| ℹ️ Tip: Combine Rotate with other layout and style primitives to build dynamic, animated, or interactive UIs with rotation effects. It rotation works with any React Native component, making it versatile for various use cases. |