Skip to content

Commit cbc76d5

Browse files
committed
added nested gradient for android
1 parent 38bd92c commit cbc76d5

15 files changed

+356
-309
lines changed

TextGradientExample/App.js

Lines changed: 65 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,75 @@ const instructions = Platform.select({
1919

2020
type Props = {};
2121
export default class App extends Component<Props> {
22+
23+
grad(text, key) {
24+
return (
25+
<LinearTextGradient
26+
style = {
27+
[styles.welcome, {
28+
backgroundColor: 'red',
29+
textDecorationLine: 'underline',
30+
}]
31+
}
32+
key={key}
33+
locations={[0, 1]}
34+
colors={['green', 'red']}
35+
start={{ x: 0, y: 0 }}
36+
end={{ x: 1, y: 0 }}
37+
>
38+
{text}
39+
</LinearTextGradient>
40+
)
41+
}
2242
render() {
2343
return (
2444
<View style={styles.container}>
2545
<LinearTextGradient
26-
style={styles.welcome}
46+
style = {
47+
[styles.welcome, {
48+
backgroundColor: 'lightgray'
49+
}]
50+
}
2751
locations={[0, 1]}
28-
colors={['blue', 'red']}
29-
start={{ x: 0, y: 0 }}
30-
end={{ x: 1, y: 0 }}
52+
colors={['lime', 'purple']}
53+
start={{ x: 1, y: 0 }}
54+
end={{ x: 0, y: 0 }}
3155
>
32-
Welcome to React Native!
56+
{/* _████████████_ */}
57+
{this.grad('.█ ██ ███ █ ███ ',1)}
58+
{this.grad('.█ ',2)}
59+
{this.grad('2█ ')}
60+
{this.grad('3█ ')}
61+
{this.grad('.██ ')}
62+
{this.grad('.███ ')}
63+
{this.grad('.█ █ ')}
64+
{this.grad('.█ █ █ ')}
65+
{this.grad('.█ ██ ██ ', 'yellow')}
66+
{this.grad('.█ ')}
67+
{this.grad('?██ ')}
68+
{this.grad('.███ ')}
69+
{this.grad('.█ █ ')}
70+
{this.grad('.█ █ █ ')}
71+
{this.grad('.█ ██ ██ ')}
72+
{this.grad('.█')}
73+
{this.grad('.██ ')}
74+
{this.grad('.█████████ ')}
75+
{this.grad('.█ █ ')}
76+
{this.grad('.█ █ █ ')}
77+
{this.grad('.█ ██ █ ')}
78+
{this.grad('.█ ')}
79+
{this.grad('.██ ')}
80+
{this.grad('.███ ')}
81+
{this.grad('.█ █ ')}
82+
{this.grad('.█ █ █ ')}
3383
</LinearTextGradient>
34-
<Text style={styles.instructions}>To get started, edit App.js</Text>
35-
<Text style={styles.instructions}>{instructions}</Text>
84+
<Text style={styles.instructions}>
85+
To get started, edit App.js
86+
<Text style={[styles.instructions, {
87+
textDecorationLine: 'underline',
88+
fontWeight: 'bold'
89+
}]}>{instructions}</Text>
90+
</Text>
3691
</View>
3792
);
3893
}
@@ -46,13 +101,14 @@ const styles = StyleSheet.create({
46101
backgroundColor: '#F5FCFF',
47102
},
48103
welcome: {
49-
fontSize: 20,
104+
fontSize: 30,
50105
textAlign: 'center',
51106
margin: 10,
107+
color: 'white'
52108
},
53109
instructions: {
54110
textAlign: 'center',
55111
color: '#333333',
56-
marginBottom: 5,
112+
marginBottom: 5
57113
},
58114
});

TextGradientExample/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
"generate:android:bundle": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res/",
1414
"build:docker:image": "docker build -t text-gradient-android.image -f ./Dockerfile ../",
1515
"extract:docker:apk": "docker create -ti --name text-gradient-android-container text-gradient-android.image /bin/bash && docker cp text-gradient-android-container:/package/TextGradientExample/android/app/build/outputs/apk/release/app-release.apk text-gradient.apk && docker rm -fv text-gradient-android-container",
16-
"build:release:docker": "npm run build:docker:image && npm run extract:docker:apk"
16+
"build:release:docker": "npm run build:docker:image && npm run extract:docker:apk",
17+
"devmenu": "adb shell input keyevent KEYCODE_MENU"
1718
},
1819
"dependencies": {
1920
"react": "16.8.3",

android/src/main/java/iyegoroff/RNTextGradient/Linear/RNLinearTextGradientManager.java

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,23 @@
77
import com.facebook.react.common.annotations.VisibleForTesting;
88
import com.facebook.react.module.annotations.ReactModule;
99

10+
import javax.annotation.Nonnull;
11+
1012
@ReactModule(name = RNLinearTextGradientManager.REACT_CLASS)
1113
public class RNLinearTextGradientManager extends RNTextGradientManager {
1214

1315
@VisibleForTesting
1416
static final String REACT_CLASS = "RNLinearTextGradient";
1517

1618
@Override
17-
public String getName() {
19+
public @Nonnull String getName() {
1820
return REACT_CLASS;
1921
}
2022

2123
@Override
22-
public RNShadowTextGradient createShadowNodeInstance(ReactApplicationContext context) {
24+
public @Nonnull RNShadowTextGradient createShadowNodeInstance(
25+
@Nonnull ReactApplicationContext context
26+
) {
2327
return new RNShadowLinearTextGradient(context);
2428
}
2529

0 commit comments

Comments
 (0)