React-native-blur: Android Support

[rebeccahughes]

Are there any plans to add Android support?

[Kureev]

Sure, but I need to make some research first. Never worked on Android, need to figure out what exactly needs to be done for it. I'll keep you posted.

[Kureev]

Seems it require more efforts than I expected. The reason is that Android doesn't support blur out-of-box, so it leads us to use something like https://github.com/paveldudka/blurring for it. But I need some assistance form android developers to help me implementing it.

[getreup]

Hey Kureev, can we get an initial version of this component in Android that just puts a tinted view up? That way we can still use it cross platform and we can work on a more advanced solution later.

[Kudo]

Just seen there is a https://github.com/kwaak/react-native-android-blurryoverlay

[fubar]

Just came across this well-written article about implementing a blur effect on Android. I'm not an Android dev myself but maybe it helps or inspires someone here.
http://developers.500px.com/2015/03/17/a-blurring-view-for-android.html

They also put their solution on github under MIT license:
https://github.com/500px/500px-android-blur

[williambout]

:+1: for Android Support.

[ericraio]

As a temporary solution, I did this if anyone is interested.

BlurView.ios.js

'use strict';

import React, { Component, StyleSheet } from 'react-native';
import { BlurView } from 'react-native-blur';

var styles = StyleSheet.create({
  transparent: {
    backgroundColor: 'transparent'
  }
});

export default class extends Component {
  render() {
    return (
      <BlurView blurType="light" style={styles.transparent} {...this.props} >
        {this.props.children}
      </BlurView>
    );
  }
}

BlurView.android.js

  import React, { View, Component, StyleSheet } from 'react-native';
  import BlurryOverlay from 'react-native-android-blurryoverlay';

  export default class extends Component {
    render() {
      return (
        <View {...this.props}>
         <BlurryOverlay radius={5} sampling={8} color="#00FFFF00" style={[{flex: 1, position: "absolute", left: 0, >
          {this.props.children}
        </View>
      );
    }
  }

src

// ....
import BlurView from '../components/BlurView';
// ....
export default class extends Component {
  render() {
    return (
      <BlurView style={styles.container}>
            <Text>Hello World</Text>
       </BlurView>
    )
  }
}

[mhollweck]

Does anyone have a working sample of BlurryOverlay?

When I try to wrap it around an image, I get "BlurryOverlay cannot be cast to android.view.ViewGroup". Thanks!

[bymurat]

Android Support +1.

Regards.

[Wasseing]

Android support would be great !

[grabbou]

We are looking into this internally in one of our apps - chances are we submit a PR next week if we have time.

[alidawud]

Android Support +1.

Regards.

[ericraio]

@grabbou can't wait!

[cmcewen]

Here's one go - feedback appreciated! https://github.com/react-native-fellowship/react-native-blur/pull/59

[SudoPlz]

@grabbou Cant wait either. @cmcewen Thanks for that man. Lets see if it gets merged..!

[KGALLET]

+1

[diegocstn]

+1

[VinceBT]

+1

[Kureev]

Well, I think it's a time 😸

Android support has been released in the new major version! 1.0.0 is out! Thanks, @cmcewen!

P.S. See https://github.com/react-native-fellowship/react-native-blur#android

[sompylasar]

@Kureev Could you please update the README with a cross-platform (ios + android) example, the Android section is very confusing because the component is not coherent.

[cmcewen]

@sompylasar unfortunately it's not possible to use the same code on both platforms. iOS has a native UIVisualEffectView but Android has no platform support for easily blurring a view https://developers.500px.com/a-blurring-view-for-android-7f33d41a047d. I wrapped that library which I believe is better than nothing right now, but if you have suggestions on how to unify the API I am happy to take them

[sompylasar]

@cmcewen Have you seen this implementation: https://github.com/Dimezis/BlurView ? Looks like it finds the views to blur automatically, but I may be wrong. The author says that in contrast to 500px's implementation, his one automatically determines when to redraw.

Regardless of the API unification, there should be an option to use the same React Native component (with different props) cross-platform, and I expect an example of such usage in the README.

[cmcewen]

@sompylasar I hadn't seen that one - might be easier to use? It looks like it just overlays the entire root view so you have to pass it a reference to that root view. I just picked the one that seemed most popular and was able to fit my needs.

I'm not really sure what you mean by cross-platform - the example has a BlurView functioning on both platforms (.ios.js and .android.js). If you have any documentation or improvements to the example you'd like to PR, that would definitely be appreciated.

I also don't have any attachment to the 500px library so if you think that one is easier to use, feel free to submit a PR to use it.

[sompylasar]

@cmcewen Sorry, I missed the examples folder, there was no link to it from the README.

I'm not developing anything for React Native now, just following some resources and relating modules to each other for future use if I some day start doing mobile development with React Native (I'm a web application engineer now using React), so I won't be able to PR anything because I don't have all the development environment installed.

I stumbled upon the module I referenced on a local software community website and thought it could be a good fit for React Native Blur (this was even before the official approval of the 500px solution, but the author wasn't interested enough to suggest his module to React Native community).

I don't know if it's easier to use, only that the author told me in the comment about the auto-redraw feature that was missing from 500px's implementation.