diff --git a/.prettierignore b/.prettierignore
index 81cc5d99..fc8b2194 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -2,4 +2,4 @@ coverage
 dist
 node_modules
 packages/**/vendor/*
-packages/examples
+packages/examples/.next
diff --git a/babel.config.js b/babel.config.js
index 0b310a53..a1b505c2 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,4 +1,4 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
 
   return {
diff --git a/package.json b/package.json
index 88c5154b..2e595862 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
     "jest-canvas-mock": "^2.3.1",
     "lint-staged": "^9.4.2",
     "npm-run-all": "^4.1.3",
-    "prettier": "^1.18.2",
+    "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-test-renderer": "^17.0.1"
@@ -82,7 +82,8 @@
   },
   "prettier": {
     "printWidth": 100,
-    "singleQuote": true
+    "singleQuote": true,
+    "trailingComma": "none"
   },
   "author": "Nicolas Gallagher",
   "license": "MIT"
diff --git a/packages/babel-plugin-react-native-web/src/index.js b/packages/babel-plugin-react-native-web/src/index.js
index e5199ee2..a501b6a9 100644
--- a/packages/babel-plugin-react-native-web/src/index.js
+++ b/packages/babel-plugin-react-native-web/src/index.js
@@ -1,6 +1,6 @@
 const moduleMap = require('./moduleMap');
 
-const isCommonJS = opts => opts.commonjs === true;
+const isCommonJS = (opts) => opts.commonjs === true;
 
 const getDistLocation = (importName, opts) => {
   const format = isCommonJS(opts) ? 'cjs/' : '';
@@ -33,7 +33,7 @@ const isReactNativeModule = ({ source, specifiers }) =>
   (source.value === 'react-native' || source.value === 'react-native-web') &&
   specifiers.length;
 
-module.exports = function({ types: t }) {
+module.exports = function ({ types: t }) {
   return {
     name: 'Rewrite react-native to react-native-web',
     visitor: {
@@ -41,7 +41,7 @@ module.exports = function({ types: t }) {
         const { specifiers } = path.node;
         if (isReactNativeModule(path.node)) {
           const imports = specifiers
-            .map(specifier => {
+            .map((specifier) => {
               if (t.isImportSpecifier(specifier)) {
                 const importName = specifier.imported.name;
                 const distLocation = getDistLocation(importName, state.opts);
@@ -67,7 +67,7 @@ module.exports = function({ types: t }) {
         const { specifiers } = path.node;
         if (isReactNativeModule(path.node)) {
           const exports = specifiers
-            .map(specifier => {
+            .map((specifier) => {
               if (t.isExportSpecifier(specifier)) {
                 const exportName = specifier.exported.name;
                 const localName = specifier.local.name;
@@ -97,7 +97,7 @@ module.exports = function({ types: t }) {
           const { id } = path.node.declarations[0];
           if (t.isObjectPattern(id)) {
             const imports = id.properties
-              .map(identifier => {
+              .map((identifier) => {
                 const distLocation = getDistLocation(identifier.key.name, state.opts);
                 if (distLocation) {
                   return t.variableDeclaration(path.node.kind, [
diff --git a/packages/benchmarks/src/app/App.js b/packages/benchmarks/src/app/App.js
index 90308caa..4af15943 100644
--- a/packages/benchmarks/src/app/App.js
+++ b/packages/benchmarks/src/app/App.js
@@ -45,7 +45,7 @@ export default class App extends Component {
                   selectedValue={currentLibraryName}
                   style={styles.picker}
                 >
-                  {Object.keys(tests[currentBenchmarkName]).map(libraryName => (
+                  {Object.keys(tests[currentBenchmarkName]).map((libraryName) => (
                     <Picker.Item key={libraryName} label={libraryName} value={libraryName} />
                   ))}
                 </Picker>
@@ -60,7 +60,7 @@ export default class App extends Component {
                   selectedValue={currentBenchmarkName}
                   style={styles.picker}
                 >
-                  {Object.keys(tests).map(test => (
+                  {Object.keys(tests).map((test) => (
                     <Picker.Item key={test} label={test} value={test} />
                   ))}
                 </Picker>
@@ -156,11 +156,11 @@ export default class App extends Component {
     );
   }
 
-  _handleChangeBenchmark = value => {
+  _handleChangeBenchmark = (value) => {
     this.setState(() => ({ currentBenchmarkName: value }));
   };
 
-  _handleChangeLibrary = value => {
+  _handleChangeLibrary = (value) => {
     this.setState(() => ({ currentLibraryName: value }));
   };
 
@@ -187,9 +187,9 @@ export default class App extends Component {
     }
   };
 
-  _createHandleComplete = ({ benchmarkName, libraryName, sampleCount }) => results => {
+  _createHandleComplete = ({ benchmarkName, libraryName, sampleCount }) => (results) => {
     this.setState(
-      state => ({
+      (state) => ({
         results: state.results.concat([
           {
             ...results,
@@ -210,15 +210,15 @@ export default class App extends Component {
     this.setState(() => ({ results: [] }));
   };
 
-  _setBenchRef = ref => {
+  _setBenchRef = (ref) => {
     this._benchmarkRef = ref;
   };
 
-  _setBenchWrapperRef = ref => {
+  _setBenchWrapperRef = (ref) => {
     this._benchWrapperRef = ref;
   };
 
-  _setScrollRef = ref => {
+  _setScrollRef = (ref) => {
     this._scrollRef = ref;
   };
 
diff --git a/packages/benchmarks/src/app/Benchmark/index.js b/packages/benchmarks/src/app/Benchmark/index.js
index ced2d228..1abe72ff 100644
--- a/packages/benchmarks/src/app/Benchmark/index.js
+++ b/packages/benchmarks/src/app/Benchmark/index.js
@@ -119,7 +119,7 @@ export default class Benchmark extends Component<BenchmarkPropsType, BenchmarkSt
 
   componentWillReceiveProps(nextProps: BenchmarkPropsType) {
     if (nextProps) {
-      this.setState(state => ({ componentProps: nextProps.getComponentProps(state.cycle) }));
+      this.setState((state) => ({ componentProps: nextProps.getComponentProps(state.cycle) }));
     }
   }
 
diff --git a/packages/benchmarks/src/app/Icons.js b/packages/benchmarks/src/app/Icons.js
index 05b66406..a5fb9e99 100644
--- a/packages/benchmarks/src/app/Icons.js
+++ b/packages/benchmarks/src/app/Icons.js
@@ -13,15 +13,12 @@ const styles = StyleSheet.create({
   }
 });
 
-const createIcon = children => {
-  const Icon = props =>
+const createIcon = (children) => {
+  const Icon = (props) =>
     createElement(
       'svg',
       {
-        style: StyleSheet.compose(
-          styles.root,
-          props.style
-        ),
+        style: StyleSheet.compose(styles.root, props.style),
         width: 24,
         height: 24,
         viewBox: '0 0 24 24'
diff --git a/packages/benchmarks/src/app/theme.js b/packages/benchmarks/src/app/theme.js
index fb21b72a..f1b7416a 100644
--- a/packages/benchmarks/src/app/theme.js
+++ b/packages/benchmarks/src/app/theme.js
@@ -4,7 +4,7 @@ import { Dimensions, Platform } from 'react-native';
 const baseFontSize = 14;
 const baseUnit = 1.3125;
 
-const createPlatformLength = multiplier =>
+const createPlatformLength = (multiplier) =>
   Platform.select({ web: `${multiplier}rem`, default: multiplier * baseFontSize });
 
 /**
@@ -87,7 +87,7 @@ export const spaces = {
 if (Platform.OS === 'web' && canUseDOM) {
   const { medium, large } = breakpoints;
   const htmlElement = document.documentElement;
-  const setFontSize = width => {
+  const setFontSize = (width) => {
     const fontSize = width > medium ? (width > large ? '18px' : '17px') : '16px';
     if (htmlElement) {
       htmlElement.style.fontSize = fontSize;
@@ -95,7 +95,7 @@ if (Platform.OS === 'web' && canUseDOM) {
   };
 
   setFontSize(Dimensions.get('window').width);
-  Dimensions.addEventListener('change', dimensions => {
+  Dimensions.addEventListener('change', (dimensions) => {
     setFontSize(dimensions.window.width);
   });
 }
diff --git a/packages/benchmarks/src/impl.js b/packages/benchmarks/src/impl.js
index 36f367f0..b926c25f 100644
--- a/packages/benchmarks/src/impl.js
+++ b/packages/benchmarks/src/impl.js
@@ -21,7 +21,7 @@ type ImplementationType = {
 };
 
 const toImplementations = (context: Object): Array<ImplementationType> =>
-  context.keys().map(path => {
+  context.keys().map((path) => {
     const components = context(path).default;
     const name = path.split('/')[1];
     const version = dependencies[name] || '';
diff --git a/packages/benchmarks/src/implementations/inline-styles/View.js b/packages/benchmarks/src/implementations/inline-styles/View.js
index 8b676e65..96ff0dba 100644
--- a/packages/benchmarks/src/implementations/inline-styles/View.js
+++ b/packages/benchmarks/src/implementations/inline-styles/View.js
@@ -11,15 +11,7 @@ const compose = (s1, s2) => {
 class View extends React.Component {
   render() {
     const { style, ...other } = this.props;
-    return (
-      <div
-        {...other}
-        style={compose(
-          viewStyle,
-          style
-        )}
-      />
-    );
+    return <div {...other} style={compose(viewStyle, style)} />;
   }
 }
 
diff --git a/packages/benchmarks/src/implementations/styled-components/Box.js b/packages/benchmarks/src/implementations/styled-components/Box.js
index 07ce5f29..97300fca 100644
--- a/packages/benchmarks/src/implementations/styled-components/Box.js
+++ b/packages/benchmarks/src/implementations/styled-components/Box.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import View from './View';
 
-const getColor = color => {
+const getColor = (color) => {
   switch (color) {
     case 0:
       return '#14171A';
@@ -22,10 +22,10 @@ const getColor = color => {
 
 const Box = styled(View)`
   align-self: flex-start;
-  flex-direction: ${props => (props.layout === 'column' ? 'column' : 'row')};
-  padding: ${props => (props.outer ? '4px' : '0')};
-  ${props => props.fixed && 'height:6px;'} ${props =>
-  props.fixed && 'width:6px;'} background-color: ${props => getColor(props.color)};
+  flex-direction: ${(props) => (props.layout === 'column' ? 'column' : 'row')};
+  padding: ${(props) => (props.outer ? '4px' : '0')};
+  ${(props) => props.fixed && 'height:6px;'} ${(props) =>
+    props.fixed && 'width:6px;'} background-color: ${(props) => getColor(props.color)};
 `;
 
 export default Box;
diff --git a/packages/benchmarks/src/implementations/styled-components/Dot.js b/packages/benchmarks/src/implementations/styled-components/Dot.js
index 41546759..108a0cc1 100644
--- a/packages/benchmarks/src/implementations/styled-components/Dot.js
+++ b/packages/benchmarks/src/implementations/styled-components/Dot.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import View from './View';
 
-const Dot = styled(View).attrs(props => ({
+const Dot = styled(View).attrs((props) => ({
   style: {
     marginLeft: `${props.x}px`,
     marginTop: `${props.y}px`,
diff --git a/packages/benchmarks/src/implementations/styled-jsx/Box.js b/packages/benchmarks/src/implementations/styled-jsx/Box.js
index c999195e..3da0f041 100644
--- a/packages/benchmarks/src/implementations/styled-jsx/Box.js
+++ b/packages/benchmarks/src/implementations/styled-jsx/Box.js
@@ -2,7 +2,7 @@ import classnames from 'classnames';
 import React from 'react';
 import View from './View';
 
-const getColor = color => {
+const getColor = (color) => {
   switch (color) {
     case 0:
       return '#14171A';
@@ -21,7 +21,7 @@ const getColor = color => {
   }
 };
 
-const Box = props => {
+const Box = (props) => {
   const { className, children: styles } = (
     <scope className={classnames('Box', props.fixed && 'fixed')}>
       <style jsx>{`
diff --git a/packages/benchmarks/src/implementations/styled-jsx/Dot.js b/packages/benchmarks/src/implementations/styled-jsx/Dot.js
index 0c3c4418..569efa22 100644
--- a/packages/benchmarks/src/implementations/styled-jsx/Dot.js
+++ b/packages/benchmarks/src/implementations/styled-jsx/Dot.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import View from './View';
 
-const Dot = props => {
+const Dot = (props) => {
   const { className, children: styles } = (
     <scope className="Dot">
       <style jsx>{`
diff --git a/packages/benchmarks/src/index.js b/packages/benchmarks/src/index.js
index 403b5251..279f247e 100644
--- a/packages/benchmarks/src/index.js
+++ b/packages/benchmarks/src/index.js
@@ -10,7 +10,7 @@ import ReactDOM from 'react-dom';
 const implementations = impl;
 const packageNames = Object.keys(implementations);
 
-const createTestBlock = fn => {
+const createTestBlock = (fn) => {
   return packageNames.reduce((testSetups, packageName) => {
     const { name, components, version } = implementations[packageName];
     const { Component, getComponentProps, sampleCount, Provider, benchmarkType } = fn(components);
@@ -29,21 +29,21 @@ const createTestBlock = fn => {
 };
 
 const tests = {
-  'Mount deep tree': createTestBlock(components => ({
+  'Mount deep tree': createTestBlock((components) => ({
     benchmarkType: 'mount',
     Component: Tree,
     getComponentProps: () => ({ breadth: 2, components, depth: 7, id: 0, wrap: 1 }),
     Provider: components.Provider,
     sampleCount: 50
   })),
-  'Mount wide tree': createTestBlock(components => ({
+  'Mount wide tree': createTestBlock((components) => ({
     benchmarkType: 'mount',
     Component: Tree,
     getComponentProps: () => ({ breadth: 6, components, depth: 3, id: 0, wrap: 2 }),
     Provider: components.Provider,
     sampleCount: 50
   })),
-  'Update dynamic styles': createTestBlock(components => ({
+  'Update dynamic styles': createTestBlock((components) => ({
     benchmarkType: 'update',
     Component: SierpinskiTriangle,
     getComponentProps: ({ cycle }) => {
@@ -52,7 +52,7 @@ const tests = {
     Provider: components.Provider,
     sampleCount: 100
   })),
-  'Mount text tree': createTestBlock(components => ({
+  'Mount text tree': createTestBlock((components) => ({
     benchmarkType: 'mount',
     Component: TextTree,
     getComponentProps: () => ({ breadth: 6, components, depth: 3, id: 0, wrap: 2 }),
diff --git a/packages/docs/.eleventy.js b/packages/docs/.eleventy.js
index 2ed72980..15df7cc4 100644
--- a/packages/docs/.eleventy.js
+++ b/packages/docs/.eleventy.js
@@ -20,11 +20,11 @@ const UglifyJS = require('uglify-es');
  * Add classes to markdown elements by default
  */
 function markdownitTagToClass(md, mapping = {}) {
-  const toArray = a => (Array.isArray(a) ? a : [a]);
-  const splitWithSpace = s => (s ? s.split(' ') : []);
+  const toArray = (a) => (Array.isArray(a) ? a : [a]);
+  const splitWithSpace = (s) => (s ? s.split(' ') : []);
 
   function parseTokens(tokens) {
-    tokens.forEach(token => {
+    tokens.forEach((token) => {
       if (/(_open$|hr|image)/.test(token.type) && mapping[token.tag]) {
         const orig = splitWithSpace(token.attrGet('class'));
         const addition = toArray(mapping[token.tag]);
@@ -35,10 +35,10 @@ function markdownitTagToClass(md, mapping = {}) {
       }
     });
   }
-  md.core.ruler.push('markdownit-tag-to-class', state => parseTokens(state.tokens));
+  md.core.ruler.push('markdownit-tag-to-class', (state) => parseTokens(state.tokens));
 }
 
-module.exports = function(eleventyConfig) {
+module.exports = function (eleventyConfig) {
   // Merge data instead of overriding
   // https://www.11ty.dev/docs/data-deep-merge/
   eleventyConfig.setDataDeepMerge(true);
@@ -55,7 +55,7 @@ module.exports = function(eleventyConfig) {
   // TRANSFORMS -----
 
   // Minify HTML output
-  eleventyConfig.addTransform('htmlmin', function(content, outputPath) {
+  eleventyConfig.addTransform('htmlmin', function (content, outputPath) {
     if (typeof outputPath === 'string' && outputPath.includes('.html')) {
       return htmlmin.minify(content, {
         useShortDoctype: true,
@@ -69,20 +69,20 @@ module.exports = function(eleventyConfig) {
   // FILTERS -----
 
   // Date formatting (human readable)
-  eleventyConfig.addFilter('readableDate', dateObj => {
+  eleventyConfig.addFilter('readableDate', (dateObj) => {
     const options = { month: 'long', day: 'numeric', year: 'numeric' };
     return new Intl.DateTimeFormat('en-US', options).format(dateObj);
   });
   // Date formatting (machine readable)
-  eleventyConfig.addFilter('machineDate', dateObj => {
+  eleventyConfig.addFilter('machineDate', (dateObj) => {
     return dateObj.toISOString();
   });
   // Minify CSS
-  eleventyConfig.addFilter('cssmin', function(code) {
+  eleventyConfig.addFilter('cssmin', function (code) {
     return csso.minify(code).css;
   });
   // Minify JS
-  eleventyConfig.addFilter('jsmin', function(code) {
+  eleventyConfig.addFilter('jsmin', function (code) {
     const minified = UglifyJS.minify(code);
     if (minified.error) {
       console.log('UglifyJS error: ', minified.error);
@@ -93,7 +93,7 @@ module.exports = function(eleventyConfig) {
 
   // SHORTCODES -----
 
-  eleventyConfig.addShortcode('version', function() {
+  eleventyConfig.addShortcode('version', function () {
     return String(Date.now());
   });
 
@@ -104,10 +104,10 @@ module.exports = function(eleventyConfig) {
   // COLLECTIONS -----
 
   // Collection of items for navigation
-  eleventyConfig.addCollection('nav', function(collection) {
+  eleventyConfig.addCollection('nav', function (collection) {
     return collection
       .getAll()
-      .filter(function(item) {
+      .filter(function (item) {
         return 'eleventyNavigation' in item.data;
       })
       .sort((a, b) => {
@@ -165,7 +165,7 @@ module.exports = function(eleventyConfig) {
     .use(markdownTasks);
 
   // Custom emoji renderer
-  markdownLib.renderer.rules.emoji = function(token, idx) {
+  markdownLib.renderer.rules.emoji = function (token, idx) {
     return twemoji.parse(token[idx].content);
   };
 
diff --git a/packages/docs/src/includes/assets/inline.js b/packages/docs/src/includes/assets/inline.js
index ebd84e21..3a1ae14c 100644
--- a/packages/docs/src/includes/assets/inline.js
+++ b/packages/docs/src/includes/assets/inline.js
@@ -28,12 +28,12 @@ function setupNavigationDrawer() {
     showbtn.classList.remove('hidden');
     navopen = false;
   }
-  document.addEventListener('click', e => {
+  document.addEventListener('click', (e) => {
     if (navopen && !navigation.contains(e.target) && !showbtn.contains(e.target)) {
       closeNavigation();
     }
   });
-  document.addEventListener('keydown', e => {
+  document.addEventListener('keydown', (e) => {
     if (navopen && e.key === 'Escape') {
       closeNavigation();
     }
@@ -51,7 +51,7 @@ function setupNavigationScroll() {
     return;
   }
 
-  window.addEventListener('unload', function() {
+  window.addEventListener('unload', function () {
     const navScrollPosition = scroller.scrollTop;
     localStorage.setItem(navScrollPositionKey, navScrollPosition);
   });
@@ -61,7 +61,7 @@ function setupNavigationScroll() {
   }
 }
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
   setupNavigationDrawer();
   setupNavigationScroll();
 });
diff --git a/packages/dom-event-testing-library/src/__tests__/index-test.js b/packages/dom-event-testing-library/src/__tests__/index-test.js
index 456a92ff..faa040e7 100644
--- a/packages/dom-event-testing-library/src/__tests__/index-test.js
+++ b/packages/dom-event-testing-library/src/__tests__/index-test.js
@@ -21,12 +21,12 @@ import {
 /**
  * Unit test helpers
  */
-describeWithPointerEvent('describeWithPointerEvent', pointerEvent => {
+describeWithPointerEvent('describeWithPointerEvent', (pointerEvent) => {
   test('provides boolean to tests', () => {
     expect(pointerEvent).toMatchSnapshot();
   });
 
-  testWithPointerType('testWithPointerType', pointerType => {
+  testWithPointerType('testWithPointerType', (pointerType) => {
     expect(pointerType).toMatchSnapshot();
   });
 });
@@ -83,7 +83,7 @@ describe('createEventTarget', () => {
   describe('.blur()', () => {
     test('default', () => {
       const target = createEventTarget(node);
-      node.addEventListener('blur', e => {
+      node.addEventListener('blur', (e) => {
         expect(e.relatedTarget).toBeNull();
       });
       target.blur();
@@ -92,7 +92,7 @@ describe('createEventTarget', () => {
     test('custom payload', () => {
       const target = createEventTarget(node);
       const relatedTarget = document.createElement('div');
-      node.addEventListener('blur', e => {
+      node.addEventListener('blur', (e) => {
         expect(e.relatedTarget).toBe(relatedTarget);
       });
       target.blur({ relatedTarget });
@@ -102,7 +102,7 @@ describe('createEventTarget', () => {
   describe('.click()', () => {
     test('default', () => {
       const target = createEventTarget(node);
-      node.addEventListener('click', e => {
+      node.addEventListener('click', (e) => {
         expect(e.altKey).toEqual(false);
         expect(e.button).toEqual(0);
         expect(e.buttons).toEqual(0);
@@ -129,7 +129,7 @@ describe('createEventTarget', () => {
 
     test('custom payload', () => {
       const target = createEventTarget(node);
-      node.addEventListener('click', e => {
+      node.addEventListener('click', (e) => {
         expect(e.altKey).toEqual(true);
         expect(e.button).toEqual(1);
         expect(e.buttons).toEqual(4);
@@ -169,7 +169,7 @@ describe('createEventTarget', () => {
   describe('.focus()', () => {
     test('default', () => {
       const target = createEventTarget(node);
-      node.addEventListener('focus', e => {
+      node.addEventListener('focus', (e) => {
         expect(e.relatedTarget).toBeNull();
       });
       target.focus();
@@ -178,7 +178,7 @@ describe('createEventTarget', () => {
     test('custom payload', () => {
       const target = createEventTarget(node);
       const relatedTarget = document.createElement('div');
-      node.addEventListener('focus', e => {
+      node.addEventListener('focus', (e) => {
         expect(e.relatedTarget).toBe(relatedTarget);
       });
       target.focus({ relatedTarget });
@@ -188,7 +188,7 @@ describe('createEventTarget', () => {
   describe('.keydown()', () => {
     test('default', () => {
       const target = createEventTarget(node);
-      node.addEventListener('keydown', e => {
+      node.addEventListener('keydown', (e) => {
         expect(e.altKey).toEqual(false);
         expect(e.ctrlKey).toEqual(false);
         expect(typeof e.getModifierState).toEqual('function');
@@ -203,7 +203,7 @@ describe('createEventTarget', () => {
 
     test('custom payload', () => {
       const target = createEventTarget(node);
-      node.addEventListener('keydown', e => {
+      node.addEventListener('keydown', (e) => {
         expect(e.altKey).toEqual(true);
         expect(e.ctrlKey).toEqual(true);
         expect(e.isComposing).toEqual(true);
@@ -225,7 +225,7 @@ describe('createEventTarget', () => {
   describe('.keyup()', () => {
     test('default', () => {
       const target = createEventTarget(node);
-      node.addEventListener('keyup', e => {
+      node.addEventListener('keyup', (e) => {
         expect(e.altKey).toEqual(false);
         expect(e.ctrlKey).toEqual(false);
         expect(typeof e.getModifierState).toEqual('function');
@@ -240,7 +240,7 @@ describe('createEventTarget', () => {
 
     test('custom payload', () => {
       const target = createEventTarget(node);
-      node.addEventListener('keyup', e => {
+      node.addEventListener('keyup', (e) => {
         expect(e.altKey).toEqual(true);
         expect(e.ctrlKey).toEqual(true);
         expect(e.isComposing).toEqual(true);
@@ -262,7 +262,7 @@ describe('createEventTarget', () => {
   describe('.scroll()', () => {
     test('default', () => {
       const target = createEventTarget(node);
-      node.addEventListener('scroll', e => {
+      node.addEventListener('scroll', (e) => {
         expect(e.type).toEqual('scroll');
       });
       target.scroll();
@@ -272,7 +272,7 @@ describe('createEventTarget', () => {
   describe('.virtualclick()', () => {
     test('default', () => {
       const target = createEventTarget(node);
-      node.addEventListener('click', e => {
+      node.addEventListener('click', (e) => {
         expect(e.altKey).toEqual(false);
         expect(e.button).toEqual(0);
         expect(e.buttons).toEqual(0);
@@ -299,7 +299,7 @@ describe('createEventTarget', () => {
 
     test('custom payload', () => {
       const target = createEventTarget(node);
-      node.addEventListener('click', e => {
+      node.addEventListener('click', (e) => {
         // expect most of the custom payload to be ignored
         expect(e.altKey).toEqual(true);
         expect(e.button).toEqual(1);
diff --git a/packages/dom-event-testing-library/src/createEvent.js b/packages/dom-event-testing-library/src/createEvent.js
index c158829a..b8d90eb4 100644
--- a/packages/dom-event-testing-library/src/createEvent.js
+++ b/packages/dom-event-testing-library/src/createEvent.js
@@ -230,12 +230,12 @@ export default function createEvent(type, init) {
   event.initEvent(type, bubbles, cancelable);
 
   if (data != null) {
-    Object.keys(data).forEach(key => {
+    Object.keys(data).forEach((key) => {
       const value = data[key];
       // Ensure the value of 'defaultPrevented' is updated if 'preventDefault' is mocked.
       // The property is marked as 'configurable' to allow mocking.
       if (key === 'preventDefault' && typeof value === 'function') {
-        const preventDefault = function() {
+        const preventDefault = function () {
           value();
           Object.defineProperty(this, 'defaultPrevented', { value: true });
         };
diff --git a/packages/dom-event-testing-library/src/domEnvironment.js b/packages/dom-event-testing-library/src/domEnvironment.js
index 39f3efe9..5d19dab7 100644
--- a/packages/dom-event-testing-library/src/domEnvironment.js
+++ b/packages/dom-event-testing-library/src/domEnvironment.js
@@ -13,14 +13,14 @@
  * Change environment support for PointerEvent.
  */
 
-const emptyFunction = function() {};
+const emptyFunction = function () {};
 
 export function hasPointerEvent() {
   return global != null && global.PointerEvent != null;
 }
 
 export function setPointerEvent(bool) {
-  const pointerCaptureFn = name => id => {
+  const pointerCaptureFn = (name) => (id) => {
     if (typeof id !== 'number') {
       if (process.env.NODE_DEV !== 'production') {
         console.error('A pointerId must be passed to "%s"', name);
diff --git a/packages/dom-event-testing-library/src/domEventSequences.js b/packages/dom-event-testing-library/src/domEventSequences.js
index ac6093a4..fc8e910e 100644
--- a/packages/dom-event-testing-library/src/domEventSequences.js
+++ b/packages/dom-event-testing-library/src/domEventSequences.js
@@ -106,7 +106,7 @@ function getPointerType(payload) {
  */
 
 export function contextmenu(target, defaultPayload) {
-  const dispatch = arg => target.dispatchEvent(arg);
+  const dispatch = (arg) => target.dispatchEvent(arg);
   const pointerType = getPointerType(defaultPayload);
 
   const {
@@ -173,7 +173,7 @@ export function contextmenu(target, defaultPayload) {
 }
 
 export function focus(target, defaultPayload = {}) {
-  const dispatch = arg => target.dispatchEvent(arg);
+  const dispatch = (arg) => target.dispatchEvent(arg);
   const { relatedTarget, ...payload } = defaultPayload;
   const blurPayload = { ...payload, relatedTarget: target };
   const focusPayload = { ...payload, relatedTarget };
@@ -188,7 +188,7 @@ export function focus(target, defaultPayload = {}) {
 }
 
 export function pointercancel(target, defaultPayload) {
-  const dispatchEvent = arg => target.dispatchEvent(arg);
+  const dispatchEvent = (arg) => target.dispatchEvent(arg);
   const pointerType = getPointerType(defaultPayload);
 
   const payload = {
@@ -211,7 +211,7 @@ export function pointercancel(target, defaultPayload) {
 }
 
 export function pointerdown(target, defaultPayload) {
-  const dispatch = arg => target.dispatchEvent(arg);
+  const dispatch = (arg) => target.dispatchEvent(arg);
   const pointerType = getPointerType(defaultPayload);
 
   const payload = {
@@ -251,7 +251,7 @@ export function pointerdown(target, defaultPayload) {
 }
 
 export function pointerover(target, defaultPayload) {
-  const dispatch = arg => target.dispatchEvent(arg);
+  const dispatch = (arg) => target.dispatchEvent(arg);
 
   const payload = {
     pointerId: defaultPointerId,
@@ -270,7 +270,7 @@ export function pointerover(target, defaultPayload) {
 }
 
 export function pointerout(target, defaultPayload) {
-  const dispatch = arg => target.dispatchEvent(arg);
+  const dispatch = (arg) => target.dispatchEvent(arg);
 
   const payload = {
     pointerId: defaultPointerId,
@@ -295,7 +295,7 @@ export function pointerout(target, defaultPayload) {
 
 // pointer is not down while moving
 export function pointerhover(target, defaultPayload) {
-  const dispatch = arg => target.dispatchEvent(arg);
+  const dispatch = (arg) => target.dispatchEvent(arg);
 
   const payload = {
     pointerId: defaultPointerId,
@@ -310,7 +310,7 @@ export function pointerhover(target, defaultPayload) {
 
 // pointer is down while moving
 export function pointermove(target, defaultPayload) {
-  const dispatch = arg => target.dispatchEvent(arg);
+  const dispatch = (arg) => target.dispatchEvent(arg);
   const pointerType = getPointerType(defaultPayload);
 
   const payload = {
@@ -344,7 +344,7 @@ export function pointermove(target, defaultPayload) {
 }
 
 export function pointerup(target, defaultPayload) {
-  const dispatch = arg => target.dispatchEvent(arg);
+  const dispatch = (arg) => target.dispatchEvent(arg);
   const pointerType = getPointerType(defaultPayload);
 
   const payload = {
diff --git a/packages/dom-event-testing-library/src/index.js b/packages/dom-event-testing-library/src/index.js
index a43aea1f..5681c898 100644
--- a/packages/dom-event-testing-library/src/index.js
+++ b/packages/dom-event-testing-library/src/index.js
@@ -13,7 +13,7 @@ import * as domEventSequences from './domEventSequences';
 import { hasPointerEvent, setPointerEvent, platform } from './domEnvironment';
 import { describeWithPointerEvent, testWithPointerType } from './testHelpers';
 
-const createEventTarget = node => ({
+const createEventTarget = (node) => ({
   node,
   /**
    * Simple events abstraction.
@@ -104,7 +104,7 @@ const createEventTarget = node => ({
    * Utilities
    */
   setBoundingClientRect({ x, y, width, height }) {
-    node.getBoundingClientRect = function() {
+    node.getBoundingClientRect = function () {
       return {
         width,
         height,
diff --git a/packages/dom-event-testing-library/src/testHelpers.js b/packages/dom-event-testing-library/src/testHelpers.js
index 29d48057..519e9811 100644
--- a/packages/dom-event-testing-library/src/testHelpers.js
+++ b/packages/dom-event-testing-library/src/testHelpers.js
@@ -18,7 +18,7 @@ export function describeWithPointerEvent(message, describeFn) {
     value    | name
     ${true}  | ${pointerEvent}
     ${false} | ${fallback}
-  `(`${message}: $name`, entry => {
+  `(`${message}: $name`, (entry) => {
     const hasPointerEvents = entry.value;
     setPointerEvent(hasPointerEvents);
     describeFn(hasPointerEvents);
@@ -27,7 +27,7 @@ export function describeWithPointerEvent(message, describeFn) {
 
 export function testWithPointerType(message, testFn) {
   const table = hasPointerEvent() ? ['mouse', 'touch', 'pen'] : ['mouse', 'touch'];
-  test.each(table)(`${message}: %s`, pointerType => {
+  test.each(table)(`${message}: %s`, (pointerType) => {
     testFn(pointerType);
   });
 }
diff --git a/packages/examples/next.config.js b/packages/examples/next.config.js
index 3200a073..7fcc1829 100644
--- a/packages/examples/next.config.js
+++ b/packages/examples/next.config.js
@@ -1,9 +1,10 @@
 const fs = require('fs');
 const path = require('path');
 
-const pages = fs.readdirSync(path.resolve(__dirname, 'pages'), { withFileTypes: true })
-    .filter((dirent) => dirent.isDirectory())
-    .map((dirent) => dirent.name);
+const pages = fs
+  .readdirSync(path.resolve(__dirname, 'pages'), { withFileTypes: true })
+  .filter((dirent) => dirent.isDirectory())
+  .map((dirent) => dirent.name);
 
 module.exports = {
   outDir: 'dist',
diff --git a/packages/examples/pages/activity-indicator/index.js b/packages/examples/pages/activity-indicator/index.js
index b6b493fc..4c478794 100644
--- a/packages/examples/pages/activity-indicator/index.js
+++ b/packages/examples/pages/activity-indicator/index.js
@@ -3,8 +3,8 @@ import React from 'react';
 import Example from '../../shared/example';
 
 export default function ActivityIndicatorPage() {
-  const [animating,setAnimating] = React.useState(true);
-  
+  const [animating, setAnimating] = React.useState(true);
+
   React.useEffect(() => {
     const interval = setInterval(() => {
       setAnimating(!animating);
diff --git a/packages/examples/pages/app-state/index.js b/packages/examples/pages/app-state/index.js
index ffbecc83..1b972ed0 100644
--- a/packages/examples/pages/app-state/index.js
+++ b/packages/examples/pages/app-state/index.js
@@ -25,7 +25,9 @@ export default function AppStatePage() {
 
   return (
     <Example title="AppState">
-      <Text>AppState.currentState: <Text style={{ fontWeight:'bold'}}>{state.currentState}</Text></Text>
+      <Text>
+        AppState.currentState: <Text style={{ fontWeight: 'bold' }}>{state.currentState}</Text>
+      </Text>
       <Text>Active count: {state.active}</Text>
       <Text>Background count: {state.background}</Text>
     </Example>
diff --git a/packages/examples/pages/button/index.js b/packages/examples/pages/button/index.js
index ceadf4bc..6b12cf52 100644
--- a/packages/examples/pages/button/index.js
+++ b/packages/examples/pages/button/index.js
@@ -5,7 +5,7 @@ import Example from '../../shared/example';
 const emptyFunction = () => {};
 
 function Divider() {
-  return <View style={styles.divider} />
+  return <View style={styles.divider} />;
 }
 
 export default function ButtonPage() {
diff --git a/packages/examples/pages/checkbox/index.js b/packages/examples/pages/checkbox/index.js
index 15848e0f..f12beeca 100644
--- a/packages/examples/pages/checkbox/index.js
+++ b/packages/examples/pages/checkbox/index.js
@@ -3,12 +3,12 @@ import React from 'react';
 import Example from '../../shared/example';
 
 function Divider() {
-  return <View style={styles.divider} />
+  return <View style={styles.divider} />;
 }
 
 export default function CheckboxPage() {
-  const [checked,setChecked] = React.useState(true);
-  
+  const [checked, setChecked] = React.useState(true);
+
   React.useEffect(() => {
     const interval = setInterval(() => {
       setChecked(!checked);
diff --git a/packages/examples/pages/clipboard/index.js b/packages/examples/pages/clipboard/index.js
index 0e8ed928..cb2f08c5 100644
--- a/packages/examples/pages/clipboard/index.js
+++ b/packages/examples/pages/clipboard/index.js
@@ -9,7 +9,7 @@ export default function ClipboardPage() {
   };
 
   return (
-    <Example title="Clipboard"w>
+    <Example title="Clipboard" w>
       <View style={styles.buttonBox}>
         <Button onPress={setString} title="Copy to clipboard" />
       </View>
diff --git a/packages/examples/pages/dimensions/index.js b/packages/examples/pages/dimensions/index.js
index d6bd9a87..9cc3c9d0 100644
--- a/packages/examples/pages/dimensions/index.js
+++ b/packages/examples/pages/dimensions/index.js
@@ -8,14 +8,14 @@ export default function DimensionsPage() {
 
   React.useEffect(() => {
     const handleChange = ({ screen, window: win }) => {
-      setScreen(screen)
+      setScreen(screen);
       setWindow(win);
-    }
+    };
 
     Dimensions.addEventListener('change', handleChange);
     return () => {
       Dimensions.removeEventListener('change', handleChange);
-    }
+    };
   }, [setScreen, setWindow]);
 
   return (
diff --git a/packages/examples/pages/i18n-manager/index.js b/packages/examples/pages/i18n-manager/index.js
index 89f60537..45c39a53 100644
--- a/packages/examples/pages/i18n-manager/index.js
+++ b/packages/examples/pages/i18n-manager/index.js
@@ -82,7 +82,7 @@ function withRTLState(Component) {
 
     render() {
       const isRTL = Platform === 'ios' ? this.state.isRTL : I18nManager.isRTL;
-      const setRTL = isRTL => this.setState({ isRTL: isRTL });
+      const setRTL = (isRTL) => this.setState({ isRTL: isRTL });
       return <Component isRTL={isRTL} setRTL={setRTL} />;
     }
   };
@@ -397,82 +397,80 @@ class LayoutRTLExample extends React.Component {
           Platform.OS !== 'android' ? { direction: this.state.isRTL ? 'rtl' : 'ltr' } : null
         ]}
       >
+        <Block title={'Current layout direction'}>
+          <View style={styles.directionBox}>
+            <Text style={styles.directionText}>
+              {this.state.isRTL ? 'Right-to-Left' : 'Left-to-Right'}
+            </Text>
+          </View>
+        </Block>
+        <Block title={'Quickly test RTL layout'}>
+          <View style={[styles.flexDirectionRow, styles.switchRow]}>
+            <Text style={{ fontWeight: 'bold' }}>forceRTL</Text>
+            <View>
+              <Switch onValueChange={this._onDirectionChange} value={this.state.isRTL} />
+            </View>
+          </View>
+          <View style={[styles.flexDirectionRow, styles.switchRow]}>
+            <Text style={{ fontWeight: 'bold' }}>swapLeftAndRightInRTL</Text>
+            <View>
+              <Switch
+                onValueChange={this._onSwapChange}
+                value={this.state.doLeftAndRightSwapInRTL}
+              />
+            </View>
+          </View>
+        </Block>
+        <TextAlignmentExample
+          description={'Depends on the text content.'}
+          style={styles.fontSizeSmall}
+          title={'Default text alignment'}
+        />
+        <TextAlignmentExample
+          style={[styles.fontSizeSmall, styles.textAlignLeft]}
+          title={'textAlign: "left"'}
+        />
+        <TextAlignmentExample
+          style={[styles.fontSizeSmall, styles.textAlignRight]}
+          title={'textAlign: "right"'}
+        />
+        <TextAlignmentExample
+          style={[styles.fontSizeSmall, styles.textAlignStart]}
+          title={'textAlign: "start"'}
+        />
+        <TextAlignmentExample
+          style={[styles.fontSizeSmall, styles.textAlignEnd]}
+          title={'textAlign: "end"'}
+        />
+        <PaddingExample />
+        <MarginExample />
+        <PositionExample />
+        <BorderColorExample />
+        <BorderWidthExample />
+        <BorderRadiiExample />
 
-          <Block title={'Current layout direction'}>
-            <View style={styles.directionBox}>
-              <Text style={styles.directionText}>
-                {this.state.isRTL ? 'Right-to-Left' : 'Left-to-Right'}
-              </Text>
-            </View>
-          </Block>
-          <Block title={'Quickly test RTL layout'}>
-            <View style={[styles.flexDirectionRow, styles.switchRow]}>
-              <Text style={{ fontWeight: 'bold' }}>forceRTL</Text>
-              <View>
-                <Switch onValueChange={this._onDirectionChange} value={this.state.isRTL} />
-              </View>
-            </View>
-            <View style={[styles.flexDirectionRow, styles.switchRow]}>
-              <Text style={{ fontWeight: 'bold' }}>swapLeftAndRightInRTL</Text>
-              <View>
-                <Switch
-                  onValueChange={this._onSwapChange}
-                  value={this.state.doLeftAndRightSwapInRTL}
-                />
-              </View>
-            </View>
-          </Block>
-          <TextAlignmentExample
-            description={'Depends on the text content.'}
-            style={styles.fontSizeSmall}
-            title={'Default text alignment'}
-          />
-          <TextAlignmentExample
-            style={[styles.fontSizeSmall, styles.textAlignLeft]}
-            title={'textAlign: "left"'}
-          />
-          <TextAlignmentExample
-            style={[styles.fontSizeSmall, styles.textAlignRight]}
-            title={'textAlign: "right"'}
-          />
-          <TextAlignmentExample
-            style={[styles.fontSizeSmall, styles.textAlignStart]}
-            title={'textAlign: "start"'}
-          />
-          <TextAlignmentExample
-            style={[styles.fontSizeSmall, styles.textAlignEnd]}
-            title={'textAlign: "end"'}
-          />
-          <PaddingExample />
-          <MarginExample />
-          <PositionExample />
-          <BorderColorExample />
-          <BorderWidthExample />
-          <BorderRadiiExample />
+        <Block title={'A simple list-item layout'}>
+          <View style={styles.list}>
+            <ListItem imageSource={{ uri: 'https://picsum.photos/130/130?image=222' }} />
+            <ListItem imageSource={{ uri: 'https://picsum.photos/130/130?image=250' }} />
+          </View>
+        </Block>
 
-          <Block title={'A simple list-item layout'}>
-            <View style={styles.list}>
-              <ListItem imageSource={{ uri: 'https://picsum.photos/130/130?image=222' }} />
-              <ListItem imageSource={{ uri: 'https://picsum.photos/130/130?image=250' }} />
+        <Block title={'Working with icons'}>
+          <View style={[styles.flexDirectionRow, { justifyContent: 'space-around' }]}>
+            <View style={{ alignItems: 'center' }}>
+              <Image source={iconSource} style={styles.image} />
+              <Text style={styles.fontSizeSmall}>No RTL flip</Text>
             </View>
-          </Block>
-
-          <Block title={'Working with icons'}>
-            <View style={[styles.flexDirectionRow, { justifyContent: 'space-around' }]}>
-              <View style={{ alignItems: 'center' }}>
-                <Image source={iconSource} style={styles.image} />
-                <Text style={styles.fontSizeSmall}>No RTL flip</Text>
-              </View>
-              <View style={{ alignItems: 'center' }}>
-                <Image
-                  source={iconSource}
-                  style={[styles.image, { transform: [{ scaleX: this.state.isRTL ? -1 : 1 }] }]}
-                />
-                <Text style={styles.fontSizeSmall}>RTL flip</Text>
-              </View>
+            <View style={{ alignItems: 'center' }}>
+              <Image
+                source={iconSource}
+                style={[styles.image, { transform: [{ scaleX: this.state.isRTL ? -1 : 1 }] }]}
+              />
+              <Text style={styles.fontSizeSmall}>RTL flip</Text>
             </View>
-          </Block>
-
+          </View>
+        </Block>
       </ScrollView>
     );
   }
diff --git a/packages/examples/pages/image-background/index.js b/packages/examples/pages/image-background/index.js
index 3948ff42..e3aa5b03 100644
--- a/packages/examples/pages/image-background/index.js
+++ b/packages/examples/pages/image-background/index.js
@@ -2,7 +2,8 @@ import React from 'react';
 import { ImageBackground, StyleSheet, Text } from 'react-native';
 import Example from '../../shared/example';
 
-const source = 'https://images.unsplash.com/photo-1481595357459-84468f6eeaac?dpr=1&auto=format&fit=crop&w=376&h=251&q=60&cs=tinysrgb';
+const source =
+  'https://images.unsplash.com/photo-1481595357459-84468f6eeaac?dpr=1&auto=format&fit=crop&w=376&h=251&q=60&cs=tinysrgb';
 
 export default function ImageBackgroundPage() {
   return (
diff --git a/packages/examples/pages/image/index.js b/packages/examples/pages/image/index.js
index 316a85ab..77cc927a 100644
--- a/packages/examples/pages/image/index.js
+++ b/packages/examples/pages/image/index.js
@@ -3,16 +3,21 @@ import React from 'react';
 import Example from '../../shared/example';
 
 const placeholder = '/image/placeholder.svg';
-const source = 'https://images.unsplash.com/photo-1481595357459-84468f6eeaac?dpr=1&auto=format&fit=crop&w=376&h=251&q=60&cs=tinysrgb';
-const agif = 'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif';
+const source =
+  'https://images.unsplash.com/photo-1481595357459-84468f6eeaac?dpr=1&auto=format&fit=crop&w=376&h=251&q=60&cs=tinysrgb';
+const agif =
+  'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif';
 const pjpeg = 'http://pooyak.com/p/progjpeg/jpegload.cgi?o=1';
 const resizesource = '/image/smallflower.jpg';
-const dataBase64Png = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
-const dataBase64Svg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgZmlsbD0iIzAwMDAwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGQ9Ik0yNS44NjcsNDguODUzQzMyLjgwNiw1MC4xNzYsNDYuNDYsNTIuNSw2MS4yMTUsNTIuNWgwLjAwNWM5LjcxLDAsMTguNDAxLTEuMDU3LDI1LjkzOC0yLjkxMyAgIGMwLjE1OS0wLjA0NiwwLjM1LTAuMTM1LDAuNTY1LTAuMTg3YzAuMjgyLTAuMDcyLDAuNTY1LTAuMTY0LDAuODQ0LTAuMjM4YzMuMTg0LTAuOTY0LDIuNTc3LTMuMDUxLDIuMTk5LTMuODUyICAgYy00LjE2Ni03LjcxOS0xNS4wODYtMjMuNDE1LTM1LjAyOC0yMy40MTVjLTIyLjE2OSwwLTMwLjI2MiwxMC42MzUtMzMuMTQsMTkuNTg5QzIyLjU0NSw0Mi4zMzMsMjIuNDA3LDQ3LjEzNSwyNS44NjcsNDguODUzeiAgICBNMjguNjc2LDM4LjAzMmMwLjAxMy0wLjAzNiwwLjYxNC0xLjYyNiwxLjkyMy0xLjAwOGMxLjEzMywwLjUzNSwwLjk2MSwxLjU2MywwLjg4NywxLjg1Yy0wLjAwNywwLjAyNC0wLjAxNCwwLjA0OC0wLjAyMSwwLjA3MyAgIGMwLDAuMDAxLTAuMDAxLDAuMDA0LTAuMDAxLDAuMDA0bDAsMGMtMC4yNDksMC45MjktMC40MDQsMi4wODYtMC4wMTcsMi44NmMwLjE2LDAuMzE5LDAuNDkyLDAuNzY4LDEuNTQyLDAuOTg3bDAuMzY2LDAuMDc3ICAgYzIwLjgxNiw0LjM2LDM2LDIuOTMzLDQ1LjY3OCwwLjYyNmwtMC4wMDQsMC4wMDJjMCwwLDAuMDA1LTAuMDAyLDAuMDA3LTAuMDAzYzAuMjEyLTAuMDUsMC40MjEtMC4xMDEsMC42MjgtMC4xNTIgICBjMC41MDktMC4wNSwxLjE3MywwLjA3OCwxLjM5OSwxYzAuMzUxLDEuNDI0LTAuOTczLDEuODk1LTEuMjE3LDEuOTY5Yy01LjMyNSwxLjI3OS0xMi4yNjYsMi4zMDYtMjAuODM1LDIuMzA3ICAgYy03LjUwNSwwLTE2LjI1NS0wLjc4Ny0yNi4yNTctMi44ODJsLTAuMzY0LTAuMDc3Yy0yLjEyLTAuNDQyLTMuMTExLTEuNjMzLTMuNTY5LTIuNTU1QzI3Ljk4NSw0MS40MjEsMjguMjgxLDM5LjQxNiwyOC42NzYsMzguMDMyICAgeiI+PC9wYXRoPjxjaXJjbGUgY3g9IjEwLjQ5MyIgY3k9IjIzLjQ1NSIgcj0iMC42MTkiPjwvY2lyY2xlPjxwYXRoIGQ9Ik0yLjA4LDI4LjMwOGMwLjY3Ni0wLjE3OCwwLjk4My0wLjM1MiwxLjE3NC0wLjVDNC42OSwyNi42OSw2LjUsMjcuNDgzLDcuNSwyOC4zNTd2MC4wMDJjMCwwLDEuNzExLDEuMjM1LDAuNzM3LDIuMjAyICAgYy0wLjk3NCwwLjk2NS0yLjMxOSwwLjAwNi0yLjMxOSwwLjAwNmwwLjAzNSwwLjAxNmMtMC4zMjctMC4yMDMtMC42LTAuNTYxLTAuNzgtMC41ODRjLTAuMzcsMC4yNi0wLjg3NiwwLjUtMS40NzYsMC41SDMuNyAgIGMwLDAtMS4zNDUsMC43MDksMC4xNzgsMS42NTJjMC4wMDEsMC4wMDEsMC4wMDIsMC4wNzIsMC4wMDQsMC4wNzNjMy45MzksMi4zNDIsOC4yNzEsNS43MDEsOC4yNzEsOC44OCAgIGMwLDAuNjkxLDAuMiwxNy4wNDIsMTcuNjI2LDI0LjczOWwwLjk2NywwLjQ0MmwtMC4xLDEuMDU5Yy0wLjQyMSw0LjM5LDEuMTQ1LDEwLjE5MSwxMC45OTMsMTIuODg4bDAuMTEzLDAuMDM4ICAgYzAuMDY3LDAuMDIzLDYuNzMyLDIuNDI5LDEwLjkwNywyLjQyOWMxLjU4NCwwLDIuMTU1LTAuMzUyLDIuMjQzLTAuNTYxYzAuMDg1LTAuMjAyLDAuNjEyLTIuMTY0LTYuMzMyLTkuMzg3bDAuMDAyLTAuMTgzICAgYzAsMC0yLjQ3Ny0zLjA3LDEuNTMzLTMuMDdjMC4wMSwwLDAuMDE5LDAsMC4wMjksMGMxLjI4NSwwLDIuNjA4LDAuMjE1LDMuOTgsMC4xODRjNC43NzEtMC4xMTcsOS4zMTYtMC40MjUsMTMuNTA2LTEuMDk2ICAgbDAuNDc0LTAuMDI4bDAuNjY4LDAuMTU4YzkuNjUxLDQuOTQ4LDE2LjczOCw3LjcxNiwxOS43MzgsNy43MTZ2MC4wMDZjMCwwLDAuMTY0LDAuMDExLDAuMjMsMC4wMDQgICBjLTAuMTg5LTAuNzIzLTIuMjMtMi44LTcuMjMtOS4wNzl2MC4wMjFjMCwwLTEuNTEyLTEuNjU4LDAuNzk3LTIuNjUzYzAuMDYzLTAuMDI2LDAuMDA4LDAuMDIzLDAuMDYtMC4wMDEgICBjOC42MzktMy41MDksMTMuNTAxLTguMjA0LDE1LjQxMS0xMS43NzVjMS4xNDUtMi4xMjksMC4yMDYtMi43ODQtMC42NTktMi45NzZjLTAuMzE3LTAuMDM4LTAuNjM0LTAuMDYyLTAuOTEyLTAuMDYyICAgYy0wLjIwNSwwLTAuMzc5LDAuMDEtMC41MjgsMC4wMjdsLTMuMTQzLDEuMjE0QzgzLjczMiw1My45MjYsNzMuMjE4LDU1LjUsNjEuMjIsNTUuNWMtMC4wMDIsMC0wLjAwNSwwLTAuMDA1LDAgICBjLTE1LjEyOCwwLTI5LjEwMS0yLjQzMi0zNi4wODMtMy43NzFsLTAuMTczLTAuMTExbC0wLjE2LTAuMTI2Yy01Ljg1OC0yLjY4MS01LjEzNy0xMC4yMDItNS4xMDMtMTAuNTE5bDAuMDYtMC4zICAgYzAuODk1LTIuODM4LDIuNDY3LTYuMzUyLDUuMjEzLTkuNzE5Yy0xLjgwOC0xLjM2OS00LjU5LTQuMTg4LTQuNDMtOC40OTRjMC4wNDYtMS4yNDQtMC40ODYtMi41MDgtMS40OTgtMy41NTkgICBjLTEuNDk4LTEuNTU1LTMuNzg1LTIuNDQ2LTYuMjc0LTIuNDQ2Yy0xLjc3LDAtMy41NTMsMC40NDItNS4yOTMsMS4zMTRjLTQuMDYxLDIuMDM1LTQuODU1LDQuNzM2LTUuNjkyLDcuNTk2ICAgYy0wLjEzNiwwLjQ2OC0wLjI4NCwwLjkzOS0wLjQzOCwxLjQxYy0wLjAwNiwwLjAxOS0wLjAyMiwwLjAzNS0wLjAyOCwwLjA1NkMwLjgzMywyOC40MjMsMS42OTEsMjguMzksMi4wOCwyOC4zMDh6IE0xMC40OTMsMTkuOTA4ICAgYzEuOTU2LDAsMy41NDgsMS41OTEsMy41NDgsMy41NDdjMCwxLjk1Ny0xLjU5MiwzLjU0OC0zLjU0OCwzLjU0OGMtMS45NTcsMC0zLjU0OC0xLjU5Mi0zLjU0OC0zLjU0OCAgIEM2Ljk0NCwyMS40OTksOC41MzYsMTkuOTA4LDEwLjQ5MywxOS45MDh6Ij48L3BhdGg+PC9nPjwvc3ZnPg==';
-const dataSvg = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>';
+const dataBase64Png =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
+const dataBase64Svg =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgZmlsbD0iIzAwMDAwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGQ9Ik0yNS44NjcsNDguODUzQzMyLjgwNiw1MC4xNzYsNDYuNDYsNTIuNSw2MS4yMTUsNTIuNWgwLjAwNWM5LjcxLDAsMTguNDAxLTEuMDU3LDI1LjkzOC0yLjkxMyAgIGMwLjE1OS0wLjA0NiwwLjM1LTAuMTM1LDAuNTY1LTAuMTg3YzAuMjgyLTAuMDcyLDAuNTY1LTAuMTY0LDAuODQ0LTAuMjM4YzMuMTg0LTAuOTY0LDIuNTc3LTMuMDUxLDIuMTk5LTMuODUyICAgYy00LjE2Ni03LjcxOS0xNS4wODYtMjMuNDE1LTM1LjAyOC0yMy40MTVjLTIyLjE2OSwwLTMwLjI2MiwxMC42MzUtMzMuMTQsMTkuNTg5QzIyLjU0NSw0Mi4zMzMsMjIuNDA3LDQ3LjEzNSwyNS44NjcsNDguODUzeiAgICBNMjguNjc2LDM4LjAzMmMwLjAxMy0wLjAzNiwwLjYxNC0xLjYyNiwxLjkyMy0xLjAwOGMxLjEzMywwLjUzNSwwLjk2MSwxLjU2MywwLjg4NywxLjg1Yy0wLjAwNywwLjAyNC0wLjAxNCwwLjA0OC0wLjAyMSwwLjA3MyAgIGMwLDAuMDAxLTAuMDAxLDAuMDA0LTAuMDAxLDAuMDA0bDAsMGMtMC4yNDksMC45MjktMC40MDQsMi4wODYtMC4wMTcsMi44NmMwLjE2LDAuMzE5LDAuNDkyLDAuNzY4LDEuNTQyLDAuOTg3bDAuMzY2LDAuMDc3ICAgYzIwLjgxNiw0LjM2LDM2LDIuOTMzLDQ1LjY3OCwwLjYyNmwtMC4wMDQsMC4wMDJjMCwwLDAuMDA1LTAuMDAyLDAuMDA3LTAuMDAzYzAuMjEyLTAuMDUsMC40MjEtMC4xMDEsMC42MjgtMC4xNTIgICBjMC41MDktMC4wNSwxLjE3MywwLjA3OCwxLjM5OSwxYzAuMzUxLDEuNDI0LTAuOTczLDEuODk1LTEuMjE3LDEuOTY5Yy01LjMyNSwxLjI3OS0xMi4yNjYsMi4zMDYtMjAuODM1LDIuMzA3ICAgYy03LjUwNSwwLTE2LjI1NS0wLjc4Ny0yNi4yNTctMi44ODJsLTAuMzY0LTAuMDc3Yy0yLjEyLTAuNDQyLTMuMTExLTEuNjMzLTMuNTY5LTIuNTU1QzI3Ljk4NSw0MS40MjEsMjguMjgxLDM5LjQxNiwyOC42NzYsMzguMDMyICAgeiI+PC9wYXRoPjxjaXJjbGUgY3g9IjEwLjQ5MyIgY3k9IjIzLjQ1NSIgcj0iMC42MTkiPjwvY2lyY2xlPjxwYXRoIGQ9Ik0yLjA4LDI4LjMwOGMwLjY3Ni0wLjE3OCwwLjk4My0wLjM1MiwxLjE3NC0wLjVDNC42OSwyNi42OSw2LjUsMjcuNDgzLDcuNSwyOC4zNTd2MC4wMDJjMCwwLDEuNzExLDEuMjM1LDAuNzM3LDIuMjAyICAgYy0wLjk3NCwwLjk2NS0yLjMxOSwwLjAwNi0yLjMxOSwwLjAwNmwwLjAzNSwwLjAxNmMtMC4zMjctMC4yMDMtMC42LTAuNTYxLTAuNzgtMC41ODRjLTAuMzcsMC4yNi0wLjg3NiwwLjUtMS40NzYsMC41SDMuNyAgIGMwLDAtMS4zNDUsMC43MDksMC4xNzgsMS42NTJjMC4wMDEsMC4wMDEsMC4wMDIsMC4wNzIsMC4wMDQsMC4wNzNjMy45MzksMi4zNDIsOC4yNzEsNS43MDEsOC4yNzEsOC44OCAgIGMwLDAuNjkxLDAuMiwxNy4wNDIsMTcuNjI2LDI0LjczOWwwLjk2NywwLjQ0MmwtMC4xLDEuMDU5Yy0wLjQyMSw0LjM5LDEuMTQ1LDEwLjE5MSwxMC45OTMsMTIuODg4bDAuMTEzLDAuMDM4ICAgYzAuMDY3LDAuMDIzLDYuNzMyLDIuNDI5LDEwLjkwNywyLjQyOWMxLjU4NCwwLDIuMTU1LTAuMzUyLDIuMjQzLTAuNTYxYzAuMDg1LTAuMjAyLDAuNjEyLTIuMTY0LTYuMzMyLTkuMzg3bDAuMDAyLTAuMTgzICAgYzAsMC0yLjQ3Ny0zLjA3LDEuNTMzLTMuMDdjMC4wMSwwLDAuMDE5LDAsMC4wMjksMGMxLjI4NSwwLDIuNjA4LDAuMjE1LDMuOTgsMC4xODRjNC43NzEtMC4xMTcsOS4zMTYtMC40MjUsMTMuNTA2LTEuMDk2ICAgbDAuNDc0LTAuMDI4bDAuNjY4LDAuMTU4YzkuNjUxLDQuOTQ4LDE2LjczOCw3LjcxNiwxOS43MzgsNy43MTZ2MC4wMDZjMCwwLDAuMTY0LDAuMDExLDAuMjMsMC4wMDQgICBjLTAuMTg5LTAuNzIzLTIuMjMtMi44LTcuMjMtOS4wNzl2MC4wMjFjMCwwLTEuNTEyLTEuNjU4LDAuNzk3LTIuNjUzYzAuMDYzLTAuMDI2LDAuMDA4LDAuMDIzLDAuMDYtMC4wMDEgICBjOC42MzktMy41MDksMTMuNTAxLTguMjA0LDE1LjQxMS0xMS43NzVjMS4xNDUtMi4xMjksMC4yMDYtMi43ODQtMC42NTktMi45NzZjLTAuMzE3LTAuMDM4LTAuNjM0LTAuMDYyLTAuOTEyLTAuMDYyICAgYy0wLjIwNSwwLTAuMzc5LDAuMDEtMC41MjgsMC4wMjdsLTMuMTQzLDEuMjE0QzgzLjczMiw1My45MjYsNzMuMjE4LDU1LjUsNjEuMjIsNTUuNWMtMC4wMDIsMC0wLjAwNSwwLTAuMDA1LDAgICBjLTE1LjEyOCwwLTI5LjEwMS0yLjQzMi0zNi4wODMtMy43NzFsLTAuMTczLTAuMTExbC0wLjE2LTAuMTI2Yy01Ljg1OC0yLjY4MS01LjEzNy0xMC4yMDItNS4xMDMtMTAuNTE5bDAuMDYtMC4zICAgYzAuODk1LTIuODM4LDIuNDY3LTYuMzUyLDUuMjEzLTkuNzE5Yy0xLjgwOC0xLjM2OS00LjU5LTQuMTg4LTQuNDMtOC40OTRjMC4wNDYtMS4yNDQtMC40ODYtMi41MDgtMS40OTgtMy41NTkgICBjLTEuNDk4LTEuNTU1LTMuNzg1LTIuNDQ2LTYuMjc0LTIuNDQ2Yy0xLjc3LDAtMy41NTMsMC40NDItNS4yOTMsMS4zMTRjLTQuMDYxLDIuMDM1LTQuODU1LDQuNzM2LTUuNjkyLDcuNTk2ICAgYy0wLjEzNiwwLjQ2OC0wLjI4NCwwLjkzOS0wLjQzOCwxLjQxYy0wLjAwNiwwLjAxOS0wLjAyMiwwLjAzNS0wLjAyOCwwLjA1NkMwLjgzMywyOC40MjMsMS42OTEsMjguMzksMi4wOCwyOC4zMDh6IE0xMC40OTMsMTkuOTA4ICAgYzEuOTU2LDAsMy41NDgsMS41OTEsMy41NDgsMy41NDdjMCwxLjk1Ny0xLjU5MiwzLjU0OC0zLjU0OCwzLjU0OGMtMS45NTcsMC0zLjU0OC0xLjU5Mi0zLjU0OC0zLjU0OCAgIEM2Ljk0NCwyMS40OTksOC41MzYsMTkuOTA4LDEwLjQ5MywxOS45MDh6Ij48L3BhdGg+PC9nPjwvc3ZnPg==';
+const dataSvg =
+  'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>';
 
 function Divider() {
-  return <View style={styles.divider} />
+  return <View style={styles.divider} />;
 }
 
 export default function ImagePage() {
@@ -23,10 +28,18 @@ export default function ImagePage() {
       <Divider />
       <Image
         defaultSource={placeholder}
-        onError={() => { console.log('error') }}
-        onLoad={() => { console.log('load') }}
-        onLoadEnd={() => { console.log('load-end') }}
-        onLoadStart={() => { console.log('load-start') }}
+        onError={() => {
+          console.log('error');
+        }}
+        onLoad={() => {
+          console.log('load');
+        }}
+        onLoadEnd={() => {
+          console.log('load-end');
+        }}
+        onLoadStart={() => {
+          console.log('load-start');
+        }}
         source={source}
         style={styles.base}
       />
diff --git a/packages/examples/pages/index.js b/packages/examples/pages/index.js
index 8aa47c6e..f8ec62ef 100644
--- a/packages/examples/pages/index.js
+++ b/packages/examples/pages/index.js
@@ -30,13 +30,16 @@ export default function IndexPage() {
         <Text style={styles.title}>React Native for Web</Text>
       </View>
       <Text style={styles.text}>
-        <Link href="https://github.com/necolas/react-native-web">React Native for Web</Link> example app built with Next.js
+        <Link href="https://github.com/necolas/react-native-web">React Native for Web</Link> example
+        app built on Next.js
       </Text>
 
       <View accessibilityRole="list">
         {process.env.pages.map((name) => (
           <View accessibilityRole="listitem" key={name} style={styles.listitem}>
-            <Link href={'/' + name} style={styles.pageLink}>{name}</Link>
+            <Link href={'/' + name} style={styles.pageLink}>
+              {name}
+            </Link>
           </View>
         ))}
       </View>
diff --git a/packages/examples/pages/linking/index.js b/packages/examples/pages/linking/index.js
index d47908a1..52b9dc90 100644
--- a/packages/examples/pages/linking/index.js
+++ b/packages/examples/pages/linking/index.js
@@ -6,7 +6,7 @@ const url = 'https://mathiasbynens.github.io/rel-noopener/malicious.html';
 
 export default class LinkingPage extends PureComponent {
   handlePress() {
-    Linking.canOpenURL(url).then(supported => {
+    Linking.canOpenURL(url).then((supported) => {
       return Linking.openURL(url);
     });
   }
diff --git a/packages/examples/pages/lists/index.js b/packages/examples/pages/lists/index.js
index e32eb170..0352430f 100644
--- a/packages/examples/pages/lists/index.js
+++ b/packages/examples/pages/lists/index.js
@@ -9,7 +9,17 @@
 'use strict';
 
 import * as React from 'react';
-import { Animated, FlatList, Image, StyleSheet, Switch, TouchableHighlight, Text, TextInput, View } from 'react-native';
+import {
+  Animated,
+  FlatList,
+  Image,
+  StyleSheet,
+  Switch,
+  TouchableHighlight,
+  Text,
+  TextInput,
+  View
+} from 'react-native';
 import Example from '../../shared/example';
 
 type Item = { title: string, text: string, key: string, pressed: boolean, noImage?: ?boolean };
@@ -184,7 +194,7 @@ function getItemLayout(data: any, index: number, horizontal?: boolean) {
 function pressItem(context: Object, key: string) {
   const index = Number(key);
   const pressed = !context.state.data[index].pressed;
-  context.setState(state => {
+  context.setState((state) => {
     const newData = [...state.data];
     newData[index] = {
       ...state.data[index],
@@ -200,7 +210,7 @@ function renderSmallSwitchOption(context: Object, key: string) {
     <View style={styles.option}>
       <Text>{key}:</Text>
       <Switch
-        onValueChange={value => context.setState({ [key]: value })}
+        onValueChange={(value) => context.setState({ [key]: value })}
         style={styles.smallSwitch}
         value={context.state[key]}
       />
@@ -236,11 +246,11 @@ class SingleColumnExample extends React.PureComponent {
     virtualized: true
   };
 
-  _onChangeFilterText = filterText => {
+  _onChangeFilterText = (filterText) => {
     this.setState({ filterText });
   };
 
-  _onChangeScrollToIndex = text => {
+  _onChangeScrollToIndex = (text) => {
     this._listRef.getNode().scrollToIndex({ viewPosition: 0.5, index: Number(text) });
   };
 
@@ -258,7 +268,7 @@ class SingleColumnExample extends React.PureComponent {
 
   render() {
     const filterRegex = new RegExp(String(this.state.filterText), 'i');
-    const filter = item => filterRegex.test(item.text) || filterRegex.test(item.title);
+    const filter = (item) => filterRegex.test(item.text) || filterRegex.test(item.title);
     const filteredData = this.state.data.filter(filter);
     return (
       <View style={styles.container}>
@@ -310,7 +320,7 @@ class SingleColumnExample extends React.PureComponent {
       </View>
     );
   }
-  _captureRef = ref => {
+  _captureRef = (ref) => {
     this._listRef = ref;
   };
   _getItemLayout = (data: any, index: number) => {
@@ -320,7 +330,7 @@ class SingleColumnExample extends React.PureComponent {
     if (this.state.data.length >= 1000) {
       return;
     }
-    this.setState(state => ({
+    this.setState((state) => ({
       data: state.data.concat(genItemData(100, state.data.length))
     }));
   };
@@ -350,7 +360,10 @@ class SingleColumnExample extends React.PureComponent {
   }) => {
     // Impressions can be logged here
     if (this.state.logViewable) {
-      console.log('onViewableItemsChanged: ', info.changed.map(v => ({ ...v, item: '...' })));
+      console.log(
+        'onViewableItemsChanged: ',
+        info.changed.map((v) => ({ ...v, item: '...' }))
+      );
     }
   };
   _pressItem = (key: string) => {
diff --git a/packages/examples/pages/pan-responder/index.js b/packages/examples/pages/pan-responder/index.js
index afe91e88..78626f79 100644
--- a/packages/examples/pages/pan-responder/index.js
+++ b/packages/examples/pages/pan-responder/index.js
@@ -47,7 +47,7 @@ class DraggableCircle extends React.PureComponent {
     );
   }
 
-  _setCircleRef = circle => {
+  _setCircleRef = (circle) => {
     this.circle = circle;
   };
 
@@ -106,7 +106,7 @@ class LocationXY extends React.Component {
 
   _handlePanResponderMove = (e, gestureState) => {
     console.log(e.nativeEvent.locationX, e.nativeEvent.locationY);
-    this.setState(state => ({
+    this.setState((state) => ({
       ...state,
       translateX: gestureState.dx
     }));
@@ -157,9 +157,9 @@ const styles = StyleSheet.create({
 
 export default function PanResponderPage() {
   return (
-  <Example title="PanResponder">
+    <Example title="PanResponder">
       <DraggableCircle />
       <LocationXY />
-  </Example>
+    </Example>
   );
 }
diff --git a/packages/examples/pages/pressable/index.js b/packages/examples/pages/pressable/index.js
index 02745da1..25b8648b 100644
--- a/packages/examples/pages/pressable/index.js
+++ b/packages/examples/pages/pressable/index.js
@@ -7,10 +7,10 @@ export default function PressablePage() {
   const [disabled, setDisabled] = React.useState(false);
   const [delay, setDelay] = React.useState(0);
 
-  const handleEvent = eventName => {
+  const handleEvent = (eventName) => {
     return () => {
       const limit = 10;
-      updateEventLog(state => {
+      updateEventLog((state) => {
         const nextState = state.slice(0, limit - 1);
         nextState.unshift(eventName);
         return nextState;
@@ -33,21 +33,27 @@ export default function PressablePage() {
           onPress={handleEvent(`onPress - ${delay}ms delay`)}
           onPressIn={handleEvent(`onPressIn - ${delay}ms delay`)}
           onPressOut={handleEvent(`oPressOut - ${delay}ms delay`)}
-          style={(state) => ([
+          style={(state) => [
             styles.pressable,
             !disabled && state.focused && styles.focused,
             !disabled && state.hovered && styles.hovered,
             !disabled && state.pressed && styles.pressed,
             disabled && styles.disabled
-          ])}
+          ]}
         >
           <Text>Pressable</Text>
-       </Pressable>
+        </Pressable>
 
         <View style={styles.buttons}>
-          <Button onPress={() => setDisabled(state => !state)} title={disabled ? 'Enable' : 'Disable'} />
+          <Button
+            onPress={() => setDisabled((state) => !state)}
+            title={disabled ? 'Enable' : 'Disable'}
+          />
           <View style={{ width: '1rem' }} />
-          <Button onPress={() => setDelay(state => state === 0 ? 350 : 0)} title={delay === 0 ? 'Add delay' : 'Remove delay'} />
+          <Button
+            onPress={() => setDelay((state) => (state === 0 ? 350 : 0))}
+            title={delay === 0 ? 'Add delay' : 'Remove delay'}
+          />
         </View>
 
         <ScrollView style={styles.eventLogBox}>
@@ -64,7 +70,7 @@ const styles = StyleSheet.create({
   container: {
     maxWidth: 500,
     padding: '1rem',
-    width: '100%',
+    width: '100%'
   },
   pressable: {
     borderRadius: 5,
diff --git a/packages/examples/pages/progress-bar/index.js b/packages/examples/pages/progress-bar/index.js
index 3b967723..50e7e60b 100644
--- a/packages/examples/pages/progress-bar/index.js
+++ b/packages/examples/pages/progress-bar/index.js
@@ -9,27 +9,31 @@ function Divider() {
 export default function ProgressBarPage() {
   return (
     <Example title="ProgressBar">
-    <View style={styles.container}>
-      <Divider />
-      <ProgressBar indeterminate trackColor="#D1E3F6" />
-      <Divider />
-      <ProgressBar color="#1DA1F2" progress={0.2} />
-      <Divider />
-      <ProgressBar color="#17BF63" progress={0.4} />
-      <Divider />
-      <ProgressBar color="#F45D22" progress={0.6} />
-      <Divider />
-      <ProgressBar color="#794BC4" progress={0.8} />
-      <Divider />
-      <ProgressBar color="#E0245E" progress={1} />
-      <Divider />
-      <ProgressBar color="rgb(23, 191, 99)" progress={0.1} trackColor="rgba(23, 191, 99, 0.3)" />
-      <Divider />
-      <ProgressBar color="rgb(244, 93, 34)" progress={0.2} trackColor="rgba(244, 93, 34, 0.3)" />
-      <Divider />
-      <ProgressBar color="rgb(121, 75, 196)" progress={0.3} trackColor="rgba(121, 75, 196, 0.3)" />
-      <Divider />
-      <ProgressBar color="#1DA1F2" progress={0.33} style={styles.custom} trackColor="#D1E3F6" />
+      <View style={styles.container}>
+        <Divider />
+        <ProgressBar indeterminate trackColor="#D1E3F6" />
+        <Divider />
+        <ProgressBar color="#1DA1F2" progress={0.2} />
+        <Divider />
+        <ProgressBar color="#17BF63" progress={0.4} />
+        <Divider />
+        <ProgressBar color="#F45D22" progress={0.6} />
+        <Divider />
+        <ProgressBar color="#794BC4" progress={0.8} />
+        <Divider />
+        <ProgressBar color="#E0245E" progress={1} />
+        <Divider />
+        <ProgressBar color="rgb(23, 191, 99)" progress={0.1} trackColor="rgba(23, 191, 99, 0.3)" />
+        <Divider />
+        <ProgressBar color="rgb(244, 93, 34)" progress={0.2} trackColor="rgba(244, 93, 34, 0.3)" />
+        <Divider />
+        <ProgressBar
+          color="rgb(121, 75, 196)"
+          progress={0.3}
+          trackColor="rgba(121, 75, 196, 0.3)"
+        />
+        <Divider />
+        <ProgressBar color="#1DA1F2" progress={0.33} style={styles.custom} trackColor="#D1E3F6" />
       </View>
     </Example>
   );
diff --git a/packages/examples/pages/scroll-view/index.js b/packages/examples/pages/scroll-view/index.js
index bb3e9786..1bfee867 100644
--- a/packages/examples/pages/scroll-view/index.js
+++ b/packages/examples/pages/scroll-view/index.js
@@ -7,13 +7,13 @@ const ITEMS = [...Array(12)].map((_, i) => `Item ${i}`);
 function createItemRow(msg, index) {
   return (
     <TouchableOpacity key={index} style={[styles.item]}>
-      <Text style={styles.text} >{msg}</Text>
+      <Text style={styles.text}>{msg}</Text>
     </TouchableOpacity>
   );
 }
 
 function Divider() {
-  return <View style={styles.divider} />
+  return <View style={styles.divider} />;
 }
 
 export default function ScrollViewPage() {
@@ -31,7 +31,7 @@ export default function ScrollViewPage() {
           ref={scrollRef}
           scrollEnabled={scrollEnabled}
           scrollEventThrottle={throttle}
-          style={[styles.scrollView, !scrollEnabled && styles.disabled ]}
+          style={[styles.scrollView, !scrollEnabled && styles.disabled]}
         >
           {ITEMS.map(createItemRow)}
         </ScrollView>
@@ -80,7 +80,7 @@ export default function ScrollViewPage() {
 
 const styles = StyleSheet.create({
   container: {
-    alignSelf: 'stretch',
+    alignSelf: 'stretch'
   },
   scrollView: {
     backgroundColor: '#eeeeee',
diff --git a/packages/examples/pages/switch/index.js b/packages/examples/pages/switch/index.js
index 427ac13a..6223b816 100644
--- a/packages/examples/pages/switch/index.js
+++ b/packages/examples/pages/switch/index.js
@@ -3,7 +3,7 @@ import { StyleSheet, Switch, View } from 'react-native';
 import Example from '../../shared/example';
 
 function Divider() {
-  return <View style={styles.divider} />
+  return <View style={styles.divider} />;
 }
 
 export default function SwitchPage() {
diff --git a/packages/examples/pages/text-input/index.js b/packages/examples/pages/text-input/index.js
index de2dd66c..48da3d3b 100644
--- a/packages/examples/pages/text-input/index.js
+++ b/packages/examples/pages/text-input/index.js
@@ -13,58 +13,46 @@ export default function TextInputPage() {
 
   return (
     <Example title="TextInput">
-    <View style={styles.container}>
-      <TextInput
-        blurOnSubmit={true}
-        onSubmitEditing={() => focusNextField()}
-        placeholder="blurOnSubmit"
-        style={styles.textinput}
-      />
-      <TextInput
-        clearTextOnFocus={true}
-        defaultValue="clearTextOnFocus"
-        ref={nextFocus}
-        style={styles.textinput}
-      />
-      <TextInput
-        defaultValue="disabled"
-        disabled={true}
-        style={styles.textinput}
-      />
-      <TextInput
-        defaultValue="editable (false)"
-        editable={false}
-        style={styles.textinput}
-      />
-      <TextInput
-        keyboardType="numeric"
-        placeholder="keyboardType 'numeric'"
-        style={styles.textinput}
-      />
-      <TextInput maxLength={5} placeholder="maxLength" style={styles.textinput} />
+      <View style={styles.container}>
+        <TextInput
+          blurOnSubmit={true}
+          onSubmitEditing={() => focusNextField()}
+          placeholder="blurOnSubmit"
+          style={styles.textinput}
+        />
+        <TextInput
+          clearTextOnFocus={true}
+          defaultValue="clearTextOnFocus"
+          ref={nextFocus}
+          style={styles.textinput}
+        />
+        <TextInput defaultValue="disabled" disabled={true} style={styles.textinput} />
+        <TextInput defaultValue="editable (false)" editable={false} style={styles.textinput} />
+        <TextInput
+          keyboardType="numeric"
+          placeholder="keyboardType 'numeric'"
+          style={styles.textinput}
+        />
+        <TextInput maxLength={5} placeholder="maxLength" style={styles.textinput} />
 
-      <TextInput
-        placeholder="placeholderTextColor"
-        placeholderTextColor="orange"
-        style={styles.textinput}
-      />
-      <TextInput
-        defaultValue="selectTextOnFocus"
-        selectTextOnFocus={true}
-        style={styles.textinput}
-      />
-      <TextInput
-        defaultValue="secureTextEntry"
-        secureTextEntry={true}
-        style={styles.textinput}
-      />
-      <TextInput
-        multiline={true}
-        numberOfLines={3}
-        placeholder="multiline"
-        style={styles.multiline}
-      />
-    </View>
+        <TextInput
+          placeholder="placeholderTextColor"
+          placeholderTextColor="orange"
+          style={styles.textinput}
+        />
+        <TextInput
+          defaultValue="selectTextOnFocus"
+          selectTextOnFocus={true}
+          style={styles.textinput}
+        />
+        <TextInput defaultValue="secureTextEntry" secureTextEntry={true} style={styles.textinput} />
+        <TextInput
+          multiline={true}
+          numberOfLines={3}
+          placeholder="multiline"
+          style={styles.multiline}
+        />
+      </View>
     </Example>
   );
 }
diff --git a/packages/examples/pages/text/index.js b/packages/examples/pages/text/index.js
index 5c6ce300..d001d18a 100644
--- a/packages/examples/pages/text/index.js
+++ b/packages/examples/pages/text/index.js
@@ -286,140 +286,141 @@ function TextShadow() {
 export default function TextPage() {
   return (
     <Example title="Text">
-    <View>
-      <Text>
-        Text wraps across multiple lines by default. Text wraps across multiple lines by default.
-        Text wraps across multiple lines by default. Text wraps across multiple lines by default.
-      </Text>
-
-      <Spacer />
-
-      <Text>
-        (Text inherits styles from parent Text elements,
-        <Text style={{ fontWeight: 'bold' }}>
-          {'\n  '}
-          (for example this text is bold
-          <Text style={{ fontSize: 11, color: '#527fe4' }}>
-            {'\n    '}
-            (and this text inherits the bold while setting size and color)
-          </Text>
-          {'\n  '})
-        </Text>
-        {'\n'})
-      </Text>
-
-      <Spacer />
-
-      <Text style={{ opacity: 0.7 }}>
-        (Text opacity
+      <View>
         <Text>
-          {'\n  '}
-          (is inherited
-          <Text style={{ opacity: 0.7 }}>
-            {'\n    '}
-            (and accumulated
-            <Text style={{ backgroundColor: '#ffaaaa' }}>
-              {'\n      '}
-              (and also applies to the background)
-            </Text>
-            {'\n    '})
-          </Text>
-          {'\n  '})
+          Text wraps across multiple lines by default. Text wraps across multiple lines by default.
+          Text wraps across multiple lines by default. Text wraps across multiple lines by default.
         </Text>
-        {'\n'})
-      </Text>
 
-      <Spacer />
+        <Spacer />
 
-      <Text>
-        This text contains an inline blue view{' '}
-        <View style={{ width: 25, height: 25, backgroundColor: 'steelblue' }} /> and an inline image{' '}
-        <Image
-          source={{ uri: 'http://lorempixel.com/30/11' }}
-          style={{ width: 30, height: 11, resizeMode: 'cover' }}
-        />
-        .
-      </Text>
-
-      <Spacer />
-
-      <Text>
-        This text contains a view{' '}
-        <View style={{ borderColor: 'red', borderWidth: 1 }}>
-          <Text style={{ borderColor: 'blue', borderWidth: 1 }}>which contains</Text>
-          <Text style={{ borderColor: 'green', borderWidth: 1 }}>another text.</Text>
-          <Text style={{ borderColor: 'yellow', borderWidth: 1 }}>
-            And contains another view
-            <View style={{ borderColor: 'red', borderWidth: 1 }}>
-              <Text style={{ borderColor: 'blue', borderWidth: 1 }}>
-                which contains another text!
-              </Text>
-            </View>
+        <Text>
+          (Text inherits styles from parent Text elements,
+          <Text style={{ fontWeight: 'bold' }}>
+            {'\n  '}
+            (for example this text is bold
+            <Text style={{ fontSize: 11, color: '#527fe4' }}>
+              {'\n    '}
+              (and this text inherits the bold while setting size and color)
+            </Text>
+            {'\n  '})
           </Text>
-        </View>{' '}
-        And then continues as text.
-      </Text>
+          {'\n'})
+        </Text>
 
-      <Text selectable={true}>
-        This text is <Text style={{ fontWeight: 'bold' }}>selectable</Text> if you click-and-hold.
-      </Text>
-      <Text selectable={false}>
-        This text is <Text style={{ fontWeight: 'bold' }}>not selectable</Text> if you
-        click-and-hold.
-      </Text>
+        <Spacer />
 
-          <View style={{ maxWidth: 320 }}>
-      <Text numberOfLines={1}>
-        Maximum of one line, no matter how much I write here. If I keep writing, it
-        {"'"}
-        ll just truncate after one line.
-      </Text>
-      <Text numberOfLines={2} style={{ marginTop: 20 }}>
-        Maximum of two lines, no matter how much I write here. If I keep writing, it
-        {"'"}
-        ll just truncate after two lines.
-      </Text>
-      <Text style={{ marginTop: 20 }}>
-        No maximum lines specified, no matter how much I write here. If I keep writing, it
-        {"'"}
-        ll just keep going and going.
-      </Text>
-    </View>
+        <Text style={{ opacity: 0.7 }}>
+          (Text opacity
+          <Text>
+            {'\n  '}
+            (is inherited
+            <Text style={{ opacity: 0.7 }}>
+              {'\n    '}
+              (and accumulated
+              <Text style={{ backgroundColor: '#ffaaaa' }}>
+                {'\n      '}
+                (and also applies to the background)
+              </Text>
+              {'\n    '})
+            </Text>
+            {'\n  '})
+          </Text>
+          {'\n'})
+        </Text>
+
+        <Spacer />
+
+        <Text>
+          This text contains an inline blue view{' '}
+          <View style={{ width: 25, height: 25, backgroundColor: 'steelblue' }} /> and an inline
+          image{' '}
+          <Image
+            source={{ uri: 'http://lorempixel.com/30/11' }}
+            style={{ width: 30, height: 11, resizeMode: 'cover' }}
+          />
+          .
+        </Text>
+
+        <Spacer />
+
+        <Text>
+          This text contains a view{' '}
+          <View style={{ borderColor: 'red', borderWidth: 1 }}>
+            <Text style={{ borderColor: 'blue', borderWidth: 1 }}>which contains</Text>
+            <Text style={{ borderColor: 'green', borderWidth: 1 }}>another text.</Text>
+            <Text style={{ borderColor: 'yellow', borderWidth: 1 }}>
+              And contains another view
+              <View style={{ borderColor: 'red', borderWidth: 1 }}>
+                <Text style={{ borderColor: 'blue', borderWidth: 1 }}>
+                  which contains another text!
+                </Text>
+              </View>
+            </Text>
+          </View>{' '}
+          And then continues as text.
+        </Text>
+
+        <Text selectable={true}>
+          This text is <Text style={{ fontWeight: 'bold' }}>selectable</Text> if you click-and-hold.
+        </Text>
+        <Text selectable={false}>
+          This text is <Text style={{ fontWeight: 'bold' }}>not selectable</Text> if you
+          click-and-hold.
+        </Text>
+
+        <View style={{ maxWidth: 320 }}>
+          <Text numberOfLines={1}>
+            Maximum of one line, no matter how much I write here. If I keep writing, it
+            {"'"}
+            ll just truncate after one line.
+          </Text>
+          <Text numberOfLines={2} style={{ marginTop: 20 }}>
+            Maximum of two lines, no matter how much I write here. If I keep writing, it
+            {"'"}
+            ll just truncate after two lines.
+          </Text>
+          <Text style={{ marginTop: 20 }}>
+            No maximum lines specified, no matter how much I write here. If I keep writing, it
+            {"'"}
+            ll just keep going and going.
+          </Text>
+        </View>
 
         <View>
-      <Color />
-      <Spacer />
+          <Color />
+          <Spacer />
 
-      <FontFamily />
-      <Spacer />
+          <FontFamily />
+          <Spacer />
 
-      <FontSize />
-      <Spacer />
+          <FontSize />
+          <Spacer />
 
-      <FontStyle />
-      <Spacer />
+          <FontStyle />
+          <Spacer />
 
-      <FontVariant />
-      <Spacer />
+          <FontVariant />
+          <Spacer />
 
-      <FontWeight />
-      <Spacer />
+          <FontWeight />
+          <Spacer />
 
-      <LetterSpacing />
-      <Spacer />
+          <LetterSpacing />
+          <Spacer />
 
-      <LineHeight />
-      <Spacer />
+          <LineHeight />
+          <Spacer />
 
-      <TextAlign />
-      <Spacer />
+          <TextAlign />
+          <Spacer />
 
-      <TextDecoration />
-      <Spacer />
+          <TextDecoration />
+          <Spacer />
 
-      <TextShadow />
-    </View>
-    </View>
+          <TextShadow />
+        </View>
+      </View>
     </Example>
   );
 }
diff --git a/packages/examples/pages/view/index.js b/packages/examples/pages/view/index.js
index b6679679..c57f43ef 100644
--- a/packages/examples/pages/view/index.js
+++ b/packages/examples/pages/view/index.js
@@ -30,7 +30,7 @@ export default function ViewPage() {
 
   React.useEffect(() => {
     const interval = setInterval(() => {
-      setLayoutStyle(l => l.width === '100%' ? l2 : l1);
+      setLayoutStyle((l) => (l.width === '100%' ? l2 : l1));
     }, 2500);
     return () => {
       clearInterval(interval);
@@ -44,7 +44,9 @@ export default function ViewPage() {
   return (
     <Example title="View">
       <View style={styles.container}>
-        <Text accessibilityRole="heading" style={styles.heading}>onLayout</Text>
+        <Text accessibilityRole="heading" style={styles.heading}>
+          onLayout
+        </Text>
         <View>
           <View style={[styles.layoutContainer, layoutStyle]}>
             <View onLayout={handleLayout} style={styles.layoutBox} />
@@ -52,7 +54,9 @@ export default function ViewPage() {
           <Text>{JSON.stringify(layoutInfo, null, 2)}</Text>
         </View>
 
-        <Text accessibilityRole="heading" style={styles.heading}>pointerEvents</Text>
+        <Text accessibilityRole="heading" style={styles.heading}>
+          pointerEvents
+        </Text>
         <View pointerEvents="box-none">
           <View pointerEvents="box-none" style={styles.boxContainer}>
             <Box pointerEvents="none" />
diff --git a/packages/examples/shared/example.js b/packages/examples/shared/example.js
index 60c8c59a..36f6ae9a 100644
--- a/packages/examples/shared/example.js
+++ b/packages/examples/shared/example.js
@@ -17,21 +17,19 @@ export default function Example(props) {
           {props.title}
         </Text>
       </View>
-      <View style={styles.container}>
-        {props.children}
-      </View>
+      <View style={styles.container}>{props.children}</View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   root: {
-    height: '100vh',
+    height: '100vh'
   },
   header: {
     paddingVertical: '1em',
     borderBottomColor: '#ccc',
-    borderBottomWidth: 1,
+    borderBottomWidth: 1
   },
   title: {
     fontSize: 18,
@@ -46,7 +44,7 @@ const styles = StyleSheet.create({
     left: 0,
     top: 0,
     width: 40,
-    alignItems: 'center',
+    alignItems: 'center'
   },
   container: {
     alignItems: 'center',
diff --git a/packages/react-native-web/jest/setup.js b/packages/react-native-web/jest/setup.js
index 76c7dc0a..f2231363 100644
--- a/packages/react-native-web/jest/setup.js
+++ b/packages/react-native-web/jest/setup.js
@@ -8,11 +8,11 @@ const mockEmptyObject = {};
 
 // Make sure snapshots contain the original style objects
 jest.mock('../dist/cjs/exports/StyleSheet/ReactNativePropRegistry', () => ({
-  register: id => id,
+  register: (id) => id,
   getByID: () => mockEmptyObject
 }));
 
 jest.mock('../dist/exports/StyleSheet/ReactNativePropRegistry', () => ({
-  register: id => id,
+  register: (id) => id,
   getByID: () => mockEmptyObject
 }));
diff --git a/packages/react-native-web/src/exports/AccessibilityInfo/index.js b/packages/react-native-web/src/exports/AccessibilityInfo/index.js
index c3a564a8..4ad14bbc 100644
--- a/packages/react-native-web/src/exports/AccessibilityInfo/index.js
+++ b/packages/react-native-web/src/exports/AccessibilityInfo/index.js
@@ -69,12 +69,12 @@ const AccessibilityInfo = {
   /**
    * Add an event handler. Supported events: reduceMotionChanged
    */
-  addEventListener: function(eventName: string, handler: Function): Object {
+  addEventListener: function (eventName: string, handler: Function): Object {
     if (eventName === 'reduceMotionChanged') {
       if (!prefersReducedMotionMedia) {
         return;
       }
-      const listener = event => {
+      const listener = (event) => {
         handler(event.matches);
       };
       addChangeListener(listener);
@@ -89,17 +89,17 @@ const AccessibilityInfo = {
   /**
    * Set accessibility focus to a react component.
    */
-  setAccessibilityFocus: function(reactTag: number): void {},
+  setAccessibilityFocus: function (reactTag: number): void {},
 
   /**
    * Post a string to be announced by the screen reader.
    */
-  announceForAccessibility: function(announcement: string): void {},
+  announceForAccessibility: function (announcement: string): void {},
 
   /**
    * Remove an event handler.
    */
-  removeEventListener: function(eventName: string, handler: Function): void {
+  removeEventListener: function (eventName: string, handler: Function): void {
     if (eventName === 'reduceMotionChanged') {
       const listener = handlers[handler];
       if (!listener || !prefersReducedMotionMedia) {
diff --git a/packages/react-native-web/src/exports/ActivityIndicator/index.js b/packages/react-native-web/src/exports/ActivityIndicator/index.js
index 0bb8e523..aab417b9 100644
--- a/packages/react-native-web/src/exports/ActivityIndicator/index.js
+++ b/packages/react-native-web/src/exports/ActivityIndicator/index.js
@@ -16,7 +16,7 @@ import React, { forwardRef } from 'react';
 
 const accessibilityValue = { max: 1, min: 0 };
 
-const createSvgCircle = style => (
+const createSvgCircle = (style) => (
   <circle cx="16" cy="16" fill="none" r="14" strokeWidth="4" style={style} />
 );
 
diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js
index b81e6c58..80809405 100644
--- a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js
@@ -45,7 +45,7 @@ describe('AppRegistry', () => {
     });
 
     test('"getStyleElement" produces styles that are a function of rendering "element"', () => {
-      const getApplicationStyles = appName => {
+      const getApplicationStyles = (appName) => {
         const { element, getStyleElement } = AppRegistry.getApplication(appName, {});
         render(element);
         return getStyleElement().props.dangerouslySetInnerHTML.__html;
diff --git a/packages/react-native-web/src/exports/AppRegistry/index.js b/packages/react-native-web/src/exports/AppRegistry/index.js
index cbfffccd..5a498eef 100644
--- a/packages/react-native-web/src/exports/AppRegistry/index.js
+++ b/packages/react-native-web/src/exports/AppRegistry/index.js
@@ -21,7 +21,7 @@ export type ComponentProvider = () => ComponentType<any>;
 export type ComponentProviderInstrumentationHook = (
   component: ComponentProvider
 ) => ComponentType<any>;
-export type WrapperComponentProvider = any => ComponentType<*>;
+export type WrapperComponentProvider = (any) => ComponentType<*>;
 
 let componentProviderInstrumentationHook: ComponentProviderInstrumentationHook = (
   component: ComponentProvider
@@ -55,13 +55,13 @@ export default class AppRegistry {
 
   static registerComponent(appKey: string, componentProvider: ComponentProvider): string {
     runnables[appKey] = {
-      getApplication: appParameters =>
+      getApplication: (appParameters) =>
         getApplication(
           componentProviderInstrumentationHook(componentProvider),
           appParameters ? appParameters.initialProps : emptyObject,
           wrapperComponentProvider && wrapperComponentProvider(appParameters)
         ),
-      run: appParameters =>
+      run: (appParameters) =>
         renderApplication(
           componentProviderInstrumentationHook(componentProvider),
           wrapperComponentProvider && wrapperComponentProvider(appParameters),
diff --git a/packages/react-native-web/src/exports/AppRegistry/renderApplication.js b/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
index 53910894..5f010ec4 100644
--- a/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
+++ b/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
@@ -51,7 +51,7 @@ export function getApplication(
     </AppContainer>
   );
   // Don't escape CSS text
-  const getStyleElement = props => {
+  const getStyleElement = (props) => {
     const sheet = styleResolver.getStyleSheet();
     return (
       <style {...props} dangerouslySetInnerHTML={{ __html: sheet.textContent }} id={sheet.id} />
diff --git a/packages/react-native-web/src/exports/AppState/index.js b/packages/react-native-web/src/exports/AppState/index.js
index aacfc740..72211864 100644
--- a/packages/react-native-web/src/exports/AppState/index.js
+++ b/packages/react-native-web/src/exports/AppState/index.js
@@ -68,7 +68,7 @@ export default class AppState {
         type
       );
       if (type === 'change') {
-        const listenerIndex = findIndex(listeners, pair => pair[0] === handler);
+        const listenerIndex = findIndex(listeners, (pair) => pair[0] === handler);
         invariant(
           listenerIndex !== -1,
           'Trying to remove AppState listener for unregistered handler'
diff --git a/packages/react-native-web/src/exports/Dimensions/index.js b/packages/react-native-web/src/exports/Dimensions/index.js
index a2414947..0c557727 100644
--- a/packages/react-native-web/src/exports/Dimensions/index.js
+++ b/packages/react-native-web/src/exports/Dimensions/index.js
@@ -75,13 +75,13 @@ export default class Dimensions {
     };
 
     if (Array.isArray(listeners['change'])) {
-      listeners['change'].forEach(handler => handler(dimensions));
+      listeners['change'].forEach((handler) => handler(dimensions));
     }
   }
 
   static addEventListener(
     type: DimensionEventListenerType,
-    handler: DimensionsValue => void
+    handler: (DimensionsValue) => void
   ): void {
     listeners[type] = listeners[type] || [];
     listeners[type].push(handler);
@@ -89,10 +89,10 @@ export default class Dimensions {
 
   static removeEventListener(
     type: DimensionEventListenerType,
-    handler: DimensionsValue => void
+    handler: (DimensionsValue) => void
   ): void {
     if (Array.isArray(listeners[type])) {
-      listeners[type] = listeners[type].filter(_handler => _handler !== handler);
+      listeners[type] = listeners[type].filter((_handler) => _handler !== handler);
     }
   }
 }
diff --git a/packages/react-native-web/src/exports/Image/__tests__/index-test.js b/packages/react-native-web/src/exports/Image/__tests__/index-test.js
index 82e191c6..23889318 100644
--- a/packages/react-native-web/src/exports/Image/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Image/__tests__/index-test.js
@@ -212,7 +212,7 @@ describe('components/Image', () => {
   });
 
   describe('prop "resizeMode"', () => {
-    ['contain', 'cover', 'none', 'repeat', 'stretch', undefined].forEach(resizeMode => {
+    ['contain', 'cover', 'none', 'repeat', 'stretch', undefined].forEach((resizeMode) => {
       test(`value "${resizeMode}"`, () => {
         const { container } = render(<Image resizeMode={resizeMode} />);
         expect(container.firstChild).toMatchSnapshot();
@@ -223,7 +223,7 @@ describe('components/Image', () => {
   describe('prop "source"', () => {
     test('does not throw', () => {
       const sources = [null, '', {}, { uri: '' }, { uri: 'https://google.com' }];
-      sources.forEach(source => {
+      sources.forEach((source) => {
         expect(() => render(<Image source={source} />)).not.toThrow();
       });
     });
@@ -347,7 +347,7 @@ describe('components/Image', () => {
     const uriTwo = 'https://twitter.com/favicon.ico';
     ImageUriCache.add(uriOne);
     ImageUriCache.add(uriTwo);
-    return Image.queryCache([uriOne, uriTwo, 'oops']).then(res => {
+    return Image.queryCache([uriOne, uriTwo, 'oops']).then((res) => {
       expect(res).toEqual({
         [uriOne]: 'disk/memory',
         [uriTwo]: 'disk/memory'
diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js
index 303174c0..eb189fcb 100644
--- a/packages/react-native-web/src/exports/Image/index.js
+++ b/packages/react-native-web/src/exports/Image/index.js
@@ -293,17 +293,17 @@ const Image = forwardRef<ImageProps, *>((props, ref) => {
 Image.displayName = 'Image';
 
 // $FlowFixMe
-Image.getSize = function(uri, success, failure) {
+Image.getSize = function (uri, success, failure) {
   ImageLoader.getSize(uri, success, failure);
 };
 
 // $FlowFixMe
-Image.prefetch = function(uri) {
+Image.prefetch = function (uri) {
   return ImageLoader.prefetch(uri);
 };
 
 // $FlowFixMe
-Image.queryCache = function(uris) {
+Image.queryCache = function (uris) {
   return ImageLoader.queryCache(uris);
 };
 
diff --git a/packages/react-native-web/src/exports/InteractionManager/index.js b/packages/react-native-web/src/exports/InteractionManager/index.js
index d20282b2..1883930e 100644
--- a/packages/react-native-web/src/exports/InteractionManager/index.js
+++ b/packages/react-native-web/src/exports/InteractionManager/index.js
@@ -23,7 +23,7 @@ const InteractionManager = {
   runAfterInteractions(task: ?Function): { then: Function, done: Function, cancel: Function } {
     let handle;
 
-    const promise = new Promise(resolve => {
+    const promise = new Promise((resolve) => {
       handle = requestIdleCallback(() => {
         if (task) {
           resolve(task());
diff --git a/packages/react-native-web/src/exports/Linking/index.js b/packages/react-native-web/src/exports/Linking/index.js
index 8424c4f5..ddc3e293 100644
--- a/packages/react-native-web/src/exports/Linking/index.js
+++ b/packages/react-native-web/src/exports/Linking/index.js
@@ -28,7 +28,7 @@ class Linking {
   _dispatchEvent(event: string, ...data: any) {
     const listeners = this._eventCallbacks[event];
     if (listeners != null && Array.isArray(listeners)) {
-      listeners.map(listener => {
+      listeners.map((listener) => {
         listener(...data);
       });
     }
@@ -52,7 +52,7 @@ class Linking {
    */
   removeEventListener: OnOpenCallback | GenericCallback = (event: string, callback: Callback) => {
     const callbacks = this._eventCallbacks[event];
-    const filteredCallbacks = callbacks.filter(c => c.toString() !== callback.toString());
+    const filteredCallbacks = callbacks.filter((c) => c.toString() !== callback.toString());
     this._eventCallbacks[event] = filteredCallbacks;
   };
 
@@ -85,7 +85,7 @@ class Linking {
   }
 }
 
-const open = url => {
+const open = (url) => {
   if (canUseDOM) {
     const urlToOpen = new URL(url, window.location).toString();
     window.open(urlToOpen, '_blank', 'noopener');
diff --git a/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js b/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js
index 9c3df934..92512c53 100644
--- a/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js
+++ b/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js
@@ -125,10 +125,10 @@ const ModalFocusTrap = ({ active, children }: ModalFocusTrapProps) => {
 
   // To be fully compliant with WCAG we need to refocus element that triggered opening modal
   // after closing it
-  useEffect(function() {
+  useEffect(function () {
     if (canUseDOM) {
       const lastFocusedElementOutsideTrap = document.activeElement;
-      return function() {
+      return function () {
         if (lastFocusedElementOutsideTrap && document.contains(lastFocusedElementOutsideTrap)) {
           UIManager.focus(lastFocusedElementOutsideTrap);
         }
diff --git a/packages/react-native-web/src/exports/Modal/__tests__/index.js b/packages/react-native-web/src/exports/Modal/__tests__/index.js
index 41c11bb2..ea1e4fba 100644
--- a/packages/react-native-web/src/exports/Modal/__tests__/index.js
+++ b/packages/react-native-web/src/exports/Modal/__tests__/index.js
@@ -535,7 +535,7 @@ describe('components/Modal', () => {
       React.useEffect(() => spy('mount'), []);
       return (
         <Modal visible={true}>
-          <a ref={ref => (ref ? spy('ref') : spy('noref'))} />
+          <a ref={(ref) => (ref ? spy('ref') : spy('noref'))} />
         </Modal>
       );
     }
diff --git a/packages/react-native-web/src/exports/Modal/index.js b/packages/react-native-web/src/exports/Modal/index.js
index addabc89..5c5b48a2 100644
--- a/packages/react-native-web/src/exports/Modal/index.js
+++ b/packages/react-native-web/src/exports/Modal/index.js
@@ -41,7 +41,7 @@ function notifyActiveModalListeners() {
     return;
   }
   const activeModalId = activeModalStack[activeModalStack.length - 1];
-  activeModalStack.forEach(modalId => {
+  activeModalStack.forEach((modalId) => {
     if (modalId in activeModalListeners) {
       activeModalListeners[modalId](modalId === activeModalId);
     }
diff --git a/packages/react-native-web/src/exports/Pressable/index.js b/packages/react-native-web/src/exports/Pressable/index.js
index cefe140c..c1b773f9 100644
--- a/packages/react-native-web/src/exports/Pressable/index.js
+++ b/packages/react-native-web/src/exports/Pressable/index.js
@@ -139,7 +139,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
   const interactionState = { hovered, focused, pressed };
 
   function createFocusHandler(callback, value) {
-    return function(event) {
+    return function (event) {
       if (event.nativeEvent.target === hostRef.current) {
         setFocused(value);
         if (callback != null) {
diff --git a/packages/react-native-web/src/exports/SafeAreaView/index.js b/packages/react-native-web/src/exports/SafeAreaView/index.js
index 90f9af40..a78a5a27 100644
--- a/packages/react-native-web/src/exports/SafeAreaView/index.js
+++ b/packages/react-native-web/src/exports/SafeAreaView/index.js
@@ -16,7 +16,7 @@ import StyleSheet from '../StyleSheet';
 import View from '../View';
 import React, { forwardRef } from 'react';
 
-const cssFunction: 'constant' | 'env' = (function() {
+const cssFunction: 'constant' | 'env' = (function () {
   if (
     canUseDOM &&
     window.CSS &&
@@ -31,16 +31,7 @@ const cssFunction: 'constant' | 'env' = (function() {
 const SafeAreaView = forwardRef<ViewProps, Node>((props, ref) => {
   const { style, ...rest } = props;
 
-  return (
-    <View
-      {...rest}
-      ref={ref}
-      style={StyleSheet.compose(
-        styles.root,
-        style
-      )}
-    />
-  );
+  return <View {...rest} ref={ref} style={StyleSheet.compose(styles.root, style)} />;
 });
 
 SafeAreaView.displayName = 'SafeAreaView';
diff --git a/packages/react-native-web/src/exports/ScrollView/index.js b/packages/react-native-web/src/exports/ScrollView/index.js
index 061e4e6d..4a826dfb 100644
--- a/packages/react-native-web/src/exports/ScrollView/index.js
+++ b/packages/react-native-web/src/exports/ScrollView/index.js
@@ -138,7 +138,7 @@ const ScrollView = ((createReactClass({
     if (process.env.NODE_ENV !== 'production' && this.props.style) {
       const style = StyleSheet.flatten(this.props.style);
       const childLayoutProps = ['alignItems', 'justifyContent'].filter(
-        prop => style && style[prop] !== undefined
+        (prop) => style && style[prop] !== undefined
       );
       invariant(
         childLayoutProps.length === 0,
diff --git a/packages/react-native-web/src/exports/StyleSheet/ReactNativePropRegistry.js b/packages/react-native-web/src/exports/StyleSheet/ReactNativePropRegistry.js
index b461663f..8476911f 100644
--- a/packages/react-native-web/src/exports/StyleSheet/ReactNativePropRegistry.js
+++ b/packages/react-native-web/src/exports/StyleSheet/ReactNativePropRegistry.js
@@ -13,7 +13,7 @@ const objects = {};
 const prefix = 'r';
 let uniqueID = 1;
 
-const createKey = id => `${prefix}-${id}`;
+const createKey = (id) => `${prefix}-${id}`;
 
 export default class ReactNativePropRegistry {
   static register(object: Object): number {
diff --git a/packages/react-native-web/src/exports/StyleSheet/StyleSheet.js b/packages/react-native-web/src/exports/StyleSheet/StyleSheet.js
index c967e0ed..28f4b111 100644
--- a/packages/react-native-web/src/exports/StyleSheet/StyleSheet.js
+++ b/packages/react-native-web/src/exports/StyleSheet/StyleSheet.js
@@ -28,7 +28,7 @@ const StyleSheet = {
       /* eslint-disable prefer-rest-params */
       const len = arguments.length;
       if (len > 2) {
-        const readableStyles = [...arguments].map(a => flattenStyle(a));
+        const readableStyles = [...arguments].map((a) => flattenStyle(a));
         throw new Error(
           `StyleSheet.compose() only accepts 2 arguments, received ${len}: ${JSON.stringify(
             readableStyles
@@ -46,7 +46,7 @@ const StyleSheet = {
   },
   create(styles: Object) {
     const result = {};
-    Object.keys(styles).forEach(key => {
+    Object.keys(styles).forEach((key) => {
       if (process.env.NODE_ENV !== 'production') {
         validate(key, styles);
       }
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/createOrderedCSSStyleSheet-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/createOrderedCSSStyleSheet-test.js
index c279ea3b..afed0df3 100644
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/createOrderedCSSStyleSheet-test.js
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/createOrderedCSSStyleSheet-test.js
@@ -11,7 +11,7 @@ const insertStyleElement = () => {
   return element;
 };
 
-const removeStyleElement = element => {
+const removeStyleElement = (element) => {
   document.head.removeChild(element);
 };
 
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js
index b39d7b07..173e7d52 100644
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js
@@ -2,7 +2,7 @@
 
 import StyleSheet from '..';
 
-const isPlainObject = x => {
+const isPlainObject = (x) => {
   const toString = Object.prototype.toString;
   let proto;
   /* eslint-disable */
@@ -24,28 +24,13 @@ describe('StyleSheet', () => {
 
   describe('compose', () => {
     test('returns array when neither style is falsey', () => {
-      expect(
-        StyleSheet.compose(
-          1,
-          2
-        )
-      ).toEqual([1, 2]);
+      expect(StyleSheet.compose(1, 2)).toEqual([1, 2]);
     });
     test('returns style1 when style2 is falsey', () => {
-      expect(
-        StyleSheet.compose(
-          1,
-          null
-        )
-      ).toBe(1);
+      expect(StyleSheet.compose(1, null)).toBe(1);
     });
     test('returns style2 when style1 is falsey', () => {
-      expect(
-        StyleSheet.compose(
-          null,
-          2
-        )
-      ).toBe(2);
+      expect(StyleSheet.compose(null, 2)).toBe(2);
     });
   });
 
diff --git a/packages/react-native-web/src/exports/StyleSheet/compile.js b/packages/react-native-web/src/exports/StyleSheet/compile.js
index 98de852a..5e8e0e8a 100644
--- a/packages/react-native-web/src/exports/StyleSheet/compile.js
+++ b/packages/react-native-web/src/exports/StyleSheet/compile.js
@@ -194,7 +194,7 @@ function createAtomicRules(identifier: string, property, value): Rules {
 function createDeclarationBlock(style: Style) {
   const domStyle = prefixStyles(createReactDOMStyle(style));
   const declarationsString = Object.keys(domStyle)
-    .map(property => {
+    .map((property) => {
       const value = domStyle[property];
       const prop = hyphenateStyleName(property);
       // The prefixer may return an array of values:
@@ -202,7 +202,7 @@ function createDeclarationBlock(style: Style) {
       // to represent "fallback" declarations
       // { display: -webkit-flex; display: flex; }
       if (Array.isArray(value)) {
-        return value.map(v => `${prop}:${v}`).join(';');
+        return value.map((v) => `${prop}:${v}`).join(';');
       } else {
         return `${prop}:${value}`;
       }
@@ -235,7 +235,7 @@ function createKeyframes(keyframes) {
   const steps =
     '{' +
     Object.keys(keyframes)
-      .map(stepName => {
+      .map((stepName) => {
         const rule = keyframes[stepName];
         const block = createDeclarationBlock(rule);
         return `${stepName}${block}`;
@@ -243,7 +243,7 @@ function createKeyframes(keyframes) {
       .join('') +
     '}';
 
-  const rules = prefixes.map(prefix => {
+  const rules = prefixes.map((prefix) => {
     return `@${prefix}keyframes ${identifier}${steps}`;
   });
   return { identifier, rules };
@@ -261,7 +261,7 @@ function processKeyframesValue(keyframesValue) {
   const rules = [];
   const value = Array.isArray(keyframesValue) ? keyframesValue : [keyframesValue];
 
-  value.forEach(keyframes => {
+  value.forEach((keyframes) => {
     if (typeof keyframes === 'string') {
       // Support external animation libraries (identifiers only)
       animationNames.push(keyframes);
diff --git a/packages/react-native-web/src/exports/StyleSheet/createCompileableStyle.js b/packages/react-native-web/src/exports/StyleSheet/createCompileableStyle.js
index ff5d4d1a..3c9104a6 100644
--- a/packages/react-native-web/src/exports/StyleSheet/createCompileableStyle.js
+++ b/packages/react-native-web/src/exports/StyleSheet/createCompileableStyle.js
@@ -32,7 +32,9 @@ function textShadowReducer(resolvedStyle, style) {
   if (
     color &&
     (height !== 0 || width !== 0 || radius !== 0) &&
-    (offsetX != null && offsetY != null && blurRadius != null)
+    offsetX != null &&
+    offsetY != null &&
+    blurRadius != null
   ) {
     resolvedStyle.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`;
   }
diff --git a/packages/react-native-web/src/exports/StyleSheet/createOrderedCSSStyleSheet.js b/packages/react-native-web/src/exports/StyleSheet/createOrderedCSSStyleSheet.js
index 1a99e52c..d35afd20 100644
--- a/packages/react-native-web/src/exports/StyleSheet/createOrderedCSSStyleSheet.js
+++ b/packages/react-native-web/src/exports/StyleSheet/createOrderedCSSStyleSheet.js
@@ -86,7 +86,7 @@ export default function createOrderedCSSStyleSheet(sheet: ?CSSStyleSheet) {
      */
     getTextContent(): string {
       return getOrderedGroups(groups)
-        .map(group => {
+        .map((group) => {
           const rules = groups[group].rules;
           return rules.join('\n');
         })
diff --git a/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js b/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
index 0aaa3b32..62111302 100644
--- a/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
+++ b/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
@@ -38,7 +38,7 @@ const supportsCSS3TextDecoration =
 // { scale: 2 } => 'scale(2)'
 // { translateX: 20 } => 'translateX(20px)'
 // { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'
-const mapTransform = transform => {
+const mapTransform = (transform) => {
   const type = Object.keys(transform)[0];
   const value = transform[type];
   if (type === 'matrix' || type === 'matrix3d') {
@@ -61,7 +61,7 @@ const resolveTransform = (resolvedStyle, style) => {
  * Reducer
  */
 
-const createReactDOMStyle = style => {
+const createReactDOMStyle = (style) => {
   if (!style) {
     return emptyObject;
   }
@@ -70,7 +70,7 @@ const createReactDOMStyle = style => {
 
   Object.keys(style)
     .sort()
-    .forEach(prop => {
+    .forEach((prop) => {
       const value = normalizeValueWithProperty(style[prop], prop);
 
       // Ignore everything else with a null value
diff --git a/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js b/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js
index 5d2f6986..4c8ceb40 100644
--- a/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js
+++ b/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js
@@ -33,8 +33,8 @@ export default function createStyleResolver() {
     inserted = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
     sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(STYLE_ELEMENT_ID));
     cache = {};
-    modality(rule => sheet.insert(rule, STYLE_GROUPS.modality));
-    initialRules.forEach(rule => {
+    modality((rule) => sheet.insert(rule, STYLE_GROUPS.modality));
+    initialRules.forEach((rule) => {
       sheet.insert(rule, STYLE_GROUPS.reset);
     });
   };
@@ -59,10 +59,10 @@ export default function createStyleResolver() {
     if (!inserted[dir][id]) {
       const style = createCompileableStyle(i18nStyle(flattenStyle(id)));
       const results = atomic(style);
-      Object.keys(results).forEach(key => {
+      Object.keys(results).forEach((key) => {
         const { identifier, property, rules, value } = results[key];
         addToCache(identifier, property, value);
-        rules.forEach(rule => {
+        rules.forEach((rule) => {
           const group = STYLE_GROUPS.custom[property] || STYLE_GROUPS.atomic;
           sheet.insert(rule, group);
         });
@@ -83,11 +83,11 @@ export default function createStyleResolver() {
     }
 
     if (Array.isArray(classList)) {
-      flattenArray(classList).forEach(identifier => {
+      flattenArray(classList).forEach((identifier) => {
         if (identifier) {
           if (inserted.css[identifier] == null && resolved.css[identifier] != null) {
             const item = resolved.css[identifier];
-            item.rules.forEach(rule => {
+            item.rules.forEach((rule) => {
               sheet.insert(rule, item.group);
             });
             inserted.css[identifier] = true;
@@ -177,10 +177,10 @@ export default function createStyleResolver() {
                 styleProp === 'scrollbarWidth'
               ) {
                 const a = atomic({ [styleProp]: value });
-                Object.keys(a).forEach(key => {
+                Object.keys(a).forEach((key) => {
                   const { identifier, rules } = a[key];
                   props.classList.push(identifier);
-                  rules.forEach(rule => {
+                  rules.forEach((rule) => {
                     sheet.insert(rule, STYLE_GROUPS.atomic);
                   });
                 });
@@ -224,11 +224,11 @@ export default function createStyleResolver() {
     },
     createCSS(rules, group) {
       const result = {};
-      Object.keys(rules).forEach(name => {
+      Object.keys(rules).forEach((name) => {
         const style = rules[name];
         const compiled = classic(style, name);
 
-        Object.keys(compiled).forEach(key => {
+        Object.keys(compiled).forEach((key) => {
           const { identifier, rules } = compiled[key];
           resolved.css[identifier] = { group: group || STYLE_GROUPS.classic, rules };
           result[name] = identifier;
@@ -246,9 +246,9 @@ export default function createStyleResolver() {
 /**
  * Misc helpers
  */
-const createCacheKey = id => {
+const createCacheKey = (id) => {
   const prefix = 'rn';
   return `${prefix}-${id}`;
 };
 
-const classListToString = list => list.join(' ').trim();
+const classListToString = (list) => list.join(' ').trim();
diff --git a/packages/react-native-web/src/exports/StyleSheet/modality.js b/packages/react-native-web/src/exports/StyleSheet/modality.js
index b3170153..eb9b2040 100644
--- a/packages/react-native-web/src/exports/StyleSheet/modality.js
+++ b/packages/react-native-web/src/exports/StyleSheet/modality.js
@@ -24,7 +24,7 @@ const focusVisibleAttributeName = 'data-focusvisible-polyfill';
 
 const rule = `:focus:not([${focusVisibleAttributeName}]){outline: none;}`;
 
-const modality = insertRule => {
+const modality = (insertRule) => {
   insertRule(rule);
 
   if (!canUseDOM) {
@@ -190,7 +190,7 @@ const modality = insertRule => {
       // regular focus change.
       hadFocusVisibleRecently = true;
       window.clearTimeout(hadFocusVisibleRecentlyTimeout);
-      hadFocusVisibleRecentlyTimeout = window.setTimeout(function() {
+      hadFocusVisibleRecentlyTimeout = window.setTimeout(function () {
         hadFocusVisibleRecently = false;
         window.clearTimeout(hadFocusVisibleRecentlyTimeout);
       }, 100);
diff --git a/packages/react-native-web/src/exports/Switch/index.js b/packages/react-native-web/src/exports/Switch/index.js
index 1e87caa8..12871174 100644
--- a/packages/react-native-web/src/exports/Switch/index.js
+++ b/packages/react-native-web/src/exports/Switch/index.js
@@ -67,7 +67,7 @@ const Switch = forwardRef<SwitchProps, *>((props, forwardedRef) => {
   const minWidth = multiplyStyleLengthValue(height, 2);
   const width = styleWidth > minWidth ? styleWidth : minWidth;
   const trackBorderRadius = multiplyStyleLengthValue(height, 0.5);
-  const trackCurrentColor = (function() {
+  const trackCurrentColor = (function () {
     if (value === true) {
       if (trackColor != null && typeof trackColor === 'object') {
         return trackColor.true;
diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js
index 4044fcb5..73f2b425 100644
--- a/packages/react-native-web/src/exports/Text/index.js
+++ b/packages/react-native-web/src/exports/Text/index.js
@@ -68,7 +68,7 @@ const forwardPropsList = {
   href: true
 };
 
-const pickProps = props => pick(props, forwardPropsList);
+const pickProps = (props) => pick(props, forwardPropsList);
 
 const Text = forwardRef<TextProps, *>((props, forwardedRef) => {
   const {
diff --git a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
index 11365ee7..19357b54 100644
--- a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
@@ -26,7 +26,7 @@ function createEvent(type, data = {}) {
   const event = document.createEvent('CustomEvent');
   event.initCustomEvent(type, true, true);
   if (data != null) {
-    Object.keys(data).forEach(key => {
+    Object.keys(data).forEach((key) => {
       const value = data[key];
       if (key === 'timeStamp' && !value) {
         return;
@@ -290,7 +290,7 @@ describe('components/TextInput', () => {
 
   describe('prop "onKeyPress"', () => {
     test('arrow key', () => {
-      const onKeyPress = jest.fn(e => {
+      const onKeyPress = jest.fn((e) => {
         e.persist();
       });
       const { container } = render(<TextInput onKeyPress={onKeyPress} />);
@@ -312,7 +312,7 @@ describe('components/TextInput', () => {
     });
 
     test('backspace key', () => {
-      const onKeyPress = jest.fn(e => {
+      const onKeyPress = jest.fn((e) => {
         e.persist();
       });
       const { container } = render(<TextInput onKeyPress={onKeyPress} />);
@@ -334,7 +334,7 @@ describe('components/TextInput', () => {
     });
 
     test('enter key', () => {
-      const onKeyPress = jest.fn(e => {
+      const onKeyPress = jest.fn((e) => {
         e.persist();
       });
       const { container } = render(<TextInput onKeyPress={onKeyPress} />);
@@ -356,7 +356,7 @@ describe('components/TextInput', () => {
     });
 
     test('escape key', () => {
-      const onKeyPress = jest.fn(e => {
+      const onKeyPress = jest.fn((e) => {
         e.persist();
       });
       const { container } = render(<TextInput onKeyPress={onKeyPress} />);
@@ -378,7 +378,7 @@ describe('components/TextInput', () => {
     });
 
     test('space key', () => {
-      const onKeyPress = jest.fn(e => {
+      const onKeyPress = jest.fn((e) => {
         e.persist();
       });
       const { container } = render(<TextInput onKeyPress={onKeyPress} />);
@@ -400,7 +400,7 @@ describe('components/TextInput', () => {
     });
 
     test('tab key', () => {
-      const onKeyPress = jest.fn(e => {
+      const onKeyPress = jest.fn((e) => {
         e.persist();
       });
       const { container } = render(<TextInput onKeyPress={onKeyPress} />);
@@ -422,7 +422,7 @@ describe('components/TextInput', () => {
     });
 
     test('text key', () => {
-      const onKeyPress = jest.fn(e => {
+      const onKeyPress = jest.fn((e) => {
         e.persist();
       });
       const { container } = render(<TextInput onKeyPress={onKeyPress} />);
@@ -444,7 +444,7 @@ describe('components/TextInput', () => {
     });
 
     test('modifier keys are included', () => {
-      const onKeyPress = jest.fn(e => {
+      const onKeyPress = jest.fn((e) => {
         e.persist();
       });
       const { container } = render(<TextInput onKeyPress={onKeyPress} />);
@@ -474,7 +474,7 @@ describe('components/TextInput', () => {
     });
 
     test('meta key + Enter calls "onKeyPress"', () => {
-      const onKeyPress = jest.fn(e => {
+      const onKeyPress = jest.fn((e) => {
         e.persist();
       });
       const { container } = render(<TextInput onKeyPress={onKeyPress} />);
@@ -515,7 +515,7 @@ describe('components/TextInput', () => {
   });
 
   describe('prop "onSubmitEditing"', () => {
-    test('single-line input', done => {
+    test('single-line input', (done) => {
       const { container } = render(
         <TextInput defaultValue="12345" onSubmitEditing={onSubmitEditing} />
       );
diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js
index c9b0b443..207d5cb2 100644
--- a/packages/react-native-web/src/exports/TextInput/index.js
+++ b/packages/react-native-web/src/exports/TextInput/index.js
@@ -100,7 +100,7 @@ const forwardPropsList = {
   onMouseUp: true
 };
 
-const pickProps = props => pick(props, forwardPropsList);
+const pickProps = (props) => pick(props, forwardPropsList);
 
 // If an Input Method Editor is processing key input, the 'keyCode' is 229.
 // https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
@@ -210,17 +210,17 @@ const TextInput = forwardRef<TextInputProps, *>((props, forwardedRef) => {
   }, [hostRef, multiline, onContentSizeChange]);
 
   const imperativeRef = useMemo(
-    () => hostNode => {
+    () => (hostNode) => {
       // TextInput needs to add more methods to the hostNode in addition to those
       // added by `usePlatformMethods`. This is temporarily until an API like
       // `TextInput.clear(hostRef)` is added to React Native.
       if (hostNode != null) {
-        hostNode.clear = function() {
+        hostNode.clear = function () {
           if (hostNode != null) {
             hostNode.value = '';
           }
         };
-        hostNode.isFocused = function() {
+        hostNode.isFocused = function () {
           return hostNode != null && TextInputState.currentlyFocusedField() === hostNode;
         };
         handleContentSizeChange();
@@ -329,10 +329,7 @@ const TextInput = forwardRef<TextInputProps, *>((props, forwardedRef) => {
 
   const component = multiline ? 'textarea' : 'input';
   const classList = [classes.textinput];
-  const style = StyleSheet.compose(
-    props.style,
-    placeholderTextColor && { placeholderTextColor }
-  );
+  const style = StyleSheet.compose(props.style, placeholderTextColor && { placeholderTextColor });
 
   useElementLayout(hostRef, onLayout);
   useResponderEvents(hostRef, {
diff --git a/packages/react-native-web/src/exports/Touchable/BoundingDimensions.js b/packages/react-native-web/src/exports/Touchable/BoundingDimensions.js
index 40258771..2702b61f 100644
--- a/packages/react-native-web/src/exports/Touchable/BoundingDimensions.js
+++ b/packages/react-native-web/src/exports/Touchable/BoundingDimensions.js
@@ -20,12 +20,12 @@ function BoundingDimensions(width: number, height: number) {
   this.height = height;
 }
 
-BoundingDimensions.prototype.destructor = function() {
+BoundingDimensions.prototype.destructor = function () {
   this.width = null;
   this.height = null;
 };
 
-BoundingDimensions.getPooledFromElement = function(element) {
+BoundingDimensions.getPooledFromElement = function (element) {
   return BoundingDimensions.getPooled(element.offsetWidth, element.offsetHeight);
 };
 
diff --git a/packages/react-native-web/src/exports/Touchable/Position.js b/packages/react-native-web/src/exports/Touchable/Position.js
index 2169feab..1f45c3a2 100644
--- a/packages/react-native-web/src/exports/Touchable/Position.js
+++ b/packages/react-native-web/src/exports/Touchable/Position.js
@@ -16,7 +16,7 @@ function Position(left, top) {
   this.top = top;
 }
 
-Position.prototype.destructor = function() {
+Position.prototype.destructor = function () {
   this.left = null;
   this.top = null;
 };
diff --git a/packages/react-native-web/src/exports/Touchable/index.js b/packages/react-native-web/src/exports/Touchable/index.js
index 1b995442..b25b5acc 100644
--- a/packages/react-native-web/src/exports/Touchable/index.js
+++ b/packages/react-native-web/src/exports/Touchable/index.js
@@ -23,7 +23,7 @@ type Event = Object;
 type PressEvent = Object;
 type EdgeInsetsProp = Object;
 
-const extractSingleTouch = nativeEvent => {
+const extractSingleTouch = (nativeEvent) => {
   const touches = nativeEvent.touches;
   const changedTouches = nativeEvent.changedTouches;
   const hasTouches = touches && touches.length > 0;
@@ -364,10 +364,10 @@ const LONG_PRESS_ALLOWED_MOVEMENT = 10;
  */
 const TouchableMixin = {
   // HACK (part 1): basic support for touchable interactions using a keyboard
-  componentDidMount: function() {
+  componentDidMount: function () {
     this._touchableNode = findNodeHandle(this);
     if (this._touchableNode && this._touchableNode.addEventListener) {
-      this._touchableBlurListener = e => {
+      this._touchableBlurListener = (e) => {
         if (this._isTouchableKeyboardActive) {
           if (
             this.state.touchable.touchState &&
@@ -385,7 +385,7 @@ const TouchableMixin = {
   /**
    * Clear all timeouts on unmount
    */
-  componentWillUnmount: function() {
+  componentWillUnmount: function () {
     if (this._touchableNode && this._touchableNode.addEventListener) {
       this._touchableNode.removeEventListener('blur', this._touchableBlurListener);
     }
@@ -401,7 +401,7 @@ const TouchableMixin = {
    * @return {object} State object to be placed inside of
    * `this.state.touchable`.
    */
-  touchableGetInitialState: function() {
+  touchableGetInitialState: function () {
     return {
       touchable: { touchState: undefined, responderID: null }
     };
@@ -411,21 +411,21 @@ const TouchableMixin = {
   /**
    * Must return true if embedded in a native platform scroll view.
    */
-  touchableHandleResponderTerminationRequest: function() {
+  touchableHandleResponderTerminationRequest: function () {
     return !this.props.rejectResponderTermination;
   },
 
   /**
    * Must return true to start the process of `Touchable`.
    */
-  touchableHandleStartShouldSetResponder: function() {
+  touchableHandleStartShouldSetResponder: function () {
     return !this.props.disabled;
   },
 
   /**
    * Return true to cancel press on long press.
    */
-  touchableLongPressCancelsPress: function() {
+  touchableLongPressCancelsPress: function () {
     return true;
   },
 
@@ -434,7 +434,7 @@ const TouchableMixin = {
    * @param {SyntheticEvent} e Synthetic event from event system.
    *
    */
-  touchableHandleResponderGrant: function(e: PressEvent) {
+  touchableHandleResponderGrant: function (e: PressEvent) {
     const dispatchID = e.currentTarget;
     // Since e is used in a callback invoked on another event loop
     // (as in setTimeout etc), we need to call e.persist() on the
@@ -472,7 +472,7 @@ const TouchableMixin = {
   /**
    * Place as callback for a DOM element's `onResponderRelease` event.
    */
-  touchableHandleResponderRelease: function(e: PressEvent) {
+  touchableHandleResponderRelease: function (e: PressEvent) {
     this.pressInLocation = null;
     this._receiveSignal(Signals.RESPONDER_RELEASE, e);
   },
@@ -480,7 +480,7 @@ const TouchableMixin = {
   /**
    * Place as callback for a DOM element's `onResponderTerminate` event.
    */
-  touchableHandleResponderTerminate: function(e: PressEvent) {
+  touchableHandleResponderTerminate: function (e: PressEvent) {
     this.pressInLocation = null;
     this._receiveSignal(Signals.RESPONDER_TERMINATED, e);
   },
@@ -488,7 +488,7 @@ const TouchableMixin = {
   /**
    * Place as callback for a DOM element's `onResponderMove` event.
    */
-  touchableHandleResponderMove: function(e: PressEvent) {
+  touchableHandleResponderMove: function (e: PressEvent) {
     // Measurement may not have returned yet.
     if (!this.state.touchable.positionOnActivate) {
       return;
@@ -565,7 +565,7 @@ const TouchableMixin = {
    * element that was blurred just prior to this. This can be overridden when
    * using `Touchable.Mixin.withoutDefaultFocusAndBlur`.
    */
-  touchableHandleFocus: function(e: Event) {
+  touchableHandleFocus: function (e: Event) {
     this.props.onFocus && this.props.onFocus(e);
   },
 
@@ -577,7 +577,7 @@ const TouchableMixin = {
    * This can be overridden when using
    * `Touchable.Mixin.withoutDefaultFocusAndBlur`.
    */
-  touchableHandleBlur: function(e: Event) {
+  touchableHandleBlur: function (e: Event) {
     this.props.onBlur && this.props.onBlur(e);
   },
 
@@ -657,7 +657,7 @@ const TouchableMixin = {
    * @sideeffects
    * @private
    */
-  _remeasureMetricsOnActivation: function() {
+  _remeasureMetricsOnActivation: function () {
     const tag = this.state.touchable.responderID;
     if (tag == null) {
       return;
@@ -666,7 +666,7 @@ const TouchableMixin = {
     UIManager.measure(tag, this._handleQueryLayout);
   },
 
-  _handleQueryLayout: function(
+  _handleQueryLayout: function (
     l: number,
     t: number,
     w: number,
@@ -688,12 +688,12 @@ const TouchableMixin = {
     this.state.touchable.dimensionsOnActivate = BoundingDimensions.getPooled(w, h);
   },
 
-  _handleDelay: function(e: PressEvent) {
+  _handleDelay: function (e: PressEvent) {
     this.touchableDelayTimeout = null;
     this._receiveSignal(Signals.DELAY, e);
   },
 
-  _handleLongDelay: function(e: PressEvent) {
+  _handleLongDelay: function (e: PressEvent) {
     this.longPressDelayTimeout = null;
     const curState = this.state.touchable.touchState;
     if (
@@ -721,7 +721,7 @@ const TouchableMixin = {
    * @throws Error if invalid state transition or unrecognized signal.
    * @sideeffects
    */
-  _receiveSignal: function(signal: Signal, e: PressEvent) {
+  _receiveSignal: function (signal: Signal, e: PressEvent) {
     const responderID = this.state.touchable.responderID;
     const curState = this.state.touchable.touchState;
     const nextState = Transitions[curState] && Transitions[curState][signal];
@@ -756,18 +756,18 @@ const TouchableMixin = {
     }
   },
 
-  _cancelLongPressDelayTimeout: function() {
+  _cancelLongPressDelayTimeout: function () {
     this.longPressDelayTimeout && clearTimeout(this.longPressDelayTimeout);
     this.longPressDelayTimeout = null;
   },
 
-  _isHighlight: function(state: State) {
+  _isHighlight: function (state: State) {
     return (
       state === States.RESPONDER_ACTIVE_PRESS_IN || state === States.RESPONDER_ACTIVE_LONG_PRESS_IN
     );
   },
 
-  _savePressInLocation: function(e: PressEvent) {
+  _savePressInLocation: function (e: PressEvent) {
     const touch = extractSingleTouch(e.nativeEvent);
     const pageX = touch && touch.pageX;
     const pageY = touch && touch.pageY;
@@ -776,7 +776,7 @@ const TouchableMixin = {
     this.pressInLocation = { pageX, pageY, locationX, locationY };
   },
 
-  _getDistanceBetweenPoints: function(aX: number, aY: number, bX: number, bY: number) {
+  _getDistanceBetweenPoints: function (aX: number, aY: number, bX: number, bY: number) {
     const deltaX = aX - bX;
     const deltaY = aY - bY;
     return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
@@ -793,7 +793,7 @@ const TouchableMixin = {
    * @param {Event} e Native event.
    * @sideeffects
    */
-  _performSideEffectsForTransition: function(
+  _performSideEffectsForTransition: function (
     curState: State,
     nextState: State,
     signal: Signal,
@@ -848,16 +848,16 @@ const TouchableMixin = {
     this.touchableDelayTimeout = null;
   },
 
-  _playTouchSound: function() {
+  _playTouchSound: function () {
     UIManager.playTouchSound();
   },
 
-  _startHighlight: function(e: PressEvent) {
+  _startHighlight: function (e: PressEvent) {
     this._savePressInLocation(e);
     this.touchableHandleActivePressIn && this.touchableHandleActivePressIn(e);
   },
 
-  _endHighlight: function(e: PressEvent) {
+  _endHighlight: function (e: PressEvent) {
     if (this.touchableHandleActivePressOut) {
       if (this.touchableGetPressOutDelayMS && this.touchableGetPressOutDelayMS()) {
         this.pressOutDelayTimeout = setTimeout(() => {
@@ -871,7 +871,7 @@ const TouchableMixin = {
 
   // HACK (part 2): basic support for touchable interactions using a keyboard (including
   // delays and longPress)
-  touchableHandleKeyEvent: function(e: Event) {
+  touchableHandleKeyEvent: function (e: Event) {
     const { type, key } = e;
     if (key === 'Enter' || key === ' ') {
       if (type === 'keydown') {
diff --git a/packages/react-native-web/src/exports/TouchableHighlight/index.js b/packages/react-native-web/src/exports/TouchableHighlight/index.js
index 7c1c362f..9cf254c7 100644
--- a/packages/react-native-web/src/exports/TouchableHighlight/index.js
+++ b/packages/react-native-web/src/exports/TouchableHighlight/index.js
@@ -176,10 +176,7 @@ function TouchableHighlight(props: Props, forwardedRef): React.Node {
       ]}
     >
       {React.cloneElement(child, {
-        style: StyleSheet.compose(
-          child.props.style,
-          extraStyles && extraStyles.child
-        )
+        style: StyleSheet.compose(child.props.style, extraStyles && extraStyles.child)
       })}
     </View>
   );
diff --git a/packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js b/packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js
index c0c7ffa2..45af34c2 100644
--- a/packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js
+++ b/packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js
@@ -60,7 +60,7 @@ const forwardPropsList = {
   testID: true
 };
 
-const pickProps = props => pick(props, forwardPropsList);
+const pickProps = (props) => pick(props, forwardPropsList);
 
 function TouchableWithoutFeedback(props: Props, forwardedRef): React.Node {
   const {
diff --git a/packages/react-native-web/src/exports/UIManager/__tests__/index-test.js b/packages/react-native-web/src/exports/UIManager/__tests__/index-test.js
index f1caf8e9..1feed387 100644
--- a/packages/react-native-web/src/exports/UIManager/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/UIManager/__tests__/index-test.js
@@ -4,7 +4,7 @@ import UIManager from '..';
 
 const createStyledNode = (name = 'div', style = {}) => {
   const root = document.createElement(name);
-  Object.keys(style).forEach(prop => {
+  Object.keys(style).forEach((prop) => {
     root.style[prop] = style[prop];
   });
   return root;
@@ -33,7 +33,7 @@ describe('apis/UIManager', () => {
     });
 
     test('doesn\'t set tabIndex="-1" on elements focusable by default', () => {
-      ['a', 'input', 'select', 'textarea'].forEach(name => {
+      ['a', 'input', 'select', 'textarea'].forEach((name) => {
         const node = createStyledNode(name);
         UIManager.focus(node);
         expect(node.getAttribute('tabIndex')).toBeNull();
diff --git a/packages/react-native-web/src/exports/UIManager/index.js b/packages/react-native-web/src/exports/UIManager/index.js
index 7e4f35d2..60b9863b 100644
--- a/packages/react-native-web/src/exports/UIManager/index.js
+++ b/packages/react-native-web/src/exports/UIManager/index.js
@@ -10,7 +10,7 @@
 import getBoundingClientRect from '../../modules/getBoundingClientRect';
 import setValueForStyles from '../../modules/setValueForStyles';
 
-const getRect = node => {
+const getRect = (node) => {
   // Unlike the DOM's getBoundingClientRect, React Native layout measurements
   // for "height" and "width" ignore scale transforms.
   // https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
diff --git a/packages/react-native-web/src/exports/View/index.js b/packages/react-native-web/src/exports/View/index.js
index 9fa55bf0..24ff61a5 100644
--- a/packages/react-native-web/src/exports/View/index.js
+++ b/packages/react-native-web/src/exports/View/index.js
@@ -67,7 +67,7 @@ const forwardPropsList = {
   href: true
 };
 
-const pickProps = props => pick(props, forwardPropsList);
+const pickProps = (props) => pick(props, forwardPropsList);
 
 const View = forwardRef<ViewProps, *>((props, forwardedRef) => {
   const {
@@ -92,7 +92,7 @@ const View = forwardRef<ViewProps, *>((props, forwardedRef) => {
   } = props;
 
   if (process.env.NODE_ENV !== 'production') {
-    React.Children.toArray(props.children).forEach(item => {
+    React.Children.toArray(props.children).forEach((item) => {
       if (typeof item === 'string') {
         console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
       }
@@ -122,10 +122,7 @@ const View = forwardRef<ViewProps, *>((props, forwardedRef) => {
     onStartShouldSetResponderCapture
   });
 
-  const style = StyleSheet.compose(
-    hasTextAncestor && styles.inline,
-    props.style
-  );
+  const style = StyleSheet.compose(hasTextAncestor && styles.inline, props.style);
 
   const supportedProps = pickProps(props);
   supportedProps.classList = classList;
diff --git a/packages/react-native-web/src/exports/findNodeHandle/index.js b/packages/react-native-web/src/exports/findNodeHandle/index.js
index 70a177e9..4f22b5b7 100644
--- a/packages/react-native-web/src/exports/findNodeHandle/index.js
+++ b/packages/react-native-web/src/exports/findNodeHandle/index.js
@@ -10,7 +10,7 @@
 
 import { findDOMNode } from 'react-dom';
 
-const findNodeHandle = component => {
+const findNodeHandle = (component) => {
   let node;
 
   try {
diff --git a/packages/react-native-web/src/exports/processColor/__tests__/index-test.js b/packages/react-native-web/src/exports/processColor/__tests__/index-test.js
index 244a566c..fed99c49 100644
--- a/packages/react-native-web/src/exports/processColor/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/processColor/__tests__/index-test.js
@@ -9,7 +9,7 @@
 
 import processColor from '..';
 
-const platformSpecific = x => x;
+const platformSpecific = (x) => x;
 
 describe('processColor', () => {
   describe('predefined color names', () => {
diff --git a/packages/react-native-web/src/modules/ImageLoader/index.js b/packages/react-native-web/src/modules/ImageLoader/index.js
index 85723fae..197bef5b 100644
--- a/packages/react-native-web/src/modules/ImageLoader/index.js
+++ b/packages/react-native-web/src/modules/ImageLoader/index.js
@@ -50,7 +50,7 @@ export class ImageUriCache {
       let leastRecentlyUsedKey;
       let leastRecentlyUsedEntry;
 
-      imageUris.forEach(uri => {
+      imageUris.forEach((uri) => {
         const entry = entries[uri];
         if (
           (!leastRecentlyUsedEntry ||
@@ -117,7 +117,7 @@ const ImageLoader = {
     id += 1;
     const image = new window.Image();
     image.onerror = onError;
-    image.onload = e => {
+    image.onload = (e) => {
       // avoid blocking the main thread
       const onDecode = () => onLoad({ nativeEvent: e });
       if (typeof image.decode === 'function') {
@@ -150,7 +150,7 @@ const ImageLoader = {
   },
   queryCache(uris: Array<string>): Object {
     const result = {};
-    uris.forEach(u => {
+    uris.forEach((u) => {
       if (ImageUriCache.has(u)) {
         result[u] = 'disk/memory';
       }
diff --git a/packages/react-native-web/src/modules/ScrollResponder/index.js b/packages/react-native-web/src/modules/ScrollResponder/index.js
index 8805e875..d8037ef8 100644
--- a/packages/react-native-web/src/modules/ScrollResponder/index.js
+++ b/packages/react-native-web/src/modules/ScrollResponder/index.js
@@ -109,7 +109,7 @@ type Event = Object;
 
 const ScrollResponderMixin = {
   // mixins: [Subscribable.Mixin],
-  scrollResponderMixinGetInitialState: function(): State {
+  scrollResponderMixinGetInitialState: function (): State {
     return {
       isTouching: false,
       lastMomentumScrollBeginTime: 0,
@@ -128,7 +128,7 @@ const ScrollResponderMixin = {
   /**
    * Invoke this from an `onScroll` event.
    */
-  scrollResponderHandleScrollShouldSetResponder: function(): boolean {
+  scrollResponderHandleScrollShouldSetResponder: function (): boolean {
     return this.state.isTouching;
   },
 
@@ -157,7 +157,7 @@ const ScrollResponderMixin = {
    *   true.
    *
    */
-  scrollResponderHandleStartShouldSetResponder: function(): boolean {
+  scrollResponderHandleStartShouldSetResponder: function (): boolean {
     return false;
   },
 
@@ -172,7 +172,7 @@ const ScrollResponderMixin = {
    *
    * Invoke this from an `onStartShouldSetResponderCapture` event.
    */
-  scrollResponderHandleStartShouldSetResponderCapture: function(e: Event): boolean {
+  scrollResponderHandleStartShouldSetResponderCapture: function (e: Event): boolean {
     // First see if we want to eat taps while the keyboard is up
     // var currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
     // if (!this.props.keyboardShouldPersistTaps &&
@@ -193,7 +193,7 @@ const ScrollResponderMixin = {
    * altogether. To improve this, find a way to disable the `UIScrollView` after
    * a touch has already started.
    */
-  scrollResponderHandleResponderReject: function() {
+  scrollResponderHandleResponderReject: function () {
     warning(false, "ScrollView doesn't take rejection well - scrolls anyway");
   },
 
@@ -212,7 +212,7 @@ const ScrollResponderMixin = {
    *   navigation of a swipe gesture higher in the view hierarchy, should be
    *   rejected.
    */
-  scrollResponderHandleTerminationRequest: function(): boolean {
+  scrollResponderHandleTerminationRequest: function (): boolean {
     return !this.state.observedScrollSinceBecomingResponder;
   },
 
@@ -221,7 +221,7 @@ const ScrollResponderMixin = {
    *
    * @param {SyntheticEvent} e Event.
    */
-  scrollResponderHandleTouchEnd: function(e: Event) {
+  scrollResponderHandleTouchEnd: function (e: Event) {
     const nativeEvent = e.nativeEvent;
     this.state.isTouching = nativeEvent.touches.length !== 0;
     this.props.onTouchEnd && this.props.onTouchEnd(e);
@@ -230,7 +230,7 @@ const ScrollResponderMixin = {
   /**
    * Invoke this from an `onResponderRelease` event.
    */
-  scrollResponderHandleResponderRelease: function(e: Event) {
+  scrollResponderHandleResponderRelease: function (e: Event) {
     this.props.onResponderRelease && this.props.onResponderRelease(e);
 
     // By default scroll views will unfocus a textField
@@ -249,7 +249,7 @@ const ScrollResponderMixin = {
     }
   },
 
-  scrollResponderHandleScroll: function(e: Event) {
+  scrollResponderHandleScroll: function (e: Event) {
     this.state.observedScrollSinceBecomingResponder = true;
     this.props.onScroll && this.props.onScroll(e);
   },
@@ -257,7 +257,7 @@ const ScrollResponderMixin = {
   /**
    * Invoke this from an `onResponderGrant` event.
    */
-  scrollResponderHandleResponderGrant: function(e: Event) {
+  scrollResponderHandleResponderGrant: function (e: Event) {
     this.state.observedScrollSinceBecomingResponder = false;
     this.props.onResponderGrant && this.props.onResponderGrant(e);
     this.state.becameResponderWhileAnimating = this.scrollResponderIsAnimating();
@@ -270,21 +270,21 @@ const ScrollResponderMixin = {
    *
    * Invoke this from an `onScrollBeginDrag` event.
    */
-  scrollResponderHandleScrollBeginDrag: function(e: Event) {
+  scrollResponderHandleScrollBeginDrag: function (e: Event) {
     this.props.onScrollBeginDrag && this.props.onScrollBeginDrag(e);
   },
 
   /**
    * Invoke this from an `onScrollEndDrag` event.
    */
-  scrollResponderHandleScrollEndDrag: function(e: Event) {
+  scrollResponderHandleScrollEndDrag: function (e: Event) {
     this.props.onScrollEndDrag && this.props.onScrollEndDrag(e);
   },
 
   /**
    * Invoke this from an `onMomentumScrollBegin` event.
    */
-  scrollResponderHandleMomentumScrollBegin: function(e: Event) {
+  scrollResponderHandleMomentumScrollBegin: function (e: Event) {
     this.state.lastMomentumScrollBeginTime = Date.now();
     this.props.onMomentumScrollBegin && this.props.onMomentumScrollBegin(e);
   },
@@ -292,7 +292,7 @@ const ScrollResponderMixin = {
   /**
    * Invoke this from an `onMomentumScrollEnd` event.
    */
-  scrollResponderHandleMomentumScrollEnd: function(e: Event) {
+  scrollResponderHandleMomentumScrollEnd: function (e: Event) {
     this.state.lastMomentumScrollEndTime = Date.now();
     this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd(e);
   },
@@ -308,7 +308,7 @@ const ScrollResponderMixin = {
    *
    * @param {SyntheticEvent} e Touch Start event.
    */
-  scrollResponderHandleTouchStart: function(e: Event) {
+  scrollResponderHandleTouchStart: function (e: Event) {
     this.state.isTouching = true;
     this.props.onTouchStart && this.props.onTouchStart(e);
   },
@@ -324,7 +324,7 @@ const ScrollResponderMixin = {
    *
    * @param {SyntheticEvent} e Touch Start event.
    */
-  scrollResponderHandleTouchMove: function(e: Event) {
+  scrollResponderHandleTouchMove: function (e: Event) {
     this.props.onTouchMove && this.props.onTouchMove(e);
   },
 
@@ -333,7 +333,7 @@ const ScrollResponderMixin = {
    * view is currently animating. This is particularly useful to know when
    * a touch has just started or ended.
    */
-  scrollResponderIsAnimating: function(): boolean {
+  scrollResponderIsAnimating: function (): boolean {
     const now = Date.now();
     const timeSinceLastMomentumScrollEnd = now - this.state.lastMomentumScrollEndTime;
     const isAnimating =
@@ -347,7 +347,7 @@ const ScrollResponderMixin = {
    * Components can pass what node to use by defining a `getScrollableNode`
    * function otherwise `this` is used.
    */
-  scrollResponderGetScrollableNode: function(): any {
+  scrollResponderGetScrollableNode: function (): any {
     return this.getScrollableNode ? this.getScrollableNode() : findNodeHandle(this);
   },
 
@@ -362,7 +362,7 @@ const ScrollResponderMixin = {
    * the function also accepts separate arguments as as alternative to the options object.
    * This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.
    */
-  scrollResponderScrollTo: function(
+  scrollResponderScrollTo: function (
     x?: number | { x?: number, y?: number, animated?: boolean },
     y?: number,
     animated?: boolean
@@ -391,7 +391,7 @@ const ScrollResponderMixin = {
    *
    * @platform ios
    */
-  scrollResponderZoomTo: function(
+  scrollResponderZoomTo: function (
     rect: {
       x: number,
       y: number,
@@ -409,7 +409,7 @@ const ScrollResponderMixin = {
   /**
    * Displays the scroll indicators momentarily.
    */
-  scrollResponderFlashScrollIndicators: function() {},
+  scrollResponderFlashScrollIndicators: function () {},
 
   /**
    * This method should be used as the callback to onFocus in a TextInputs'
@@ -421,7 +421,7 @@ const ScrollResponderMixin = {
    * @param {bool} preventNegativeScrolling Whether to allow pulling the content
    *        down to make it meet the keyboard's top. Default is false.
    */
-  scrollResponderScrollNativeHandleToKeyboard: function(
+  scrollResponderScrollNativeHandleToKeyboard: function (
     nodeHandle: any,
     additionalOffset?: number,
     preventNegativeScrollOffset?: boolean
@@ -446,7 +446,7 @@ const ScrollResponderMixin = {
    * @param {number} width Width of the text input.
    * @param {number} height Height of the text input.
    */
-  scrollResponderInputMeasureAndScrollToKeyboard: function(
+  scrollResponderInputMeasureAndScrollToKeyboard: function (
     left: number,
     top: number,
     width: number,
@@ -471,7 +471,7 @@ const ScrollResponderMixin = {
     this.preventNegativeScrollOffset = false;
   },
 
-  scrollResponderTextInputFocusError: function(e: Event) {
+  scrollResponderTextInputFocusError: function (e: Event) {
     console.error('Error measuring text field: ', e);
   },
 
@@ -481,7 +481,7 @@ const ScrollResponderMixin = {
    *
    * The `keyboardWillShow` is called before input focus.
    */
-  UNSAFE_componentWillMount: function() {
+  UNSAFE_componentWillMount: function () {
     this.keyboardWillOpenTo = null;
     this.additionalScrollOffset = 0;
     // this.addListenerOn(RCTDeviceEventEmitter, 'keyboardWillShow', this.scrollResponderKeyboardWillShow);
@@ -518,17 +518,17 @@ const ScrollResponderMixin = {
    * relevant to you. (For example, only if you receive these callbacks after
    * you had explicitly focused a node etc).
    */
-  scrollResponderKeyboardWillShow: function(e: Event) {
+  scrollResponderKeyboardWillShow: function (e: Event) {
     this.keyboardWillOpenTo = e;
     this.props.onKeyboardWillShow && this.props.onKeyboardWillShow(e);
   },
 
-  scrollResponderKeyboardWillHide: function(e: Event) {
+  scrollResponderKeyboardWillHide: function (e: Event) {
     this.keyboardWillOpenTo = null;
     this.props.onKeyboardWillHide && this.props.onKeyboardWillHide(e);
   },
 
-  scrollResponderKeyboardDidShow: function(e: Event) {
+  scrollResponderKeyboardDidShow: function (e: Event) {
     // TODO(7693961): The event for DidShow is not available on iOS yet.
     // Use the one from WillShow and do not assign.
     if (e) {
@@ -537,7 +537,7 @@ const ScrollResponderMixin = {
     this.props.onKeyboardDidShow && this.props.onKeyboardDidShow(e);
   },
 
-  scrollResponderKeyboardDidHide: function(e: Event) {
+  scrollResponderKeyboardDidHide: function (e: Event) {
     this.keyboardWillOpenTo = null;
     this.props.onKeyboardDidHide && this.props.onKeyboardDidHide(e);
   }
diff --git a/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js b/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js
index 7bb5ec08..5b5019ce 100644
--- a/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js
+++ b/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js
@@ -2,7 +2,7 @@
 
 import createDOMProps from '..';
 
-const createProps = props => createDOMProps(null, props);
+const createProps = (props) => createDOMProps(null, props);
 
 describe('modules/createDOMProps', () => {
   describe('focus-related accessibility attributes', () => {
@@ -44,7 +44,7 @@ describe('modules/createDOMProps', () => {
       });
     });
 
-    const testFocusableRole = accessibilityRole => {
+    const testFocusableRole = (accessibilityRole) => {
       test('default case', () => {
         expect(createProps({ accessibilityRole })).toEqual(
           expect.objectContaining({ tabIndex: '0' })
@@ -141,7 +141,7 @@ describe('modules/createDOMProps', () => {
   });
 
   describe('prop "onKeyDown"', () => {
-    const callsOnClick = key => (component, accessibilityRole, accessibilityDisabled = false) => {
+    const callsOnClick = (key) => (component, accessibilityRole, accessibilityDisabled = false) => {
       const onClick = jest.fn();
       const onKeyDown = jest.fn();
       const event = { key, preventDefault: jest.fn() };
diff --git a/packages/react-native-web/src/modules/createDOMProps/index.js b/packages/react-native-web/src/modules/createDOMProps/index.js
index f246f9c3..0140fcdc 100644
--- a/packages/react-native-web/src/modules/createDOMProps/index.js
+++ b/packages/react-native-web/src/modules/createDOMProps/index.js
@@ -418,14 +418,14 @@ const createDOMProps = (elementType, props) => {
     if (onClick != null) {
       if (disabled) {
         // Prevent click propagating if the element is disabled. See #1757
-        domProps.onClick = function(e) {
+        domProps.onClick = function (e) {
           e.stopPropagation();
         };
       } else if (!isNativeInteractiveElement) {
         // For native elements that are focusable but don't dispatch 'click' events
         // for keyboards.
         const onKeyDown = domProps.onKeyDown;
-        domProps.onKeyDown = function(e) {
+        domProps.onKeyDown = function (e) {
           const { key, repeat } = e;
           const isSpacebarKey = key === ' ' || key === 'Spacebar';
           const isButtonRole = role === 'button' || role === 'menuitem';
diff --git a/packages/react-native-web/src/modules/createEventHandle/__tests__/index-test.js b/packages/react-native-web/src/modules/createEventHandle/__tests__/index-test.js
index 20244471..618b7d5a 100644
--- a/packages/react-native-web/src/modules/createEventHandle/__tests__/index-test.js
+++ b/packages/react-native-web/src/modules/createEventHandle/__tests__/index-test.js
@@ -282,10 +282,10 @@ describe('create-event-handle', () => {
       const addClickCaptureListener = createEventHandle('click', {
         capture: true
       });
-      const listener = jest.fn(e => {
+      const listener = jest.fn((e) => {
         log.push(['bubble', e.currentTarget.id]);
       });
-      const listenerCapture = jest.fn(e => {
+      const listenerCapture = jest.fn((e) => {
         log.push(['capture', e.currentTarget.id]);
       });
 
@@ -338,16 +338,16 @@ describe('create-event-handle', () => {
       const addClickCaptureAltListener = createEventHandle('click', {
         capture: true
       });
-      const listener = jest.fn(e => {
+      const listener = jest.fn((e) => {
         log.push(['bubble', 'target']);
       });
-      const listenerAlt = jest.fn(e => {
+      const listenerAlt = jest.fn((e) => {
         log.push(['bubble', 'target-alt']);
       });
-      const listenerCapture = jest.fn(e => {
+      const listenerCapture = jest.fn((e) => {
         log.push(['capture', 'target']);
       });
-      const listenerCaptureAlt = jest.fn(e => {
+      const listenerCaptureAlt = jest.fn((e) => {
         log.push(['capture', 'target-alt']);
       });
 
@@ -390,7 +390,7 @@ describe('create-event-handle', () => {
 
   describe('stopPropagation and stopImmediatePropagation', () => {
     test('stopPropagation works as expected', () => {
-      const childListener = jest.fn(e => {
+      const childListener = jest.fn((e) => {
         e.stopPropagation();
       });
       const targetListener = jest.fn();
@@ -425,7 +425,7 @@ describe('create-event-handle', () => {
     });
 
     test('stopImmediatePropagation works as expected', () => {
-      const firstListener = jest.fn(e => {
+      const firstListener = jest.fn((e) => {
         e.stopImmediatePropagation();
       });
       const secondListener = jest.fn();
diff --git a/packages/react-native-web/src/modules/createEventHandle/index.js b/packages/react-native-web/src/modules/createEventHandle/index.js
index fa365bac..b64f6d5d 100644
--- a/packages/react-native-web/src/modules/createEventHandle/index.js
+++ b/packages/react-native-web/src/modules/createEventHandle/index.js
@@ -76,14 +76,14 @@ function normalizeEvent(event: any) {
 export default function createEventHandle(type: string, options: ?EventOptions): EventHandle {
   const opts = getOptions(options);
 
-  return function(target: EventTarget, listener: ?Listener) {
+  return function (target: EventTarget, listener: ?Listener) {
     if (target == null || typeof target.addEventListener !== 'function') {
       throw new Error('createEventHandle: called on an invalid target.');
     }
 
     const element = (target: any);
     if (listener != null) {
-      const compatListener = e => listener(normalizeEvent(e));
+      const compatListener = (e) => listener(normalizeEvent(e));
       element.addEventListener(type, compatListener, opts);
       return function removeListener() {
         if (element != null) {
diff --git a/packages/react-native-web/src/modules/mergeRefs/__tests__/index-test.js b/packages/react-native-web/src/modules/mergeRefs/__tests__/index-test.js
index 645ab2ce..b10cba86 100644
--- a/packages/react-native-web/src/modules/mergeRefs/__tests__/index-test.js
+++ b/packages/react-native-web/src/modules/mergeRefs/__tests__/index-test.js
@@ -15,7 +15,7 @@ describe('modules/mergeRefs', () => {
     let functionRefValue = null;
     let hookRef;
     function Component() {
-      const functionRef = x => {
+      const functionRef = (x) => {
         functionRefValue = x;
       };
       hookRef = React.useRef(null);
diff --git a/packages/react-native-web/src/modules/modality/__tests__/index-test.js b/packages/react-native-web/src/modules/modality/__tests__/index-test.js
index f1de1e7c..3c67353a 100644
--- a/packages/react-native-web/src/modules/modality/__tests__/index-test.js
+++ b/packages/react-native-web/src/modules/modality/__tests__/index-test.js
@@ -14,7 +14,7 @@ import {
   setPointerEvent
 } from 'dom-event-testing-library';
 
-describeWithPointerEvent('modules/modality', hasPointerEvent => {
+describeWithPointerEvent('modules/modality', (hasPointerEvent) => {
   let rootNode;
 
   beforeEach(() => {
@@ -31,7 +31,7 @@ describeWithPointerEvent('modules/modality', hasPointerEvent => {
   });
 
   describe('getModality', () => {
-    testWithPointerType('reflects currently-in-use modality', pointerType => {
+    testWithPointerType('reflects currently-in-use modality', (pointerType) => {
       const target = createEventTarget(rootNode);
       expect(getModality()).toBe('keyboard');
       target.pointerdown({ pointerType });
@@ -49,7 +49,7 @@ describeWithPointerEvent('modules/modality', hasPointerEvent => {
   });
 
   describe('getActiveModality', () => {
-    testWithPointerType('reflects last actively used modality', pointerType => {
+    testWithPointerType('reflects last actively used modality', (pointerType) => {
       const target = createEventTarget(rootNode);
       expect(getActiveModality()).toBe('keyboard');
       target.pointerdown({ pointerType });
diff --git a/packages/react-native-web/src/modules/modality/index.js b/packages/react-native-web/src/modules/modality/index.js
index 3ce8e27c..c329bb05 100644
--- a/packages/react-native-web/src/modules/modality/index.js
+++ b/packages/react-native-web/src/modules/modality/index.js
@@ -197,7 +197,7 @@ if (canUseDOM) {
 
 function callListeners() {
   const value = { activeModality, modality };
-  listeners.forEach(listener => {
+  listeners.forEach((listener) => {
     listener(value);
   });
 }
diff --git a/packages/react-native-web/src/modules/multiplyStyleLengthValue/index.js b/packages/react-native-web/src/modules/multiplyStyleLengthValue/index.js
index b030f31a..b3b92206 100644
--- a/packages/react-native-web/src/modules/multiplyStyleLengthValue/index.js
+++ b/packages/react-native-web/src/modules/multiplyStyleLengthValue/index.js
@@ -9,9 +9,9 @@
 
 const CSS_UNIT_RE = /^[+-]?\d*(?:\.\d+)?(?:[Ee][+-]?\d+)?(%|\w*)/;
 
-const getUnit = str => str.match(CSS_UNIT_RE)[1];
+const getUnit = (str) => str.match(CSS_UNIT_RE)[1];
 
-const isNumeric = n => {
+const isNumeric = (n) => {
   return !isNaN(parseFloat(n)) && isFinite(n);
 };
 
diff --git a/packages/react-native-web/src/modules/prefixStyles/index.js b/packages/react-native-web/src/modules/prefixStyles/index.js
index c1e7d253..771512ed 100644
--- a/packages/react-native-web/src/modules/prefixStyles/index.js
+++ b/packages/react-native-web/src/modules/prefixStyles/index.js
@@ -19,7 +19,7 @@ export const prefixInlineStyles = (style: Object) => {
 
   // React@15 removed undocumented support for fallback values in
   // inline-styles. Revert array values to the standard CSS value
-  Object.keys(prefixedStyles).forEach(prop => {
+  Object.keys(prefixedStyles).forEach((prop) => {
     const value = prefixedStyles[prop];
     if (Array.isArray(value)) {
       prefixedStyles[prop] = value[value.length - 1];
diff --git a/packages/react-native-web/src/modules/requestIdleCallback/index.js b/packages/react-native-web/src/modules/requestIdleCallback/index.js
index 647aef6c..dd50e1b1 100644
--- a/packages/react-native-web/src/modules/requestIdleCallback/index.js
+++ b/packages/react-native-web/src/modules/requestIdleCallback/index.js
@@ -9,7 +9,7 @@
 
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 
-const _requestIdleCallback = function(cb: Function, options?: Object) {
+const _requestIdleCallback = function (cb: Function, options?: Object) {
   return setTimeout(() => {
     const start = Date.now();
     cb({
@@ -22,7 +22,7 @@ const _requestIdleCallback = function(cb: Function, options?: Object) {
 };
 
 // $FlowFixMe (TimeoutID type is not recognized by eslint)
-const _cancelIdleCallback = function(id) {
+const _cancelIdleCallback = function (id) {
   clearTimeout(id);
 };
 
diff --git a/packages/react-native-web/src/modules/unitlessNumbers/index.js b/packages/react-native-web/src/modules/unitlessNumbers/index.js
index 03d6d446..f146918e 100644
--- a/packages/react-native-web/src/modules/unitlessNumbers/index.js
+++ b/packages/react-native-web/src/modules/unitlessNumbers/index.js
@@ -66,8 +66,8 @@ const prefixes = ['ms', 'Moz', 'O', 'Webkit'];
 const prefixKey = (prefix: string, key: string) => {
   return prefix + key.charAt(0).toUpperCase() + key.substring(1);
 };
-Object.keys(unitlessNumbers).forEach(prop => {
-  prefixes.forEach(prefix => {
+Object.keys(unitlessNumbers).forEach((prop) => {
+  prefixes.forEach((prefix) => {
     unitlessNumbers[prefixKey(prefix, prop)] = unitlessNumbers[prop];
   });
 });
diff --git a/packages/react-native-web/src/modules/useElementLayout/index.js b/packages/react-native-web/src/modules/useElementLayout/index.js
index 944292aa..529e9d8e 100644
--- a/packages/react-native-web/src/modules/useElementLayout/index.js
+++ b/packages/react-native-web/src/modules/useElementLayout/index.js
@@ -22,8 +22,8 @@ let resizeObserver = null;
 function getResizeObserver(): ?ResizeObserver {
   if (canUseDOM && typeof window.ResizeObserver !== 'undefined') {
     if (resizeObserver == null) {
-      resizeObserver = new window.ResizeObserver(function(entries) {
-        entries.forEach(entry => {
+      resizeObserver = new window.ResizeObserver(function (entries) {
+        entries.forEach((entry) => {
           const node = entry.target;
           const onLayout = node[DOM_LAYOUT_HANDLER_NAME];
           if (typeof onLayout === 'function') {
diff --git a/packages/react-native-web/src/modules/useEvent/__tests__/index-test.js b/packages/react-native-web/src/modules/useEvent/__tests__/index-test.js
index 5b9d7f3e..e6926494 100644
--- a/packages/react-native-web/src/modules/useEvent/__tests__/index-test.js
+++ b/packages/react-native-web/src/modules/useEvent/__tests__/index-test.js
@@ -309,10 +309,10 @@ describe('use-event', () => {
       const parentRef = React.createRef();
       const childRef = React.createRef();
 
-      const listener = jest.fn(e => {
+      const listener = jest.fn((e) => {
         log.push(['bubble', e.currentTarget.id]);
       });
-      const listenerCapture = jest.fn(e => {
+      const listenerCapture = jest.fn((e) => {
         log.push(['capture', e.currentTarget.id]);
       });
 
@@ -360,16 +360,16 @@ describe('use-event', () => {
       const targetRef = React.createRef();
       const childRef = React.createRef();
 
-      const listener = jest.fn(e => {
+      const listener = jest.fn((e) => {
         log.push(['bubble', 'target']);
       });
-      const listenerAlt = jest.fn(e => {
+      const listenerAlt = jest.fn((e) => {
         log.push(['bubble', 'target-alt']);
       });
-      const listenerCapture = jest.fn(e => {
+      const listenerCapture = jest.fn((e) => {
         log.push(['capture', 'target']);
       });
-      const listenerCaptureAlt = jest.fn(e => {
+      const listenerCaptureAlt = jest.fn((e) => {
         log.push(['capture', 'target-alt']);
       });
 
@@ -442,7 +442,7 @@ describe('use-event', () => {
 
   describe('stopPropagation and stopImmediatePropagation', () => {
     test('stopPropagation works as expected', () => {
-      const childListener = jest.fn(e => {
+      const childListener = jest.fn((e) => {
         e.stopPropagation();
       });
       const targetListener = jest.fn();
@@ -477,7 +477,7 @@ describe('use-event', () => {
     });
 
     test('stopImmediatePropagation works as expected', () => {
-      const firstListener = jest.fn(e => {
+      const firstListener = jest.fn((e) => {
         e.stopImmediatePropagation();
       });
       const secondListener = jest.fn();
diff --git a/packages/react-native-web/src/modules/useEvent/index.js b/packages/react-native-web/src/modules/useEvent/index.js
index 8f90b445..736c18f3 100644
--- a/packages/react-native-web/src/modules/useEvent/index.js
+++ b/packages/react-native-web/src/modules/useEvent/index.js
@@ -11,8 +11,8 @@ import createEventHandle from '../createEventHandle';
 import useLayoutEffect from '../useLayoutEffect';
 import useStable from '../useStable';
 
-type Callback = null | (any => void);
-type AddListener = (target: EventTarget, listener: null | (any => void)) => () => void;
+type Callback = null | ((any) => void);
+type AddListener = (target: EventTarget, listener: null | ((any) => void)) => () => void;
 
 /**
  * This can be used with any event type include custom events.
@@ -51,7 +51,7 @@ export default function useEvent(
   useLayoutEffect(() => {
     return () => {
       if (addListener != null) {
-        targetListeners.forEach(removeListener => {
+        targetListeners.forEach((removeListener) => {
           removeListener();
         });
         targetListeners.clear();
diff --git a/packages/react-native-web/src/modules/useHover/__tests__/index-test.js b/packages/react-native-web/src/modules/useHover/__tests__/index-test.js
index 1c9313b0..1a897866 100644
--- a/packages/react-native-web/src/modules/useHover/__tests__/index-test.js
+++ b/packages/react-native-web/src/modules/useHover/__tests__/index-test.js
@@ -25,7 +25,7 @@ function createRoot(rootNode) {
   };
 }
 
-describeWithPointerEvent('useHover', hasPointerEvents => {
+describeWithPointerEvent('useHover', (hasPointerEvents) => {
   let root;
   let rootNode;
 
diff --git a/packages/react-native-web/src/modules/useHover/index.js b/packages/react-native-web/src/modules/useHover/index.js
index ddaca95c..60405192 100644
--- a/packages/react-native-web/src/modules/useHover/index.js
+++ b/packages/react-native-web/src/modules/useHover/index.js
@@ -73,7 +73,7 @@ export default function useHover(targetRef: any, config: HoverEventsConfig): voi
       /**
        * End the hover gesture
        */
-      const hoverEnd = function(e) {
+      const hoverEnd = function (e) {
         if (onHoverEnd != null) {
           onHoverEnd(e);
         }
@@ -88,7 +88,7 @@ export default function useHover(targetRef: any, config: HoverEventsConfig): voi
       /**
        * Leave element
        */
-      const leaveListener = function(e) {
+      const leaveListener = function (e) {
         const target = targetRef.current;
         if (target != null && getPointerType(e) !== 'touch') {
           if (contain) {
@@ -101,7 +101,7 @@ export default function useHover(targetRef: any, config: HoverEventsConfig): voi
       /**
        * Move within element
        */
-      const moveListener = function(e) {
+      const moveListener = function (e) {
         if (getPointerType(e) !== 'touch') {
           if (onHoverUpdate != null) {
             // Not all browsers have these properties
@@ -119,7 +119,7 @@ export default function useHover(targetRef: any, config: HoverEventsConfig): voi
       /**
        * Start the hover gesture
        */
-      const hoverStart = function(e) {
+      const hoverStart = function (e) {
         if (onHoverStart != null) {
           onHoverStart(e);
         }
@@ -136,19 +136,19 @@ export default function useHover(targetRef: any, config: HoverEventsConfig): voi
       /**
        * Enter element
        */
-      const enterListener = function(e) {
+      const enterListener = function (e) {
         const target = targetRef.current;
         if (target != null && getPointerType(e) !== 'touch') {
           if (contain) {
             dispatchCustomEvent(target, lockEventType);
           }
           hoverStart(e);
-          const lockListener = function(lockEvent) {
+          const lockListener = function (lockEvent) {
             if (lockEvent.target !== target) {
               hoverEnd(e);
             }
           };
-          const unlockListener = function(lockEvent) {
+          const unlockListener = function (lockEvent) {
             if (lockEvent.target !== target) {
               hoverStart(e);
             }
diff --git a/packages/react-native-web/src/modules/usePlatformMethods/index.js b/packages/react-native-web/src/modules/usePlatformMethods/index.js
index 434d2133..4e91b677 100644
--- a/packages/react-native-web/src/modules/usePlatformMethods/index.js
+++ b/packages/react-native-web/src/modules/usePlatformMethods/index.js
@@ -66,11 +66,11 @@ export default function usePlatformMethods({
   // available to 'setNativeProps' when it is called.
   const ref = useStable(() => (hostNode: any) => {
     if (hostNode != null) {
-      hostNode.measure = callback => UIManager.measure(hostNode, callback);
+      hostNode.measure = (callback) => UIManager.measure(hostNode, callback);
       hostNode.measureLayout = (relativeToNode, success, failure) =>
         UIManager.measureLayout(hostNode, relativeToNode, failure, success);
-      hostNode.measureInWindow = callback => UIManager.measureInWindow(hostNode, callback);
-      hostNode.setNativeProps = nativeProps => {
+      hostNode.measureInWindow = (callback) => UIManager.measureInWindow(hostNode, callback);
+      hostNode.setNativeProps = (nativeProps) => {
         const { classList, style, pointerEvents } = setNativePropsArgsRef.current || emptyObject;
         setNativeProps(hostNode, nativeProps, classList, pointerEvents, style, previousStyleRef);
       };
diff --git a/packages/react-native-web/src/modules/usePressEvents/PressResponder.js b/packages/react-native-web/src/modules/usePressEvents/PressResponder.js
index db3635b2..1109e40d 100644
--- a/packages/react-native-web/src/modules/usePressEvents/PressResponder.js
+++ b/packages/react-native-web/src/modules/usePressEvents/PressResponder.js
@@ -116,19 +116,20 @@ const Transitions = Object.freeze({
   }
 });
 
-const isActiveSignal = signal =>
+const isActiveSignal = (signal) =>
   signal === RESPONDER_ACTIVE_PRESS_START || signal === RESPONDER_ACTIVE_LONG_PRESS_START;
 
-const isButtonRole = element => element.getAttribute('role') === 'button';
+const isButtonRole = (element) => element.getAttribute('role') === 'button';
 
-const isPressStartSignal = signal =>
+const isPressStartSignal = (signal) =>
   signal === RESPONDER_INACTIVE_PRESS_START ||
   signal === RESPONDER_ACTIVE_PRESS_START ||
   signal === RESPONDER_ACTIVE_LONG_PRESS_START;
 
-const isTerminalSignal = signal => signal === RESPONDER_TERMINATED || signal === RESPONDER_RELEASE;
+const isTerminalSignal = (signal) =>
+  signal === RESPONDER_TERMINATED || signal === RESPONDER_RELEASE;
 
-const isValidKeyPress = event => {
+const isValidKeyPress = (event) => {
   const key = event.key;
   const target = event.currentTarget;
   const role = target.getAttribute('role');
@@ -319,7 +320,7 @@ export default class PressResponder {
         return !disabled;
       },
 
-      onKeyDown: event => {
+      onKeyDown: (event) => {
         if (isValidKeyPress(event)) {
           if (this._touchState === NOT_RESPONDER) {
             start(event, false);
@@ -331,9 +332,9 @@ export default class PressResponder {
         }
       },
 
-      onResponderGrant: event => start(event),
+      onResponderGrant: (event) => start(event),
 
-      onResponderMove: event => {
+      onResponderMove: (event) => {
         if (this._config.onPressMove != null) {
           this._config.onPressMove(event);
         }
@@ -347,9 +348,9 @@ export default class PressResponder {
         }
       },
 
-      onResponderRelease: event => end(event),
+      onResponderRelease: (event) => end(event),
 
-      onResponderTerminate: event => {
+      onResponderTerminate: (event) => {
         if (event.nativeEvent.type === 'selectionchange') {
           this._selectionTerminated = true;
         }
diff --git a/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js b/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js
index 258fd3c2..48cb9a17 100644
--- a/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js
+++ b/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js
@@ -392,7 +392,7 @@ function eventListener(domEvent: any) {
         // window blur
         (eventType === 'blur' && eventTarget === window) ||
         // responder (or ancestors) blur
-        (eventType === 'blur' && (eventTarget.contains(node) && domEvent.relatedTarget !== node)) ||
+        (eventType === 'blur' && eventTarget.contains(node) && domEvent.relatedTarget !== node) ||
         // native scroll without using a pointer
         (isScrollEvent && trackedTouchCount === 0) ||
         // native scroll on node that is parent of the responder (allow siblings to scroll)
@@ -468,7 +468,7 @@ function findWantsResponder(eventPaths, domEvent, responderEvent) {
     const shouldSetCallbackBubbleName = shouldSetCallbacks[1];
     const { bubbles } = shouldSetCallbacks[2];
 
-    const check = function(id, node, callbackName) {
+    const check = function (id, node, callbackName) {
       const config = getResponderConfig(id);
       const shouldSetCallback = config[callbackName];
       if (shouldSetCallback != null) {
@@ -606,10 +606,10 @@ const documentEventsBubblePhase = [
 export function attachListeners() {
   if (canUseDOM && window.__reactResponderSystemActive == null) {
     window.addEventListener('blur', eventListener);
-    documentEventsBubblePhase.forEach(eventType => {
+    documentEventsBubblePhase.forEach((eventType) => {
       document.addEventListener(eventType, eventListener);
     });
-    documentEventsCapturePhase.forEach(eventType => {
+    documentEventsCapturePhase.forEach((eventType) => {
       document.addEventListener(eventType, eventListener, true);
     });
     window.__reactResponderSystemActive = true;
diff --git a/packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js b/packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js
index 7d652c54..8dc5106d 100644
--- a/packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js
+++ b/packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js
@@ -35,7 +35,7 @@ describe('useResponderEvents', () => {
     clearPointers();
   });
 
-  testWithPointerType('does nothing when no elements want to respond', pointerType => {
+  testWithPointerType('does nothing when no elements want to respond', (pointerType) => {
     const targetRef = createRef();
     const Component = () => {
       useResponderEvents(targetRef, {
@@ -75,7 +75,7 @@ describe('useResponderEvents', () => {
     const buttons = [1, 2, 3, 4];
     // gesture
     act(() => {
-      buttons.forEach(button => {
+      buttons.forEach((button) => {
         target.pointerdown({
           pointerType: 'mouse',
           button: buttonType.auxiliary,
@@ -105,14 +105,14 @@ describe('useResponderEvents', () => {
     const ignoredModifierKeys = ['altKey', 'ctrlKey'];
     // gesture
     act(() => {
-      ignoredModifierKeys.forEach(modifierKey => {
+      ignoredModifierKeys.forEach((modifierKey) => {
         target.pointerdown({ pointerType: 'mouse', [modifierKey]: true });
       });
     });
     expect(getResponderNode()).toBe(null);
     // gesture
     act(() => {
-      acceptedModifierKeys.forEach(modifierKey => {
+      acceptedModifierKeys.forEach((modifierKey) => {
         target.pointerdown({ pointerType: 'mouse', [modifierKey]: true });
       });
     });
@@ -170,7 +170,7 @@ describe('useResponderEvents', () => {
     const Component = () => {
       useResponderEvents(targetRef, {
         onStartShouldSetResponder: () => true,
-        onResponderStart: jest.fn(e => {
+        onResponderStart: jest.fn((e) => {
           identifier = e.nativeEvent.identifier;
         })
       });
@@ -204,13 +204,13 @@ describe('useResponderEvents', () => {
       targetRef = createRef();
     });
 
-    testWithPointerType('start grants responder to grandParent', pointerType => {
+    testWithPointerType('start grants responder to grandParent', (pointerType) => {
       let grantCurrentTarget;
       const grandParentCallbacks = {
-        onStartShouldSetResponderCapture: jest.fn(e => {
+        onStartShouldSetResponderCapture: jest.fn((e) => {
           return true;
         }),
-        onResponderGrant: jest.fn(e => {
+        onResponderGrant: jest.fn((e) => {
           grantCurrentTarget = e.currentTarget;
         })
       };
@@ -259,7 +259,7 @@ describe('useResponderEvents', () => {
       expect(getResponderNode()).toBe(null);
     });
 
-    testWithPointerType('start grants responder to parent', pointerType => {
+    testWithPointerType('start grants responder to parent', (pointerType) => {
       const grandParentCallbacks = {
         onStartShouldSetResponderCapture: jest.fn(() => false)
       };
@@ -308,7 +308,7 @@ describe('useResponderEvents', () => {
       expect(getResponderNode()).toBe(null);
     });
 
-    testWithPointerType('start grants responder to child', pointerType => {
+    testWithPointerType('start grants responder to child', (pointerType) => {
       const grandParentCallbacks = {
         onStartShouldSetResponderCapture: jest.fn(() => false)
       };
@@ -373,7 +373,7 @@ describe('useResponderEvents', () => {
       grandParentRef = createRef();
     });
 
-    testWithPointerType('start grants responder to child', pointerType => {
+    testWithPointerType('start grants responder to child', (pointerType) => {
       const targetCallbacks = {
         onStartShouldSetResponder: jest.fn(() => true),
         onResponderGrant: jest.fn()
@@ -422,7 +422,7 @@ describe('useResponderEvents', () => {
       expect(getResponderNode()).toBe(null);
     });
 
-    testWithPointerType('start grants responder to parent', pointerType => {
+    testWithPointerType('start grants responder to parent', (pointerType) => {
       const targetCallbacks = {
         onStartShouldSetResponder: jest.fn(() => false)
       };
@@ -471,7 +471,7 @@ describe('useResponderEvents', () => {
       expect(getResponderNode()).toBe(null);
     });
 
-    testWithPointerType('start grants responder to grandParent', pointerType => {
+    testWithPointerType('start grants responder to grandParent', (pointerType) => {
       const targetCallbacks = {
         onStartShouldSetResponder: jest.fn(() => false)
       };
@@ -536,7 +536,7 @@ describe('useResponderEvents', () => {
       targetRef = createRef();
     });
 
-    testWithPointerType('move grants responder to grandParent', pointerType => {
+    testWithPointerType('move grants responder to grandParent', (pointerType) => {
       const grandParentCallbacks = {
         onMoveShouldSetResponderCapture: jest.fn(() => true),
         onResponderGrant: jest.fn()
@@ -586,7 +586,7 @@ describe('useResponderEvents', () => {
       expect(getResponderNode()).toBe(null);
     });
 
-    testWithPointerType('move grants responder to parent', pointerType => {
+    testWithPointerType('move grants responder to parent', (pointerType) => {
       const grandParentCallbacks = {
         onMoveShouldSetResponderCapture: jest.fn(() => false)
       };
@@ -636,7 +636,7 @@ describe('useResponderEvents', () => {
       expect(getResponderNode()).toBe(null);
     });
 
-    testWithPointerType('move grants responder to child', pointerType => {
+    testWithPointerType('move grants responder to child', (pointerType) => {
       const grandParentCallbacks = {
         onMoveShouldSetResponderCapture: jest.fn(() => false)
       };
@@ -702,7 +702,7 @@ describe('useResponderEvents', () => {
       grandParentRef = createRef();
     });
 
-    testWithPointerType('move grants responder to child', pointerType => {
+    testWithPointerType('move grants responder to child', (pointerType) => {
       const targetCallbacks = {
         onMoveShouldSetResponder: jest.fn(() => true),
         onResponderGrant: jest.fn()
@@ -752,7 +752,7 @@ describe('useResponderEvents', () => {
       expect(getResponderNode()).toBe(null);
     });
 
-    testWithPointerType('move grants responder to parent', pointerType => {
+    testWithPointerType('move grants responder to parent', (pointerType) => {
       const targetCallbacks = {
         onMoveShouldSetResponder: jest.fn(() => false)
       };
@@ -803,7 +803,7 @@ describe('useResponderEvents', () => {
       expect(getResponderNode()).toBe(null);
     });
 
-    testWithPointerType('move grants responder to grandParent', pointerType => {
+    testWithPointerType('move grants responder to grandParent', (pointerType) => {
       const targetCallbacks = {
         onMoveShouldSetResponder: jest.fn(() => false)
       };
@@ -867,7 +867,7 @@ describe('useResponderEvents', () => {
       parentRef = createRef();
     });
 
-    testWithPointerType('scroll grants responder to parent if a pointer is down', pointerType => {
+    testWithPointerType('scroll grants responder to parent if a pointer is down', (pointerType) => {
       const parentCallbacks = {
         onScrollShouldSetResponderCapture: jest.fn(() => true),
         onResponderGrant: jest.fn()
@@ -904,7 +904,7 @@ describe('useResponderEvents', () => {
       expect(parentCallbacks.onResponderGrant).toBeCalledTimes(1);
     });
 
-    testWithPointerType('scroll grants responder to target if a pointer is down', pointerType => {
+    testWithPointerType('scroll grants responder to target if a pointer is down', (pointerType) => {
       const parentCallbacks = {
         onScrollShouldSetResponderCapture: jest.fn(() => false)
       };
@@ -984,7 +984,7 @@ describe('useResponderEvents', () => {
       expect(getResponderNode()).toBe(null);
     });
 
-    testWithPointerType('scroll grants responder to target if a pointer is down', pointerType => {
+    testWithPointerType('scroll grants responder to target if a pointer is down', (pointerType) => {
       const targetCallbacks = {
         onScrollShouldSetResponder: jest.fn(() => true),
         onResponderGrant: jest.fn(),
@@ -1051,7 +1051,7 @@ describe('useResponderEvents', () => {
 
     testWithPointerType(
       'is called after "start" event on the view that became the responder',
-      pointerType => {
+      (pointerType) => {
         const targetCallbacks = {
           onStartShouldSetResponder: jest.fn(() => true),
           onResponderStart: jest.fn()
@@ -1094,10 +1094,10 @@ describe('useResponderEvents', () => {
     });
 
     // Assert that 'onResponderMove' after a move event, is called however the responder became active
-    ['onStartShouldSetResponder', 'onMoveShouldSetResponder'].forEach(shouldSetResponder => {
+    ['onStartShouldSetResponder', 'onMoveShouldSetResponder'].forEach((shouldSetResponder) => {
       testWithPointerType(
         `is called after "move" event on responder (${shouldSetResponder})`,
-        pointerType => {
+        (pointerType) => {
           const targetCallbacks = {
             [shouldSetResponder]: jest.fn(() => true),
             onResponderMove: jest.fn()
@@ -1141,7 +1141,7 @@ describe('useResponderEvents', () => {
       targetRef = createRef();
     });
 
-    testWithPointerType('is called after "end" event on responder', pointerType => {
+    testWithPointerType('is called after "end" event on responder', (pointerType) => {
       const targetCallbacks = {
         onStartShouldSetResponder: jest.fn(() => true),
         onResponderEnd: jest.fn()
@@ -1183,7 +1183,7 @@ describe('useResponderEvents', () => {
       targetRef = createRef();
     });
 
-    testWithPointerType('is called after all touches with responder end', pointerType => {
+    testWithPointerType('is called after all touches with responder end', (pointerType) => {
       const targetCallbacks = {
         onStartShouldSetResponder: jest.fn(() => true),
         onResponderRelease: jest.fn()
@@ -1227,7 +1227,7 @@ describe('useResponderEvents', () => {
       targetRef = createRef();
     });
 
-    testWithPointerType('is called if pointer cancels', pointerType => {
+    testWithPointerType('is called if pointer cancels', (pointerType) => {
       const targetCallbacks = {
         onStartShouldSetResponder: jest.fn(() => true),
         onResponderEnd: jest.fn(),
@@ -1260,7 +1260,7 @@ describe('useResponderEvents', () => {
       );
     });
 
-    testWithPointerType('is called if input "select" occurs', pointerType => {
+    testWithPointerType('is called if input "select" occurs', (pointerType) => {
       const targetCallbacks = {
         onStartShouldSetResponder: jest.fn(() => true),
         onResponderTerminate: jest.fn(),
@@ -1296,7 +1296,7 @@ describe('useResponderEvents', () => {
       expect(getResponderNode()).toBe(null);
     });
 
-    testWithPointerType('is called if "selectionchange" occurs', pointerType => {
+    testWithPointerType('is called if "selectionchange" occurs', (pointerType) => {
       const targetCallbacks = {
         onStartShouldSetResponder: jest.fn(() => true),
         onResponderTerminate: jest.fn()
@@ -2722,7 +2722,7 @@ describe('useResponderEvents', () => {
       ]);
       eventLog = [];
       // now let the parent scroll take over
-      targetCallbacks.onResponderTerminationRequest = function() {
+      targetCallbacks.onResponderTerminationRequest = function () {
         eventLog.push('target: onResponderTerminationRequest');
         return true;
       };
diff --git a/packages/react-native-web/src/modules/useResponderEvents/createResponderEvent.js b/packages/react-native-web/src/modules/useResponderEvents/createResponderEvent.js
index 81f0c091..b7a686bd 100644
--- a/packages/react-native-web/src/modules/useResponderEvents/createResponderEvent.js
+++ b/packages/react-native-web/src/modules/useResponderEvents/createResponderEvent.js
@@ -96,7 +96,7 @@ export default function createResponderEvent(domEvent: any): ResponderEvent {
   const timestamp = domEvent.timeStamp;
 
   function normalizeTouches(touches) {
-    return Array.prototype.slice.call(touches).map(touch => {
+    return Array.prototype.slice.call(touches).map((touch) => {
       return {
         force: touch.force,
         identifier: normalizeIdentifier(touch.identifier),
diff --git a/scripts/babel/createModuleMap.js b/scripts/babel/createModuleMap.js
index 1020392f..c5e8db8f 100644
--- a/scripts/babel/createModuleMap.js
+++ b/scripts/babel/createModuleMap.js
@@ -5,9 +5,9 @@
 const fs = require('fs');
 const path = require('path');
 
-const isDirectory = source => fs.lstatSync(source).isDirectory();
-const getDirectories = source =>
-  fs.readdirSync(source).filter(name => isDirectory(path.join(source, name)));
+const isDirectory = (source) => fs.lstatSync(source).isDirectory();
+const getDirectories = (source) =>
+  fs.readdirSync(source).filter((name) => isDirectory(path.join(source, name)));
 
 const packagesDir = path.join(__dirname, '../../packages/');
 const exportsDir = path.join(packagesDir, 'react-native-web/src/exports');
diff --git a/scripts/babel/preset.js b/scripts/babel/preset.js
index 2769bbdf..650f6a1f 100644
--- a/scripts/babel/preset.js
+++ b/scripts/babel/preset.js
@@ -36,7 +36,7 @@ const createConfig = ({ modules }) => ({
   ].concat(modules ? ['babel-plugin-add-module-exports'] : [])
 });
 
-module.exports = function() {
+module.exports = function () {
   return process.env.BABEL_ENV === 'commonjs' || process.env.NODE_ENV === 'test'
     ? createConfig({ modules: 'commonjs' })
     : createConfig({ modules: false });
diff --git a/scripts/jest/serializer.js b/scripts/jest/serializer.js
index 40cf2aa8..b5ee71cd 100644
--- a/scripts/jest/serializer.js
+++ b/scripts/jest/serializer.js
@@ -29,7 +29,7 @@ function createSerializer(styleSheet) {
       const children = node.children || node.props.children;
       if (children) {
         if (Array.isArray(children)) {
-          children.forEach(child => {
+          children.forEach((child) => {
             args.push(flattenNodeStyles(child));
           });
         } else {
diff --git a/scripts/release/publish.js b/scripts/release/publish.js
index ae18584f..dd102b3d 100644
--- a/scripts/release/publish.js
+++ b/scripts/release/publish.js
@@ -17,7 +17,7 @@ console.log(`Publishing ${version}`);
 const workspacePaths = require('../../package.json').workspaces.concat(['./']);
 const workspaces = workspacePaths.reduce((acc, curr) => {
   const packageDirectories = glob.sync(path.resolve(curr));
-  packageDirectories.forEach(directory => {
+  packageDirectories.forEach((directory) => {
     const packageJsonPath = path.join(directory, 'package.json');
     const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, { encoding: 'utf-8' }));
     acc.push({ directory, packageJson, packageJsonPath });
@@ -29,7 +29,7 @@ const workspaces = workspacePaths.reduce((acc, curr) => {
 const workspaceNames = workspaces.map(({ packageJson }) => packageJson.name);
 workspaces.forEach(({ directory, packageJson, packageJsonPath }) => {
   packageJson.version = version;
-  workspaceNames.forEach(name => {
+  workspaceNames.forEach((name) => {
     if (packageJson.dependencies && packageJson.dependencies[name]) {
       packageJson.dependencies[name] = version;
     }
diff --git a/yarn.lock b/yarn.lock
index cffc03a0..6d29792c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9430,12 +9430,7 @@ prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz"
 
-prettier@^1.18.2:
-  version "1.18.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz"
-  integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==
-
-prettier@^2.0.1:
+prettier@^2.0.1, prettier@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
   integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==