fix(example-app): 🐛 fix warnings refactor code add icons

Author: crstnmac

example/ios/Podfile.lock

@@ -11,6 +11,8 @@ PODS:
     - ExpoModulesCore
   - Expo (47.0.8):
     - ExpoModulesCore
+  - ExpoHaptics (12.0.1):
+    - ExpoModulesCore
   - ExpoKeepAwake (11.0.1):
     - ExpoModulesCore
   - ExpoModulesCore (1.0.3):
@@ -378,6 +380,7 @@ DEPENDENCIES:
   - EXFileSystem (from `../node_modules/expo-file-system/ios`)
   - EXFont (from `../node_modules/expo-font/ios`)
   - Expo (from `../node_modules/expo`)
+  - ExpoHaptics (from `../node_modules/expo-haptics/ios`)
   - ExpoKeepAwake (from `../node_modules/expo-keep-awake/ios`)
   - ExpoModulesCore (from `../node_modules/expo-modules-core`)
   - EXScreenOrientation (from `../node_modules/expo-screen-orientation/ios`)
@@ -443,6 +446,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/expo-font/ios"
   Expo:
     :path: "../node_modules/expo"
+  ExpoHaptics:
+    :path: "../node_modules/expo-haptics/ios"
   ExpoKeepAwake:
     :path: "../node_modules/expo-keep-awake/ios"
   ExpoModulesCore:
@@ -536,17 +541,18 @@ SPEC CHECKSUMS:
   EXFileSystem: 60602b6eefa6873f97172c684b7537c9760b50d6
   EXFont: 319606bfe48c33b5b5063fb0994afdc496befe80
   Expo: 36b5f625d36728adbdd1934d4d57182f319ab832
+  ExpoHaptics: 5a56d30a87ea213dd00b09566dc4b441a4dff97f
   ExpoKeepAwake: 69b59d0a8d2b24de9f82759c39b3821fec030318
   ExpoModulesCore: b5d21c8880afda6fb6ee95469f9ac2ec9b98e995
   EXScreenOrientation: 07e5aeff07bce09a2b214981e612d87fd7719997
   EXSplashScreen: 3e989924f61a8dd07ee4ea584c6ba14be9b51949
   FBLazyVector: affa4ba1bfdaac110a789192f4d452b053a86624
   FBReactNativeSpec: fe8b5f1429cfe83a8d72dc8ed61dc7704cac8745
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
-  hermes-engine: 7fe5fc6ef707b7fdcb161b63898ec500e285653d
+  glog: 791fe035093b84822da7f0870421a25839ca7870
+  hermes-engine: 31d2d06aa6915f586c02ecadbe232e3fc8185878
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
-  RCT-Folly: 0080d0a6ebf2577475bda044aa59e2ca1f909cda
+  RCT-Folly: 766adb69dc1d6294bcc94a950a818a87adb3a766
   RCTRequired: 21229f84411088e5d8538f21212de49e46cc83e2
   RCTTypeSafety: 62eed57a32924b09edaaf170a548d1fc96223086
   React: f0254ccddeeef1defe66c6b1bb9133a4f040792b

example/src/AppRoot.tsx

@@ -1,4 +1,13 @@
 import React, { ReactNode } from "react";
