feat: add AnimatedFAB improvements

docs/component-docs.config.js

@@ -41,7 +41,6 @@ function getPages() {
     .split('\n')
     .map((line) => line.split(' ').pop().replace(/('|;)/g, ''))
     .filter((line) => line.startsWith('./components/'))
-    .filter((line) => line !== './components/FAB/AnimatedFAB')
     .map((line) => {
       const file = require.resolve(path.join(__dirname, '../src', line));
       if (/\/index\.(js|tsx?)$/.test(file)) {

example/src/ExampleList.tsx

@@ -43,7 +43,7 @@ export const examples: Record<
   string,
   React.ComponentType<any> & { title: string }
 > = {
-  ...(__DEV__ && { animatedFab: AnimatedFABExample }),
+  animatedFab: AnimatedFABExample,
   activityIndicator: ActivityIndicatorExample,
   appbar: AppbarExample,
   avatar: AvatarExample,

example/src/Examples/AnimatedFABExample.tsx → example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx

@@ -1,15 +1,14 @@
 import * as React from 'react';
 import { View, StyleSheet, FlatList, Animated, Platform } from 'react-native';
 import type { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
-import {
-  Colors,
-  AnimatedFAB,
-  useTheme,
-  Avatar,
-  Paragraph,
-} from 'react-native-paper';
+import { Colors, useTheme, Avatar, Paragraph } from 'react-native-paper';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { animatedFABExampleData } from '../../utils';
+import { animatedFABExampleData } from '../../../utils';
+import CustomFAB from './CustomFAB';
+import CustomFABControls, {
+  Controls,
+  initialControls,
+} from './CustomFABControls';
 
 type Item = {
   id: string;
@@ -23,55 +22,24 @@ type Item = {
   bgColor: string;
 };
 
-type CustomFABProps = {
-  animatedValue: Animated.Value;
-  visible: boolean;
-  extended: boolean;
-};
-
-const isIOS = Platform.OS === 'ios';
-
-const CustomFAB = ({ animatedValue, visible, extended }: CustomFABProps) => {
-  const [isExtended, setIsExtended] = React.useState(true);
-
-  React.useEffect(() => {
-    if (!isIOS) {
-      animatedValue.addListener(({ value }: { value: number }) =>
-        setIsExtended(value > 0 ? true : false)
-      );
-    } else setIsExtended(extended);
-  }, [animatedValue, extended]);
-
-  return (
-    <AnimatedFAB
-      icon={'pencil'}
-      label={'Create'}
-      extended={isExtended}
-      uppercase={false}
-      onPress={() => console.log('Pressed')}
-      visible={visible}
-      animateFrom="right"
-      iconMode="dynamic"
-      style={styles.fabStyle}
-    />
-  );
-};
-
 const AnimatedFABExample = () => {
   const {
     colors: { background },
   } = useTheme();
 
-  const [scrollPosition, setScrollPosition] = React.useState<number>(0);
-  const [extended, setExtended] = React.useState<boolean>(false);
+  const isIOS = Platform.OS === 'ios';
+
+  const [extended, setExtended] = React.useState<boolean>(true);
   const [visible, setVisible] = React.useState<boolean>(true);
 
+  const [controls, setControls] = React.useState<Controls>(initialControls);
+
   const { current: velocity } = React.useRef<Animated.Value>(
     new Animated.Value(0)
   );
 
-  const renderItem = ({ item }: { item: Item }) => {
-    return (
+  const renderItem = React.useCallback(
+    ({ item }: { item: Item }) => (
       <View style={styles.itemContainer}>
         <Avatar.Text
           style={[styles.avatar, { backgroundColor: item.bgColor }]}
@@ -117,39 +85,36 @@ const AnimatedFABExample = () => {
           </View>
         </View>
       </View>
-    );
-  };
+    ),
+    [visible]
+  );
 
   const onScroll = ({
     nativeEvent,
   }: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const currentScrollPosition =
+      Math.floor(nativeEvent?.contentOffset?.y) ?? 0;
+
     if (!isIOS) {
-      return velocity.setValue(nativeEvent?.velocity?.y ?? 0);
+      return velocity.setValue(currentScrollPosition);
     }
 
-    const currentScrollPosition = Math.floor(nativeEvent.contentOffset.y);
+    setExtended(currentScrollPosition <= 0);
+  };
 
-    const scrollHeight =
-      nativeEvent.contentSize.height - nativeEvent.layoutMeasurement.height;
+  const _keyExtractor = React.useCallback(
+    (item: { id: string }) => item.id,
+    []
+  );
 
-    setScrollPosition(currentScrollPosition);
-
-    if (currentScrollPosition > scrollPosition && scrollPosition > 0) {
-      setExtended(false);
-    } else if (
-      currentScrollPosition < scrollPosition &&
-      scrollPosition < scrollHeight
-    ) {
-      setExtended(true);
-    }
-  };
+  const { animateFrom, iconMode } = controls;
 
   return (
     <>
       <FlatList
         data={animatedFABExampleData}
         renderItem={renderItem}
-        keyExtractor={(item: { id: string }) => item.id}
+        keyExtractor={_keyExtractor}
         onEndReachedThreshold={0}
         scrollEventThrottle={16}
         style={[styles.flex, { backgroundColor: background }]}
@@ -159,10 +124,16 @@ const AnimatedFABExample = () => {
         ]}
         onScroll={onScroll}
       />
+
+      <CustomFABControls controls={controls} setControls={setControls} />
+
       <CustomFAB
         visible={visible}
         animatedValue={velocity}
         extended={extended}
+        label={'New Message'}
+        animateFrom={animateFrom}
+        iconMode={iconMode}
       />
     </>
   );
@@ -213,11 +184,6 @@ const styles = StyleSheet.create({
     marginRight: 8,
     flex: 1,
   },
-  fabStyle: {
-    right: 16,
-    bottom: 32,
-    position: 'absolute',
-  },
 });
 
 export default AnimatedFABExample;

example/src/Examples/AnimatedFABExample/CustomFAB.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import {
+  StyleProp,
+  ViewStyle,
+  Animated,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+import { AnimatedFAB } from 'react-native-paper';
+
+type CustomFABProps = {
+  animatedValue: Animated.Value;
+  visible: boolean;
+  extended: boolean;
+  label: string;
+  animateFrom: 'left' | 'right';
+  iconMode?: 'static' | 'dynamic';
+  style?: StyleProp<ViewStyle>;
+};
+
+const CustomFAB = ({
+  animatedValue,
+  visible,
+  extended,
+  label,
+  animateFrom,
+  style,
+  iconMode,
+}: CustomFABProps) => {
+  const [isExtended, setIsExtended] = React.useState(true);
+
+  const isIOS = Platform.OS === 'ios';
+
+  React.useEffect(() => {
+    if (!isIOS) {
+      animatedValue.addListener(({ value }: { value: number }) => {
+        setIsExtended(value <= 0);
+      });
+    } else setIsExtended(extended);
+  }, [animatedValue, extended, isIOS]);
+
+  const fabStyle = { [animateFrom]: 16 };
+
+  return (
+    <AnimatedFAB
+      icon={'plus'}
+      label={label}
+      extended={isExtended}
+      uppercase={true}
+      onPress={() => console.log('Pressed')}
+      visible={visible}
+      animateFrom={animateFrom}
+      iconMode={iconMode}
+      style={[styles.fabStyle, style, fabStyle]}
+    />
+  );
+};
+
+export default CustomFAB;
+
+const styles = StyleSheet.create({
+  fabStyle: {
+    bottom: 16,
+    position: 'absolute',
+  },
+});

example/src/Examples/AnimatedFABExample/CustomFABControls.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { StyleSheet, View, FlatList } from 'react-native';
+import { Colors, Paragraph, RadioButton } from 'react-native-paper';
+import type {
+  AnimatedFABAnimateFrom,
+  AnimatedFABIconMode,
+} from 'react-native-paper';
+
+export type Controls = {
+  iconMode: AnimatedFABIconMode;
+  animateFrom: AnimatedFABAnimateFrom;
+};
+
+export const initialControls: Controls = {
+  iconMode: 'static',
+  animateFrom: 'right',
+};
+
+type Props = {
+  controls: Controls;
+  setControls(controls: React.SetStateAction<Controls>): void;
+};
+
+type ControlValue = AnimatedFABIconMode | AnimatedFABAnimateFrom;
+
+type CustomControlProps = {
+  name: string;
+  options: ControlValue[];
+  value: ControlValue;
+  onChange(newValue: ControlValue): void;
+};
+
+const CustomControl = ({
+  name,
+  options,
+  value,
+  onChange,
+}: CustomControlProps) => {
+  const _renderItem = React.useCallback(
+    ({ item }) => (
+      <View style={styles.controlItem}>
+        <Paragraph>{item}</Paragraph>
+
+        <RadioButton
+          value="dynamic"
+          status={value === item ? 'checked' : 'unchecked'}
+          onPress={() => onChange(item)}
+        />
+      </View>
+    ),
+    [value, onChange]
+  );
+
+  const _keyExtractor = React.useCallback((item) => item, []);
+
+  return (
+    <View style={styles.controlWrapper}>
+      <Paragraph>{name}</Paragraph>
+
+      <FlatList
+        horizontal
+        data={options}
+        renderItem={_renderItem}
+        keyExtractor={_keyExtractor}
+        contentContainerStyle={styles.controlItemsList}
+      />
+    </View>
+  );
+};
+
+const CustomFABControls = ({
+  setControls,
+  controls: { animateFrom, iconMode },
+}: Props) => {
+  const setIconMode = (newIconMode: AnimatedFABIconMode) =>
+    setControls((state) => ({ ...state, iconMode: newIconMode }));
+
+  const setAnimateFrom = (newAnimateFrom: AnimatedFABAnimateFrom) =>
+    setControls((state) => ({ ...state, animateFrom: newAnimateFrom }));
+
+  return (
+    <View style={styles.controlsWrapper}>
+      <CustomControl
+        name="iconMode"
+        options={['static', 'dynamic']}
+        value={iconMode}
+        onChange={setIconMode}
+      />
+
+      <CustomControl
+        name="animateFrom"
+        options={['left', 'right']}
+        value={animateFrom}
+        onChange={setAnimateFrom}
+      />
+    </View>
+  );
+};
+
+export default CustomFABControls;
+
+const styles = StyleSheet.create({
+  controlsWrapper: {
+    flex: 1,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: Colors.white,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  controlWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  controlItemsList: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  controlItem: {
+    marginLeft: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});

example/src/Examples/AnimatedFABExample/index.ts

@@ -0,0 +1 @@
+export { default } from './AnimatedFABExample';