Configure Eslint & Prettier (#302)
This commit is contained in:
Nicolas Charpentier
GitHub
parent
6bdcefecae
commit
c0b9a6e62f
169
.eslintrc
169
.eslintrc
|
|
@ -1,170 +1,3 @@
|
|||
{
|
||||
"parser": "babel-eslint",
|
||||
"env": {
|
||||
"browser": true,
|
||||
"node": true,
|
||||
"jasmine": true
|
||||
},
|
||||
"ecmaFeatures": {
|
||||
"arrowFunctions": true,
|
||||
"blockBindings": true,
|
||||
"classes": true,
|
||||
"defaultParams": true,
|
||||
"destructuring": true,
|
||||
"forOf": true,
|
||||
"generators": false,
|
||||
"modules": true,
|
||||
"objectLiteralComputedProperties": true,
|
||||
"objectLiteralDuplicateProperties": false,
|
||||
"objectLiteralShorthandMethods": true,
|
||||
"objectLiteralShorthandProperties": true,
|
||||
"spread": true,
|
||||
"superInFunctions": true,
|
||||
"templateStrings": true,
|
||||
"jsx": true
|
||||
},
|
||||
"rules": {
|
||||
/**
|
||||
* Strict mode
|
||||
*/
|
||||
// babel inserts "use strict"; for us
|
||||
// http://eslint.org/docs/rules/strict
|
||||
"strict": [2, "never"],
|
||||
|
||||
/**
|
||||
* ES6
|
||||
*/
|
||||
"no-var": 0, // http://eslint.org/docs/rules/no-var
|
||||
|
||||
/**
|
||||
* Variables
|
||||
*/
|
||||
"no-shadow": 2, // http://eslint.org/docs/rules/no-shadow
|
||||
"no-shadow-restricted-names": 2, // http://eslint.org/docs/rules/no-shadow-restricted-names
|
||||
"no-unused-vars": [0, { // http://eslint.org/docs/rules/no-unused-vars
|
||||
"vars": "local",
|
||||
"args": "after-used"
|
||||
}],
|
||||
"no-use-before-define": 2, // http://eslint.org/docs/rules/no-use-before-define
|
||||
|
||||
/**
|
||||
* Possible errors
|
||||
*/
|
||||
"comma-dangle": [2, "always-multiline"], // http://eslint.org/docs/rules/comma-dangle
|
||||
"no-cond-assign": [2, "always"], // http://eslint.org/docs/rules/no-cond-assign
|
||||
"no-console": 0, // http://eslint.org/docs/rules/no-console
|
||||
"no-debugger": 1, // http://eslint.org/docs/rules/no-debugger
|
||||
"no-alert": 1, // http://eslint.org/docs/rules/no-alert
|
||||
"no-constant-condition": 1, // http://eslint.org/docs/rules/no-constant-condition
|
||||
"no-dupe-keys": 2, // http://eslint.org/docs/rules/no-dupe-keys
|
||||
"no-duplicate-case": 2, // http://eslint.org/docs/rules/no-duplicate-case
|
||||
"no-empty": 2, // http://eslint.org/docs/rules/no-empty
|
||||
"no-ex-assign": 2, // http://eslint.org/docs/rules/no-ex-assign
|
||||
"no-extra-boolean-cast": 0, // http://eslint.org/docs/rules/no-extra-boolean-cast
|
||||
"no-extra-semi": 2, // http://eslint.org/docs/rules/no-extra-semi
|
||||
"no-func-assign": 2, // http://eslint.org/docs/rules/no-func-assign
|
||||
"no-inner-declarations": 2, // http://eslint.org/docs/rules/no-inner-declarations
|
||||
"no-invalid-regexp": 2, // http://eslint.org/docs/rules/no-invalid-regexp
|
||||
"no-irregular-whitespace": 2, // http://eslint.org/docs/rules/no-irregular-whitespace
|
||||
"no-obj-calls": 2, // http://eslint.org/docs/rules/no-obj-calls
|
||||
"no-reserved-keys": 0, // http://eslint.org/docs/rules/no-reserved-keys
|
||||
"no-sparse-arrays": 2, // http://eslint.org/docs/rules/no-sparse-arrays
|
||||
"no-unreachable": 2, // http://eslint.org/docs/rules/no-unreachable
|
||||
"use-isnan": 2, // http://eslint.org/docs/rules/use-isnan
|
||||
"block-scoped-var": 2, // http://eslint.org/docs/rules/block-scoped-var
|
||||
|
||||
/**
|
||||
* Best practices
|
||||
*/
|
||||
"consistent-return": 2, // http://eslint.org/docs/rules/consistent-return
|
||||
"curly": [2, "multi-line"], // http://eslint.org/docs/rules/curly
|
||||
"default-case": 2, // http://eslint.org/docs/rules/default-case
|
||||
"dot-notation": [2, { // http://eslint.org/docs/rules/dot-notation
|
||||
"allowKeywords": true
|
||||
}],
|
||||
"eqeqeq": ["error", "smart"], // http://eslint.org/docs/rules/eqeqeq
|
||||
"guard-for-in": 2, // http://eslint.org/docs/rules/guard-for-in
|
||||
"no-caller": 2, // http://eslint.org/docs/rules/no-caller
|
||||
"no-else-return": 2, // http://eslint.org/docs/rules/no-else-return
|
||||
"no-eq-null": 0, // http://eslint.org/docs/rules/no-eq-null
|
||||
"no-eval": 2, // http://eslint.org/docs/rules/no-eval
|
||||
"no-extend-native": 2, // http://eslint.org/docs/rules/no-extend-native
|
||||
"no-extra-bind": 2, // http://eslint.org/docs/rules/no-extra-bind
|
||||
"no-fallthrough": 2, // http://eslint.org/docs/rules/no-fallthrough
|
||||
"no-floating-decimal": 2, // http://eslint.org/docs/rules/no-floating-decimal
|
||||
"no-implied-eval": 2, // http://eslint.org/docs/rules/no-implied-eval
|
||||
"no-lone-blocks": 2, // http://eslint.org/docs/rules/no-lone-blocks
|
||||
"no-loop-func": 2, // http://eslint.org/docs/rules/no-loop-func
|
||||
"no-multi-str": 2, // http://eslint.org/docs/rules/no-multi-str
|
||||
"no-native-reassign": 2, // http://eslint.org/docs/rules/no-native-reassign
|
||||
"no-new": 2, // http://eslint.org/docs/rules/no-new
|
||||
"no-new-func": 2, // http://eslint.org/docs/rules/no-new-func
|
||||
"no-new-wrappers": 2, // http://eslint.org/docs/rules/no-new-wrappers
|
||||
"no-octal": 2, // http://eslint.org/docs/rules/no-octal
|
||||
"no-octal-escape": 2, // http://eslint.org/docs/rules/no-octal-escape
|
||||
"no-param-reassign": 2, // http://eslint.org/docs/rules/no-param-reassign
|
||||
"no-proto": 2, // http://eslint.org/docs/rules/no-proto
|
||||
"no-redeclare": 2, // http://eslint.org/docs/rules/no-redeclare
|
||||
"no-return-assign": 2, // http://eslint.org/docs/rules/no-return-assign
|
||||
"no-script-url": 2, // http://eslint.org/docs/rules/no-script-url
|
||||
"no-self-compare": 2, // http://eslint.org/docs/rules/no-self-compare
|
||||
"no-sequences": 2, // http://eslint.org/docs/rules/no-sequences
|
||||
"no-throw-literal": 2, // http://eslint.org/docs/rules/no-throw-literal
|
||||
"no-with": 2, // http://eslint.org/docs/rules/no-with
|
||||
"radix": 2, // http://eslint.org/docs/rules/radix
|
||||
"vars-on-top": 2, // http://eslint.org/docs/rules/vars-on-top
|
||||
"wrap-iife": [2, "any"], // http://eslint.org/docs/rules/wrap-iife
|
||||
"yoda": 2, // http://eslint.org/docs/rules/yoda
|
||||
|
||||
/**
|
||||
* Style
|
||||
*/
|
||||
"indent": [2, 2], // http://eslint.org/docs/rules/
|
||||
"brace-style": [2, // http://eslint.org/docs/rules/brace-style
|
||||
"1tbs", {
|
||||
"allowSingleLine": true
|
||||
}],
|
||||
"quotes": [
|
||||
2, "single", "avoid-escape" // http://eslint.org/docs/rules/quotes
|
||||
],
|
||||
"camelcase": [2, { // http://eslint.org/docs/rules/camelcase
|
||||
"properties": "never"
|
||||
}],
|
||||
"comma-spacing": [2, { // http://eslint.org/docs/rules/comma-spacing
|
||||
"before": false,
|
||||
"after": true
|
||||
}],
|
||||
"comma-style": [2, "last"], // http://eslint.org/docs/rules/comma-style
|
||||
"eol-last": 2, // http://eslint.org/docs/rules/eol-last
|
||||
"func-names": 1, // http://eslint.org/docs/rules/func-names
|
||||
"key-spacing": [2, { // http://eslint.org/docs/rules/key-spacing
|
||||
"beforeColon": false,
|
||||
"afterColon": true
|
||||
}],
|
||||
"new-cap": [2, { // http://eslint.org/docs/rules/new-cap
|
||||
"newIsCap": true
|
||||
}],
|
||||
"no-multiple-empty-lines": [2, { // http://eslint.org/docs/rules/no-multiple-empty-lines
|
||||
"max": 2
|
||||
}],
|
||||
"no-nested-ternary": 2, // http://eslint.org/docs/rules/no-nested-ternary
|
||||
"no-new-object": 2, // http://eslint.org/docs/rules/no-new-object
|
||||
"no-spaced-func": 2, // http://eslint.org/docs/rules/no-spaced-func
|
||||
"no-trailing-spaces": 2, // http://eslint.org/docs/rules/no-trailing-spaces
|
||||
"no-wrap-func": 2, // http://eslint.org/docs/rules/no-wrap-func
|
||||
"no-underscore-dangle": 0, // http://eslint.org/docs/rules/no-underscore-dangle
|
||||
"one-var": [2, "never"], // http://eslint.org/docs/rules/one-var
|
||||
"padded-blocks": 0, // http://eslint.org/docs/rules/padded-blocks
|
||||
"semi": [2, "always"], // http://eslint.org/docs/rules/semi
|
||||
"semi-spacing": [2, { // http://eslint.org/docs/rules/semi-spacing
|
||||
"before": false,
|
||||
"after": true
|
||||
}],
|
||||
"space-after-keywords": 2, // http://eslint.org/docs/rules/space-after-keywords
|
||||
"space-before-blocks": 2, // http://eslint.org/docs/rules/space-before-blocks
|
||||
"space-before-function-paren": [2, "never"], // http://eslint.org/docs/rules/space-before-function-paren
|
||||
"space-infix-ops": 2, // http://eslint.org/docs/rules/space-infix-ops
|
||||
"space-return-throw-case": 2, // http://eslint.org/docs/rules/space-return-throw-case
|
||||
"spaced-line-comment": 2 // http://eslint.org/docs/rules/spaced-line-comment
|
||||
}
|
||||
"extends": "@react-native-community"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"requirePragma": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"bracketSpacing": false,
|
||||
"jsxBracketSameLine": true,
|
||||
"parser": "flow"
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"eslint.autoFixOnSave": true,
|
||||
"editor.formatOnSave": true
|
||||
}
|
||||
66
README.md
66
README.md
|
|
@ -6,7 +6,6 @@ A component for UIVisualEffectView's blur and vibrancy effect on iOS, and [500px
|
|||
|
||||
<img src='https://cloud.githubusercontent.com/assets/139536/25066337/3c9d44c0-224d-11e7-8ca6-028478bf4a7d.gif' />
|
||||
|
||||
|
||||
### Content
|
||||
|
||||
- [Installation](#installation)
|
||||
|
|
@ -15,21 +14,21 @@ A component for UIVisualEffectView's blur and vibrancy effect on iOS, and [500px
|
|||
- [Example React Native app](#example-react-native-app)
|
||||
- [Questions?](#questions)
|
||||
|
||||
|
||||
### Installation
|
||||
|
||||
**NOTE:** Latest version of the package is available in npm as `react-native-blur@3.0.0-alpha`
|
||||
|
||||
1. Install package via npm:
|
||||
|
||||
```
|
||||
npm install react-native-blur
|
||||
```
|
||||
```
|
||||
npm install react-native-blur
|
||||
```
|
||||
|
||||
2. Link your native dependencies:
|
||||
```
|
||||
react-native link react-native-blur
|
||||
```
|
||||
|
||||
```
|
||||
react-native link react-native-blur
|
||||
```
|
||||
|
||||
3. (Android only) Add the following to `android/app/build.gradle`
|
||||
|
||||
|
|
@ -49,17 +48,16 @@ android {
|
|||
|
||||
4. Include the library in your code:
|
||||
|
||||
```javascript
|
||||
import { BlurView, VibrancyView } from 'react-native-blur';
|
||||
```javascript
|
||||
import { BlurView, VibrancyView } from "react-native-blur";
|
||||
|
||||
// OR
|
||||
// OR
|
||||
|
||||
const { BlurView, VibrancyView } = require('react-native-blur');
|
||||
```
|
||||
const { BlurView, VibrancyView } = require("react-native-blur");
|
||||
```
|
||||
|
||||
5. Compile and have fun!
|
||||
|
||||
|
||||
### BlurView
|
||||
|
||||
**Properties:**
|
||||
|
|
@ -79,9 +77,9 @@ android {
|
|||
> Complete usage example that works on iOS and Android:
|
||||
|
||||
```javascript
|
||||
import React, { Component } from 'react';
|
||||
import { View, Image, Text, findNodeHandle, StyleSheet } from 'react-native';
|
||||
import { BlurView } from 'react-native-blur';
|
||||
import React, { Component } from "react";
|
||||
import { View, Image, Text, findNodeHandle, StyleSheet } from "react-native";
|
||||
import { BlurView } from "react-native-blur";
|
||||
|
||||
export default class Menu extends Component {
|
||||
constructor(props) {
|
||||
|
|
@ -104,8 +102,10 @@ export default class Menu extends Component {
|
|||
blurAmount={10}
|
||||
/>
|
||||
<Image
|
||||
ref={(img) => { this.backgroundImage = img; }}
|
||||
source={{uri}}
|
||||
ref={img => {
|
||||
this.backgroundImage = img;
|
||||
}}
|
||||
source={{ uri }}
|
||||
style={styles.absolute}
|
||||
onLoadEnd={this.imageLoaded.bind(this)}
|
||||
/>
|
||||
|
|
@ -116,13 +116,16 @@ export default class Menu extends Component {
|
|||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
},
|
||||
absolute: {
|
||||
position: "absolute",
|
||||
top: 0, left: 0, bottom: 0, right: 0,
|
||||
},
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -139,12 +142,12 @@ Note that `viewRef` is only required if you need to support Android. See the [An
|
|||
> (Note: `VibrancyView` is only supported on iOS. Also note that the `VibrancyView` must contain nested views.)
|
||||
|
||||
```javascript
|
||||
import { VibrancyView } from 'react-native-blur';
|
||||
import { VibrancyView } from "react-native-blur";
|
||||
|
||||
export default class Menu extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Image source={{uri}} style={styles.absolute}>
|
||||
<Image source={{ uri }} style={styles.absolute}>
|
||||
<VibrancyView blurType="light" style={styles.flex}>
|
||||
<Text>Hi, I am some vibrant text.</Text>
|
||||
</VibrancyView>
|
||||
|
|
@ -160,17 +163,16 @@ Android uses the [500px-android-blur](https://github.com/500px/500px-android-blu
|
|||
|
||||
The Android library introduces some limitations:
|
||||
|
||||
* `BlurView` cannot be a child of the view that is being blurred (this would cause an infinite loop)
|
||||
* `BlurView` cannot contain any child components.
|
||||
- `BlurView` cannot be a child of the view that is being blurred (this would cause an infinite loop)
|
||||
- `BlurView` cannot contain any child components.
|
||||
|
||||
If you only need to support iOS, then you can safely ignore these limitations.
|
||||
|
||||
In addition to `blurType` and `blurAmount`, Android has some extra props that can be used to override the default behavior (or configure Android-specific behavior):
|
||||
|
||||
- `blurRadius` (Number - between 0 and 25) - Manually adjust the blur radius. (Default: matches iOS blurAmount)
|
||||
- `blurRadius` (Number - between 0 and 25) - Manually adjust the blur radius. (Default: matches iOS blurAmount)
|
||||
- `downsampleFactor` (Number - between 0 and 25) - Scales down the image before blurring (Default: matches iOS blurAmount)
|
||||
- `overlayColor` (Color) - Set a custom overlay color (Default color based on iOS blurType)
|
||||
|
||||
- `overlayColor` (Color) - Set a custom overlay color (Default color based on iOS blurType)
|
||||
|
||||
### Example React Native App
|
||||
|
||||
|
|
@ -207,6 +209,7 @@ react-native run-ios
|
|||
#### Run the tvOS app
|
||||
|
||||
type:
|
||||
|
||||
```
|
||||
react-native run-ios
|
||||
```
|
||||
|
|
@ -237,12 +240,12 @@ That’s all, you can use react-native-blur for your tvOS application
|
|||
react-native run-android
|
||||
```
|
||||
|
||||
|
||||
### Troubleshooting
|
||||
|
||||
On older instances of react-native, BlurView package does not get added into the MainActivity/MainApplication classes where you would see `Warning: Native component for 'BlurView' does not exist` in RN YellowBox or console.
|
||||
|
||||
To rectify this, you can add the BlurViewPackage manually in MainActivity/MainApplication classes
|
||||
|
||||
```java
|
||||
...
|
||||
import com.cmcewen.blurview.BlurViewPackage;
|
||||
|
|
@ -261,7 +264,6 @@ public class MainApplication extends Application implements ReactApplication {
|
|||
}
|
||||
```
|
||||
|
||||
|
||||
### Questions?
|
||||
|
||||
Feel free to contact me in [twitter](https://twitter.com/kureevalexey) or [create an issue](https://github.com/Kureev/react-native-blur/issues/new)
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
import 'react-native';
|
||||
import React from 'react';
|
||||
import Index from '../index.android.js';
|
||||
|
||||
// Note: test renderer must be required after react-native.
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
it('renders correctly', () => {
|
||||
const tree = renderer.create(
|
||||
<Index />
|
||||
);
|
||||
});
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import 'react-native';
|
||||
import React from 'react';
|
||||
import Index from '../index.ios.js';
|
||||
|
||||
// Note: test renderer must be required after react-native.
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
it('renders correctly', () => {
|
||||
const tree = renderer.create(
|
||||
<Index />
|
||||
);
|
||||
});
|
||||
|
|
@ -50,7 +50,7 @@ class Basic extends Component {
|
|||
|
||||
renderBlurView() {
|
||||
const tintColor = ['#ffffff', '#000000'];
|
||||
if (this.state.blurType === 'xlight') tintColor.reverse();
|
||||
if (this.state.blurType === 'xlight') {tintColor.reverse();}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
|
|
@ -81,12 +81,12 @@ class Basic extends Component {
|
|||
alignItems: 'center',
|
||||
}}
|
||||
childText={BLUR_TYPES}
|
||||
orientation='horizontal'
|
||||
orientation="horizontal"
|
||||
selectedPosition={this.state.activeSegment}
|
||||
onChange={this._onChange.bind(this)} />
|
||||
|
||||
</View>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* Basic [iOS] Example for react-native-blur
|
||||
* https://github.com/react-native-community/react-native-blur
|
||||
*/
|
||||
import React, { Component } from 'react'
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
AppRegistry,
|
||||
StyleSheet,
|
||||
|
|
@ -11,13 +11,13 @@ import {
|
|||
View,
|
||||
SegmentedControlIOS,
|
||||
Switch,
|
||||
} from 'react-native'
|
||||
} from 'react-native';
|
||||
|
||||
import { BlurView, VibrancyView } from 'react-native-blur'
|
||||
import { BlurView, VibrancyView } from 'react-native-blur';
|
||||
|
||||
class Basic extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
showBlurs: true,
|
||||
|
|
@ -25,23 +25,23 @@ class Basic extends Component {
|
|||
blurActiveSegment: 1,
|
||||
vibrancyBlurType: 'dark',
|
||||
vibrancyActiveSegment: 2,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
_onBlurChange(event) {
|
||||
this.setState({blurActiveSegment: event.nativeEvent.selectedSegmentIndex})
|
||||
this.setState({blurActiveSegment: event.nativeEvent.selectedSegmentIndex});
|
||||
}
|
||||
|
||||
_onBlurValueChange(value) {
|
||||
this.setState({blurBlurType: value})
|
||||
this.setState({blurBlurType: value});
|
||||
}
|
||||
|
||||
_onVibrancyChange(event) {
|
||||
this.setState({vibrancyActiveSegment: event.nativeEvent.selectedSegmentIndex})
|
||||
this.setState({vibrancyActiveSegment: event.nativeEvent.selectedSegmentIndex});
|
||||
}
|
||||
|
||||
_onVibrancyValueChange(value) {
|
||||
this.setState({vibrancyBlurType: value})
|
||||
this.setState({vibrancyBlurType: value});
|
||||
}
|
||||
|
||||
renderBlurs() {
|
||||
|
|
@ -69,8 +69,8 @@ class Basic extends Component {
|
|||
<SegmentedControlIOS
|
||||
values={['xlight', 'light', 'dark', 'regular', 'prominent']}
|
||||
selectedIndex={this.state.blurActiveSegment}
|
||||
onChange={(event) => {this._onBlurChange(event)}}
|
||||
onValueChange={(value) => {this._onBlurValueChange(value)}}
|
||||
onChange={(event) => {this._onBlurChange(event);}}
|
||||
onValueChange={(value) => {this._onBlurValueChange(value);}}
|
||||
tintColor={tintColor}
|
||||
/>
|
||||
</View>
|
||||
|
|
@ -91,13 +91,13 @@ class Basic extends Component {
|
|||
<SegmentedControlIOS
|
||||
values={['xlight', 'light', 'dark', 'regular', 'prominent']}
|
||||
selectedIndex={this.state.vibrancyActiveSegment}
|
||||
onChange={(event) => {this._onVibrancyChange(event)}}
|
||||
onValueChange={(value) => {this._onVibrancyValueChange(value)}}
|
||||
onChange={(event) => {this._onVibrancyChange(event);}}
|
||||
onValueChange={(value) => {this._onVibrancyValueChange(value);}}
|
||||
tintColor="white"
|
||||
/>
|
||||
</VibrancyView>
|
||||
</View>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -106,7 +106,7 @@ class Basic extends Component {
|
|||
style={styles.container}>
|
||||
<Image
|
||||
source={require('./bgimage.jpeg')}
|
||||
resizeMode='cover'
|
||||
resizeMode="cover"
|
||||
style={styles.img}/>
|
||||
|
||||
{ this.state.showBlurs ? this.renderBlurs() : null }
|
||||
|
|
@ -163,7 +163,7 @@ const styles = StyleSheet.create({
|
|||
top: 30,
|
||||
right: 10,
|
||||
alignItems: 'flex-end',
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
AppRegistry.registerComponent('Basic', () => Basic);
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import * as React from 'react';
|
||||
import { StyleProp, ViewStyle } from 'react-native';
|
||||
import * as React from "react";
|
||||
import { StyleProp, ViewStyle } from "react-native";
|
||||
|
||||
export interface BlurViewProperties {
|
||||
blurType:
|
||||
| 'xlight'
|
||||
| 'light'
|
||||
| 'dark'
|
||||
| "xlight"
|
||||
| "light"
|
||||
| "dark"
|
||||
// tvOS only
|
||||
| 'extraDark'
|
||||
| 'regular'
|
||||
| 'prominent';
|
||||
| "extraDark"
|
||||
| "regular"
|
||||
| "prominent";
|
||||
blurAmount?: number; // 0 - 100
|
||||
style?: StyleProp<ViewStyle>;
|
||||
viewRef?: number | null;
|
||||
|
|
|
|||
4
index.js
4
index.js
|
|
@ -2,6 +2,6 @@ const BlurView = require('./src/BlurView');
|
|||
const VibrancyView = require('./src/VibrancyView');
|
||||
|
||||
module.exports = {
|
||||
BlurView: BlurView,
|
||||
VibrancyView: VibrancyView,
|
||||
BlurView: BlurView,
|
||||
VibrancyView: VibrancyView,
|
||||
};
|
||||
|
|
|
|||
18
package.json
18
package.json
|
|
@ -4,7 +4,8 @@
|
|||
"description": "React Native Blur component",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"lint": "eslint ."
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
@ -23,5 +24,20 @@
|
|||
"homepage": "https://github.com/react-native-community/react-native-blur",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.5.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@react-native-community/eslint-config": "^0.0.3",
|
||||
"eslint": "^5.15.3",
|
||||
"husky": "^1.3.1",
|
||||
"lint-staged": "^8.1.5",
|
||||
"prettier": "1.16.4"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,json,css,md}": ["prettier --write", "git add"]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { View, requireNativeComponent, DeviceEventEmitter, ViewPropTypes } from 'react-native';
|
||||
import {
|
||||
View,
|
||||
requireNativeComponent,
|
||||
DeviceEventEmitter,
|
||||
ViewPropTypes,
|
||||
} from 'react-native';
|
||||
|
||||
const OVERLAY_COLORS = {
|
||||
light: 'rgba(255, 255, 255, 0.2)',
|
||||
|
|
@ -8,10 +13,9 @@ const OVERLAY_COLORS = {
|
|||
dark: 'rgba(16, 12, 12, 0.64)',
|
||||
};
|
||||
|
||||
|
||||
class BlurView extends Component {
|
||||
componentWillMount() {
|
||||
DeviceEventEmitter.addListener('ReactNativeBlurError', (message) => {
|
||||
DeviceEventEmitter.addListener('ReactNativeBlurError', message => {
|
||||
throw new Error(`[ReactNativeBlur]: ${message}`);
|
||||
});
|
||||
}
|
||||
|
|
@ -21,7 +25,9 @@ class BlurView extends Component {
|
|||
}
|
||||
|
||||
overlayColor() {
|
||||
if (this.props.overlayColor != null) return this.props.overlayColor;
|
||||
if (this.props.overlayColor != null) {
|
||||
return this.props.overlayColor;
|
||||
}
|
||||
return OVERLAY_COLORS[this.props.blurType] || OVERLAY_COLORS.dark;
|
||||
}
|
||||
|
||||
|
|
@ -30,7 +36,9 @@ class BlurView extends Component {
|
|||
|
||||
if (blurRadius != null) {
|
||||
if (blurRadius > 25) {
|
||||
throw new Error(`[ReactNativeBlur]: blurRadius cannot be greater than 25! (was: ${blurRadius})`);
|
||||
throw new Error(
|
||||
`[ReactNativeBlur]: blurRadius cannot be greater than 25! (was: ${blurRadius})`
|
||||
);
|
||||
}
|
||||
return blurRadius;
|
||||
}
|
||||
|
|
@ -39,13 +47,17 @@ class BlurView extends Component {
|
|||
// Android blurRadius + downsampleFactor is approximately 80% of blurAmount.
|
||||
const equivalentBlurRadius = Math.round(blurAmount * 0.8);
|
||||
|
||||
if (equivalentBlurRadius > 25) return 25;
|
||||
if (equivalentBlurRadius > 25) {
|
||||
return 25;
|
||||
}
|
||||
return equivalentBlurRadius;
|
||||
}
|
||||
|
||||
downsampleFactor() {
|
||||
const { downsampleFactor, blurRadius } = this.props;
|
||||
if (downsampleFactor != null) return downsampleFactor;
|
||||
if (downsampleFactor != null) {
|
||||
return downsampleFactor;
|
||||
}
|
||||
return blurRadius;
|
||||
}
|
||||
|
||||
|
|
@ -53,8 +65,9 @@ class BlurView extends Component {
|
|||
if (this.props.children != null) {
|
||||
throw new Error(
|
||||
'[ReactNativeBlur]: BlurView cannot contain any child views on Android. ' +
|
||||
'You should use "position: absolute" on the BlurView, ' +
|
||||
'and place other views in front of it.');
|
||||
'You should use "position: absolute" on the BlurView, ' +
|
||||
'and place other views in front of it.'
|
||||
);
|
||||
}
|
||||
|
||||
const { viewRef, style } = this.props;
|
||||
|
|
@ -65,10 +78,7 @@ class BlurView extends Component {
|
|||
blurRadius={this.blurRadius()}
|
||||
downsampleFactor={this.downsampleFactor()}
|
||||
overlayColor={this.overlayColor()}
|
||||
style={[
|
||||
{ backgroundColor: 'transparent' },
|
||||
style,
|
||||
]}
|
||||
style={[{ backgroundColor: 'transparent' }, style]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,17 +7,14 @@ class BlurView extends Component {
|
|||
if (this._root) {
|
||||
this._root.setNativeProps(nativeProps);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<NativeBlurView
|
||||
ref={e => this._root = e}
|
||||
ref={e => (this._root = e)}
|
||||
{...this.props}
|
||||
style={[
|
||||
{ backgroundColor: 'transparent' },
|
||||
this.props.style,
|
||||
]}
|
||||
style={[{ backgroundColor: 'transparent' }, this.props.style]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ import React from 'react';
|
|||
|
||||
class VibrancyView extends React.Component {
|
||||
render() {
|
||||
console.error("VibrancyView is not implemented on Android");
|
||||
console.error('VibrancyView is not implemented on Android');
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = VibrancyView
|
||||
module.exports = VibrancyView;
|
||||
|
|
|
|||
|
|
@ -7,15 +7,17 @@ class VibrancyView extends Component {
|
|||
if (this._root) {
|
||||
this._root.setNativeProps(nativeProps);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<NativeVibrancyView
|
||||
{...this.props}
|
||||
style={[{
|
||||
backgroundColor: 'transparent',
|
||||
}, this.props.style,
|
||||
style={[
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
this.props.style,
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue