mirror of
https://github.com/status-im/react-native-blur.git
synced 2025-01-12 09:34:16 +00:00
enable prettier by default
This commit is contained in:
parent
d540dfbc58
commit
6897dbcaa5
@ -1,8 +1,6 @@
|
||||
{
|
||||
"requirePragma": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"bracketSpacing": false,
|
||||
"jsxBracketSameLine": true,
|
||||
"parser": "flow"
|
||||
"jsxBracketSameLine": true
|
||||
}
|
||||
|
@ -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 {
|
||||
Image,
|
||||
SegmentedControlIOS,
|
||||
@ -13,7 +13,7 @@ import {
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
import { BlurView, VibrancyView } from '@react-native-community/blur';
|
||||
import {BlurView, VibrancyView} from '@react-native-community/blur';
|
||||
|
||||
export default class Basic extends Component {
|
||||
constructor(props) {
|
||||
@ -37,7 +37,9 @@ export default class Basic extends Component {
|
||||
}
|
||||
|
||||
_onVibrancyChange(event) {
|
||||
this.setState({vibrancyActiveSegment: event.nativeEvent.selectedSegmentIndex});
|
||||
this.setState({
|
||||
vibrancyActiveSegment: event.nativeEvent.selectedSegmentIndex,
|
||||
});
|
||||
}
|
||||
|
||||
_onVibrancyValueChange(value) {
|
||||
@ -62,17 +64,22 @@ export default class Basic extends Component {
|
||||
blurAmount={100}
|
||||
reducedTransparencyFallbackColor={'pink'}
|
||||
style={[styles.blurView]}>
|
||||
<Text style={[styles.text, { color: tintColor }]}>
|
||||
<Text style={[styles.text, {color: tintColor}]}>
|
||||
Blur component ({platform})
|
||||
</Text>
|
||||
{Platform.OS === 'ios' &&
|
||||
<SegmentedControlIOS
|
||||
values={['xlight', 'light', 'dark', 'regular', 'prominent']}
|
||||
selectedIndex={this.state.blurActiveSegment}
|
||||
onChange={(event) => {this._onBlurChange(event);}}
|
||||
onValueChange={(value) => {this._onBlurValueChange(value);}}
|
||||
tintColor={tintColor}
|
||||
/>}
|
||||
{Platform.OS === 'ios' && (
|
||||
<SegmentedControlIOS
|
||||
values={['xlight', 'light', 'dark', 'regular', 'prominent']}
|
||||
selectedIndex={this.state.blurActiveSegment}
|
||||
onChange={(event) => {
|
||||
this._onBlurChange(event);
|
||||
}}
|
||||
onValueChange={(value) => {
|
||||
this._onBlurValueChange(value);
|
||||
}}
|
||||
tintColor={tintColor}
|
||||
/>
|
||||
)}
|
||||
</BlurView>
|
||||
</View>
|
||||
|
||||
@ -81,25 +88,27 @@ export default class Basic extends Component {
|
||||
VibrancyView is only supported on iOS, and must contain child views,
|
||||
otherwise the vibrancy effect doesn't work.
|
||||
*/
|
||||
Platform.OS === 'ios' &&
|
||||
<VibrancyView
|
||||
blurType={this.state.vibrancyBlurType}
|
||||
blurAmount={10}
|
||||
reducedTransparencyFallbackColor={'pink'}
|
||||
style={[styles.container, styles.blurContainer]}>
|
||||
Platform.OS === 'ios' && (
|
||||
<VibrancyView
|
||||
blurType={this.state.vibrancyBlurType}
|
||||
blurAmount={10}
|
||||
reducedTransparencyFallbackColor={'pink'}
|
||||
style={[styles.container, styles.blurContainer]}>
|
||||
<Text style={styles.text}>Vibrancy component (iOS-only)</Text>
|
||||
|
||||
<Text style={styles.text}>
|
||||
Vibrancy component (iOS-only)
|
||||
</Text>
|
||||
|
||||
<SegmentedControlIOS
|
||||
values={['xlight', 'light', 'dark', 'regular', 'prominent']}
|
||||
selectedIndex={this.state.vibrancyActiveSegment}
|
||||
onChange={(event) => {this._onVibrancyChange(event);}}
|
||||
onValueChange={(value) => {this._onVibrancyValueChange(value);}}
|
||||
tintColor="white"
|
||||
/>
|
||||
</VibrancyView>
|
||||
<SegmentedControlIOS
|
||||
values={['xlight', 'light', 'dark', 'regular', 'prominent']}
|
||||
selectedIndex={this.state.vibrancyActiveSegment}
|
||||
onChange={(event) => {
|
||||
this._onVibrancyChange(event);
|
||||
}}
|
||||
onValueChange={(value) => {
|
||||
this._onVibrancyValueChange(value);
|
||||
}}
|
||||
tintColor="white"
|
||||
/>
|
||||
</VibrancyView>
|
||||
)
|
||||
}
|
||||
</View>
|
||||
);
|
||||
@ -107,22 +116,21 @@ export default class Basic extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View
|
||||
style={styles.container}>
|
||||
<View style={styles.container}>
|
||||
<Image
|
||||
source={require('./bgimage.jpeg')}
|
||||
resizeMode="cover"
|
||||
style={styles.img}/>
|
||||
style={styles.img}
|
||||
/>
|
||||
|
||||
{ this.state.showBlurs ? this.renderBlurs() : null }
|
||||
{this.state.showBlurs ? this.renderBlurs() : null}
|
||||
|
||||
<View
|
||||
style={styles.blurToggle}>
|
||||
<View style={styles.blurToggle}>
|
||||
<Switch
|
||||
onValueChange={(value) => this.setState({showBlurs: value})}
|
||||
value={this.state.showBlurs} />
|
||||
value={this.state.showBlurs}
|
||||
/>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
@ -1,7 +1,3 @@
|
||||
/**
|
||||
* @format
|
||||
*/
|
||||
|
||||
import {AppRegistry} from 'react-native';
|
||||
import App from './App';
|
||||
import {name as appName} from './app.json';
|
||||
|
@ -5,7 +5,7 @@
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"lint": "eslint src index.js"
|
||||
"lint": "eslint src index.js example"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React, { Component } from 'react';
|
||||
import React, {Component} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
View,
|
||||
@ -16,7 +16,7 @@ const OVERLAY_COLORS = {
|
||||
|
||||
class BlurView extends Component {
|
||||
componentDidMount() {
|
||||
DeviceEventEmitter.addListener('ReactNativeBlurError', message => {
|
||||
DeviceEventEmitter.addListener('ReactNativeBlurError', (message) => {
|
||||
throw new Error(`[ReactNativeBlur]: ${message}`);
|
||||
});
|
||||
}
|
||||
@ -33,12 +33,12 @@ class BlurView extends Component {
|
||||
}
|
||||
|
||||
blurRadius() {
|
||||
const { blurRadius, blurAmount } = this.props;
|
||||
const {blurRadius, blurAmount} = this.props;
|
||||
|
||||
if (blurRadius != null) {
|
||||
if (blurRadius > 25) {
|
||||
throw new Error(
|
||||
`[ReactNativeBlur]: blurRadius cannot be greater than 25! (was: ${blurRadius})`
|
||||
`[ReactNativeBlur]: blurRadius cannot be greater than 25! (was: ${blurRadius})`,
|
||||
);
|
||||
}
|
||||
return blurRadius;
|
||||
@ -55,7 +55,7 @@ class BlurView extends Component {
|
||||
}
|
||||
|
||||
downsampleFactor() {
|
||||
const { downsampleFactor, blurRadius } = this.props;
|
||||
const {downsampleFactor, blurRadius} = this.props;
|
||||
if (downsampleFactor != null) {
|
||||
return downsampleFactor;
|
||||
}
|
||||
@ -63,7 +63,7 @@ class BlurView extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { style } = this.props;
|
||||
const {style} = this.props;
|
||||
|
||||
return (
|
||||
<NativeBlurView
|
||||
@ -71,8 +71,7 @@ class BlurView extends Component {
|
||||
downsampleFactor={this.downsampleFactor()}
|
||||
overlayColor={this.overlayColor()}
|
||||
pointerEvents="none"
|
||||
style={StyleSheet.compose(styles.transparent, style)}
|
||||
>
|
||||
style={StyleSheet.compose(styles.transparent, style)}>
|
||||
{this.props.children}
|
||||
</NativeBlurView>
|
||||
);
|
||||
@ -80,7 +79,7 @@ class BlurView extends Component {
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
transparent: { backgroundColor: 'transparent' },
|
||||
transparent: {backgroundColor: 'transparent'},
|
||||
});
|
||||
|
||||
BlurView.propTypes = {
|
||||
|
@ -1,9 +1,14 @@
|
||||
import React, { Component } from 'react';
|
||||
import React, {Component} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {View, requireNativeComponent, ViewPropTypes, StyleSheet} from 'react-native';
|
||||
import {
|
||||
View,
|
||||
requireNativeComponent,
|
||||
ViewPropTypes,
|
||||
StyleSheet,
|
||||
} from 'react-native';
|
||||
|
||||
class BlurView extends Component {
|
||||
setNativeProps = nativeProps => {
|
||||
setNativeProps = (nativeProps) => {
|
||||
if (this._root) {
|
||||
this._root.setNativeProps(nativeProps);
|
||||
}
|
||||
@ -12,7 +17,7 @@ class BlurView extends Component {
|
||||
render() {
|
||||
return (
|
||||
<NativeBlurView
|
||||
ref={e => (this._root = e)}
|
||||
ref={(e) => (this._root = e)}
|
||||
{...this.props}
|
||||
style={StyleSheet.compose(styles.transparent, this.props.style)}
|
||||
/>
|
||||
@ -21,7 +26,7 @@ class BlurView extends Component {
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
transparent: { backgroundColor: 'transparent' },
|
||||
transparent: {backgroundColor: 'transparent'},
|
||||
});
|
||||
|
||||
BlurView.propTypes = {
|
||||
|
@ -1,9 +1,9 @@
|
||||
import React, { Component } from 'react';
|
||||
import React, {Component} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {requireNativeComponent, StyleSheet} from 'react-native';
|
||||
|
||||
class VibrancyView extends Component {
|
||||
setNativeProps = nativeProps => {
|
||||
setNativeProps = (nativeProps) => {
|
||||
if (this._root) {
|
||||
this._root.setNativeProps(nativeProps);
|
||||
}
|
||||
@ -20,7 +20,7 @@ class VibrancyView extends Component {
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
transparent: { backgroundColor: 'transparent' },
|
||||
transparent: {backgroundColor: 'transparent'},
|
||||
});
|
||||
|
||||
VibrancyView.propTypes = {
|
||||
|
Loading…
x
Reference in New Issue
Block a user