react-native-vs-animated-component v0.0.3

react-native-vs-animated-component

Tired of spending countless hours crafting complex animations for your React Native app? react-native-vs-animated-component is your solution. This library offers a collection of meticulously designed, pre-built components that seamlessly integrate animations into your app, enhancing user experience and developer efficiency.

Key Benefits

Accelerated Development: Save time and effort by using pre-built components with built-in animations.

Enhanced User Experience: Create engaging and interactive apps with visually appealing animations.

Consistent Design: Maintain a cohesive look and feel throughout your app with standardized components.

Performance Optimized: Components are designed for optimal performance using React Native's Animated API.

Key Components

Slider | Progress bar | Infinite progress bar | Floating button | Select | Accordion | Modal | Icon Transition button | Swipe button | Progress button | Spring button | Tri-dot loader | Search bar | Timer

; ; ; ; ; ; ;

Installation

Note: This package requires @react-native-reanimated

npm install react-native-vs-animated-component --save

OR

yarn add react-native-vs-animated-component --save

Slider

Single Value Slider

Features

• Customizable Styles: Styles can be customized via props.
• Responsive Design: Adjusts to screen dimensions to maintain consistent behavior across devices.

Usage

import Slider from 'react-native-animated-components'
import Icon from 'react-native-vector-icons/MaterialIcons'

const Component = () => {
  const [value, setValue] = useState(0)

  return (
    <View>
      <Slider.SingleValue setValue={setValue} />
      <Slider.SingleValue
        setValue={setValue}
        thumbIcon={<Icon name="hive" size={35} color="black" />}
        activeTrackStyle={{ backgroundColor: 'red' }}
        inactiveTrackStyle={{ backgroundColor: 'plum' }}
      />
    </View>
  )
}

Props

Range Slider

Features

• Customizable Styles: Styles can be customized via props.
• Responsive Design: Adjusts to screen dimensions to maintain consistent behavior across devices.

Usage

import Slider from 'react-native-animated-components'
import Icon from 'react-native-vector-icons/MaterialIcons'

const Component = () => {
  const [minValue, setMinValue] = useState(0)
  const [maxValue, setMaxValue] = useState(100)

  return (
    <View>
      <Slider.Range setMinValue={setMinValue} setMaxValue={setMaxValue} />
      <Slider.Range
        setMinValue={setMinValue}
        setMaxValue={setMaxValue}
        thumbIcon={<Icon name="hive" size={35} color="black" />}
        activeTrackStyle={{ backgroundColor: 'red' }}
        inactiveTrackStyle={{ backgroundColor: 'plum' }}
      />
    </View>
  )
}

Props

Progress Bar

Linear Progress Bar

• It shows progress in form of a linear bar

Features

• Responsive Design: Adjusts to screen dimensions to maintain consistent behavior across devices.
• Fully customizable: Each element of progress bar can be customized by props.

Usage

import ProgressBar from 'react-native-animated-components'

const Component = () => {
  const [progress, setProgress] = useState(0)

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress(prevProgress => {
        const newProgress = prevProgress + 10
        return newProgress > 100 ? 0 : newProgress
      })
    }, 1000)

    return () => clearInterval(interval)
  }, [])

  return <ProgressBar.Linear value={progress} maxValue={100} />
}

Props

Circular Progress Bar

• It shows progress in form of a circular bar

Features

• Responsive Design: Adjusts to screen dimensions to maintain consistent behavior across devices.
• Fully customizable: Each element of progress bar can be customized by props.

Usage

import ProgressBar from 'react-native-animated-components'

const Component = () => {
  const [progress, setProgress] = useState(0)

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress(prevProgress => {
        const newProgress = prevProgress + 10
        return newProgress > 100 ? 0 : newProgress
      })
    }, 1000)

    return () => clearInterval(interval)
  }, [])

  return <ProgressBar.Circular value={progress} maxValue={100} />
}

Props

Infinite Linear Progress Bar

• It provides an animated, continuously progressing bar to indicate loading.

Features

