feat: style typing

iway1 · Jan 19, 2023 · dea3c77 · dea3c77
1 parent ca9cb0a
commit dea3c77
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 61 deletions.
diff --git a/App.tsx b/App.tsx
@@ -1,44 +1,47 @@
-import MaskedView from "@react-native-masked-view/masked-view";
-import { LinearGradient } from "react-native-linear-gradient";
-import { range } from "lodash";
-import React, { useState } from "react";
-import { Image, ImageBackground, ScrollView, StyleSheet, Text, View, ViewProps } from "react-native";
-import { GradientBorderView } from "./package/index";
+import MaskedView from '@react-native-masked-view/masked-view';
+import {LinearGradient} from 'react-native-linear-gradient';
+import {range} from 'lodash';
+import React from 'react';
+import {
+  ImageBackground,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  ViewProps,
+} from 'react-native';
+import {GradientBorderView} from './package/index';
 
 function Giraffe() {
   return (
-
     <MaskedView
-      style={{ flex: 1 }}
-      maskElement={(
-        <View
-          style={[StyleSheet.absoluteFill]}
-        >
+      style={{flex: 1}}
+      maskElement={
+        <View style={[StyleSheet.absoluteFill]}>
           <ImageBackground
             style={[StyleSheet.absoluteFill]}
-            resizeMode='contain'
+            resizeMode="contain"
             source={require('./giraffe.png')}
           />
         </View>
-
-      )}
-    >
+      }>
       <LinearGradient
         colors={['red', 'blue']}
         style={StyleSheet.absoluteFill}
-        pointerEvents='none'
+        pointerEvents="none"
       />
     </MaskedView>
-
-  )
+  );
 }
-export function FadeOutTopView({ fadeHeight = 100, ...props }: ViewProps & { fadeHeight?: number }) {
+export function FadeOutTopView({
+  fadeHeight = 100,
+  ...props
+}: ViewProps & {fadeHeight?: number}) {
   return (
-    <MaskedView style={{ flex: 1, }}
-      maskElement={(
-        <View
-          style={StyleSheet.absoluteFill}
-        >
+    <MaskedView
+      style={{flex: 1}}
+      maskElement={
+        <View style={StyleSheet.absoluteFill}>
           <LinearGradient
             colors={['rgba(0, 0, 0, 0)', 'rgba(0,0,0,1)']}
             style={{
@@ -50,32 +53,36 @@ export function FadeOutTopView({ fadeHeight = 100, ...props }: ViewProps & { fad
             }}
           />
           <View
-            style={{ position: 'absolute', top: fadeHeight, left: 0, right: 0, bottom: 0, backgroundColor: 'black', }}
+            style={{
+              position: 'absolute',
+              top: fadeHeight,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: 'black',
+            }}
           />
         </View>
-      )}
+      }
       {...props}
     />
-  )
+  );
 }
 
 function FadeOut() {
   return (
     <View>
-
-      <Text style={{
-        color: 'white',
-        fontSize: 40,
-        marginLeft: 24,
-        marginTop: 50,
-      }}>
+      <Text
+        style={{
+          color: 'white',
+          fontSize: 40,
+          marginLeft: 24,
+          marginTop: 50,
+        }}>
         A Fade Effect
       </Text>
-      <FadeOutTopView style={{ flex: 1 }}>
-        <ScrollView
-          contentContainerStyle={{ padding: 16, }}
-        >
-
+      <FadeOutTopView style={{flex: 1}}>
+        <ScrollView contentContainerStyle={{padding: 16}}>
           {range(10).map(e => (
             <GradientBorderView
               style={{
@@ -86,39 +93,40 @@ function FadeOut() {
                 marginBottom: 20,
               }}
               gradientProps={{
-                colors: ['red', 'orange']
-              }}
-            >
-              <Text style={{
-                fontSize: 24,
-                marginBottom: 16
+                colors: ['red', 'orange'],
               }}>
+              <Text
+                style={{
+                  fontSize: 24,
+                  marginBottom: 16,
+                }}>
                 Title
               </Text>
-              <Text style={{ fontSize: 15 }}>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+              <Text style={{fontSize: 15}}>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                nulla pariatur.
               </Text>
             </GradientBorderView>
           ))}
-
         </ScrollView>
       </FadeOutTopView>
-
     </View>
-  )
+  );
 }
 
 const App = () => {
-
   return (
     <View
       style={{
         flex: 1,
         backgroundColor: 'white',
         justifyContent: 'center',
         alignItems: 'center',
-      }}
-    >
+      }}>
       {/* <View
         style={StyleSheet.absoluteFill}
       >
@@ -174,7 +182,7 @@ const App = () => {
 
       <GradientBorderView
         gradientProps={{
-          colors: ['red', 'orange']
+          colors: ['red', 'orange'],
         }}
         style={{
           borderWidth: 5,
@@ -193,9 +201,7 @@ const App = () => {
         }}
       /> */}
     </View>
-  )
+  );
 };
 
-
-
-export default App;
+export default App;
diff --git a/package/package.json b/package/package.json
@@ -36,6 +36,7 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@types/react-native": "^0.69.5"
+    "@types/react-native": "^0.69.5",
+    "@types/lodash": "^4.14.191"
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -1411,7 +1411,7 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
   integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
 
-"@types/lodash@^4.14.184":
+"@types/lodash@^4.14.191":
   version "4.14.191"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.191.tgz#09511e7f7cba275acd8b419ddac8da9a6a79e2fa"
   integrity sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==