Implementation of React Native Blur view for android #13663
Conversation
Jenkins BuildsClick to see older builds (6)
|
Parveshdhull
force-pushed
the
feature/switcher-blurred-view
branch
2 times, most recently
from
994646f
to
30a5b44
Compare
Parveshdhull
force-pushed
the
feature/switcher-blurred-view
branch
from
30a5b44
to
5d54577
Compare
Parveshdhull
changed the title
Parveshdhull
changed the title
| @@ -18,3 +18,5 @@ include ':react-native-status' | |||
| project(':react-native-status').projectDir = new File(rootProject.projectDir, '../modules/react-native-status/android') | |||
| include ':react-native-status-keycard' | |||
| project(':react-native-status-keycard').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-status-keycard/android') | |||
| include ':react-native-blur' | |||
| project(':react-native-blur').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/blur/android') | |||
There was a problem hiding this comment.
Project name don't allow / @, So instead of using @react-native-community/blur as project name, library name is being used here. (same as ref)
| @@ -16,7 +16,7 @@ | |||
| "@babel/preset-typescript": "^7.17.12", | |||
| "@react-native-community/async-storage": "^1.11.0", | |||
| "@react-native-community/audio-toolkit": "git+https://github.com/tbenr/react-native-audio-toolkit.git#refs/tags/v2.0.3-status-v6", | |||
| "@react-native-community/blur": "^3.6.0", | |||
| "@react-native-community/blur": "git+https://github.com/Kureev/react-native-blur#refs/tags/v3.6.1", | |||
There was a problem hiding this comment.
v3.6.1 is required for fixing crash on android while navigating (ref). But for some reason it only available on repo and not published on npm, even though it was created on Apr 27, 2021
90% of end-end tests have passedFailed tests (8)Click to expand
Passed tests (76)Click to expand
|
fixes: #13664
Summary
PR implements React Native Blur view for android.
Entire screen inside visual area of blur-view will be blurred, except children's of blur-view.
It doesn't matter if another view inside the visual area was above or below of the blur-view. Blur-view takes a snapshot of the visual area and blurs it.
Uses
[react/blur-view {:style style :blur-amount 4 :overlay-color :transparent :blur-type :light} ;; Child view ]Note:
overlay-coloris required, otherwise blur-view will also affect surrounding view (ref)status: ready