0.0.3 • Published 12 months ago

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

Weekly downloads
-
License
MIT
Repository
github
Last release
12 months ago

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

PropTypeDescription
activeTrackStyleOmit<ViewStyle, 'width'>It is an optional prop that specifies the styles of the active track of the slider.
durationnumberIt is an optional prop which specifies the duration of animation in milliseconds.
inactiveTrackStyleOmit<ViewStyle, 'width'>It is an optional prop that specifies the styles of the inactive track of the slider.
maxnumberIt is an optional prop that specifies the maximum possible value for the slider.
minnumberIt is an optional prop that specifies the minimum possible value for the slider.
setValueReact.Dispatch<React.SetStateAction<number>>It is a required prop which updates the value state for the slider.
sliderHeightnumberIt is an optional prop that specifies the height of the slider.
sliderWidthnumberIt is an optional prop that specifies the width of the slider.
stepnumberIt is an optional prop that specifies the increment or decrement in the slider value when sliding.
thumbIconReact.ReactNodeIt is an optional prop that specifies the icon for the slider thumb.
thumbSizenumberIt is an optional prop that specifies the size of the slider thumb.
thumbStyleViewStyleIt is an optional prop that specifies the styles of the slider thumb.
valuenumberIt is an optional prop that specifies the current value of slider.

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

PropTypeDescription
activeTrackStyleOmit<ViewStyle, 'width'>It is an optional prop that specifies the styles of the active track of the slider.
durationnumberIt is an optional prop which specifies the duration of animation in milliseconds.
inactiveTrackStyleOmit<ViewStyle, 'width'>It is an optional prop that specifies the styles of the inactive track of the slider.
maxnumberIt is an optional prop that specifies the maximum possible value for the slider.
maxValuenumberIt is an optional prop that specifies the current maximum value for the slider.
minnumberIt is an optional prop that specifies the minimum possible value for the slider.
minValuenumberIt is an optional prop that specifies the current minimum value for the slider.
onMaxValSwipeEndReact.Dispatch<React.SetStateAction<number>>It is a required prop which sets the maximum value for the slider.
onMinValSwipeEndReact.Dispatch<React.SetStateAction<number>>It is a required prop which updates the minimum value state for the slider.
sliderHeightnumberIt is an optional prop that specifies the height of the slider.
sliderWidthnumberIt is an optional prop that specifies the width of the slider.
stepnumberIt is an optional prop that specifies the increment or decrement in the slider value when sliding.
thumbIconReact.ReactNodeIt is an optional prop that specifies the icon for the slider thumb.
thumbSizenumberIt is an optional prop that specifies the size of the slider thumb.
thumbStyleViewStyleIt is an optional prop that specifies the styles of the slider thumb.

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

PropTypeDescription
containerStyleOmit<ViewStyle, 'width'> & {width:number}It is an optional prop which states the styles for progress bar container.
containerWidthnumberIt is an optional prop which states width for progress bar container.
durationnumberIt is an optional prop which states the duration in milliseconds for the progress animation.
fillStyleOmit<ViewStyle, 'width'> & {width:number}It is an optional prop which states the styles for the filled portion of the progress bar.
labelStyleTextStyleIt is an optional prop which states the styles for the progress label.
maxValuenumberIt is an optional prop which states the maximum value of progress bar.
showLabelbooleanIt is an optional prop which states whether the percentage label will be be visible or not.
valuenumberIt is a required prop which states the progress value.

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

PropTypeDescription
durationnumberIt is an optional prop which states the duration of the animation in milliseconds.
labelStyleTextStyleIt is an optional prop which states the styles for the label displayed within the circular progress bar.
maxValuenumberIt is an optional prop which states the maximum value for the progress bar.
outerRingColorstringIt is an optional prop which states the color of the outer ring of the circular progress bar.
progressRingColorstringIt is an optional prop which states the color of the progress ring.
showLabelbooleanIt is an optional prop which states whether the percentage label will be be visible or not.
sizenumberIt is an optional prop which states the overall width , height of circular progress bar.
strokeWidthnumberIt is an optional prop which states the stroke width of the progress ring.
valuenumberIt is a required prop which states the current progress value.

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

PropTypeDescription
containerStyleOmit<ViewStyle, 'width'> & {width:number}It is an optional prop which states the styles for the progress bar container.
containerWidthnumberIt is an optional prop which states the width for the progress bar container.
durationnumberIt is an optional prop which states the duration of the animation in milliseconds.
fillStyleOmit<ViewStyle, 'width'> & {width:number}It is an optional prop which states the styles for the filled portion of the progress bar.
fillWidthnumberIt is an optional prop which states the width for the filled portion of the progress bar.

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