• Responsive Design: Adjusts to screen dimensions to maintain consistent behavior across devices.
• Fully customizable: Each element of progress bar can be customized by props.

Usage

import ProgressBar from 'react-native-animated-components'

const Component = () => {
  return <ProgressBar.InfiniteLinear />
}

Props

Infinite Circular Progress Bar

• It provides an provides a continuous, animated circular indicator for loading.

Features

• Responsive Design: Adjusts to screen dimensions to maintain consistent behavior across devices.
• Fully customizable: Each element of progress bar can be customized by props.

Usage

import ProgressBar from 'react-native-animated-components'

const Component = () => {
  return <ProgressBar.InfiniteCircular />
}

Props

Floating Button

Floating Button All Variants

Floating Button With Icon

Floating Button With Label

Circular Floating Button

Features

• Different Types: Allows users to choose the type of floating button.
• Animation Transition Duration: Control the duration of the opening/closing animation.
• Responsive Design: Adjusts to screen dimensions to maintain consistent behavior across devices.
• Customizable Styles: Styles can be customized via props.
• Circular Floating Button: Offers a circular expansion with animated icons along the circumference.
• Floating Button With Icon: Provides a vertical stack of icons with staggered animations.
• Floating Button With Label: Similar to FloatingButtonWithIcon but includes expanding width and text labels for each icon.

Usage

import FloatingButton from "react-native-animated-components";

const icons = [
    {
      icon: FileIcon,
      onPress: () => Alert.alert('File Icon Pressed'),
      iconName: 'File',
    },
    {
      icon: FolderIcon,
      onPress: () => Alert.alert('Folder Icon Pressed'),
      iconName: 'Folder',
    },
    {
      icon: PenIcon,
      onPress: () => Alert.alert('Pen Icon Pressed'),
      iconName: 'Pen',
    },
    {
      icon: PenIcon,
      onPress: () => Alert.alert('Pen Icon Pressed'),
      iconName: 'Pencil',
    },
  ]

  <FloatingButton buttonType={FloatingButtonPreset.FloatingButtonWithIcon} icons={icons} />

Note: All the props are passed to the floating-button component from where it will send the props to the type chosen by the user.

Select

Features

• Animation Transition Duration: Control the duration of the opening/closing animation.
• Customizable Styles: Styles can be customized via props.
• Different Types: Allows users to choose the type of select box.
• Dropdown Selection: Opens a dropdown interface to select options.
• Performance Optimizations: Only renders the dropdown and animations when needed, reducing unnecessary re-renders.
• Responsive Design: Adjusts to screen dimensions to maintain consistent behavior across devices.
• Single/Multi-selection: Supports both single and multi-select use cases with the same component, reducing the need for multiple components.
• TypeScript Support: Fully typed with TypeScript, providing type safety and better developer experience.

import Select from "react-native-animated-components";

const [select, setSelect] = useState<ISelectOption | ISelectOption[]>([])

<Select
  onChange={setSelect}
  options={[
    { title: "Amandeep", value: "amandeep" },
    { title: "Aman Rana", value: "aman rana" },
    { title: "Hargun", value: "hargun" },
    { title: "Ravi", value: "ravi" },
  ]}
  selectedOptions={select}
  placeholderText="Select option"
/>

Note: All the props are passed to the select component.

Accordion

The Accordion component lets users show and hide sections of related content on a page.

Features

• Animation Transition Duration: Control the duration of the opening/closing animation.
• Customizable Styles: Styles can be customized via props.
• Single open: Allows users to choose the if multiple accordions will be open or only single accordion will be open at a time.

Usage

