BlurView 에서 intensive 적용안됨 또는 android/ios 모두 적용 하는 해결방법

BlurView 에서 intensive 적용안됨 또는 android/ios 모두 적용 하는 해결방법

이미지 출처 :React Native Directory

자료출처 : https://reactnative.directory/?search=swiper

 

해결방안 

 

결론부터 말하자면, react-native-blur 를 사용하는 것입니다. 그리고 android  / ios 모두 적용해야하는 앱이라면 react-native-swiper 와의 조합을 추천합니다.

import { BlurView } from "expo-blur"; 

// 대신 

import { BlurView } from "@react-native-community/blur";

 

사용예시

모듈 설치 (react-native-swiper)

npm i react-native-swiper --save

모듈 설치 (@react-native-community)

npm install @react-native-community/blur --save
//if ios user
cd ios && pod install

 

코드에 적용하기 -1

설치한 모듈을 불러옵니다.

import Swiper from "react-native-swiper";
import { BlurView } from "@react-native-community/blur";

코드에 적용하기 -2

Swiper는 <Swiper></Swiper> 안에 표시할 컴포넌트를 랜더링하면 됩니다. 저의 경우에는 영화포스터이미지 리스트를 받아 nowPlaying에 저장한 뒤 <View><BgImg/></View>에 담았습니다.

BlurView 는 <BlueView> 안에 흐리게 표시하지 않을 컴포넌트만 넣습니다. BlueView컴포넌트 밖에 있는 컴포넌트만 Blur처리 됩니다. 

    <Container>
      <Swiper
        loop
        autoplay={true}
        autoplayTimeout={3.5}
        showsButtons={false}
        showsPagination={false}
        containerStyle={{ width: "100%", height: SCREEN_HEIGHT / 4 }}
      >
        {nowPlaying.map((movie) => (
          <View key={movie.id}>
            <BgImg
              style={StyleSheet.absoluteFill}
              source={{ uri: makeImgPath(movie.backdrop_path) }}
            />
            <BlurView
              blurType={isDark ? "dark" : "light"}
              style={StyleSheet.absoluteFill}
            >
              <Title>{movie.original_title}</Title>
            </BlurView>
          </View>
        ))}
      </Swiper>
    </Container>

 

Swiper prop list

 

Swiper 에서 사용할 수 있는 prop 리스트는 아래와 같습니다. 

Basic

PropDefaultTypeDescription

horizontal	true	bool	If true, the scroll view's children are arranged horizontally in a row instead of vertically in a column.
loop	true	bool	Set to false to disable continuous loop mode.
index	0	number	Index number of initial slide.
showsButtons	false	bool	Set to true make control buttons visible.
autoplay	false	bool	Set to true enable auto play mode.
onIndexChanged	(index) => null	func	Called with the new index when the user swiped

Custom basic style & content

PropDefaultTypeDescription

width	-	number	If no specify default enable fullscreen mode by flex: 1.
height	-	number	If no specify default fullscreen mode by flex: 1.
style	{...}	style	See default style in source.
containerStyle	{...}	style	See default container style in source.
loadMinimal	false	bool	Only load current index slide , loadMinimalSize slides before and after.
loadMinimalSize	1	number	see loadMinimal
loadMinimalLoader	<ActivityIndicator />	element	Custom loader to display when slides aren't loaded

 

BlurView prop list 

 

Basic props

PropertyPossible ValuesDefaultPlatform

blurType	See blurType below	-	All
blurAmount	0 - 100 (The maximum blurAmount on Android is 32, so higher values will be clamped to 32)	10	All
reducedTransparencyFallbackColor	Any color	-	iOS only
blurRadius	0 - 25	Matches iOS blurAmount	Android only
downsampleFactor	0 - 25	Matches iOS blurAmount	Android only
overlayColor	Any color	Default color based on iOS blurType	Android only