voronianski / react-native-effects-view Goto Github PK

Use iOS8 UIVisualEffectViews's blur and vibrancy with ReactNative

Objective-C 59.24% JavaScript 40.76%

react-native-effects-view's Introduction

ReactNativeEffectsView

Component to make easy use of iOS8 UIVisualEffectViews with UIBlurEffect and UIVibrancyEffect in ReactNative.

Install

npm install react-native-effects-view --save

In XCode right click on project's name and choose Add Files to..
Go to node_modules/react-native-effects-view and select DVEffects folder
Now you're ready to require('react-native-effects-view') inside your app!

Props

blurStyle (String) - choose one of the following:
- "light" (default)
- "extraLight"
- "dark"
vibrantContent (ReactElement) - render vibrant content inside blurred view.

Children

All children of <EffectsView /> will be blurred, however you can use it without children and position element on top of background images and other views.

Example

In order to see usage example check example/EffectsApp folder in XCode (don't forget to run npm install inside). It contains the app presented by screenshot.

var React = require('react-native');
var EffectsView = require('react-native-effects-view');
var { AppRegistry, StyleSheet, View } = React;

var App = React.createClass({
    renderVibrant() {
        return (
            <View>
                <Text style={styles.text}>Do you feel blurry??</Text>
            </View>
        );
    },

    render() {
        return (
            <EffectsView 
                style={styles.view} 
                blurStyle="dark" 
                vibrantContent={this.renderVibrant()}
            >
                <Image style={styles.bg} source={require('image!bg')} />
            </EffectsView>
        );
    }
});

var styles = StyleSheet.create({
    bg: {
        flex: 1,
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        top: 0,
        justifyContent: 'center',
        alignItems: 'center',
    },
    view: {
        flex: 1
    },
    text: {
        fontSize: 20,
        color: 'white',
        textAlign: 'center',
    },
});

AppRegistry.registerComponent('App', () => App);

References

Demo app is inspired by UIVisualEffects repo.

MIT Licensed

react-native-effects-view's People

Contributors

Stargazers

Watchers

react-native-effects-view's Issues

Make compatible with 0.4.3+

This component is using a couple of now depreciated APIs, see release notes @0.4.3. It'd be great to see a compatibility update.

Also, the component should not require react-native. I think it's a better practice to make react-native + a version number a peerDependency.

Border radius on effects view?

Anyone know how to do this? A good example is application folders on the home screen in iOS 9. I tried borderRadius: 25 as a style prop, but it doesn't seem to do anything

undefined is not an object (evaluating '_react2.default.PropTypes.bool')

Hi, I'm facing the issue specified in title when using EffectsView component as reported in documentation:

// React and React Native imports
import React from 'react';
import {
    Text,
    View
} from 'react-native';

// Typography imports
import { iOSUIKit } from 'react-native-typography'

// React Native Calendars imports
import { EffectsView } from 'react-native-effects-view';

export default class App extends React.Component {
    render() {
        return (
            <EffectsView
                style={{ flex: 1 }}
                blurStyle="dark"
                vibrantContent={<View><Text style={iOSUIKit.largeTitleEmphasized}>Title</Text></View>}
            >
            </EffectsView>
        );
    }
}

Does anyone have a solution? I'm using react-native v0.50.3 and react-native-effects-view v0.4.0.

http://i.stack.imgur.com/FUJuH.png

Remove react-native dependency

Causes naming conflicts with packager.

Suggestion: Join efforts with react-native-blur

https://github.com/Kureev/react-native-blur encourages a more logical DOM structure:

<Background>
    <Blur>
        <Content />
    </Blur>
</Background>

in contrast to:

    function renderContent() { return <Content />; }
    <Blur vibrantContent={renderContent()}>
        <Background />
    </Blur>