PropTypeDescription
durationnumberIt is an optional prop which states the duration of the animation in milliseconds.
outerRingColorstringIt is an optional prop which states the color of the outer ring of the circular progress bar.
progressRingColorstringIt is an optional prop which states the color of the progress ring.
sizenumberIt is an optional prop which states the overall width and height of the circular progress bar.
strokeWidthnumberIt is an optional prop which states the stroke width of the progress ring.

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} />
PropTypeValuesDescription
animationTransitionDurationnumber0,1,2,3.....It is used to change the duration of the transition of animation.
buttonContainerStyleViewStylename of style class createdIt is used to change the styles of the container of the floating button.
buttonTypeFloatingButtonPresetFloatingButtonWithIcon / FloatingButtonWithLabel / CircularFloatingButtonIt is used to change the type of the floating button.
circleStyleViewStylename of style class createdIt is used to change the styles of the container of the expanding circle when the type of floating button is CircularFloatingButton.
contentContainerStyleViewStylename of style class createdIt is used to change the styles of the container of the content in the floating button.
iconContainerStyleViewStylename of style class createdIt is used to change the styles of the container of the icon in the floating button.
iconStyleImageStylename of style class createdIt is used to change the styles of the icons in the floating button.
iconsarray of IconProps{ icon: 'name of image', onPress: function, iconName: 'name of icon'}It is used to pass the name, image and function the for the icon.
isLeftAlignedBooleantrue/falseIt is used to change the position of the floating button to left when true otherwise right.
textStyleTextStylename of style class createdIt is used to change the styles of the text when the type of floating button is FloatingButtonWithLabel.

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"
/>
PropTypeValuesDescription
multiSelectBooleantrue/falseIt is is an optional prop which dictates whether multiple selections is allowed or not.
onChange(newValue: ISelectOption[]/ISelectOption) => voidname of function to performIt is a required prop which dictates the function which will be called on clicking the options.
optionsArray of { title: '', value: '' }{ title: 'Name to be displayed', value: 'Value to be used' }It is an required prop which dictates an array containing titles and values for options.
optionContainerStyleViewStylename of style class createdIt is an optional prop which defines the styles of option container.
optionStyleViewStylename of style class createdIt is an optional prop which defines the styles of options.
placeholderTextstringvalues to be display in select boxIt is an optional prop which dictates the text of placeholder.
selectedOptionStyleViewStylename of style class createdIt is an optional prop which defines the styles of selected option.
selectContainerStyleViewStylename of style class createdIt is an optional prop which defines the styles of select container.
selectedOptionsISelectOption[]/ISelectOption{ title: 'Name to be displayed', value: 'Value to be used' }It is a required prop which dictates the selected options.

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

PropTypeDescription
titlestringIt dictates the title of the accordion.
titleStyleDefaultStyleIt is an optional prop which is used to allow users to change the style of title text.
isDefaultOpenbooleanIt is an optional prop which is used to dictate whether the accordion will be open by default. Only works when showSingleItemAtOnce prop is false
iconstringIt is used to dictate the icon name from the ant design library for the accordion dropdown.
idnumber or stringIt is used to define the id of the accordion item.
titleContainerStyleDefaultStyleIt is an optional prop which is used to allow users to change the style of title container.

Accordion Props

PropTypeDescription
durationnumberIt is used to control the speed of the animation.
showSingleItemAtOncebooleanIt is an optional prop which dictates if multiple accordion items can be open at the same time.

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}
/>
PropTypeValuesDescription
buttonStyleViewStylename of style class createdIt is an optional prop which defines the styles of button.
failedIconReact.ReactNodeicon as componentIt is a required prop which dictates the icon displayed if the onPress function returns a falsy value.
failedLabelStringtextIt is a required prop which dictates the label to be displayed when transition fails
isDisabledbooleantrue/falseIt is an optional prop which dictates that disables the button if true.
isLoadingbooleantrue/falseIt is an optional prop which dictates that disables the button if true, likely to indicate a loading state.
onPress() => void / boolean / Promisename of function to performIt is a required prop which dictates the function is called when the button is pressed.
startIconReact.ReactNodeicon as componentIt is a required prop which dictates the initial icon displayed on the button.
startLabelStringtextIt is a required prop which dictates the label to be displayed initially.
successIconReact.ReactNodeicon as componentIt is a required prop which dictates the icon displayed if the onPress function returns a truth value.
successLabelStringtextIt is a required prop which dictates the label to be displayed when transition succeeds

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

