Step 6.5: Animate route switching

package.json

@@ -27,6 +27,7 @@
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-router-dom": "5.2.0",
+    "react-router-transition": "2.0.0",
     "react-scripts": "3.4.1",
     "styled-components": "5.1.0",
     "typescript": "3.9.3"

src/App.tsx

@@ -3,15 +3,15 @@ import {
   BrowserRouter,
   Route,
   Redirect,
-  Switch,
   RouteComponentProps,
 } from 'react-router-dom';
 import ChatRoomScreen from './components/ChatRoomScreen';
 import ChatsListScreen from './components/ChatsListScreen';
+import AnimatedSwitch from './components/AnimatedSwitch';
 
 const App: React.FC = () => (
   <BrowserRouter>
-    <Switch>
+    <AnimatedSwitch>
       <Route exact path="/chats" component={ChatsListScreen} />
 
       <Route
@@ -21,7 +21,7 @@ const App: React.FC = () => (
           <ChatRoomScreen chatId={match.params.chatId} />
         )}
       />
-    </Switch>
+    </AnimatedSwitch>
     <Route exact path="/" render={redirectToChats} />
   </BrowserRouter>
 );

src/components/AnimatedSwitch.tsx

@@ -0,0 +1,38 @@
+import { Switch } from 'react-router-dom';
+import { AnimatedSwitch, spring } from 'react-router-transition';
+import styled from 'styled-components';
+
+// A workaround to make test pass
+const SwitchComponent =
+  process.env.NODE_ENV === 'test' ? Switch : AnimatedSwitch;
+
+const glide = (val: number) =>
+  spring(val, {
+    stiffness: 174,
+    damping: 24,
+  });
+
+const mapStyles = (styles: any) => ({
+  transform: `translateX(${styles.offset}%)`,
+});
+
+const MyAnimatedSwitch = styled(SwitchComponent).attrs(() => ({
+  atEnter: { offset: 100 },
+  atLeave: { offset: glide(-100) },
+  atActive: { offset: glide(0) },
+  mapStyles,
+}))`
+  position: relative;
+  overflow: hidden;
+  height: 100vh;
+  width: 100vw;
+
+  > div {
+    position: absolute;
+    overflow: hidden;
+    height: 100vh;
+    width: 100vw;
+  }
+`;
+
+export default MyAnimatedSwitch;

src/react-app-env.d.ts

@@ -1 +1,3 @@
 /// <reference types="react-scripts" />
+
+declare module 'react-router-transition';