diff --git a/README.md b/README.md
index c5f033c..9bbf3ef 100644
--- a/README.md
+++ b/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
+```
-
-
-
-
-
-
-
-
-
-
-
-
-
+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)
+
+
+
+
+
+
+
+
+
+
+
+
+
### About
diff --git a/example/App.js b/example/App.js
index 885a80a..9f4b481 100644
--- a/example/App.js
+++ b/example/App.js
@@ -1,9 +1,12 @@
-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() {
@@ -11,28 +14,39 @@ export default class App extends Component {
}
render() {
return (
-
- {gradients.map((g, key) => {
- return
-
- {g.title}
- {g.gradient}
-
-
- })}
-
-
- );
+
+ {gradients.map((g, key) => {
+ return (
+
+
+
+ {g.title}
+
+
+ {g.gradient}
+
+
+
+ );
+ })}
+
+ );
}
-}
\ No newline at end of file
+}
diff --git a/index.d.ts b/index.d.ts
new file mode 100644
index 0000000..dc8a874
--- /dev/null
+++ b/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;
+}
diff --git a/index.js b/index.js
index 26835af..a771100 100755
--- a/index.js
+++ b/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 (
{generated.map((obj, i) => (
-
+
))}
- {children || null}
+ {children}
);
}
return (
-
- {children || null}
-
+
+ {children}
+
);
};
+
+export default createCssGradient;
diff --git a/package.json b/package.json
index 0f0d772..7aaad8a 100755
--- a/package.json
+++ b/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
}
}
diff --git a/yarn.lock b/yarn.lock
index 24c16b6..4b756de 100644
--- a/yarn.lock
+++ b/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/react-native@0.62.13":
+ 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/react@16.9.38":
+ 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==
+
gradient-parser@0.1.5:
version "0.1.5"
resolved "https://registry.yarnpkg.com/gradient-parser/-/gradient-parser-0.1.5.tgz#0c7e2179559e5ce7d8d71f4423af937100b2248c"
+
+prettier@2.0.5:
+ version "2.0.5"
+ resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
+ integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==