[React Native] 쉐이킹 이벤트 기능

1. react-native-shake 설치

$ npm install react-native-shake --save

www.npmjs.com/package/react-native-shake

react-native-shake

 

2. 첫 페이지 수정

 

나의 경우 앱 모든 곳에서든 shake 기능이 동작해야만 했다.

 

Stack Navigation 을 사용했고,

로그인 페이지가 제일 앞에 있고 로그인 성공하면 MainPage 로 이동하는 형태였으므로

MainPage 에만 shake event 를 추가했다.

import {Container} from 'native-base';
import React, {useEffect} from 'react';
import MainFooter from '../components/common/MainFooter';
import MainHeader from '../components/common/MainHeader';
import MainTab from '../components/common/MainTab';
import RNShake from 'react-native-shake';

const MainPage = ({navigation}) => {
  useEffect(() => {
    RNShake.addEventListener('ShakeEvent', () => {
      console.log('쉐이킹!!');
      navigation.navigate('BarcodeScanningPage');
    });
  }, []);

  useEffect(() => {
    console.log('쉐이킹 이벤트 제거');
    return () => RNShake.removeEventListener('ShakeEvent');
  }, []);

  return (
    <Container>
      <MainHeader />
      <MainTab />
      <MainFooter navigation={navigation} />
    </Container>
  );
};

export default MainPage;

 

로그인 페이지 후 무조건 MainPage 를 지나기 때문에

MainPage.js 에만 작성해줘도

어느 페이지든 쉐이킹 기능이 실행된다.