Skip to main content

Block

The Block component is a React Native component designed to apply combined styles and manage context-based theming.

Import​

Phaselis exports one main component for Block.

import { Block } from "phaselis";
  • Block: Main Component import for Block

Usage​

Basic Block​

import { Block, Button } from "phaselis";

const Example = () => {
  return (
    <Block style={{ gap: 20, padding: 20, backgroundColor: "#d8eeff" }}>
      <Button type="submit" text="submit" />
      <Button type="reset" text="reset" />
    </Block>
  );
};

export default Example;

Props​

tip

Other than listed props below, you can pass any prop that a View component accepts.

children​

ReactNode

Rendered content inside the Block component.

import { Button } from "phaselis";
<Block style={{ marginLeft: 10, marginRight: 10, gap: 10 }}>
  <Button text="Show Popup" />
</Block>

style​

ViewStyle

Optional custom styles for the block component.

<Block style={{ height: 20, backgroundColor: "red" }}/>