ConditionalView

Beta

Conditionally shows or hides content with an optional animated transition.

Installation

npm install @xaui/native

Import

import { ConditionalView } from '@xaui/native/view'

Basic Usage

Minimal example showing the component with its default configuration.

import { ConditionalView } from '@xaui/native/view'

export function Example() {
  return (
    <ConditionalView>
      {/* children */}
    </ConditionalView>
  )
}

Fade In/Out

Toggle content visibility with a fade animation.

import { useState } from 'react'
import { ConditionalView } from '@xaui/native/view'
import { Button } from '@xaui/native/button'
import { Typography } from '@xaui/native/typography'

export function FadeExample() {
  const [visible, setVisible] = useState(false)

  return (
    <>
      <Button onPress={() => setVisible(v => !v)}>Toggle</Button>
      <ConditionalView isVisible={visible} animation="fade">
        <Typography>This content fades in and out</Typography>
      </ConditionalView>
    </>
  )
}

Scale Animation

Show/hide with a scale transition.

import { useState } from 'react'
import { ConditionalView } from '@xaui/native/view'
import { Button } from '@xaui/native/button'
import { Typography } from '@xaui/native/typography'

export function ScaleExample() {
  const [visible, setVisible] = useState(false)

  return (
    <>
      <Button onPress={() => setVisible(v => !v)}>Toggle</Button>
      <ConditionalView isVisible={visible} animation="scale">
        <Typography>This content scales in and out</Typography>
      </ConditionalView>
    </>
  )
}