Skip to content

Commit 6d54f9e

Browse files
committed
Update README.md
1 parent 29361ac commit 6d54f9e

File tree

1 file changed

+37
-12
lines changed

1 file changed

+37
-12
lines changed

README.md

Lines changed: 37 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,27 @@ _Note: React Native MaskedView is not currently supported by Expo unless you "ej
1717

1818
```
1919
$ yarn add @react-native-community/masked-view
20+
```
21+
22+
or
23+
24+
```
25+
$ npm install --save @react-native-community/masked-view
26+
```
27+
28+
#### Using React Native >= 0.60
29+
30+
Linking the package manually is not required anymore with [Autolinking](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md).
31+
32+
- **iOS Platform:**
33+
34+
`$ cd ios && pod install`
35+
36+
#### Using React Native < 0.60
37+
38+
You then need to link the native parts of the library for the platforms you are using. The easiest way to link the library is using the CLI tool by running this command from the root of your project:
39+
40+
```
2041
$ react-native link @react-native-community/masked-view
2142
```
2243

@@ -33,31 +54,34 @@ export default class App extends React.Component {
3354
render() {
3455
return (
3556
<MaskedView
36-
style={{flex: 1, flexDirection: 'row', height: '100%'}}
57+
style={{ flex: 1, flexDirection: 'row', height: '100%' }}
3758
maskElement={
3859
<View
3960
style={{
4061
// Transparent background because mask is based off alpha channel.
4162
backgroundColor: 'transparent',
4263
flex: 1,
4364
justifyContent: 'center',
44-
alignItems: 'center',
45-
}}>
65+
alignItems: 'center'
66+
}}
67+
>
4668
<Text
4769
style={{
4870
fontSize: 60,
4971
color: 'black',
50-
fontWeight: 'bold',
51-
}}>
72+
fontWeight: 'bold'
73+
}}
74+
>
5275
Basic Mask
5376
</Text>
5477
</View>
55-
}>
78+
}
79+
>
5680
{/* Shows behind the mask, you can put anything here, such as an image */}
57-
<View style={{flex: 1, height: '100%', backgroundColor: '#324376'}} />
58-
<View style={{flex: 1, height: '100%', backgroundColor: '#F5DD90'}} />
59-
<View style={{flex: 1, height: '100%', backgroundColor: '#F76C5E'}} />
60-
<View style={{flex: 1, height: '100%', backgroundColor: '#e1e1e1'}} />
81+
<View style={{ flex: 1, height: '100%', backgroundColor: '#324376' }} />
82+
<View style={{ flex: 1, height: '100%', backgroundColor: '#F5DD90' }} />
83+
<View style={{ flex: 1, height: '100%', backgroundColor: '#F76C5E' }} />
84+
<View style={{ flex: 1, height: '100%', backgroundColor: '#e1e1e1' }} />
6185
</MaskedView>
6286
);
6387
}
@@ -70,9 +94,9 @@ The following image demonstrates that you can put almost anything behind the mas
7094

7195
### Props
7296

73-
* [View props...](https://github.com/facebook/react-native-website/blob/master/docs/view.md#props)
97+
- [View props...](https://github.com/facebook/react-native-website/blob/master/docs/view.md#props)
7498

75-
- [`maskElement`](#maskelement)
99+
* [`maskElement`](#maskelement)
76100

77101
# Reference
78102

@@ -85,6 +109,7 @@ The following image demonstrates that you can put almost anything behind the mas
85109
| element | Yes |
86110

87111
<!-- badges -->
112+
88113
[build-badge]: https://img.shields.io/circleci/project/github/react-native-community/react-native-masked-view/master.svg?style=flat-square
89114
[build]: https://circleci.com/gh/react-native-community/react-native-masked-view
90115
[version-badge]: https://img.shields.io/npm/v/@react-native-community/masked-view.svg?style=flat-square

0 commit comments

Comments
 (0)