CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-native-base

Essential cross-platform UI components for React Native with comprehensive theming and accessibility support

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

animations.mddocs/

Animation & Transitions

Animation components and transition effects for enhancing user interface interactions and providing smooth visual feedback.

Capabilities

Fade Transition

Fade in/out animation component for smooth opacity transitions.

/**
 * Fade transition component for opacity animations
 * @param props - Fade component props
 * @returns JSX element with fade animation capabilities
 */
function Fade(props: IFadeProps): JSX.Element;

interface IFadeProps extends StyledProps {
  in?: boolean;
  children?: React.ReactNode;
  duration?: number;
  delay?: number;
  style?: any;
  entryDuration?: number;
  exitDuration?: number;
  initialScale?: number;
  animate?: {
    initial?: any;
    animate?: any;
    exit?: any;
    transition?: any;
  };
}

Usage Example:

import { Fade, Button, Box, Text, VStack } from "native-base";

function FadeExample() {
  const [show, setShow] = React.useState(false);
  
  return (
    <VStack space={4}>
      <Button onPress={() => setShow(!show)}>
        Toggle Fade
      </Button>
      
      <Fade in={show}>
        <Box bg="teal.500" p={4} rounded="md">
          <Text color="white">Fade content</Text>
        </Box>
      </Fade>
      
      {/* Custom duration */}
      <Fade in={show} duration={1000}>
        <Box bg="blue.500" p={4} rounded="md">
          <Text color="white">Slow fade (1000ms)</Text>
        </Box>
      </Fade>
    </VStack>
  );
}

ScaleFade Transition

Combined scale and fade animation for more dynamic transitions.

/**
 * Scale and fade transition component
 * @param props - ScaleFade component props
 * @returns JSX element with scale and fade animation
 */
function ScaleFade(props: IScaleFadeProps): JSX.Element;

interface IScaleFadeProps extends IFadeProps {
  initialScale?: number;
  in?: boolean;
}

Usage Example:

import { ScaleFade, Button, Box, Text, VStack } from "native-base";

function ScaleFadeExample() {
  const [show, setShow] = React.useState(false);
  
  return (
    <VStack space={4}>
      <Button onPress={() => setShow(!show)}>
        Toggle ScaleFade
      </Button>
      
      <ScaleFade in={show} initialScale={0.9}>
        <Box bg="purple.500" p={4} rounded="md">
          <Text color="white">ScaleFade content</Text>
        </Box>
      </ScaleFade>
      
      {/* Custom initial scale */}
      <ScaleFade in={show} initialScale={0.5}>
        <Box bg="pink.500" p={4} rounded="md">
          <Text color="white">Dramatic scale effect</Text>
        </Box>
      </ScaleFade>
    </VStack>
  );
}

Slide Transition

Slide animation component for directional entrance/exit effects.

/**
 * Slide transition component for directional animations
 * @param props - Slide component props
 * @returns JSX element with slide animation
 */
function Slide(props: ISlideProps): JSX.Element;

interface ISlideProps extends StyledProps {
  in?: boolean;
  children?: React.ReactNode;
  direction?: "top" | "right" | "bottom" | "left";
  duration?: number;
  delay?: number;
  style?: any;
  placement?: "top" | "right" | "bottom" | "left";
}

Usage Example:

import { Slide, Button, Box, Text, VStack, HStack } from "native-base";

function SlideExample() {
  const [show, setShow] = React.useState(false);
  
  return (
    <VStack space={4}>
      <Button onPress={() => setShow(!show)}>
        Toggle Slide
      </Button>
      
      {/* Slide from different directions */}
      <VStack space={2}>
        <Slide in={show} direction="top">
          <Box bg="red.500" p={2} rounded="md">
            <Text color="white" textAlign="center">From Top</Text>
          </Box>
        </Slide>
        
        <HStack space={2}>
          <Slide in={show} direction="left">
            <Box bg="green.500" p={2} rounded="md" flex={1}>
              <Text color="white" textAlign="center">From Left</Text>
            </Box>
          </Slide>
          
          <Slide in={show} direction="right">
            <Box bg="blue.500" p={2} rounded="md" flex={1}>
              <Text color="white" textAlign="center">From Right</Text>
            </Box>
          </Slide>
        </HStack>
        
        <Slide in={show} direction="bottom">
          <Box bg="orange.500" p={2} rounded="md">
            <Text color="white" textAlign="center">From Bottom</Text>
          </Box>
        </Slide>
      </VStack>
    </VStack>
  );
}

SlideFade Transition

Combined slide and fade animation for smooth directional transitions.

/**
 * Slide and fade transition component
 * @param props - SlideFade component props
 * @returns JSX element with slide and fade animation
 */
function SlideFade(props: ISlideFadeProps): JSX.Element;