PropTypeValuesDescription
buttonInitialTextstringtextIt is a required prop which defines the initial text displayed on the button.
gradientWaveColorArrayarray of colorsIt is a required prop which defines the colors for the initial gradient wave effect.
isDisabledbooleantrue/falseIt is an optional prop which disables the button if true.
onSwipeComplete() => Promisename of function to performIt is a required prop which dictates the function called when the swipe is completed.
onTaskComplete(isSuccess: boolean) => voidname of function to performIt is a required prop which dictates the function called when the task is complete.
styleViewStylename of style class createdIt is an optional prop which defines the styles of the button.
taskStatusDataITaskStatusDataobjectIt is a required prop which provides data related to task statuses, including success and fail states.
thumbColorsArrayarray of colorsIt is a required prop which defines the colors for the thumb (swipe indicator).

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

PropTypeValuesDescription
buttonContainerStyleStylePropname of style class createdIt is an optional prop which defines the styles of the button container.
buttonStyleStylePropname of style class createdIt is an optional prop which defines the styles of the button.
isDisabledbooleantrue/falseIt is an optional prop which disables the button if true.
isLoadingbooleantrue/falseIt is a required prop which indicates the loading state of the button.
labelstringtextIt is a required prop which defines the label text displayed on the button.
labelStyleStylePropname of style class createdIt is an optional prop which defines the styles of the label text.
loadingTextstringtextIt is an optional prop which defines the text displayed when the button is in loading state.
onPress() => voidname of function to performIt is a required prop which dictates the function called when the button is pressed.

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

PropTypeValuesDescription
customButtonStyleStylePropname of style class createdIt is an optional prop which defines the custom styles of the button.
isLoadingbooleantrue/falseIt is an optional prop which indicates the loading state of the button.
isDisabledbooleantrue/falseIt is an optional prop which disables the button if true.
labelstringtextIt is a required prop which defines the label text displayed on the button.
loaderColorstringcolor codeIt is an optional prop which defines the color of the loader when the button is in loading state.
onPress() => voidname of function to performIt is a required prop which dictates the function called when the button is pressed.

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

PropTypeValuesDescription
customLoaderStyleStylePropname of style class createdIt is an optional prop which defines the custom styles of the loader.
loaderDotColorstringcolor codeIt is an optional prop which defines the color of the dots in the loader.
loaderPresetTriDotLoaderPresetSmall / Medium / LargeIt is an optional prop which defines the size preset of the dots in the loader.

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

PropTypeDescription
CloseIconReact.ReactNodeIt is an optional prop which holds the icon to be displayed to close the search bar.
durationnumberIt is an optional prop which indicates the duration of the animation.
iconSizenumberIt is an optional prop which indicates the size of the icon.
iconStyleDefaultStyleIt is an optional prop which holds the style of the search icon.
inputContainerStyleDefaultStyleIt is an optional prop which holds the style of the input container.
handleInputChange(text: string) => voidIt is a prop which handles the input change.
heightnumberIt is an optional prop which indicates the height of the search bar.
iconBackgroundColorstringIt is an optional prop which indicates the color of the icon background.
iconColorstringIt is an optional prop which indicates the color of the icon.
placeholderTextstringIt is an optional prop which holds the placeholder text.
placeholderTextColorstringIt is an optional prop which holds the placeholder text color.
searchBarContainerStyleDefaultStyleIt is an optional prop which holds the style of the search bar.
SearchIconReact.ReactNodeIt is an optional prop which holds the icon to be displayed.
searchValuestringIt is a prop which holds the value of the search bar.
wrapperContainerStyleDefaultStyleIt is an optional prop which holds the style of the main container which wraps the search bar.

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

PropTypeDefault ValueRequiredDescription
buttonStyles{ container?: ViewStyle; text?: TextStyle }-NoCustom styles for the timer control buttons
circularDimensions{ radius?: number; strokeWidth?: number }{ radius: 45, strokeWidth: 10 }Noindicates the radius and stroke width of the circular timer
controlsbooleanfalseNoDetermines if control buttons (Start, Pause, Reset) are shown
durationnumber-YesTotal duration of the timer in seconds
linearDimenions{ width?: number; height?: number }{ width: 300, height: 10 }YesIndicates the width and height of the linear timer
showTimeLeftbooleantrueNoIndicates whether to display time left on screen or not
strokeColorstringblackNoIndicates the color of timer
timeLeftTextStyleTextSTyle-NoProp to style the time left text of the timer
typeTimerPreset-YesType of the timer (TimerPreset.Linear or TimerPreset.Circular)

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