Skip to content

Commit 092656d

Browse files
authored
docs(readme): overall improvements (#173)
1 parent b4eaa53 commit 092656d

File tree

1 file changed

+48
-45
lines changed

1 file changed

+48
-45
lines changed

README.md

Lines changed: 48 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,45 @@
1-
# React Native MaskedView
1+
# React Native `MaskedView`
22

33
[![Build Status][build-badge]][build]
44
[![Version][version-badge]][package]
55
[![MIT License][license-badge]][license]
66
[![Lean Core Badge][lean-core-badge]][lean-core-issue]
77

8-
React Native MaskedView for iOS and Android.
8+
Provides a React component that renders a masked view.
99

1010
## Platforms Supported
1111

1212
- [x] iOS
1313
- [x] Android
14+
- [ ] Web
1415

1516
## Getting Started
1617

17-
```
18+
```sh
1819
yarn add @react-native-masked-view/masked-view
1920
```
2021

2122
or
2223

23-
```
24+
```sh
2425
npm install --save @react-native-masked-view/masked-view
2526
```
2627

27-
#### Using React Native >= 0.60
28+
### Using React Native >= 0.60
2829

2930
Linking the package manually is not required anymore with [Autolinking](https://github.com/react-native-masked-view/cli/blob/master/docs/autolinking.md).
3031

31-
- **iOS Platform:**
32+
Remember to install the pod with:
3233

33-
`npx pod-install`
34+
```sh
35+
npx pod-install
36+
```
3437

35-
#### Using React Native < 0.60
38+
### Using React Native < 0.60
3639

3740
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:
3841

39-
```
42+
```sh
4043
react-native link @react-native-masked-view/masked-view
4144
```
4245

@@ -49,57 +52,57 @@ import React from 'react';
4952
import { Text, View } from 'react-native';
5053
import MaskedView from '@react-native-masked-view/masked-view';
5154

52-
export default class App extends React.Component {
53-
render() {
54-
return (
55-
<MaskedView
56-
style={{ flex: 1, flexDirection: 'row', height: '100%' }}
57-
maskElement={
58-
<View
55+
const App = () => {
56+
return (
57+
<MaskedView
58+
style={{ flex: 1, flexDirection: 'row', height: '100%' }}
59+
maskElement={
60+
<View
61+
style={{
62+
// Transparent background because mask is based off alpha channel.
63+
backgroundColor: 'transparent',
64+
flex: 1,
65+
justifyContent: 'center',
66+
alignItems: 'center',
67+
}}
68+
>
69+
<Text
5970
style={{
60-
// Transparent background because mask is based off alpha channel.
61-
backgroundColor: 'transparent',
62-
flex: 1,
63-
justifyContent: 'center',
64-
alignItems: 'center',
71+
fontSize: 60,
72+
color: 'black',
73+
fontWeight: 'bold',
6574
}}
6675
>
67-
<Text
68-
style={{
69-
fontSize: 60,
70-
color: 'black',
71-
fontWeight: 'bold',
72-
}}
73-
>
74-
Basic Mask
75-
</Text>
76-
</View>
77-
}
78-
>
79-
{/* Shows behind the mask, you can put anything here, such as an image */}
80-
<View style={{ flex: 1, height: '100%', backgroundColor: '#324376' }} />
81-
<View style={{ flex: 1, height: '100%', backgroundColor: '#F5DD90' }} />
82-
<View style={{ flex: 1, height: '100%', backgroundColor: '#F76C5E' }} />
83-
<View style={{ flex: 1, height: '100%', backgroundColor: '#e1e1e1' }} />
84-
</MaskedView>
85-
);
86-
}
76+
Basic Mask
77+
</Text>
78+
</View>
79+
}
80+
>
81+
{/* Shows behind the mask, you can put anything here, such as an image */}
82+
<View style={{ flex: 1, height: '100%', backgroundColor: '#324376' }} />
83+
<View style={{ flex: 1, height: '100%', backgroundColor: '#F5DD90' }} />
84+
<View style={{ flex: 1, height: '100%', backgroundColor: '#F76C5E' }} />
85+
<View style={{ flex: 1, height: '100%', backgroundColor: '#e1e1e1' }} />
86+
</MaskedView>
87+
);
8788
}
89+
90+
export default App
8891
```
8992

9093
The following image demonstrates that you can put almost anything behind the mask. The three examples shown are masked `<View>`, `<Text>`, and `<Image>`.
9194

92-
<p align="center"><img src="img/example.png" width="200"></img></p>
95+
<div align="center"><img src="img/example.png" width="200"></img></div>
9396

9497
### Props
9598

9699
- [View props...](https://github.com/facebook/react-native-website/blob/master/docs/view.md#props)
97100

98-
* [`maskElement`](#maskelement)
101+
- [`maskElement`](#maskelement)
99102

100-
# Reference
103+
- [`androidRenderingMode`](#androidrenderingmode)
101104

102-
## Props
105+
### Reference
103106

104107
### `maskElement`
105108

0 commit comments

Comments
 (0)