interface ISlideFadeProps extends ISlideProps {
  offsetX?: number;
  offsetY?: number;
}

Usage Example:

import { SlideFade, Button, Box, Text, VStack } from "native-base";

function SlideFadeExample() {
  const [show, setShow] = React.useState(false);
  
  return (
    <VStack space={4}>
      <Button onPress={() => setShow(!show)}>
        Toggle SlideFade
      </Button>
      
      <SlideFade in={show} offsetX={20}>
        <Box bg="cyan.500" p={4} rounded="md">
          <Text color="white">SlideFade with X offset</Text>
        </Box>
      </SlideFade>
      
      <SlideFade in={show} offsetY={-20}>
        <Box bg="indigo.500" p={4} rounded="md">
          <Text color="white">SlideFade with Y offset</Text>
        </Box>
      </SlideFade>
    </VStack>
  );
}

PresenceTransition

Advanced transition component with customizable animation presets.

/**
 * Advanced presence transition component with custom animations
 * @returns JSX element with advanced transition capabilities
 */
function PresenceTransition(): JSX.Element;

Usage Example:

import { PresenceTransition, Button, Box, Text, VStack } from "native-base";

function PresenceTransitionExample() {
  const [isOpen, setIsOpen] = React.useState(false);
  
  return (
    <VStack space={4}>
      <Button onPress={() => setIsOpen(!isOpen)}>
        Toggle PresenceTransition
      </Button>
      
      <PresenceTransition
        visible={isOpen}
        initial={{
          opacity: 0,
          scale: 0
        }}
        animate={{
          opacity: 1,
          scale: 1,
          transition: {
            duration: 250
          }
        }}
      >
        <Box bg="emerald.500" p={4} rounded="md">
          <Text color="white">Custom animated content</Text>
        </Box>
      </PresenceTransition>
    </VStack>
  );
}

Stagger Animation

Staggered animation component for animating multiple elements with delays.

/**
 * Stagger animation component for sequential animations
 * @returns JSX element with staggered animation capabilities
 */
function Stagger(): JSX.Element;

Usage Example:

import { Stagger, PresenceTransition, Button, Box, Text, VStack } from "native-base";

function StaggerExample() {
  const [isOpen, setIsOpen] = React.useState(false);
  
  const items = ['First', 'Second', 'Third', 'Fourth'];
  
  return (
    <VStack space={4}>
      <Button onPress={() => setIsOpen(!isOpen)}>
        Toggle Stagger
      </Button>
      
      <Stagger
        visible={isOpen}
        initial={{
          opacity: 0,
          scale: 0,
          translateY: 34
        }}
        animate={{
          translateY: 0,
          scale: 1,
          opacity: 1,
          transition: {
            type: "spring",
            mass: 0.8,
            stagger: {
              offset: 30,
              reverse: true
            }
          }
        }}
        exit={{
          translateY: 34,
          scale: 0.5,
          opacity: 0,
          transition: {
            duration: 100,
            stagger: {
              offset: 30,
              reverse: true
            }
          }
        }}
      >
        {items.map((item, index) => (
          <PresenceTransition key={index}>
            <Box bg="amber.500" p={3} rounded="md" mb={2}>
              <Text color="white">{item} Item</Text>
            </Box>
          </PresenceTransition>
        ))}
      </Stagger>
    </VStack>
  );
}

Collapse Animation

Collapse animation component for expanding and collapsing content.

/**
 * Collapse animation component for expandable content
 * @returns JSX element with collapse animation
 */
function Collapse(): JSX.Element;

Usage Example:

import { Collapse, Button, Box, Text, VStack } from "native-base";

function CollapseExample() {
  const [show, setShow] = React.useState(false);
  
  return (
    <VStack space={4}>
      <Button onPress={() => setShow(!show)}>
        {show ? 'Hide' : 'Show'} Content
      </Button>
      
      <Collapse isOpen={show}>
        <Box bg="gray.100" p={4} rounded="md">
          <Text>
            This content can be collapsed and expanded smoothly. 
            The height animates automatically based on the content size.
          </Text>
          <Text mt={2}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </Text>
        </Box>
      </Collapse>
    </VStack>
  );
}

Animation Patterns

Sequential Animations

Creating sequences of animations for complex interactions:

import { 
  PresenceTransition, 
  Button, 
  VStack, 
  HStack, 
  Box, 
  Text 
} from "native-base";

function SequentialAnimations() {
  const [step, setStep] = React.useState(0);
  
  const nextStep = () => {
    setStep(current => (current + 1) % 4);
  };
  
  return (
    <VStack space={4}>
      <Button onPress={nextStep}>Next Step</Button>
      
      <HStack space={2} h="100">
        {[0, 1, 2, 3].map((index) => (
          <PresenceTransition
            key={index}
            visible={step >= index}
            initial={{ opacity: 0, translateX: -50 }}
            animate={{
              opacity: 1,
              translateX: 0,
              transition: { delay: index * 200 }
            }}
          >
            <Box bg="blue.500" p={4} rounded="md">
              <Text color="white">Step {index + 1}</Text>
            </Box>
          </PresenceTransition>
        ))}
      </HStack>
    </VStack>
  );
}

