Skip to content
This repository has been archived by the owner on Jan 3, 2024. It is now read-only.

Gradient <Label /> - s #11

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
+302 −96
Open

Gradient <Label /> - s #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8958278
Add react-native-svg, add examples with gradient to <Label />
isnifer Feb 9, 2017
c2916e9
Fix android build script
isnifer Feb 9, 2017
41b6c2a
Update README for <Label />
isnifer Feb 9, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,7 @@ Default themes: **primary**, **success**, **warning**, **alert**
| Name | Desc | Type | Default |
| --- | --- | --- | --- |
| `title` | [isRequired] Title of label | String | `-` |
| `colors` | Two colors for gradient | Array | `-` |

#### Example

Expand All @@ -232,6 +233,14 @@ const Example = () => (
<Label title="On Sale" />
</View>
)

// Gradient mor powerfull than theme
// Don't use "colors" prop if you want to use theme
const GradientExample = () => (
<View style={{ flexDirection: 'row' }}>
<Label title="On Sale" colors={['#52B02C', '#97C33E']} />
</View>
)
```

#### Label Themes
Expand All @@ -242,15 +251,16 @@ Theme structure:
{
container: <View />,
title: <Text />,
gradientBackground: <Svg >,
}
```

Default themes: **primary**, **success**, **warning**, **alert**, **black**

#### Preview