<Accordion showSingleItemAtOnce={false}>
  <Accordion.Item id={1} title="FAQ">
    <View style={{ padding: 20, backgroundColor: '#E8C5E5' }}>
      <Text style={{ fontFamily: 'Robot-Medium', letterSpacing: 1 }}>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore officia nostrum libero
        similique iste cumque, perspiciatis quasi exercitationem, suscipit voluptatum autem, fuga
        maiores? Saepe, vitae perspiciatis. Cumque consequatur facilis incidunt.
      </Text>
    </View>
  </Accordion.Item>
  <Accordion.Item id={2} title="FAQ">
    <View style={{ padding: 20, backgroundColor: '#E8C5E5' }}>
      <Text style={{ fontFamily: 'Robot-Medium', letterSpacing: 1 }}>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore officia nostrum libero
        similique iste cumque, perspiciatis quasi exercitationem, suscipit voluptatum autem, fuga
        maiores? Saepe, vitae perspiciatis. Cumque consequatur facilis incidunt.
      </Text>
    </View>
  </Accordion.Item>
  <Accordion.Item id={3} title="FAQ">
    <View style={{ padding: 20, backgroundColor: '#E8C5E5' }}>
      <Text style={{ fontFamily: 'Robot-Medium', letterSpacing: 1 }}>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore officia nostrum libero
        similique iste cumque, perspiciatis quasi exercitationem, suscipit voluptatum autem, fuga
        maiores? Saepe, vitae perspiciatis. Cumque consequatur facilis incidunt.
      </Text>
    </View>
  </Accordion.Item>
</Accordion>

Accordion Item Props

Accordion Props

Modal

Features:

1. Multiple modal animations:
   • Fade-In
   • Slide-In
   • Scale
   • Slide-In-Left
2. Easy to integrate and use in any React Native project.
3. Customizable modal content and styles.

Props:

The component accepts the following props: |Prop |Type |Description |Required | |--- |--- |--- | ---| | isVisible | boolean | Indicates whether the modal is visible or not | Yes | | onClose | () => {} | Handles the closing of the modal | Yes | | type | ModalPreset | Specifies the type of animation preset for the modal | Yes | | children | React.ReactNode | The content to be displayed inside the modal | Yes | | style | StyleProp | Additional styles for customizing the modal | No |

Usage:

This is a simple example of how to use animated modals:

const App: React.FC = () => {
  const [fadeInVisible, setFadeInVisible] = useState(false);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={styles.container}>
        <TouchableOpacity onPress={() => setFadeInVisible(true)} style={styles.button}>
          <Text style={styles.buttonText}>Show Fade-In Modal</Text>
        </TouchableOpacity>

        <Modal
          isVisible={fadeInVisible}
          onClose={() => setFadeInVisible(false)}
          type={ModalPreset.FadeIn}>
          <Text>This is a fade-in modal</Text>
        </Modal>
      </View>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    padding: 10,
    backgroundColor: '#007bff',
    borderRadius: 5,
    marginBottom: 10,
  },
  buttonText: {
    color: '#fff',
  },
});

export default App;

Icon Transition Button

Features

• Customizable Styles: Styles can be customized via props.
• Flexibility: Highly flexible with support for custom icons and labels for different states (start, success, failure). This makes it adaptable to various use cases.
• Multiple States Handling: Efficiently handles various states such as success and failure. This can be particularly useful for forms or any action that requires feedback based on the result of an asynchronous operation.
• Responsive Design: Adjusts to screen dimensions to maintain consistent behavior across devices.
• Smooth Transition Animations: Provide smooth and visually appealing transition animations for icons and labels. This can enhance the user experience significantly.

Usage

import IconTransitionButton from 'react-native-animated-components'

;<IconTransitionButton
  onPress={async () => {
    // Perform some async operation
    const success = await someAsyncFunction()
    return success
  }}
  startIcon={<StartIconComponent />}
  failedLabel="Payment Failed"
  startLabel="Make Payment"
  successLabel="Payment Successful"
  failedIcon={<FailedIconComponent />}
  successIcon={<SuccessIconComponent />}
  isDisabled={false}
  isLoading={false}
/>

Note: All the props are passed to the Icon Transition Button component.

Swipe Button

Features

• Responsive Design: Adjusts to screen dimensions to maintain consistent behavior across devices.
• Customizable Styles: Styles can be customized via props.

Usage

import SwipeButton from 'react-native-animated-components'

