[React Native] Linear-gradient 를 사용하여 bottom floating button 자연스럽게 만들기!

앱에서 ScrollView나 Flatlist 등을 사용하여 스크롤링 페이지를 구현할 때

스크롤이 길게 되어 있거나 회원가입 프로세스처럼 페이지간의 버튼 간격을 맞춰야 할 경우

하단 플로팅 버튼(bottom floating button) 형식을 많이 사용하게 된다.

 

 

위 이미지처럼, 스크롤 할 때 버튼의 배경색과 ScrollView 내의 배경색이 상이할 경우,

구분선이 있기에 뭔가 자연스럽지 못한 부분을 확인할 수 있다.

이 상황에서 자연스러운 연출을 원한다면, 하단 버튼의 top 영역에 모자이크처럼 뿌옇게 만들어주면

어색함이 덜 할 것 같아 Linear-Gradient를 통해 구현해보았다.

 

구현 방법은 매우 간단했다. 보통 하단 플로팅 버튼을 구현할 땐

<Container>
	<ScrollContainer>
		...your components
	</ScrollContainer>
    <FloatBtn>
    	...
    </FloatBtn>
</Container>

 

위와 같은 식으로 ScrollView 외부에 버튼을 선언하면 된다.

이 때 버튼 내부에 LinearGradient를 선언하고 원하는 만큼 top 수치를 땡겨주면 된다.

 

<Container>
	<ScrollContainer>
		...your components
	</ScrollContainer>
    <FloatBtn>
    <LinearGradient
		colors={['#ffffff00', colors.White]}
		style={{
		height: 25,
		position: 'absolute',
		left: 0,
		right: 0,
		top: -25,
		}}
	/>
    	...
    </FloatBtn>
</Container>

 

위와 같은 식으로 선언해주면, 아래와 같이 원하는 효과를 볼 수 있다.