diff --git a/src/ui/components/ErrorBoundary.js b/src/ui/components/ErrorBoundary.js
index 38c3ed15d..d895558da 100644
--- a/src/ui/components/ErrorBoundary.js
+++ b/src/ui/components/ErrorBoundary.js
@@ -9,7 +9,7 @@ import ErrorBlock from './ErrorBlock.js';
 import {Component} from 'react';
 import Heading from './Heading.js';
 import Button from './Button.js';
-import View from './View.js';
+import View from './View.tsx';
 import styled from '../styled/index.js';
 
 const ErrorBoundaryContainer = styled(View)({
diff --git a/src/ui/components/FlexBox.js b/src/ui/components/FlexBox.js
index 1353d98b7..0d00933e1 100644
--- a/src/ui/components/FlexBox.js
+++ b/src/ui/components/FlexBox.js
@@ -5,7 +5,7 @@
  * @format
  */
 
-import View from './View.js';
+import View from './View.tsx';
 import styled from '../styled/index.js';
 
 type Props = {
diff --git a/src/ui/components/FlexCenter.js b/src/ui/components/FlexCenter.js
index f4c99dd11..285c34167 100644
--- a/src/ui/components/FlexCenter.js
+++ b/src/ui/components/FlexCenter.js
@@ -5,7 +5,7 @@
  * @format
  */
 
-import View from './View.js';
+import View from './View.tsx';
 import styled from '../styled/index.js';
 
 /**
diff --git a/src/ui/components/View.js b/src/ui/components/View.tsx
similarity index 71%
rename from src/ui/components/View.js
rename to src/ui/components/View.tsx
index c04e94d81..da9cea7de 100644
--- a/src/ui/components/View.js
+++ b/src/ui/components/View.tsx
@@ -5,9 +5,14 @@
  * @format
  */
 
-import styled from '../styled/index.js';
+import styled from 'react-emotion';
 
-const View = styled('div')(props => ({
+type Props = {
+  grow?: boolean;
+  scrollable?: boolean;
+};
+
+const View = styled('div')((props: Props) => ({
   height: props.grow ? '100%' : 'auto',
   overflow: props.scrollable ? 'auto' : 'visible',
   position: 'relative',
diff --git a/src/ui/components/VirtualList.js b/src/ui/components/VirtualList.js
index 924ee761f..8e8a2eb74 100644
--- a/src/ui/components/VirtualList.js
+++ b/src/ui/components/VirtualList.js
@@ -7,7 +7,7 @@
 
 import FlexColumn from './FlexColumn.js';
 import {Component} from 'react';
-import View from './View.js';
+import View from './View.tsx';
 import styled from '../styled/index.js';
 
 const Inner = styled(FlexColumn)(({height}) => ({
diff --git a/src/ui/index.js b/src/ui/index.js
index 6cdc28bd1..cb56ec2b1 100644
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -112,7 +112,7 @@ export {
 } from './components/desktop-toolbar.tsx';
 
 // utility elements
-export {default as View} from './components/View.js';
+export {default as View} from './components/View.tsx';
 export {default as ViewWithSize} from './components/ViewWithSize.js';
 export {default as Block} from './components/Block.js';
 export {default as FocusableBox} from './components/FocusableBox.js';