+import {
+  Box,
+  Button,
+  Divider,
+  Icon,
+  Text,
+  Timeless,
+  useTheme,
+} from "@adaptui/react-native-tailwind";
 import {
   createDrawerNavigator,
   DrawerContentComponentProps,
@@ -7,11 +16,6 @@ import {
 } from "@react-navigation/drawer";
 import { createStackNavigator } from "@react-navigation/stack";
 
-import { Button, Divider, Icon } from "../../src/components";
-import { FastBackward } from "../../src/icons";
-import { Box, Text } from "../../src/primitives";
-import { useTheme } from "../../src/theme";
-
 import AboutScreen from "./pages/AboutScreen";
 import {
   AvatarGroupScreen,
@@ -98,25 +102,29 @@ const CustomDrawerSection = (props: DrawerContentComponentProps) => {
   );
 };
 
-const DrawerNavigator = ({ navigation }) => {
+const ScreenOptions = ({ navigation }) => {
   const tailwind = useTheme();
+  return {
+    headerRight: () => (
+      <Box style={tailwind.style("mr-2")}>
+        <Button
+          variant="ghost"
+          size="md"
+          onPress={() => navigation.navigate("About")}
+        >
+          <Icon size={25} icon={<Timeless />} />
+        </Button>
+      </Box>
+    ),
+  };
+};
+
+const DrawerNavigator = () => {
   return (
     <Drawer.Navigator
       drawerContent={CustomDrawerSection}
       initialRouteName="AvatarScreen"
-      screenOptions={{
-        headerRight: () => (
-          <Box style={tailwind.style("mr-2")}>
-            <Button
-              variant="ghost"
-              size="md"
-              onPress={() => navigation.navigate("About")}
-            >
-              <Icon size={18} icon={<FastBackward />} />
-            </Button>
-          </Box>
-        ),
-      }}
+      screenOptions={ScreenOptions}
     >
       <Drawer.Screen
         // @ts-ignore

example/src/components/Background.tsx

@@ -0,0 +1,48 @@
+import { useMemo } from "react";
+import { Path, Pattern, Rect, Svg } from "react-native-svg";
+import { useTheme } from "@adaptui/react-native-tailwind";
+
+const Background = props => {
+  const tailwind = useTheme();
+  const { color, stroke, gap, transform } = props;
+  const { x, y, k } = transform || { x: 0, y: 0, k: 1 };
+  const scaledGap = (gap || 15) * k;
+  const patternId = useMemo(
+    () => `patten-${Math.floor(Math.random() * 100000)}`,
+    [],
+  );
+
+  return (
+    <Svg
+      style={tailwind.style("w-full h-full absolute")}
+      width={"100%"}
+      height={"100%"}
+    >
+      <Pattern
+        id={patternId}
+        x={x % scaledGap}
+        y={y % scaledGap}
+        width={scaledGap}
+        height={scaledGap}
+        patternUnits={"userSpaceOnUse"}
+      >
+        <Path
+          stroke={color || "#dddddd"}
+          strokeWidth={stroke || 1}
+          d={`M${scaledGap / 2} 0 V${scaledGap} M0 ${
+            scaledGap / 2
+          } H${scaledGap}`}
+        />
+      </Pattern>
+      <Rect
+        x={0}
+        y={0}
+        width={"100%"}
+        height={"100%"}
+        fill={`url(#${patternId})`}
+      />
+    </Svg>
+  );
+};
+
+export default Background;

example/src/components/EasingLogo.tsx

@@ -0,0 +1,52 @@
+import React, { useRef } from "react";
+import { Animated, Easing, Image } from "react-native";
+import { useTheme } from "@adaptui/react-native-tailwind";
+
+function useMountEffect(effect: React.EffectCallback): void {
+  React.useEffect(() => {
+    effect();
+  }, [effect]);
+}
+const EasingLogo = () => {
+  const tailwind = useTheme();
+  const easeValue = useRef(new Animated.Value(0));
+
+  useMountEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(easeValue.current, {
+          toValue: 10,
+          duration: 1000,
+          easing: Easing.bezier(0.56, 0.15, 0.45, 0.87),
+          useNativeDriver: true,
+        }),
+        Animated.timing(easeValue.current, {
+          toValue: 0,
+          duration: 1000,
+          easing: Easing.bezier(0.56, 0.15, 0.45, 0.87),
+          useNativeDriver: true,
+        }),
+      ]),
+    ).start();
+  });
+
+  const ease = easeValue.current.interpolate({
+    inputRange: [0, 10],
+    outputRange: [0, 5],
+  });
+
+  return (
+    <Animated.View
+      style={{
+        transform: [{ translateY: ease }],
+      }}
+    >
+      <Image
+        source={require("../../assets/logo.png")}
+        style={tailwind.style("h-50 w-50")}
+      />
+    </Animated.View>
+  );
+};
+
+export default EasingLogo;

example/src/components/index.ts

@@ -1 +1,3 @@
+export * from "./Background";
+export * from "./EasingLogo";
 export * from "./Group";