From 12fef0f8ac6cb49cac75123f0d2408dcacb7469a Mon Sep 17 00:00:00 2001 From: Rowinbot Date: Fri, 12 Apr 2019 09:52:27 -0500 Subject: [PATCH] add podspec and include installation instructions --- README.md | 38 +++++++++++++++++++++++--------------- RNTextGradientView.podspec | 19 +++++++++++++++++++ manual_installation.md | 37 +++++++++++++++++++++++++++---------- 3 files changed, 69 insertions(+), 25 deletions(-) create mode 100644 RNTextGradientView.podspec diff --git a/README.md b/README.md index 9407b88..fb958ec 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # react-native-text-gradient + [![npm version](https://badge.fury.io/js/react-native-text-gradient.svg?t=1495378566925)](https://badge.fury.io/js/react-native-text-gradient) [![Dependency Status](https://david-dm.org/iyegoroff/react-native-text-gradient.svg?t=1495378566925)](https://david-dm.org/iyegoroff/react-native-text-gradient) [![typings included](https://img.shields.io/badge/typings-included-brightgreen.svg?t=1495378566925)](#typescript) @@ -18,6 +19,8 @@ React-Native text gradient component for iOS & Android. [link](manual_installation.md) +> If you are using Cocoapods you need to follow the manual installation guide. + ## Status - iOS - component works as drop-in replacement for standard `Text` component, e.g. it is possible to have nested gradients; @@ -30,46 +33,50 @@ React-Native text gradient component for iOS & Android. - rn 0.53.0 is not supported; - with rn >= 0.50.0 use 0.0.3. - ## Example ```javascript -import { LinearTextGradient } from 'react-native-text-gradient'; +import { LinearTextGradient } from "react-native-text-gradient"; THIS IS TEXT GRADIENT - +; ``` -iOS | Android -:---------------------------------------------:|:---------------------------------------------: - | - +| iOS | Android | +| :-----------------------------------------------: | :----------------------------------------------------: | +| | | ## Usage ### LinearTextGradient + Interface is similar to `Text` & [LinearGradient](https://github.com/react-native-community/react-native-linear-gradient) #### colors + An array of at least two color values that represent gradient colors. Example: `['red', 'blue']` sets gradient from red to blue. - + #### start + An optional object of the following type: `{ x: number, y: number }`. Coordinates declare the position that the gradient starts at, as a fraction of the overall size of the gradient, starting from the top left corner. Example: `{ x: 0.1, y: 0.1 }` means that the gradient will start 10% from the top and 10% from the left. - + #### end + Same as start, but for the end of the gradient. - + #### locations + An optional array of numbers defining the location of each gradient color stop, mapping to the color with the same index in `colors` prop. Example: `[0.1, 0.75, 1]` means that first color will take 0% - 10%, second color will take 10% - 75% and finally third color will occupy 75% - 100%. #### useViewFrame + Optional. If true gradient will be calculated for text view background frame rather than text frame. ```javascript @@ -78,7 +85,7 @@ Optional. If true gradient will be calculated for text view background frame rat useViewFrame={true} locations={[0.5, 0.95]} // note colors like '#FF000000' are used for seamless transition to transparent - colors={['#FF0000', '#FF000000']} + colors={["#FF0000", "#FF000000"]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} > @@ -88,17 +95,16 @@ Optional. If true gradient will be calculated for text view background frame rat - ## Usage with rn >= 0.56.0 Wait until https://github.com/facebook/react/pull/13211 will be merged or patch react-native to remove failing invariant checks `$ node node_modules/react-native-text-gradient/patch-rn.js` - ## Caveats When mixing several text gradients and `Text`s top component always should be text gradient. + ```javascript 123 @@ -106,9 +112,11 @@ When mixing several text gradients and `Text`s top component always should be te 321 ``` + This is necessary because only top text component is 'mapped' to actual native node and its children are 'virtual' from the native perspective. ## FAQ #### Is it ready for production? + - Yes, I use it in production diff --git a/RNTextGradientView.podspec b/RNTextGradientView.podspec new file mode 100644 index 0000000..0d6f427 --- /dev/null +++ b/RNTextGradientView.podspec @@ -0,0 +1,19 @@ +require 'json' + +package = JSON.parse(File.read(File.join(__dir__, 'package.json'))) + +Pod::Spec.new do |s| + s.name = "react-native-text-gradient" + s.version = package['version'] + s.summary = "Text gradient for React-Native" + + s.authors = { "iyegoroff" => "iegoroff@gmail.com" } + s.homepage = "https://github.com/iyegoroff/react-native-text-gradient" + s.license = "MIT" + s.platform = :ios, "8.0" + + s.source = { :git => "https://github.com/iyegoroff/react-native-text-gradient.git" } + s.source_files = "ios/**/*.{h,m}" + + s.dependency 'React' +end \ No newline at end of file diff --git a/manual_installation.md b/manual_installation.md index cd364ff..809ab9f 100644 --- a/manual_installation.md +++ b/manual_installation.md @@ -1,8 +1,23 @@ ### Manual installation - #### iOS +##### With Cocoapods + +1. Open your Podfile in (usually in `[your project's name]` ➜ `ios` ➜ `Podfile`) +2. Append the following lines to your `Podfile`: + ``` + pod 'react-native-text-gradient', + :path => "../node_modules/react-native-text-gradient/RNTextGradientView.podspec" + ``` +3. Go to `[your project's name]` ➜ `ios` and run the following: + ``` + pod install + ``` +4. Run your project (`Cmd+R`)< + +##### Without Cocoapods + 1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]` 2. Go to `node_modules` ➜ `react-native-text-gradient` and add `RNTextGradient.xcodeproj` 3. In XCode, in the project navigator, select your project. Add `libRNTextGradient.a` to your project's `Build Phases` ➜ `Link Binary With Libraries` @@ -11,14 +26,16 @@ #### Android 1. Open up `android/app/src/main/java/[...]/MainActivity.java` - - Add `import iyegoroff.RNTextGradient.RNTextGradientPackage;` to the imports at the top of the file - - Add `new RNTextGradientPackage()` to the list returned by the `getPackages()` method + +- Add `import iyegoroff.RNTextGradient.RNTextGradientPackage;` to the imports at the top of the file +- Add `new RNTextGradientPackage()` to the list returned by the `getPackages()` method + 2. Append the following lines to `android/settings.gradle`: - ``` - include ':react-native-text-gradient' - project(':react-native-text-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-text-gradient/android') - ``` + ``` + include ':react-native-text-gradient' + project(':react-native-text-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-text-gradient/android') + ``` 3. Insert the following lines inside the dependencies block in `android/app/build.gradle`: - ``` - compile project(':react-native-text-gradient') - ``` + ``` + compile project(':react-native-text-gradient') + ```