Interactive Animations

Animations triggered by user interactions:

import { 
  ScaleFade, 
  Pressable, 
  Box, 
  Text, 
  SimpleGrid 
} from "native-base";

function InteractiveAnimations() {
  const [activeCard, setActiveCard] = React.useState<number | null>(null);
  
  return (
    <SimpleGrid columns={2} spacing={4}>
      {[1, 2, 3, 4].map((item) => (
        <Pressable
          key={item}
          onPressIn={() => setActiveCard(item)}
          onPressOut={() => setActiveCard(null)}
        >
          <ScaleFade 
            in={activeCard !== item} 
            initialScale={0.95}
          >
            <Box 
              bg="purple.500" 
              p={6} 
              rounded="lg"
              shadow={activeCard === item ? "lg" : "sm"}
            >
              <Text color="white" textAlign="center">
                Card {item}
              </Text>
            </Box>
          </ScaleFade>
        </Pressable>
      ))}
    </SimpleGrid>
  );
}

Loading Animations

Animation patterns for loading states:

import { 
  Fade, 
  Skeleton, 
  VStack, 
  HStack, 
  Button, 
  Text, 
  Box 
} from "native-base";

function LoadingAnimations() {
  const [isLoading, setIsLoading] = React.useState(false);
  const [data, setData] = React.useState<any[]>([]);
  
  const loadData = async () => {
    setIsLoading(true);
    setData([]);
    
    // Simulate API call
    setTimeout(() => {
      setData([
        { id: 1, title: "First Item", description: "Description 1" },
        { id: 2, title: "Second Item", description: "Description 2" },
        { id: 3, title: "Third Item", description: "Description 3" },
      ]);
      setIsLoading(false);
    }, 2000);
  };
  
  return (
    <VStack space={4}>
      <Button onPress={loadData} isLoading={isLoading}>
        Load Data
      </Button>
      
      {isLoading ? (
        <VStack space={3}>
          {[1, 2, 3].map((item) => (
            <HStack key={item} space={3}>
              <Skeleton size="12" rounded="md" />
              <VStack space={2} flex={1}>
                <Skeleton h="4" />
                <Skeleton h="3" w="70%" />
              </VStack>
            </HStack>
          ))}
        </VStack>
      ) : (
        <VStack space={3}>
          {data.map((item, index) => (
            <Fade key={item.id} in={true}>
              <Box 
                bg="gray.100" 
                p={4} 
                rounded="md"
                style={{
                  animationDelay: `${index * 100}ms`
                }}
              >
                <Text fontWeight="bold">{item.title}</Text>
                <Text>{item.description}</Text>
              </Box>
            </Fade>
          ))}
        </VStack>
      )}
    </VStack>
  );
}

Page Transitions

Animation patterns for page and screen transitions:

import { 
  SlideFade, 
  Button, 
  VStack, 
  HStack, 
  Text, 
  Box 
} from "native-base";

function PageTransitions() {
  const [currentPage, setCurrentPage] = React.useState(0);
  
  const pages = [
    { title: "Welcome", content: "Welcome to our app!" },
    { title: "Features", content: "Discover amazing features" },
    { title: "Get Started", content: "Ready to begin?" }
  ];
  
  const nextPage = () => {
    setCurrentPage(current => (current + 1) % pages.length);
  };
  
  const prevPage = () => {
    setCurrentPage(current => current === 0 ? pages.length - 1 : current - 1);
  };
  
  return (
    <VStack space={4}>
      <HStack space={2} justifyContent="center">
        <Button size="sm" onPress={prevPage}>Previous</Button>
        <Button size="sm" onPress={nextPage}>Next</Button>
      </HStack>
      
      <Box minH="200" position="relative">
        {pages.map((page, index) => (
          <SlideFade
            key={index}
            in={currentPage === index}
            offsetX={currentPage === index ? 0 : 100}
            style={{
              position: currentPage === index ? 'relative' : 'absolute',
              width: '100%'
            }}
          >
            <Box bg="blue.50" p={6} rounded="lg" textAlign="center">
              <Text fontSize="xl" fontWeight="bold" mb={2}>
                {page.title}
              </Text>
              <Text>{page.content}</Text>
            </Box>
          </SlideFade>
        ))}
      </Box>
    </VStack>
  );
}

docs

animations.md

basic-components.md

forms.md

hooks-utilities.md

index.md

layout.md

media-data.md

navigation-feedback.md

overlays.md

theme.md

typography.md

tile.json