feat: export style type

.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

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;

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",

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};

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"
   }
 }