![label_ios](https://cloud.githubusercontent.com/assets/1788245/22148163/9a4b7132-df1d-11e6-90bd-a920e83db5ad.png)
![label_android](https://cloud.githubusercontent.com/assets/1788245/22148162/9a31d772-df1d-11e6-9cac-5f335b10c41d.png)
![ios_666](https://cloud.githubusercontent.com/assets/1788245/22783023/f983ff62-eeda-11e6-8148-0c5ae3a45e0d.png)
![android_666](https://cloud.githubusercontent.com/assets/1788245/22783024/f9a22370-eeda-11e6-96f7-572d62754530.png)

### `<RangeSlider />`

Expand Down
290 changes: 199 additions & 91 deletions __tests__/unit/__snapshots__/Storyshots.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4101,22 +4101,25 @@ exports[`UIExplorer components <Label /> Custom Text and Custom Background - Lab
<View
style={
Array [
Object {
"backgroundColor": "#82909d",
"borderRadius": 3,
"flex": 0,
"height": 20,
"marginRight": 5,
"overflow": "hidden",
"paddingBottom": 2,
"paddingLeft": 5,
"paddingRight": 5,
"paddingTop": 2,
},
undefined,
Object {
"backgroundColor": "blue",
},
Array [
Object {
"backgroundColor": "#82909d",
"borderRadius": 3,
"flex": 0,
"height": 20,
"marginRight": 5,
"overflow": "hidden",
"paddingBottom": 2,
"paddingLeft": 5,
"paddingRight": 5,
"paddingTop": 2,
},
undefined,
Object {
"backgroundColor": "blue",
},
],
Object {},
]
}>
<Text
Expand Down Expand Up @@ -4149,22 +4152,25 @@ exports[`UIExplorer components <Label /> Default themes - Labels' wrapper has fl
<View
style={
Array [
Object {
"backgroundColor": "#82909d",
"borderRadius": 3,
"flex": 0,
"height": 20,
"marginRight": 5,
"overflow": "hidden",
"paddingBottom": 2,
"paddingLeft": 5,
"paddingRight": 5,
"paddingTop": 2,
},
undefined,
Object {
"backgroundColor": "#CD0315",
},
Array [
Object {
"backgroundColor": "#82909d",
"borderRadius": 3,
"flex": 0,
"height": 20,
"marginRight": 5,
"overflow": "hidden",
"paddingBottom": 2,
"paddingLeft": 5,
"paddingRight": 5,
"paddingTop": 2,
},
undefined,
Object {
"backgroundColor": "#CD0315",
},
],
Object {},
]
}>
<Text
Expand All @@ -4187,22 +4193,25 @@ exports[`UIExplorer components <Label /> Default themes - Labels' wrapper has fl
<View
style={
Array [
Object {
"backgroundColor": "#82909d",
"borderRadius": 3,
"flex": 0,
"height": 20,
"marginRight": 5,
"overflow": "hidden",
"paddingBottom": 2,
"paddingLeft": 5,
"paddingRight": 5,
"paddingTop": 2,
},
undefined,
Object {
"backgroundColor": "#34834C",
},
Array [
Object {
"backgroundColor": "#82909d",
"borderRadius": 3,
"flex": 0,
"height": 20,
"marginRight": 5,
"overflow": "hidden",
"paddingBottom": 2,
"paddingLeft": 5,
"paddingRight": 5,
"paddingTop": 2,
},
undefined,
Object {
"backgroundColor": "#34834C",
},
],
Object {},
]
}>
<Text
Expand All @@ -4225,22 +4234,25 @@ exports[`UIExplorer components <Label /> Default themes - Labels' wrapper has fl
<View
style={
Array [
Object {
"backgroundColor": "#82909d",
"borderRadius": 3,
"flex": 0,
"height": 20,
"marginRight": 5,
"overflow": "hidden",
"paddingBottom": 2,
"paddingLeft": 5,
"paddingRight": 5,
"paddingTop": 2,
},
undefined,
Object {
"backgroundColor": "#F09817",
},
Array [
Object {
"backgroundColor": "#82909d",
"borderRadius": 3,
"flex": 0,
"height": 20,
"marginRight": 5,
"overflow": "hidden",
"paddingBottom": 2,
"paddingLeft": 5,
"paddingRight": 5,
"paddingTop": 2,
},
undefined,
Object {
"backgroundColor": "#F09817",
},
],
Object {},
]
}>
<Text
Expand All @@ -4263,24 +4275,118 @@ exports[`UIExplorer components <Label /> Default themes - Labels' wrapper has fl
<View
style={
Array [
Array [
Object {
"backgroundColor": "#82909d",
"borderRadius": 3,
"flex": 0,
"height": 20,
"marginRight": 5,
"overflow": "hidden",
"paddingBottom": 2,
"paddingLeft": 5,
"paddingRight": 5,
"paddingTop": 2,
},
undefined,
Object {
"backgroundColor": "black",
},
],
Object {},
]
}>
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"
style={
Array [
Object {
"color": "white",
"fontSize": 12,
},
undefined,
undefined,
]
}>
Super Vintage
</Text>
</View>
</View>
`;

exports[`UIExplorer components <Label /> Gradient themes - Labels' wrapper has flexDirection: row, Labels has "colors" prop 1`] = `
<View
style={
Object {
"flexDirection": "row",
}
}>
<View
style={
Array [
Array [
Object {
"backgroundColor": "#82909d",
"borderRadius": 3,
"flex": 0,
"height": 20,
"marginRight": 5,
"overflow": "hidden",
"paddingBottom": 2,
"paddingLeft": 5,
"paddingRight": 5,
"paddingTop": 2,
},
undefined,
],
Object {
"backgroundColor": "#82909d",
"borderRadius": 3,
"flex": 0,
"height": 20,
"marginRight": 5,
"overflow": "hidden",
"paddingBottom": 2,
"paddingLeft": 5,
"paddingRight": 5,
"paddingTop": 2,
"backgroundColor": "transparent",
},
undefined,
]
}>
<Svg />
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"
style={
Array [
Object {
"color": "white",
"fontSize": 12,
},
undefined,
]
}>
Value Pick
</Text>
</View>
<View
style={
Array [
Array [
Object {
"backgroundColor": "#82909d",
"borderRadius": 3,
"flex": 0,
"height": 20,
"marginRight": 5,
"overflow": "hidden",
"paddingBottom": 2,
"paddingLeft": 5,
"paddingRight": 5,
"paddingTop": 2,
},
undefined,
],
Object {
"backgroundColor": "black",
"backgroundColor": "transparent",
},
]
}>
<Svg />
<Text
accessible={true}
allowFontScaling={true}
Expand All @@ -4292,10 +4398,9 @@ exports[`UIExplorer components <Label /> Default themes - Labels' wrapper has fl
"fontSize": 12,
},
undefined,
undefined,
]
}>
Super Vintage
Staff Pick
</Text>
</View>
</View>
Expand All @@ -4311,19 +4416,22 @@ exports[`UIExplorer components <Label /> Label - Label theme "default" 1`] = `
<View
style={
Array [
Object {
"backgroundColor": "#82909d",
"borderRadius": 3,
"flex": 0,
"height": 20,
"marginRight": 5,
"overflow": "hidden",
"paddingBottom": 2,
"paddingLeft": 5,
"paddingRight": 5,
"paddingTop": 2,
},
undefined,
Array [
Object {
"backgroundColor": "#82909d",
"borderRadius": 3,
"flex": 0,
"height": 20,
"marginRight": 5,
"overflow": "hidden",
"paddingBottom": 2,
"paddingLeft": 5,
"paddingRight": 5,
"paddingTop": 2,
},
undefined,
],
Object {},
]
}>
<Text
Expand Down
1 change: 1 addition & 0 deletions android/app/build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@ android {
}

dependencies {
compile project(':react-native-svg')
compile project(':react-native-vector-icons')
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
Expand Down
Loading