const gradientWaveColor = useMemo(() => ['#1A63C5', '#1A63C5'], [])
const thumbColors = useMemo(() => ['#1A63C5', '#1A63C5'], [])

const taskStatusData = useMemo(
  () => ({
    fail: {
      text: 'Failed',
      icon: RemixIcons.FILLED_CLOSE_CIRCLE,
      iconColor: 'white',
      waveColor: ['#D54D49', '#D54D49'],
    },
    success: {
      text: 'Successfully',
      icon: RemixIcons.CHECKBOX_CIRCLE_FILLED,
      iconColor: 'white',
      waveColor: ['#59B359', '#59B359'],
    },
  }),
  [],
)

const handleSubmitBtnPress = () => {
  try {
    return true
  } catch {
    return false
  }
}

;<SwipeButton
  buttonInitialText="Swipe to complete"
  gradientWaveColor={['#4c669f', '#3b5998', '#192f6a']}
  isDisabled={false}
  onSwipeComplete={async () => {
    // Simulate async operation
    const success = await someAsyncOperation()
    return success
  }}
  onTaskComplete={isSuccess => {
    // Handle task completion
    console.log('Task completed:', isSuccess)
  }}
  taskStatusData={{
    success: { waveColor: ['#00ff00'] },
    fail: { waveColor: ['#ff0000'] },
  }}
  thumbColors={['#ffffff', '#000000']}
/>

Props

Note: All the props are passed to the Swipe Button component.

Progress Button

Features

• Responsive Design: Adjusts to screen dimensions to maintain consistent behavior across devices.
• Customizable Styles: Styles can be customized via props.

Usage

import ProgressButton from 'react-native-animated-components'

const [isLoading, setIsLoading] = useState(false)

const onPress = () => {
  setIsLoading(true)
  setTimeout(() => setIsLoading(false), 3000)
}

;<ProgressButton
  isLoading={isLoading}
  onPress={onPress}
  label="Submit"
  buttonContainerStyle={{
    marginVertical: 20,
  }}
/>

Props

Note: All the props are passed to the Progress Button component.

Spring Button

Features

• Responsive Design: Adjusts to screen dimensions to maintain consistent behavior across devices.
• Customizable Styles: Styles can be customized via props.

Usage

import SpringButton from 'react-native-animated-components'

const onPress = () => {
  console.log('Button Pressed')
}

;<SpringButton label="Press me" onPress={onPress} />

Props

Note: All the props are passed to the Spring Button component.

Tri-Dot Loader

Features

• Responsive Design: Adjusts to screen dimensions to maintain consistent behavior across devices.
• Customizable Styles: Styles can be customized via props.

Usage

import TriDotLoader from 'react-native-animated-components'

;<TriDotLoader loaderPreset={TriDotLoaderPreset.Large} />

Props

Note: All the props are passed to the Tri-Dot Loader component.

Search Bar

The Search Bar component is an expandable search bar component which can expand and collapse by clicking on search icon.

Preview

Features

• Animation Transition Duration: Control the duration of the opening/closing animation.
• Customizable Styles: Styles can be customized via props.
• Icon Selection: Allows users to choose their own icons.
• Performance Optimizations: Only renders the dropdown and animations when needed, reducing unnecessary re-renders.

Props

Timer

https://github.com/user-attachments/assets/d84c2673-4d8b-46c7-b714-449ba7f4b016

Features

• Customizable: Easily style the timer and its control buttons.
• Dual Timer Types: Supports both linear and circular timers.
• Controls: Optional start, pause, resume, and reset controls.
• Animations: Smooth animations

Props

Usage

import React from 'react'

import Timer from '@components'
import { TimerPreset } from '@constants'

const App = () => {
  return (
    <Timer
      buttonStyles={{
        container: { backgroundColor: 'blue' },
        text: { color: 'white' },
      }}
      circularTimerStrokeColor="red"
      controls={true}
      linearTimerColor="green"
      timerType={TimerPreset.Circular} // or TimerPreset.Linear
      totalDurationInSeconds={60}
    />
  )
}

export default App