AnimatedFAB

An animated, extending horizontally floating action button represents the primary action in an application.

How to use

import React from 'react';
import {AnimatedFAB, SafeAreaView, ScrollView} from '@gyri/native-ui-components';

const MyComponent = ({style, className}) => {
  const [isExtended, setIsExtended] = React.useState(true);

  const onScroll = ({ nativeEvent }) => {
    const currentScrollPosition =
      Math.floor(nativeEvent?.contentOffset?.y) ?? 0;

    setIsExtended(currentScrollPosition <= 0);
  };
  
  return (
    <SafeAreaView>
      <ScrollView onScroll={onScroll}>
        {[...new Array(100).keys()].map((_, i) => (
          <Text>{i}</Text>
        ))}
      </ScrollView>
      <AnimatedFAB
        style={style}
        className={className}
        icon={'plus'}
        label={'Label'}
        extended={isExtended}
        onPress={() => console.log('Pressed')}
        visible={visible}
        animateFrom={'right'}
        iconMode={'static'}
      />
    </SafeAreaView>
  )
};

export default MyComponent;

Props

#	Name	Data type	Default value	Values	Description
1	style	object			Custom style object
2	className	string	''		It defined nativewind style classes.
3	color	string			Custom color for the icon and label of the FAB
4	icon				Icon to display for the FAB.
5	rippleColor				Color of the ripple effect.
6	visible	boolean	true		Whether FAB is currently visible.
7	iconMode		dynamic	'static' , 'dynamic'	Whether icon should be translated to the end of extended FAB or be static and stay in the same place.
8	animateFrom		right	'left', 'right'	Indicates from which direction animation should be performed.
9	extended	boolean	false		Whether FAB should start animation to extend.

For more details https://callstack.github.io/react-native-paper/docs/components/FAB/AnimatedFAB