Skip to content

Commit 13b1e7b

Browse files
authored
Merge pull request #25 from rowinbot/master
Add podscpec file for Cocoapods projects
2 parents 62fc7c8 + 12fef0f commit 13b1e7b

File tree

3 files changed

+69
-25
lines changed

3 files changed

+69
-25
lines changed

README.md

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
# react-native-text-gradient
2+
23
[![npm version](https://badge.fury.io/js/react-native-text-gradient.svg?t=1495378566925)](https://badge.fury.io/js/react-native-text-gradient)
34
[![Dependency Status](https://david-dm.org/iyegoroff/react-native-text-gradient.svg?t=1495378566925)](https://david-dm.org/iyegoroff/react-native-text-gradient)
45
[![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.
1819

1920
[link](manual_installation.md)
2021

22+
> If you are using Cocoapods you need to follow the manual installation guide.
23+
2124
## Status
2225

2326
- 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.
3033
- rn 0.53.0 is not supported;
3134
- with rn >= 0.50.0 use 0.0.3.
3235

33-
3436
## Example
3537

3638
```javascript
37-
import { LinearTextGradient } from 'react-native-text-gradient';
39+
import { LinearTextGradient } from "react-native-text-gradient";
3840

3941
<LinearTextGradient
40-
style={{ fontWeight: 'bold', fontSize: 72 }}
42+
style={{ fontWeight: "bold", fontSize: 72 }}
4143
locations={[0, 1]}
42-
colors={['red', 'blue']}
44+
colors={["red", "blue"]}
4345
start={{ x: 0, y: 0 }}
4446
end={{ x: 1, y: 0 }}
4547
>
4648
THIS IS TEXT GRADIENT
47-
</LinearTextGradient>
49+
</LinearTextGradient>;
4850
```
4951

50-
iOS | Android
51-
:---------------------------------------------:|:---------------------------------------------:
52-
<img src="img/ios.png" align="left" height="275"> | <img src="img/android.jpg" align="right" height="275">
53-
52+
| iOS | Android |
53+
| :-----------------------------------------------: | :----------------------------------------------------: |
54+
| <img src="img/ios.png" align="left" height="275"> | <img src="img/android.jpg" align="right" height="275"> |
5455

5556
## Usage
5657

5758
### LinearTextGradient
59+
5860
Interface is similar to `Text` & [LinearGradient](https://github.com/react-native-community/react-native-linear-gradient)
5961

6062
#### colors
63+
6164
An array of at least two color values that represent gradient colors. Example: `['red', 'blue']` sets gradient from red to blue.
62-
65+
6366
#### start
67+
6468
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.
65-
69+
6670
#### end
71+
6772
Same as start, but for the end of the gradient.
68-
73+
6974
#### locations
75+
7076
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%.
7177

7278
#### useViewFrame
79+
7380
Optional. If true gradient will be calculated for text view background frame rather than text frame.
7481

7582
```javascript
@@ -78,7 +85,7 @@ Optional. If true gradient will be calculated for text view background frame rat
7885
useViewFrame={true}
7986
locations={[0.5, 0.95]}
8087
// note colors like '#FF000000' are used for seamless transition to transparent
81-
colors={['#FF0000', '#FF000000']}
88+
colors={["#FF0000", "#FF000000"]}
8289
start={{ x: 0, y: 0 }}
8390
end={{ x: 1, y: 0 }}
8491
>
@@ -88,27 +95,28 @@ Optional. If true gradient will be calculated for text view background frame rat
8895

8996
<img src="img/useViewFrame.png" width="300">
9097

91-
9298
## Usage with rn >= 0.56.0
9399

94100
Wait until https://github.com/facebook/react/pull/13211 will be merged or patch react-native to remove failing invariant checks
95101

96102
`$ node node_modules/react-native-text-gradient/patch-rn.js`
97103

98-
99104
## Caveats
100105

101106
When mixing several text gradients and `Text`s top component always should be text gradient.
107+
102108
```javascript
103109
<LinearTextGradient {...someGradientProps}>
104110
<Text>123</Text>
105111
qwerty
106112
<LinearTextGradient {...anotherGradientProps}>321</LinearTextGradient>
107113
</LinearTextGradient>
108114
```
115+
109116
This is necessary because only top text component is 'mapped' to actual native node and its children are 'virtual' from the native perspective.
110117

111118
## FAQ
112119

113120
#### Is it ready for production?
121+
114122
- Yes, I use it in production

RNTextGradientView.podspec

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
require 'json'
2+
3+
package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
4+
5+
Pod::Spec.new do |s|
6+
s.name = "react-native-text-gradient"
7+
s.version = package['version']
8+
s.summary = "Text gradient for React-Native"
9+
10+
s.authors = { "iyegoroff" => "[email protected]" }
11+
s.homepage = "https://github.com/iyegoroff/react-native-text-gradient"
12+
s.license = "MIT"
13+
s.platform = :ios, "8.0"
14+
15+
s.source = { :git => "https://github.com/iyegoroff/react-native-text-gradient.git" }
16+
s.source_files = "ios/**/*.{h,m}"
17+
18+
s.dependency 'React'
19+
end

manual_installation.md

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,23 @@
11
### Manual installation
22

3-
43
#### iOS
54

5+
##### With Cocoapods
6+
7+
1. Open your Podfile in (usually in `[your project's name]``ios``Podfile`)
8+
2. Append the following lines to your `Podfile`:
9+
```
10+
pod 'react-native-text-gradient',
11+
:path => "../node_modules/react-native-text-gradient/RNTextGradientView.podspec"
12+
```
13+
3. Go to `[your project's name]``ios` and run the following:
14+
```
15+
pod install
16+
```
17+
4. Run your project (`Cmd+R`)<
18+
19+
##### Without Cocoapods
20+
621
1. In XCode, in the project navigator, right click `Libraries``Add Files to [your project's name]`
722
2. Go to `node_modules``react-native-text-gradient` and add `RNTextGradient.xcodeproj`
823
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 @@
1126
#### Android
1227

1328
1. Open up `android/app/src/main/java/[...]/MainActivity.java`
14-
- Add `import iyegoroff.RNTextGradient.RNTextGradientPackage;` to the imports at the top of the file
15-
- Add `new RNTextGradientPackage()` to the list returned by the `getPackages()` method
29+
30+
- Add `import iyegoroff.RNTextGradient.RNTextGradientPackage;` to the imports at the top of the file
31+
- Add `new RNTextGradientPackage()` to the list returned by the `getPackages()` method
32+
1633
2. Append the following lines to `android/settings.gradle`:
17-
```
18-
include ':react-native-text-gradient'
19-
project(':react-native-text-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-text-gradient/android')
20-
```
34+
```
35+
include ':react-native-text-gradient'
36+
project(':react-native-text-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-text-gradient/android')
37+
```
2138
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
22-
```
23-
compile project(':react-native-text-gradient')
24-
```
39+
```
40+
compile project(':react-native-text-gradient')
41+
```

0 commit comments

Comments
 (0)