Allow passing a gradient component (breaking change)

README.md

@@ -1,30 +1,27 @@
 # CSS Gradient for LinearGradient
 
-CSS background image for React-Native using `LinearGradient` from [Expo](https://expo.io).
-Supported backgrounds:
-- [linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)
-- [repeating-linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient)
+### Installation
 
+with yarn
+```sh
+yarn add react-native-css-gradient
+```
 
-![image](https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/gif.gif)
-<br/>
-<img src="https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/grad1.png" width="400">
-<br/>
-<img src="https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/grad2.png" width="400">
-<br/>
-<img src="https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/grad3.png" width="400">
-<br/>
-<img src="https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/grad4.png" width="400">
-<br/>
-<img src="https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/grad5.png" width="400">
-<br/>
-<img src="https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/grad6.png" width="400">
+or with npm
 
+```sh
+npm install --save react-native-css-gradient
+```
 
 ### Usage
 
 ```js
-import Gradient from 'react-native-css-gradient';
+import createCssGradient from "react-native-css-gradient";
+import LinearGradient from "react-native-linear-gradient";
+// or from expo:
+// import { LinearGradient } from "expo-linear-gradient";
+
+const Gradient = createCssGradient(LinearGradient);
 
 render() {
     const gradient = `linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%),
