Merge pull request #2 from java-james/master

feat: export style type
iway1 · Jan 22, 2023 · cfce275 · cfce275
2 parents 4b50015 + dea3c77
commit cfce275
Show file tree

Hide file tree

Showing 8 changed files with 291 additions and 225 deletions.
diff --git a/.gitignore b/.gitignore
@@ -67,4 +67,4 @@ buck-out/
 push
 .npmrc
 # @generated expo-cli sync-e7dcf75f4e856f7b6f3239b3f3a7dd614ee755a8
-# The following patterns were generated by expo-cli
+# The following patterns were generated by expo-cli
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.json b/package.json
@@ -23,7 +23,7 @@
     "@react-native-community/eslint-config": "^2.0.0",
     "@tsconfig/react-native": "^2.0.2",
     "@types/jest": "^26.0.23",
-    "@types/lodash": "^4.14.184",
+    "@types/lodash": "^4.14.191",
     "@types/react-native": "^0.69.5",
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.29.0",

diff --git a/package/index.ts b/package/index.ts
@@ -1,5 +1,8 @@
-import GradientBorderView from "./src/components/GradientBorderView";
-import { GradientProps as GP } from "./src/components/GradientBorder";
+import {
+  GradientBorderView,
+  GradientBorderViewStyle,
+} from './src/components/GradientBorderView';
+import {GradientProps} from './src/components/GradientBorder';
 
 export {GradientBorderView};
-export type GradientProps = GP;
+export type {GradientBorderViewStyle, GradientProps as GP};
diff --git a/package/package.json b/package/package.json
@@ -2,7 +2,7 @@
   "name": "@good-react-native/gradient-border",
   "version": "1.0.0",
   "description": "A universal gradient border solution for React Native",
-  "main": "index.ts", 
+  "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "p": "npm version patch --force && npm publish --access public"
@@ -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"
   }
 }