Shadows & Linear Gradients

The main view component of Phaselis is the Block component. It can take shadow and linear gradient props to create dynamic, visually appealing designs.

How it works

The Block component uses react-native-linear-gradient for gradients and react-native-fast-shadow for shadows. You can pass shadow and gradient props to any Block component to enhance its style.

Preview

Code

import { Block } from 'phaselis';

{...}

// A `Block` component styled with shadows and a linear gradient
<Block
    style={{
        width: 60,
        height: 60,
        borderWidth: 1,
        borderRadius: 10,
        justifyContent: "center",
        alignItems: "center",
        shadows: [
            {
                color: "blue", // Shadow color
                opacity: 0.4, // Shadow opacity
                radius: 12,   // Blur radius
                offset: [-5, -3], // Position offset
            },
            {
                color: "red",
                opacity: 0.4,
                radius: 12,
                offset: [5, 3],
            },
          ],
        linearGradient: {
            colors: ["blue", "red"], // Gradient colors
            angle: 170, // Gradient angle in degrees
            useAngle: true,
            angleCenter: { x: 0.5, y: 0.5 }, // Center point of the angle
          },
        }}
      >
    <Text style={{ color: "white" }}>Fancy</Text>

    {...}

 </Block>

note

for more information about the about shadow and linear gradient props, please refer to the ShadowProps and LinearGradientProps interfaces.