@@ -35,16 +32,33 @@ render() {
 }
 ```
 
-TODO: Add fallback to `react-native-linear-gradient` package in case when Expo is missing.
-
 ### Props
 
-|Prop|Details|
-|---|---|
-|gradient|CSS Gradient (linear and repeating) are working for the moment|
-|style|default styles (**Note, if you're going to use repeating gradient you have to specify the width and height**)|
-|children|-|
+| Prop     | Details                                                                                                       |
+| -------- | ------------------------------------------------------------------------------------------------------------- |
+| gradient | CSS Gradient (linear and repeating) are working for the moment                                                |
+| style    | default styles (**Note, if you're going to use repeating gradient you have to specify the width and height**) |
+| children | -                                                                                                             |
+
+CSS background image for React-Native using `LinearGradient` from [Expo](https://expo.io).
+Supported backgrounds:
+
+- [linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)
+- [repeating-linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient)
 
+![image](https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/gif.gif)
+<br/>
+<img src="https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/grad1.png" width="400">
+<br/>
+<img src="https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/grad2.png" width="400">
+<br/>
+<img src="https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/grad3.png" width="400">
+<br/>
+<img src="https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/grad4.png" width="400">
+<br/>
+<img src="https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/grad5.png" width="400">
+<br/>
+<img src="https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/grad6.png" width="400">
 
 ### About
 

example/App.js

@@ -1,38 +1,52 @@
-import React, { Component } from 'react';
-import { Text, ScrollView, View, Dimensions, StatusBar} from 'react-native';
-import gradients from './gradient-source';
-import Gradient from 'react-native-css-gradient';
+import React, { Component } from "react";
+import { Text, ScrollView, View, Dimensions, StatusBar } from "react-native";
+import gradients from "./gradient-source";
+import createCssGradient from "react-native-css-gradient";
+import { LinearGradient } from "expo-linear-gradient";
 
-const {width, height }= Dimensions.get('window');
+const Gradient = createCssGradient(LinearGradient);
+
+const { width, height } = Dimensions.get("window");
 
 export default class App extends Component {
   componentDidMount() {
     StatusBar.setHidden(true);
   }
   render() {
     return (
-        <ScrollView>
-          {gradients.map((g, key) => {
-            return <Gradient
-                key={key}
-                gradient={g.gradient}
-                style={{
-                  width,
-                  height,
-                  alignItems: "flex-start",
-                  justifyContent: "flex-end",
-                  padding: 20,
-                  marginBottom: 4
-                }}
-              >
-                <View>
-                  <Text style={{fontSize: 46, fontWeight: "100", opacity: .8}}>{g.title}</Text>
-                  <Text style={{fontFamily: "Courier New", fontSize: 11, fontWeight: "500"}}>{g.gradient}</Text>
-                </View>
-              </Gradient>
-          })}
-        </ScrollView>
-
-   );
+      <ScrollView>
+        {gradients.map((g, key) => {
+          return (
+            <Gradient
+              key={key}
+              gradient={g.gradient}
+              style={{
+                width,
+                height,
+                alignItems: "flex-start",
+                justifyContent: "flex-end",
+                padding: 20,
+                marginBottom: 4,
+              }}
+            >
+              <View>
+                <Text style={{ fontSize: 46, fontWeight: "100", opacity: 0.8 }}>
+                  {g.title}
+                </Text>
+                <Text
+                  style={{
+                    fontFamily: "Courier New",
+                    fontSize: 11,
+                    fontWeight: "500",
+                  }}
+                >
+                  {g.gradient}
+                </Text>
+              </View>
+            </Gradient>
+          );
+        })}
+      </ScrollView>
+    );
   }
-}
+}

index.d.ts

@@ -0,0 +1,14 @@
+declare module "react-native-css-gradient" {
+  import { FunctionComponent, ReactNode } from "react";
+  import { ViewStyle } from "react-native";
+
+  function createCssGradient(
+    gradientComponent: ReactNode
+  ): FunctionComponent<{
+    gradient: string;
+    children?: ReactNode;
+    style?: ViewStyle;
+  }>;
+
+  export default createCssGradient;
+}

index.js

@@ -4,30 +4,36 @@ import generateGradient from "./generator";
 
 export { generateGradient };
 
-export default ({ gradient, children, style }) => {
-  // Avoid breaking this when people are not using expo :)
-  // find a better solution to expose either expo-linear-gradient or
-  // react-native-linear-gradient.
-  const { LinearGradient } = require("expo-linear-gradient");
-
+const createCssGradient = (GradientComponent) => ({
+  gradient,
+  children,
+  style,
+}) => {
   const generated = generateGradient(gradient, {
     width: style.width,
-    height: style.height
+    height: style.height,
   });
+
   if (generated.length > 1) {
     return (
       <View style={[style, { position: "relative" }]}>
         {generated.map((obj, i) => (
-          <LinearGradient style={[StyleSheet.absoluteFill]} {...obj} key={i} />
+          <GradientComponent
+            style={[StyleSheet.absoluteFill]}
+            {...obj}
+            key={i}
+          />
         ))}
-        {children || null}
+        {children}
       </View>
     );
   }
 
   return (
-    <LinearGradient style={style} {...generated[0]}>
-      {children || null}
-    </LinearGradient>
+    <GradientComponent style={style} {...generated[0]}>
+      {children}
+    </GradientComponent>
   );
 };
+
+export default createCssGradient;

package.json

@@ -21,6 +21,17 @@
     "expo": "*",
     "expo-linear-gradient": "*",
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-linear-gradient": "*"
+  },
+  "devDependencies": {
+    "@types/react": "16.9.38",
+    "@types/react-native": "0.62.13",
+    "prettier": "2.0.5"
+  },
+  "prettier": {
+    "semi": true,
+    "trailingComma": "es5",
+    "singleQuote": false
   }
 }

yarn.lock

@@ -2,6 +2,41 @@
 # yarn lockfile v1
 
 
+"@types/prop-types@*":
+  version "15.7.3"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
+  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
+
+"@types/[email protected]":
+  version "0.62.13"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.62.13.tgz#c688c5ae03e426f927f7e1fa1a59cd067f35d1c2"
+  integrity sha512-hs4/tSABhcJx+J8pZhVoXHrOQD89WFmbs8QiDLNSA9zNrD46pityAuBWuwk1aMjPk9I3vC5ewkJroVRHgRIfdg==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/[email protected]":
+  version "16.9.38"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.38.tgz#868405dace93a4095d3e054f4c4a1de7a1ac0680"
+  integrity sha512-pHAeZbjjNRa/hxyNuLrvbxhhnKyKNiLC6I5fRF2Zr/t/S6zS41MiyzH4+c+1I9vVfvuRt1VS2Lodjr4ZWnxrdA==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
+csstype@^2.2.0:
+  version "2.6.10"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
+  integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
+
+fast-memoize@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.2.tgz#79e3bb6a4ec867ea40ba0e7146816f6cdce9b57e"
+  integrity sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==
+
 [email protected]:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/gradient-parser/-/gradient-parser-0.1.5.tgz#0c7e2179559e5ce7d8d71f4423af937100b2248c"
+
+[email protected]:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
+  integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==