안드로이드 애니메이션 적용 및 findDOMNode Warning 해결

example/config-overrides.js

@@ -0,0 +1,3 @@
+const { override,addBabelPlugin } = require('customize-cra')
+
+module.exports = override(addBabelPlugin('emotion'))

example/package.json

@@ -3,9 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "build": "SKIP_PREFLIGHT_CHECK=true PUBLIC_URL=./ react-scripts build && webview-zipper ./build -o ./build/webview",
-    "eject": "react-scripts eject",
-    "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
+    "build": "SKIP_PREFLIGHT_CHECK=true PUBLIC_URL=./ react-app-rewired build && webview-zipper ./build -o ./build/webview",
+    "start": "SKIP_PREFLIGHT_CHECK=true react-app-rewired start",
     "test": "react-scripts test"
   },
   "browserslist": {
@@ -43,6 +42,9 @@
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
     "@types/react-router-dom": "^5.1.5",
+    "babel-plugin-emotion": "^10.0.33",
+    "customize-cra": "^1.0.0",
+    "react-app-rewired": "^2.1.6",
     "react-scripts": "3.4.3",
     "typescript": "~3.7.2"
   }

example/src/App.tsx

@@ -13,9 +13,18 @@ import Page3 from './components/Page3';
 const bridge = new Bridge()
 
 function App() {
+  const environment = (() => {
+    switch (bridge.environment) {
+      case 'Web':
+        return 'Android' as const
+      default:
+        return bridge.environment
+    }
+  })()
+
   return (
     <Navigator
-      theme={bridge.environment}
+      theme={environment}
       onClose={() => {
         bridge.router.close()
       }}>

example/src/components/Home.tsx

@@ -7,7 +7,7 @@ const Home: React.FC = () => {
 
   const onPage2Click = async () => {
     const data = await navigator.push('/page2')
-    window.alert(JSON.stringify(data))
+    console.log(data)
   }
 
   return (
@@ -37,6 +37,56 @@ const Home: React.FC = () => {
       >
         상단바가 있는 페이지2로 이동
       </button>
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
+      스크롤테스트<br />
     </Container>
   )
 }

example/yarn.lock

@@ -2628,7 +2628,7 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-emotion@^10.0.27:
+babel-plugin-emotion@^10.0.27, babel-plugin-emotion@^10.0.33:
   version "10.0.33"
   resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz#ce1155dcd1783bbb9286051efee53f4e2be63e03"
   integrity sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==
@@ -3924,6 +3924,13 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.2.tgz#ee5ff8f208c8cd613b389f7b222c9801ca62b3f7"
   integrity sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw==
 
+customize-cra@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/customize-cra/-/customize-cra-1.0.0.tgz#73286563631aa08127ad4d30a2e3c89cf4e93c8d"
+  integrity sha512-DbtaLuy59224U+xCiukkxSq8clq++MOtJ1Et7LED1fLszWe88EoblEYFBJ895sB1mC6B4uu3xPT/IjClELhMbA==
+  dependencies:
+    lodash.flow "^3.5.0"
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -7063,6 +7070,11 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
+lodash.flow@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
+  integrity sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -9130,6 +9142,13 @@ react-app-polyfill@^1.0.6:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
+react-app-rewired@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/react-app-rewired/-/react-app-rewired-2.1.6.tgz#33ee3076a7f34d6a7c94e649cac67e7c8c580de8"
+  integrity sha512-06flj0kK5tf/RN4naRv/sn6j3sQd7rsURoRLKLpffXDzJeNiAaTNic+0I8Basojy5WDwREkTqrMLewSAjcb13w==
+  dependencies:
+    semver "^5.6.0"
+
 react-dev-utils@^10.2.1:
   version "10.2.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19"

src/navigator/Link.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useMemo } from 'react'
 import { Link as RouterLink } from 'react-router-dom'
 import short from 'short-uuid'
 
-import { appendSearch } from '../utils/appendSearch'
+import { appendSearch } from '../utils'
 
 interface LinkProps {
   /**

src/navigator/Navigator.tsx

@@ -1,10 +1,12 @@
 import qs from 'qs'
-import React, { memo, useEffect, useMemo, useState } from 'react'
+import React, { memo, useEffect, useMemo, useRef } from 'react'
 import { HashRouter, useLocation, useHistory, matchPath } from 'react-router-dom'
 import { CSSTransition, TransitionGroup } from 'react-transition-group'
 import { RecoilRoot, useRecoilState } from 'recoil'
 import styled from '@emotion/styled'
 
+import { NavigatorOptionsProvider, useNavigatorOptions } from './contexts'
+import { NavigatorTheme } from '../types'
 import {
   AtomScreens,
   AtomScreenInstances,
@@ -13,11 +15,8 @@ import {
   screenInstancePromises,
 } from './atoms'
 import { Card } from './components'
-import { NavigatorOptionsProvider, useNavigatorOptions } from './contexts'
-import { NavigatorTheme } from '../types'
 
 const DEFAULT_CUPERTINO_ANIMATION_DURATION = 350
-const DEFAULT_WEB_ANIMATION_DURATION = 270
 const DEFAULT_ANDROID_ANIMATION_DURATION = 270
 
 /**
@@ -56,17 +55,15 @@ const Navigator: React.FC<NavigatorProps> = (props) => {
   let h = (
     <NavigatorOptionsProvider
       value={{
-        theme: props.theme ?? 'Web',
+        theme: props.theme ?? 'Android',
         animationDuration:
           props.animationDuration ??
           (() => {
-            switch (props.theme ?? 'Web') {
+            switch (props.theme ?? 'Android') {
               case 'Cupertino':
                 return DEFAULT_CUPERTINO_ANIMATION_DURATION
               case 'Android':
                 return DEFAULT_ANDROID_ANIMATION_DURATION
-              case 'Web':
-                return DEFAULT_WEB_ANIMATION_DURATION
             }
           })(),
       }}>
@@ -245,7 +242,7 @@ const NavigatorScreens: React.FC<NavigatorProps> = (props) => {
         {props.children}
         <TransitionGroup>
           {screenInstances.map((screenInstance, index) => (
-            <Transition key={index} screenInstance={screenInstance} index={index} onClose={onClose} />
+            <Transition key={index} screenInstance={screenInstance} screenInstanceIndex={index} onClose={onClose} />
           ))}
         </TransitionGroup>
       </Root>
@@ -264,50 +261,33 @@ const Root = styled.div`
 
 interface TransitionProps {
   screenInstance: ScreenInstance
-  index: number
+  screenInstanceIndex: number
   onClose: () => void
 }
 const Transition: React.FC<TransitionProps> = memo((props) => {
   const navigatorOptions = useNavigatorOptions()
 
-  type TransitionState = 'enter-active' | 'enter-done' | 'exit-active' | 'exit-done'
-
-  const [transitionState, setTransitionState] = useState<TransitionState | null>(null)
   const [screens] = useRecoilState(AtomScreens)
   const [screenInstancePointer] = useRecoilState(AtomScreenInstancePointer)
 
+  const nodeRef = useRef<HTMLDivElement>(null)
+
   const { Component } = screens[props.screenInstance.screenId]
 
   return (
     <CSSTransition
       key={props.screenInstance.id}
+      nodeRef={nodeRef}
       timeout={navigatorOptions.animationDuration}
-      in={props.index <= screenInstancePointer}
-      unmountOnExit
-      onEnter={() => {
-        setTimeout(() => {
-          setTransitionState('enter-active')
-        }, 70)
-      }}
-      onEntered={() => {
-        setTransitionState('enter-done')
-      }}
-      onExit={() => {
-        setTransitionState('exit-active')
-      }}
-      onExited={() => {
-        setTransitionState('exit-done')
-      }}>
+      in={props.screenInstanceIndex <= screenInstancePointer}
+      unmountOnExit>
       <Card
+        nodeRef={nodeRef}
         screenPath={screens[props.screenInstance.screenId].path}
         screenInstanceId={props.screenInstance.id}
-        isRoot={props.index === 0}
-        isTop={props.index === screenInstancePointer}
-        onClose={props.onClose}
-        enterActive={transitionState === 'enter-active'}
-        enterDone={transitionState === 'enter-done'}
-        exitActive={transitionState === 'exit-active'}
-        exitDone={transitionState === 'exit-done'}>
+        isRoot={props.screenInstanceIndex === 0}
+        isTop={props.screenInstanceIndex === screenInstancePointer}
+        onClose={props.onClose}>
         <Component screenInstanceId={props.screenInstance.id} />
       </Card>
     </CSSTransition>