Merge pull request #117 from adaptui/tappable-animation

Author: Karthik-B-06

.vscode/settings.json

@@ -25,7 +25,8 @@
     "select",
     "text-area",
     "types",
-    "theme"
+    "theme",
+    "components"
   ],
   "git.branchProtection": ["main"]
 }

docs/getting-started.md

@@ -44,6 +44,30 @@ export default App;
 
 ```
 
+## Further Instructions
+
+### Fonts Loading (Android)
+Our components look well with the Inter font on Android. 
+
+You can pick the fonts from [here](../font-assets/)
+
+And link and load it up in your React Native project using [expo-font](https://docs.expo.dev/versions/latest/sdk/font/) library if using Expo.
+
+The library works well with bare React Native workflow too.
+
+Check out blogs on getting to know about [Adding Fonts to React Native](https://medium.com/@_iam_karthik/list/adding-fonts-to-react-native-93aee6bace40) in our [Publication](https://medium.com/timeless).
+
+### Haptics
+
+Haptics is a technology that allows devices to provide tactile feedback to users, simulating the sense of touch. So it can be used to enhance the user experience in a variety of ways, such as providing feedback when a button is pressed, alerting the user to an event, or guiding the user through a task.
+
+In AdaptUI we have enabled the Haptics to all our Tappable components (Button, Tag, Radio, Checkbox and Switch) through [expo-haptics](https://docs.expo.dev/versions/latest/sdk/haptics/).
+
+You will have to install this as a dependency to get your haptics working on our Tappable components. 
+
+You can use the haptics through our hook [`useHaptics`](../src//utils//useHaptic.ts)
+
+
 ## Simple Usage
 
 Code below will render an [Avatar](./Avatar.md)

example/package.json

@@ -14,6 +14,7 @@
     "@react-navigation/drawer": "^6.5.3",
     "@react-navigation/native": "^6.0.16",
     "expo": "^47.0.0",
+    "expo-haptics": "~12.0.1",
     "expo-screen-orientation": "^5.0.1",
     "expo-splash-screen": "~0.17.5",
     "expo-status-bar": "~1.4.2",

example/src/modules/primitives/ButtonScreen.tsx

@@ -25,13 +25,17 @@ export const ButtonScreen = () => {
   const [hasPrefix, setHasPrefix] = useState<boolean>(false);
   const [hasSuffix, setHasSuffix] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [fullWidth, setFullWidth] = useState<boolean>(false);
+
   const { bottom } = useSafeAreaInsets();
 
   return (
     <Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
       <Box
         style={tailwind.style(
-          "flex-1 px-2 justify-center items-center bg-white-900",
+          `flex-1 px-2 justify-center bg-white-900 ${
+            fullWidth ? "" : "items-center"
+          }`,
         )}
       >
         <Button
@@ -122,6 +126,15 @@ export const ButtonScreen = () => {
             style={tailwind.style("mt-2 ml-1")}
             label="Loading"
           />
+          <Switch
+            state={fullWidth}
+            onStateChange={(value: SetStateAction<boolean>) =>
+              setFullWidth(value)
+            }
+            size="md"
+            style={tailwind.style("mt-2 ml-1")}
+            label="Full Width"
+          />
         </Box>
       </Box>
     </Box>

example/yarn.lock

@@ -5328,6 +5328,11 @@ expo-font@~11.0.1:
   dependencies:
     fontfaceobserver "^2.1.0"
 
+expo-haptics@~12.0.1:
+  version "12.0.1"
+  resolved "https://registry.yarnpkg.com/expo-haptics/-/expo-haptics-12.0.1.tgz#151dc57bc01c1fa16d021e4714b23916bbc9f8e5"
+  integrity sha512-YubK3P3WTdjp5mFZcaF3ienqXHoDqzPpe61yTEIR5y+CVWqk+If9cC3ZYxn6lSp8KiNUmz7zC0GvUAVEqn8t6Q==
+
 expo-keep-awake@~11.0.1:
   version "11.0.1"
   resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-11.0.1.tgz#ee354465892a94040ffe09901b85b469e7d54fb3"

font-assets/fonts.zip

@@ -121,15 +121,17 @@
     "react-native-svg": "13.4.0",
     "release-it": "15.1.4",
     "sort-package-json": "2.0.0",
-    "typescript": "4.8.3"
+    "typescript": "4.8.3",
+    "expo-haptics": "12.0.1"
   },
   "peerDependencies": {
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-native": "0.70.0",
     "react-native-gesture-handler": "2.8.0",
     "react-native-reanimated": "2.12.0",
-    "react-native-svg": "13.4.0"
+    "react-native-svg": "13.4.0",
+    "expo-haptics": "12.0.1"
   },
   "publishConfig": {
     "access": "public",

package.json

@@ -1,21 +1,24 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useCallback } from "react";
 import {
+  GestureResponderEvent,
   Platform,
   PressableProps,
   PressableStateCallbackType,
   TextStyle,
 } from "react-native";
 
 import { RenderPropType } from "../../index";
-import { Box, Text, Touchable } from "../../primitives";
+import { AnimatedBox, Box, Text, Touchable } from "../../primitives";
 import { getTextFontFamily, useTailwind, useTheme } from "../../theme";
 import {
   createComponent,
   cx,
   generateBoxShadow,
   styleAdapter,
+  useHaptic,
   useOnFocus,
   useOnHover,
+  useScaleAnimation,
 } from "../../utils";
 import { createIcon } from "../create-icon";
 import { Icon } from "../icon";
@@ -90,6 +93,12 @@ export interface ButtonProps extends PressableProps {
    * VoiceOver will read this string when a user selects the associated element.
    */
   accesibilityLabel: string;
+  /**
+   * When set to true, The Tap creates a Touch Feedback
+   * Check more -> https://docs.expo.dev/versions/latest/sdk/haptics/
+   * @default true
+   */
+  hapticEnabled: boolean;
 }
 
 const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
@@ -102,27 +111,36 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
       variant = "solid",
       themeColor = "base",
       loading = false,
+      hapticEnabled = true,
       prefix,
       suffix,
       iconOnly,
       spinner,
       textStyle,
       style,
       accesibilityLabel,
+      onPress,
       ...props
     },
     ref,
   ) => {
     const { ts, gc } = useTailwind();
     const buttonTheme = useTheme("button");
-
+    const { handlers, animatedStyle } = useScaleAnimation();
+    const hapticMedium = useHaptic("medium");
     const { onHoverIn, onHoverOut, hovered } = useOnHover();
     const { onFocus, onBlur, focused } = useOnFocus();
 
     const iconAspectRatio = 1;
 
     const isButtonDisabled = props.disabled || loading;
 
+    const handlePress = useCallback((event: GestureResponderEvent) => {
+      onPress && onPress(event);
+      hapticEnabled && hapticMedium();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     /**
      * Button Prefix Component
      */
@@ -266,69 +284,73 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
     );
 
     return (
-      <Touchable
-        style={(touchState: PressableStateCallbackType) => {
-          return [
-            ts(
-              cx(
-                buttonTheme.base,
-                buttonTheme.size[size]?.default,
-                buttonTheme.themeColor[themeColor]?.[variant]?.container
-                  ?.wrapper,
-                isButtonDisabled
-                  ? buttonTheme.themeColor[themeColor]?.[variant]?.container
-                      ?.disabled
-                  : "",
-                hovered.value
-                  ? buttonTheme.themeColor[themeColor]?.[variant]?.container
-                      ?.hover
-                  : "",
-                touchState.pressed
-                  ? buttonTheme.themeColor[themeColor]?.[variant]?.container
-                      ?.pressed
-                  : "",
+      <AnimatedBox style={animatedStyle}>
+        <Touchable
+          style={(touchState: PressableStateCallbackType) => {
+            return [
+              ts(
+                cx(
+                  buttonTheme.base,
+                  buttonTheme.size[size]?.default,
+                  buttonTheme.themeColor[themeColor]?.[variant]?.container
+                    ?.wrapper,
+                  isButtonDisabled
+                    ? buttonTheme.themeColor[themeColor]?.[variant]?.container
+                        ?.disabled
+                    : "",
+                  hovered.value
+                    ? buttonTheme.themeColor[themeColor]?.[variant]?.container
+                        ?.hover
+                    : "",
+                  touchState.pressed
+                    ? buttonTheme.themeColor[themeColor]?.[variant]?.container
+                        ?.pressed
+                    : "",
+                ),
               ),
-            ),
-            focused.value
-              ? Platform.select({
-                  web: {
-                    outline: 0,
-                    boxShadow: `${generateBoxShadow(
-                      buttonTheme.themeColor[themeColor]?.[variant]?.container
-                        ?.focus?.offset,
-                      gc(
-                        cx(
-                          buttonTheme.themeColor[themeColor]?.[variant]
-                            ?.container?.focus?.color,
-                        ),
-                      ) as string,
-                    )}`,
-                    borderColor:
-                      buttonTheme.themeColor[themeColor]?.[variant]?.container
-                        ?.focus?.borderColor,
-                  },
-                })
-              : {},
-            styleAdapter(style, touchState),
-          ];
-        }}
-        {...props}
-        // Web Callbacks
-        onHoverIn={onHoverIn}
-        onHoverOut={onHoverOut}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        // Web Callbacks
-        // A11y Props
-        accessible
-        accessibilityLabel={accesibilityLabel}
-        accessibilityRole="button"
-        // A11y Props
-        ref={ref}
-        disabled={isButtonDisabled}
-      >
-        {children}
-      </Touchable>
+              focused.value
+                ? Platform.select({
+                    web: {
+                      outline: 0,
+                      boxShadow: `${generateBoxShadow(
+                        buttonTheme.themeColor[themeColor]?.[variant]?.container
+                          ?.focus?.offset,
+                        gc(
+                          cx(
+                            buttonTheme.themeColor[themeColor]?.[variant]
+                              ?.container?.focus?.color,
+                          ),
+                        ) as string,
+                      )}`,
+                      borderColor:
+                        buttonTheme.themeColor[themeColor]?.[variant]?.container
+                          ?.focus?.borderColor,
+                    },
+                  })
+                : {},
+              styleAdapter(style, touchState),
+            ];
+          }}
+          {...props}
+          // Web Callbacks
+          onHoverIn={onHoverIn}
+          onHoverOut={onHoverOut}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          // Web Callbacks
+          // A11y Props
+          accessible
+          accessibilityLabel={accesibilityLabel}
+          accessibilityRole="button"
+          // A11y Props
+          ref={ref}
+          disabled={isButtonDisabled}
+          {...handlers}
+          onPress={handlePress}
+        >
+          {children}
+        </Touchable>
+      </AnimatedBox>
     );
   },
 );