feat: skeleton props

nandorojo · Mar 1, 2021 · 7547b69 · 7547b69
1 parent 69c478d
commit 7547b69
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 21 deletions.
diff --git a/examples/with-expo/src/Moti.Skeleton.tsx b/examples/with-expo/src/Moti.Skeleton.tsx
@@ -11,17 +11,22 @@ export default function HelloWorld() {
   const colorMode = dark ? 'dark' : 'light'
 
   return (
-    <Pressable
-      onPress={toggle}
-      style={[styles.container, { backgroundColor: dark ? 'black' : 'white' }]}
-    >
-      <Skeleton colorMode={colorMode} radius="round" height={75} width={75} />
-      <Spacer />
-      <Skeleton colorMode={colorMode} width={250} />
-      <Spacer height={8} />
-      <Skeleton colorMode={colorMode} width={'100%'} />
-      <Spacer height={8} />
-      <Skeleton colorMode={colorMode} width={'100%'} />
+    <Pressable onPress={toggle} style={styles.container}>
+      <View
+        transition={{
+          type: 'timing',
+        }}
+        style={[styles.container, styles.padded]}
+        animate={{ backgroundColor: dark ? '#000000' : '#ffffff' }}
+      >
+        <Skeleton colorMode={colorMode} radius="round" height={75} width={75} />
+        <Spacer />
+        <Skeleton colorMode={colorMode} width={250} />
+        <Spacer height={8} />
+        <Skeleton colorMode={colorMode} width={'100%'} />
+        <Spacer height={8} />
+        <Skeleton colorMode={colorMode} width={'100%'} />
+      </View>
     </Pressable>
   )
 }
@@ -41,7 +46,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     // flexDirection: 'row',
     // backgroundColor: '#50E3C2',
-    backgroundColor: 'black',
+  },
+  padded: {
     padding: 16,
   },
 })
diff --git a/packages/skeleton/src/skeleton.tsx b/packages/skeleton/src/skeleton.tsx
@@ -64,6 +64,7 @@ type Props = {
    * `light` or `dark`. Default: `dark`.
    */
   colorMode?: keyof typeof baseColors
+  disableExitAnimation?: boolean
 }
 
 const DEFAULT_SIZE = 32
@@ -72,7 +73,7 @@ const baseColors = {
   dark: { primary: 'rgb(17, 17, 17)', secondary: 'rgb(51, 51, 51)' },
   light: {
     primary: 'rgb(250, 250, 250)',
-    secondary: 'rgb(234, 234, 234)',
+    secondary: 'rgb(205, 205, 205)',
   },
 } as const
 
@@ -105,6 +106,7 @@ export default function Skelton(props: Props) {
     colorMode = 'dark',
     colors = colorMode === 'dark' ? defaultDarkColors : defaultLightColors,
     backgroundColor = 'rgb(51, 51, 51, 50)',
+    disableExitAnimation,
   } = props
 
   const [measuredWidth, setMeasuredWidth] = useState(0)
@@ -144,17 +146,25 @@ export default function Skelton(props: Props) {
       {children}
       <AnimatePresence>
         {show && (
-          <View
+          <MotiView
             style={{
               position: 'absolute',
               top: 0,
               left: 0,
               borderRadius,
               width: width ?? (children ? '100%' : DEFAULT_SIZE),
               height: height ?? '100%',
-              backgroundColor,
               overflow: 'hidden',
             }}
+            animate={{
+              backgroundColor,
+              opacity: 1,
+            }}
+            exit={
+              !disableExitAnimation && {
+                opacity: 0,
+              }
+            }
             onLayout={({ nativeEvent }) => {
               console.log('[measured]', nativeEvent.layout)
               if (measuredWidth) return
@@ -169,7 +179,7 @@ export default function Skelton(props: Props) {
               colors={colors}
               measuredWidth={measuredWidth}
             />
-          </View>
+          </MotiView>
         )}
       </AnimatePresence>
     </View>
@@ -195,14 +205,9 @@ const AnimatedGradient = React.memo(
         }}
         from={{
           translateX: 0,
-          opacity: 1,
         }}
         animate={{
           translateX: -measuredWidth * (backgroundSize - 1),
-          opacity: 1,
-        }}
-        exit={{
-          opacity: 0,
         }}
         transition={{
           type: 'timing',