From 8b88da60cc1c027c56c0375be7c31e30b848baf5 Mon Sep 17 00:00:00 2001
From: Gabriel Donadel Dall'Agnol <donadeldev@gmail.com>
Date: Sun, 14 Aug 2022 14:56:56 -0300
Subject: [PATCH 1/2] fix: Proptypes error on react-native 0.69

---
 package.json                    |  1 +
 src/components/affix/index.js   | 40 ++++++++++++++------------
 src/components/counter/index.js | 21 +++++++-------
 src/components/field/index.js   | 25 +++++++---------
 src/components/helper/index.js  | 51 ++++++++++++++++++---------------
 src/components/label/index.js   | 35 +++++++++++-----------
 yarn.lock                       | 27 +++++++++++++++--
 7 files changed, 116 insertions(+), 84 deletions(-)

diff --git a/package.json b/package.json
index ca16b9a6..1698e291 100644
--- a/package.json
+++ b/package.json
@@ -99,6 +99,7 @@
     "preset": "react-native"
   },
   "dependencies": {
+    "deprecated-react-native-prop-types": "^2.3.0",
     "prop-types": "^15.5.9"
   },
   "devDependencies": {
diff --git a/src/components/affix/index.js b/src/components/affix/index.js
index 44330d25..5ea56e46 100644
--- a/src/components/affix/index.js
+++ b/src/components/affix/index.js
@@ -1,17 +1,18 @@
-import PropTypes from 'prop-types'
-import React, { PureComponent } from 'react'
-import { Animated, Text } from 'react-native'
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
+import { Animated } from 'react-native';
+import { TextPropTypes } from 'deprecated-react-native-prop-types';
 
-import styles from './styles'
+import styles from './styles';
 
 export default class Affix extends PureComponent {
   static defaultProps = {
     numberOfLines: 1,
-  }
+  };
 
   static propTypes = {
     numberOfLines: PropTypes.number,
-    style: Text.propTypes.style,
+    style: TextPropTypes.style,
 
     color: PropTypes.string.isRequired,
     fontSize: PropTypes.number.isRequired,
@@ -20,16 +21,19 @@ export default class Affix extends PureComponent {
 
     labelAnimation: PropTypes.instanceOf(Animated.Value).isRequired,
 
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-  }
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.node),
+      PropTypes.node,
+    ]),
+  };
 
   render() {
-    let { labelAnimation, style, children, type, fontSize, color } = this.props
+    let { labelAnimation, style, children, type, fontSize, color } = this.props;
 
     let containerStyle = {
       height: fontSize * 1.5,
       opacity: labelAnimation,
-    }
+    };
 
     let textStyle = {
       includeFontPadding: false,
@@ -37,24 +41,24 @@ export default class Affix extends PureComponent {
 
       fontSize,
       color,
-    }
+    };
 
     switch (type) {
       case 'prefix':
-        containerStyle.paddingRight = 8
-        textStyle.textAlign = 'left'
-        break
+        containerStyle.paddingRight = 8;
+        textStyle.textAlign = 'left';
+        break;
 
       case 'suffix':
-        containerStyle.paddingLeft = 8
-        textStyle.textAlign = 'right'
-        break
+        containerStyle.paddingLeft = 8;
+        textStyle.textAlign = 'right';
+        break;
     }
 
     return (
       <Animated.View style={[styles.container, containerStyle]}>
         <Animated.Text style={[style, textStyle]}>{children}</Animated.Text>
       </Animated.View>
-    )
+    );
   }
 }
diff --git a/src/components/counter/index.js b/src/components/counter/index.js
index 679ca9cc..31cee3f8 100644
--- a/src/components/counter/index.js
+++ b/src/components/counter/index.js
@@ -1,8 +1,9 @@
-import PropTypes from 'prop-types'
-import React, { PureComponent } from 'react'
-import { Text } from 'react-native'
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
+import { Text } from 'react-native';
+import { TextPropTypes } from 'deprecated-react-native-prop-types';
 
-import styles from './styles'
+import styles from './styles';
 
 export default class Counter extends PureComponent {
   static propTypes = {
@@ -12,24 +13,24 @@ export default class Counter extends PureComponent {
     baseColor: PropTypes.string.isRequired,
     errorColor: PropTypes.string.isRequired,
 
-    style: Text.propTypes.style,
-  }
+    style: TextPropTypes.style,
+  };
 
   render() {
-    let { count, limit, baseColor, errorColor, style } = this.props
+    let { count, limit, baseColor, errorColor, style } = this.props;
 
     if (!limit) {
-      return null
+      return null;
     }
 
     let textStyle = {
       color: count > limit ? errorColor : baseColor,
-    }
+    };
 
     return (
       <Text style={[styles.text, style, textStyle]}>
         {count} / {limit}
       </Text>
-    )
+    );
   }
 }
diff --git a/src/components/field/index.js b/src/components/field/index.js
index 6ba80838..c5f1e84e 100644
--- a/src/components/field/index.js
+++ b/src/components/field/index.js
@@ -1,14 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
+import { View, TextInput, Animated, StyleSheet, Platform } from 'react-native';
 import {
-  View,
-  Text,
-  TextInput,
-  Animated,
-  StyleSheet,
-  Platform,
+  TextPropTypes,
   ViewPropTypes,
-} from 'react-native';
+  TextInputPropTypes,
+} from 'deprecated-react-native-prop-types';
 
 import Line from '../line';
 import Label from '../label';
@@ -64,7 +61,7 @@ export default class TextField extends PureComponent {
   };
 
   static propTypes = {
-    ...TextInput.propTypes,
+    ...TextInputPropTypes,
 
     animationDuration: PropTypes.number,
 
@@ -82,9 +79,9 @@ export default class TextField extends PureComponent {
 
     labelOffset: Label.propTypes.offset,
 
-    labelTextStyle: Text.propTypes.style,
-    titleTextStyle: Text.propTypes.style,
-    affixTextStyle: Text.propTypes.style,
+    labelTextStyle: TextPropTypes.style,
+    titleTextStyle: TextPropTypes.style,
+    affixTextStyle: TextPropTypes.style,
 
     tintColor: PropTypes.string,
     textColor: PropTypes.string,
@@ -115,8 +112,8 @@ export default class TextField extends PureComponent {
     prefix: PropTypes.string,
     suffix: PropTypes.string,
 
-    containerStyle: (ViewPropTypes || View.propTypes).style,
-    inputContainerStyle: (ViewPropTypes || View.propTypes).style,
+    containerStyle: ViewPropTypes.style,
+    inputContainerStyle: ViewPropTypes.style,
   };
 
   static inputContainerStyle = styles.inputContainer;
@@ -451,7 +448,7 @@ export default class TextField extends PureComponent {
   inputProps() {
     let store = {};
 
-    for (let key in TextInput.propTypes) {
+    for (let key in TextInputPropTypes) {
       if (key === 'defaultValue') {
         continue;
       }
diff --git a/src/components/helper/index.js b/src/components/helper/index.js
index 486e367c..14b79b9e 100644
--- a/src/components/helper/index.js
+++ b/src/components/helper/index.js
@@ -1,77 +1,82 @@
-import PropTypes from 'prop-types'
-import React, { PureComponent } from 'react'
-import { Animated, Text } from 'react-native'
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
+import { Animated } from 'react-native';
+import { TextPropTypes } from 'deprecated-react-native-prop-types';
 
-import styles from './styles'
+import styles from './styles';
 
 export default class Helper extends PureComponent {
   static propTypes = {
     title: PropTypes.string,
     error: PropTypes.string,
     disabled: PropTypes.bool,
-    style: Text.propTypes.style,
+    style: TextPropTypes.style,
     baseColor: PropTypes.string,
     errorColor: PropTypes.string,
     focusAnimation: PropTypes.instanceOf(Animated.Value),
-  }
+  };
 
   constructor(props) {
-    super(props)
+    super(props);
 
-    let { error, focusAnimation } = this.props
+    let { error, focusAnimation } = this.props;
 
     let opacity = focusAnimation.interpolate({
       inputRange: [-1, -0.5, 0],
       outputRange: [1, 0, 1],
       extrapolate: 'clamp',
-    })
+    });
 
     this.state = {
       errored: !!error,
       opacity,
-    }
+    };
   }
 
   componentDidMount() {
-    let { focusAnimation } = this.props
+    let { focusAnimation } = this.props;
 
-    this.listener = focusAnimation.addListener(this.onAnimation.bind(this))
+    this.listener = focusAnimation.addListener(this.onAnimation.bind(this));
   }
 
   componentWillUnmount() {
-    let { focusAnimation } = this.props
+    let { focusAnimation } = this.props;
 
-    focusAnimation.removeListener(this.listener)
+    focusAnimation.removeListener(this.listener);
   }
 
   onAnimation({ value }) {
     if (this.animationValue > -0.5 && value <= -0.5) {
-      this.setState({ errored: true })
+      this.setState({ errored: true });
     }
 
     if (this.animationValue < -0.5 && value >= -0.5) {
-      this.setState({ errored: false })
+      this.setState({ errored: false });
     }
 
-    this.animationValue = value
+    this.animationValue = value;
   }
 
   render() {
-    let { errored, opacity } = this.state
-    let { style, title, error, disabled, baseColor, errorColor } = this.props
+    let { errored, opacity } = this.state;
+    let { style, title, error, disabled, baseColor, errorColor } = this.props;
 
-    let text = errored ? error : title
+    let text = errored ? error : title;
 
     if (text == null) {
-      return null
+      return null;
     }
 
     let textStyle = {
       opacity,
 
       color: !disabled && errored ? errorColor : baseColor,
-    }
+    };
 
-    return <Animated.Text style={[styles.text, style, textStyle]}>{text}</Animated.Text>
+    return (
+      <Animated.Text style={[styles.text, style, textStyle]}>
+        {text}
+      </Animated.Text>
+    );
   }
 }
diff --git a/src/components/label/index.js b/src/components/label/index.js
index a6bcbede..a59286d2 100644
--- a/src/components/label/index.js
+++ b/src/components/label/index.js
@@ -1,15 +1,16 @@
-import PropTypes from 'prop-types'
-import React, { PureComponent } from 'react'
-import { Animated, Text } from 'react-native'
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
+import { Animated } from 'react-native';
+import { TextPropTypes } from 'deprecated-react-native-prop-types';
 
-import styles from './styles'
+import styles from './styles';
 
 export default class Label extends PureComponent {
   static defaultProps = {
     numberOfLines: 1,
     disabled: false,
     restricted: false,
-  }
+  };
 
   static propTypes = {
     numberOfLines: PropTypes.number,
@@ -39,9 +40,9 @@ export default class Label extends PureComponent {
       y1: PropTypes.number,
     }),
 
-    style: Text.propTypes.style,
+    style: TextPropTypes.style,
     label: PropTypes.string,
-  }
+  };
 
   render() {
     let {
@@ -59,10 +60,10 @@ export default class Label extends PureComponent {
       focusAnimation,
       labelAnimation,
       ...props
-    } = this.props
+    } = this.props;
 
     if (label == null) {
-      return null
+      return null;
     }
 
     let color = disabled
@@ -72,19 +73,19 @@ export default class Label extends PureComponent {
       : focusAnimation.interpolate({
           inputRange: [-1, 0, 1],
           outputRange: [errorColor, baseColor, tintColor],
-        })
+        });
 
     let textStyle = {
       lineHeight: (style && style.lineHeight) || fontSize,
       fontSize,
       color,
-    }
+    };
 
-    let { x0, y0, x1, y1 } = offset
+    let { x0, y0, x1, y1 } = offset;
 
-    y0 += activeFontSize
-    y0 += contentInset.label
-    y0 += fontSize * 0.25
+    y0 += activeFontSize;
+    y0 += contentInset.label;
+    y0 += fontSize * 0.25;
 
     let containerStyle = {
       transform: [
@@ -107,7 +108,7 @@ export default class Label extends PureComponent {
           }),
         },
       ],
-    }
+    };
 
     return (
       <Animated.View style={[styles.container, containerStyle]}>
@@ -115,6 +116,6 @@ export default class Label extends PureComponent {
           {label}
         </Animated.Text>
       </Animated.View>
-    )
+    );
   }
 }
diff --git a/yarn.lock b/yarn.lock
index b2623abd..76453a69 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2414,6 +2414,11 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/eslint-plugin/-/eslint-plugin-1.1.0.tgz#e42b1bef12d2415411519fd528e64b593b1363dc"
   integrity sha512-W/J0fNYVO01tioHjvYWQ9m6RgndVtbElzYozBq1ZPrHO/iCzlqoySHl4gO/fpCl9QEFjvJfjPgtPMTMlsoq5DQ==
 
+"@react-native/normalize-color@*":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@react-native/normalize-color/-/normalize-color-2.0.0.tgz#da955909432474a9a0fe1cbffc66576a0447f567"
+  integrity sha512-Wip/xsc5lw8vsBlmY2MO/gFLp3MvuZ2baBZjDeTjjndMgM0h5sxz7AZR62RDPGgstp8Np7JzjvVqVT7tpFZqsw==
+
 "@release-it/conventional-changelog@^2.0.0":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@release-it/conventional-changelog/-/conventional-changelog-2.0.1.tgz#bdd52ad3ecc0d6e39d637592d6ea2bd6d28e5ecb"
@@ -4388,6 +4393,15 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
+deprecated-react-native-prop-types@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/deprecated-react-native-prop-types/-/deprecated-react-native-prop-types-2.3.0.tgz#c10c6ee75ff2b6de94bb127f142b814e6e08d9ab"
+  integrity sha512-pWD0voFtNYxrVqvBMYf5gq3NA2GCpfodS1yNynTPc93AYA/KEMGeWDqqeUB6R2Z9ZofVhks2aeJXiuQqKNpesA==
+  dependencies:
+    "@react-native/normalize-color" "*"
+    invariant "*"
+    prop-types "*"
+
 deprecation@^2.0.0, deprecation@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
@@ -6000,7 +6014,7 @@ interpret@^1.0.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
   integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
 
-invariant@^2.2.4:
+invariant@*, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -8753,6 +8767,15 @@ prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
+prop-types@*:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 prop-types@^15.5.9, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
@@ -8886,7 +8909,7 @@ react-devtools-core@^4.6.0:
     shell-quote "^1.6.1"
     ws "^7"
 
-react-is@^16.12.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==

From 9b6c4f1986339f1c9bd46693bd0677978ba5ac0a Mon Sep 17 00:00:00 2001
From: Gabriel Donadel Dall'Agnol <donadeldev@gmail.com>
Date: Sun, 14 Aug 2022 14:57:23 -0300
Subject: [PATCH 2/2] chore: Run eslint and update tests snapshots

---
 .eslintrc.js                                  |   4 +-
 example/__tests__/App-test.js                 |  14 ---
 example/app.js                                |   3 +-
 index.js                                      |   8 +-
 scripts/bootstrap.js                          |   2 +-
 src/components/affix/styles.js                |   4 +-
 src/components/affix/test.js                  |  40 +++----
 src/components/counter/styles.js              |   4 +-
 src/components/counter/test.js                |  32 +++---
 .../field-filled/__snapshots__/test.js.snap   |   6 +
 src/components/field-filled/index.js          |  13 ++-
 src/components/field-filled/styles.js         |   4 +-
 src/components/field-filled/test.js           |  60 ++++++----
 .../field-outlined/__snapshots__/test.js.snap |   6 +
 src/components/field-outlined/index.js        |  36 +++---
 src/components/field-outlined/test.js         |  58 ++++++----
 .../field/__snapshots__/test.js.snap          |  13 +++
 src/components/field/styles.js                |   4 +-
 src/components/field/test.js                  | 108 ++++++++++--------
 src/components/helper/styles.js               |   4 +-
 src/components/helper/test.js                 |  36 +++---
 src/components/label/styles.js                |   4 +-
 src/components/label/test.js                  |  64 ++++++-----
 src/components/line/index.js                  |  54 +++++----
 src/components/line/styles.js                 |   4 +-
 src/components/line/test.js                   |  38 +++---
 src/components/outline/index.js               |  59 ++++++----
 src/components/outline/styles.js              |   8 +-
 src/components/outline/test.js                |  38 +++---
 29 files changed, 403 insertions(+), 325 deletions(-)
 delete mode 100644 example/__tests__/App-test.js

diff --git a/.eslintrc.js b/.eslintrc.js
index e9a017f9..e3d0dfc0 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -2,10 +2,10 @@ module.exports = {
   plugins: ['react-perf'],
   extends: ['@react-native-community', 'plugin:react-perf/recommended'],
   rules: {
-    semi: 0,
+    'semi': 0,
     'react-perf/jsx-no-new-object-as-prop': 1,
     'react-perf/jsx-no-new-array-as-prop': 0,
     'react-perf/jsx-no-new-function-as-prop': 0,
     'react-perf/jsx-no-jsx-as-prop': 1,
   },
-}
+};
diff --git a/example/__tests__/App-test.js b/example/__tests__/App-test.js
deleted file mode 100644
index 17847669..00000000
--- a/example/__tests__/App-test.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * @format
- */
-
-import 'react-native';
-import React from 'react';
-import App from '../App';
-
-// Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
-
-it('renders correctly', () => {
-  renderer.create(<App />);
-});
diff --git a/example/app.js b/example/app.js
index 8053ba20..739897df 100644
--- a/example/app.js
+++ b/example/app.js
@@ -157,8 +157,7 @@ class App extends Component {
         <ScrollView
           style={styles.scroll}
           contentContainerStyle={styles.contentContainer}
-          keyboardShouldPersistTaps="handled"
-        >
+          keyboardShouldPersistTaps="handled">
           <View style={styles.container}>
             <TextField
               ref={this.firstnameRef}
diff --git a/index.js b/index.js
index d8878127..60c77f35 100644
--- a/index.js
+++ b/index.js
@@ -1,5 +1,5 @@
-import TextField from './src/components/field'
-import FilledTextField from './src/components/field-filled'
-import OutlinedTextField from './src/components/field-outlined'
+import TextField from './src/components/field';
+import FilledTextField from './src/components/field-filled';
+import OutlinedTextField from './src/components/field-outlined';
 
-export { TextField, FilledTextField, OutlinedTextField }
+export { TextField, FilledTextField, OutlinedTextField };
diff --git a/scripts/bootstrap.js b/scripts/bootstrap.js
index b2922b53..17291894 100644
--- a/scripts/bootstrap.js
+++ b/scripts/bootstrap.js
@@ -12,7 +12,7 @@ const options = {
 };
 
 if (os.type() === 'Windows_NT') {
-  options.shell = true
+  options.shell = true;
 }
 
 let result;
diff --git a/src/components/affix/styles.js b/src/components/affix/styles.js
index 4a58c8c4..2ac28a6d 100644
--- a/src/components/affix/styles.js
+++ b/src/components/affix/styles.js
@@ -1,8 +1,8 @@
-import { StyleSheet } from 'react-native'
+import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   container: {
     top: 2,
     justifyContent: 'center',
   },
-})
+});
diff --git a/src/components/affix/test.js b/src/components/affix/test.js
index 926dc85f..cba766ff 100644
--- a/src/components/affix/test.js
+++ b/src/components/affix/test.js
@@ -1,9 +1,9 @@
-import 'react-native'
-import React from 'react'
-import { Animated } from 'react-native'
-import renderer from 'react-test-renderer'
+import 'react-native';
+import React from 'react';
+import { Animated } from 'react-native';
+import renderer from 'react-test-renderer';
 
-import Affix from '.'
+import Affix from '.';
 
 /* eslint-env jest */
 
@@ -12,10 +12,10 @@ const props = {
   fontSize: 16,
 
   labelAnimation: new Animated.Value(1),
-}
+};
 
-const prefix = 'a'
-const suffix = 'z'
+const prefix = 'a';
+const suffix = 'z';
 
 it('renders prefix', () => {
   let affix = renderer
@@ -24,10 +24,10 @@ it('renders prefix', () => {
         {prefix}
       </Affix>
     )
-    .toJSON()
+    .toJSON();
 
-  expect(affix).toMatchSnapshot()
-})
+  expect(affix).toMatchSnapshot();
+});
 
 it('renders inactive prefix', () => {
   let affix = renderer
@@ -36,10 +36,10 @@ it('renders inactive prefix', () => {
         {prefix}
       </Affix>
     )
-    .toJSON()
+    .toJSON();
 
-  expect(affix).toMatchSnapshot()
-})
+  expect(affix).toMatchSnapshot();
+});
 
 it('renders suffix', () => {
   let affix = renderer
@@ -48,10 +48,10 @@ it('renders suffix', () => {
         {suffix}
       </Affix>
     )
-    .toJSON()
+    .toJSON();
 
-  expect(affix).toMatchSnapshot()
-})
+  expect(affix).toMatchSnapshot();
+});
 
 it('renders inactive suffix', () => {
   let affix = renderer
@@ -60,7 +60,7 @@ it('renders inactive suffix', () => {
         {suffix}
       </Affix>
     )
-    .toJSON()
+    .toJSON();
 
-  expect(affix).toMatchSnapshot()
-})
+  expect(affix).toMatchSnapshot();
+});
diff --git a/src/components/counter/styles.js b/src/components/counter/styles.js
index b1666740..8eb9cdf4 100644
--- a/src/components/counter/styles.js
+++ b/src/components/counter/styles.js
@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native'
+import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   text: {
@@ -9,4 +9,4 @@ export default StyleSheet.create({
     paddingVertical: 2,
     marginLeft: 8,
   },
-})
+});
diff --git a/src/components/counter/test.js b/src/components/counter/test.js
index aa42fa28..b57bc1f1 100644
--- a/src/components/counter/test.js
+++ b/src/components/counter/test.js
@@ -1,8 +1,8 @@
-import 'react-native'
-import React from 'react'
-import renderer from 'react-test-renderer'
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
 
-import Counter from '.'
+import Counter from '.';
 
 /* eslint-env jest */
 
@@ -10,22 +10,26 @@ const props = {
   baseColor: 'blue',
   errorColor: 'red',
   fontSize: 12,
-}
+};
 
 it('renders null when limit is not set', () => {
-  let counter = renderer.create(<Counter count={1} {...props} />).toJSON()
+  let counter = renderer.create(<Counter count={1} {...props} />).toJSON();
 
-  expect(counter).toBeNull()
-})
+  expect(counter).toBeNull();
+});
 
 it('renders when limit is set', () => {
-  let counter = renderer.create(<Counter count={1} limit={1} {...props} />).toJSON()
+  let counter = renderer
+    .create(<Counter count={1} limit={1} {...props} />)
+    .toJSON();
 
-  expect(counter).toMatchSnapshot()
-})
+  expect(counter).toMatchSnapshot();
+});
 
 it('renders when limit is exceeded', () => {
-  let counter = renderer.create(<Counter count={2} limit={1} {...props} />).toJSON()
+  let counter = renderer
+    .create(<Counter count={2} limit={1} {...props} />)
+    .toJSON();
 
-  expect(counter).toMatchSnapshot()
-})
+  expect(counter).toMatchSnapshot();
+});
diff --git a/src/components/field-filled/__snapshots__/test.js.snap b/src/components/field-filled/__snapshots__/test.js.snap
index 485b017f..f73dd437 100644
--- a/src/components/field-filled/__snapshots__/test.js.snap
+++ b/src/components/field-filled/__snapshots__/test.js.snap
@@ -51,6 +51,7 @@ exports[`renders 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -214,6 +215,7 @@ exports[`renders accessory 1`] = `
     </View>
     <Image />
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -376,6 +378,7 @@ exports[`renders counter 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -561,6 +564,7 @@ exports[`renders disabled value 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -723,6 +727,7 @@ exports[`renders title 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -902,6 +907,7 @@ exports[`renders value 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
diff --git a/src/components/field-filled/index.js b/src/components/field-filled/index.js
index b3bc7fe9..3367229b 100644
--- a/src/components/field-filled/index.js
+++ b/src/components/field-filled/index.js
@@ -1,5 +1,5 @@
-import TextField from '../field'
-import styles from './styles'
+import TextField from '../field';
+import styles from './styles';
 
 export default class FilledTextField extends TextField {
   static contentInset = {
@@ -8,14 +8,17 @@ export default class FilledTextField extends TextField {
     top: 8,
     left: 12,
     right: 12,
-  }
+  };
 
   static labelOffset = {
     ...TextField.labelOffset,
 
     y0: -10,
     y1: -2,
-  }
+  };
 
-  static inputContainerStyle = [TextField.inputContainerStyle, styles.inputContainer]
+  static inputContainerStyle = [
+    TextField.inputContainerStyle,
+    styles.inputContainer,
+  ];
 }
diff --git a/src/components/field-filled/styles.js b/src/components/field-filled/styles.js
index 14ec5918..5003cf85 100644
--- a/src/components/field-filled/styles.js
+++ b/src/components/field-filled/styles.js
@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native'
+import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   inputContainer: {
@@ -7,4 +7,4 @@ export default StyleSheet.create({
 
     backgroundColor: 'rgb(204, 204, 204)',
   },
-})
+});
diff --git a/src/components/field-filled/test.js b/src/components/field-filled/test.js
index 79c2a8a3..ff7d2c87 100644
--- a/src/components/field-filled/test.js
+++ b/src/components/field-filled/test.js
@@ -1,51 +1,61 @@
-import { Image } from 'react-native'
-import React from 'react'
-import renderer from 'react-test-renderer'
+import { Image } from 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
 
-import FilledTextField from '.'
+import FilledTextField from '.';
 
 const props = {
   label: 'test',
-}
+};
 
 /* eslint-env jest */
 
 it('renders', () => {
-  let field = renderer.create(<FilledTextField {...props} />).toJSON()
+  let field = renderer.create(<FilledTextField {...props} />).toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders value', () => {
-  let field = renderer.create(<FilledTextField {...props} value="text" />).toJSON()
+  let field = renderer
+    .create(<FilledTextField {...props} value="text" />)
+    .toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders disabled value', () => {
-  let field = renderer.create(<FilledTextField {...props} value="text" disabled />).toJSON()
+  let field = renderer
+    .create(<FilledTextField {...props} value="text" disabled />)
+    .toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders title', () => {
-  let field = renderer.create(<FilledTextField {...props} title="field" />).toJSON()
+  let field = renderer
+    .create(<FilledTextField {...props} title="field" />)
+    .toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders counter', () => {
   let field = renderer
-    .create(<FilledTextField {...props} value="text" characterRestriction={10} />)
-    .toJSON()
+    .create(
+      <FilledTextField {...props} value="text" characterRestriction={10} />
+    )
+    .toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders accessory', () => {
-  let render = () => <Image />
+  let render = () => <Image />;
 
-  let field = renderer.create(<FilledTextField {...props} renderLeftAccessory={render} />).toJSON()
+  let field = renderer
+    .create(<FilledTextField {...props} renderLeftAccessory={render} />)
+    .toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
diff --git a/src/components/field-outlined/__snapshots__/test.js.snap b/src/components/field-outlined/__snapshots__/test.js.snap
index 011e0330..483c16a8 100644
--- a/src/components/field-outlined/__snapshots__/test.js.snap
+++ b/src/components/field-outlined/__snapshots__/test.js.snap
@@ -170,6 +170,7 @@ exports[`renders 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -453,6 +454,7 @@ exports[`renders accessory 1`] = `
     </View>
     <Image />
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -735,6 +737,7 @@ exports[`renders counter 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -1036,6 +1039,7 @@ exports[`renders disabled value 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -1318,6 +1322,7 @@ exports[`renders title 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -1617,6 +1622,7 @@ exports[`renders value 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
diff --git a/src/components/field-outlined/index.js b/src/components/field-outlined/index.js
index f9c9fd51..e16fadd5 100644
--- a/src/components/field-outlined/index.js
+++ b/src/components/field-outlined/index.js
@@ -1,8 +1,8 @@
-import React from 'react'
-import { Animated, StyleSheet } from 'react-native'
+import React from 'react';
+import { Animated, StyleSheet } from 'react-native';
 
-import TextField from '../field'
-import Outline from '../outline'
+import TextField from '../field';
+import Outline from '../outline';
 
 export default class OutlinedTextField extends TextField {
   static contentInset = {
@@ -13,47 +13,47 @@ export default class OutlinedTextField extends TextField {
     top: 0,
     left: 12,
     right: 12,
-  }
+  };
 
   static labelOffset = {
     ...TextField.labelOffset,
 
     y0: 0,
     y1: -10,
-  }
+  };
 
   static defaultProps = {
     ...TextField.defaultProps,
 
     lineWidth: 1,
     disabledLineWidth: StyleSheet.hairlineWidth,
-  }
+  };
 
   constructor(props) {
-    super(props)
+    super(props);
 
-    this.onTextLayout = this.onTextLayout.bind(this)
-    this.state.labelWidth = new Animated.Value(0)
+    this.onTextLayout = this.onTextLayout.bind(this);
+    this.state.labelWidth = new Animated.Value(0);
   }
 
   onTextLayout({ nativeEvent: { lines } }) {
-    let { fontSize, labelFontSize } = this.props
-    let { labelWidth } = this.state
+    let { fontSize, labelFontSize } = this.props;
+    let { labelWidth } = this.state;
 
-    let scale = labelFontSize / fontSize
+    let scale = labelFontSize / fontSize;
 
-    labelWidth.setValue(lines[0].width * scale)
+    labelWidth.setValue(lines[0].width * scale);
   }
 
   renderLabel(props) {
-    let { onTextLayout } = this
+    let { onTextLayout } = this;
 
-    return super.renderLabel({ ...props, onTextLayout })
+    return super.renderLabel({ ...props, onTextLayout });
   }
 
   renderLine(props) {
-    let { labelWidth } = this.state
+    let { labelWidth } = this.state;
 
-    return <Outline {...props} labelWidth={labelWidth} />
+    return <Outline {...props} labelWidth={labelWidth} />;
   }
 }
diff --git a/src/components/field-outlined/test.js b/src/components/field-outlined/test.js
index 82a482b3..4ddd7470 100644
--- a/src/components/field-outlined/test.js
+++ b/src/components/field-outlined/test.js
@@ -1,53 +1,61 @@
-import { Image } from 'react-native'
-import React from 'react'
-import renderer from 'react-test-renderer'
+import { Image } from 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
 
-import OutlinedTextField from '.'
+import OutlinedTextField from '.';
 
 const props = {
   label: 'test',
-}
+};
 
 /* eslint-env jest */
 
 it('renders', () => {
-  let field = renderer.create(<OutlinedTextField {...props} />).toJSON()
+  let field = renderer.create(<OutlinedTextField {...props} />).toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders value', () => {
-  let field = renderer.create(<OutlinedTextField {...props} value="text" />).toJSON()
+  let field = renderer
+    .create(<OutlinedTextField {...props} value="text" />)
+    .toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders disabled value', () => {
-  let field = renderer.create(<OutlinedTextField {...props} value="text" disabled />).toJSON()
+  let field = renderer
+    .create(<OutlinedTextField {...props} value="text" disabled />)
+    .toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders title', () => {
-  let field = renderer.create(<OutlinedTextField {...props} title="field" />).toJSON()
+  let field = renderer
+    .create(<OutlinedTextField {...props} title="field" />)
+    .toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders counter', () => {
   let field = renderer
-    .create(<OutlinedTextField {...props} value="text" characterRestriction={10} />)
-    .toJSON()
+    .create(
+      <OutlinedTextField {...props} value="text" characterRestriction={10} />
+    )
+    .toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders accessory', () => {
-  let render = () => <Image />
+  let render = () => <Image />;
 
   let field = renderer
     .create(<OutlinedTextField {...props} renderLeftAccessory={render} />)
-    .toJSON()
+    .toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
diff --git a/src/components/field/__snapshots__/test.js.snap b/src/components/field/__snapshots__/test.js.snap
index 705e7bf3..760ff284 100644
--- a/src/components/field/__snapshots__/test.js.snap
+++ b/src/components/field/__snapshots__/test.js.snap
@@ -48,6 +48,7 @@ exports[`renders 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -207,6 +208,7 @@ exports[`renders counter 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -389,6 +391,7 @@ exports[`renders default value 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -548,6 +551,7 @@ exports[`renders disabled value 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -707,6 +711,7 @@ exports[`renders error 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -884,6 +889,7 @@ exports[`renders left accessory 1`] = `
     </View>
     <Image />
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -1043,6 +1049,7 @@ exports[`renders multiline value 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -1208,6 +1215,7 @@ exports[`renders prefix 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -1392,6 +1400,7 @@ exports[`renders restriction 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -1574,6 +1583,7 @@ exports[`renders right accessory 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -1734,6 +1744,7 @@ exports[`renders suffix 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -1918,6 +1929,7 @@ exports[`renders title 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -2094,6 +2106,7 @@ exports[`renders value 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
diff --git a/src/components/field/styles.js b/src/components/field/styles.js
index a34953bd..15758cc3 100644
--- a/src/components/field/styles.js
+++ b/src/components/field/styles.js
@@ -1,4 +1,4 @@
-import { StyleSheet, I18nManager } from 'react-native'
+import { StyleSheet, I18nManager } from 'react-native';
 
 export default StyleSheet.create({
   inputContainer: {
@@ -39,4 +39,4 @@ export default StyleSheet.create({
   flex: {
     flex: 1,
   },
-})
+});
diff --git a/src/components/field/test.js b/src/components/field/test.js
index 06282e71..4c9b4be9 100644
--- a/src/components/field/test.js
+++ b/src/components/field/test.js
@@ -1,97 +1,113 @@
-import { Image } from 'react-native'
-import React from 'react'
-import renderer from 'react-test-renderer'
+import { Image } from 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
 
-import TextField from '.'
+import TextField from '.';
 
 const props = {
   label: 'test',
-}
+};
 
 /* eslint-env jest */
 
 it('renders', () => {
-  let field = renderer.create(<TextField {...props} />).toJSON()
+  let field = renderer.create(<TextField {...props} />).toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders value', () => {
-  let field = renderer.create(<TextField {...props} value="text" />).toJSON()
+  let field = renderer.create(<TextField {...props} value="text" />).toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders disabled value', () => {
-  let field = renderer.create(<TextField {...props} value="text" disabled />).toJSON()
+  let field = renderer
+    .create(<TextField {...props} value="text" disabled />)
+    .toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders default value', () => {
-  let field = renderer.create(<TextField {...props} defaultValue="text" />).toJSON()
+  let field = renderer
+    .create(<TextField {...props} defaultValue="text" />)
+    .toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders multiline value', () => {
-  let field = renderer.create(<TextField {...props} value="text" multiline />).toJSON()
+  let field = renderer
+    .create(<TextField {...props} value="text" multiline />)
+    .toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders title', () => {
-  let field = renderer.create(<TextField {...props} title="field" />).toJSON()
+  let field = renderer.create(<TextField {...props} title="field" />).toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders error', () => {
-  let field = renderer.create(<TextField {...props} error="message" />).toJSON()
+  let field = renderer
+    .create(<TextField {...props} error="message" />)
+    .toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders counter', () => {
   let field = renderer
     .create(<TextField {...props} value="text" characterRestriction={10} />)
-    .toJSON()
+    .toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders restriction', () => {
   let field = renderer
     .create(<TextField {...props} value="text" characterRestriction={2} />)
-    .toJSON()
+    .toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders prefix', () => {
-  let field = renderer.create(<TextField {...props} value="text" prefix="$" />).toJSON()
+  let field = renderer
+    .create(<TextField {...props} value="text" prefix="$" />)
+    .toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders suffix', () => {
-  let field = renderer.create(<TextField {...props} value="text" suffix=".com" />).toJSON()
+  let field = renderer
+    .create(<TextField {...props} value="text" suffix=".com" />)
+    .toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders left accessory', () => {
-  let render = () => <Image />
+  let render = () => <Image />;
 
-  let field = renderer.create(<TextField {...props} renderLeftAccessory={render} />).toJSON()
+  let field = renderer
+    .create(<TextField {...props} renderLeftAccessory={render} />)
+    .toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
 
 it('renders right accessory', () => {
-  let render = () => <Image />
+  let render = () => <Image />;
 
-  let field = renderer.create(<TextField {...props} renderRightAccessory={render} />).toJSON()
+  let field = renderer
+    .create(<TextField {...props} renderRightAccessory={render} />)
+    .toJSON();
 
-  expect(field).toMatchSnapshot()
-})
+  expect(field).toMatchSnapshot();
+});
diff --git a/src/components/helper/styles.js b/src/components/helper/styles.js
index fadeb8e2..b9dec92f 100644
--- a/src/components/helper/styles.js
+++ b/src/components/helper/styles.js
@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native'
+import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   text: {
@@ -9,4 +9,4 @@ export default StyleSheet.create({
     paddingVertical: 2,
     textAlign: 'left',
   },
-})
+});
diff --git a/src/components/helper/test.js b/src/components/helper/test.js
index d6a2ddac..ac7b3a47 100644
--- a/src/components/helper/test.js
+++ b/src/components/helper/test.js
@@ -1,13 +1,13 @@
-import 'react-native'
-import React from 'react'
-import { Animated } from 'react-native'
-import renderer from 'react-test-renderer'
+import 'react-native';
+import React from 'react';
+import { Animated } from 'react-native';
+import renderer from 'react-test-renderer';
 
-import Helper from '.'
+import Helper from '.';
 
 /* eslint-env jest */
 
-const text = 'helper'
+const text = 'helper';
 const props = {
   title: text,
   fontSize: 16,
@@ -16,24 +16,26 @@ const props = {
   errorColor: 'red',
 
   focusAnimation: new Animated.Value(0),
-}
+};
 
 it('renders helper', () => {
-  let helper = renderer.create(<Helper {...props} />).toJSON()
+  let helper = renderer.create(<Helper {...props} />).toJSON();
 
-  expect(helper).toMatchSnapshot()
-})
+  expect(helper).toMatchSnapshot();
+});
 
 it('renders disabled helper', () => {
-  let helper = renderer.create(<Helper {...props} disabled={true} />).toJSON()
+  let helper = renderer.create(<Helper {...props} disabled={true} />).toJSON();
 
-  expect(helper).toMatchSnapshot()
-})
+  expect(helper).toMatchSnapshot();
+});
 
 it('renders helper with error', () => {
   let helper = renderer
-    .create(<Helper {...props} error={text} focusAnimation={new Animated.Value(-1)} />)
-    .toJSON()
+    .create(
+      <Helper {...props} error={text} focusAnimation={new Animated.Value(-1)} />
+    )
+    .toJSON();
 
-  expect(helper).toMatchSnapshot()
-})
+  expect(helper).toMatchSnapshot();
+});
diff --git a/src/components/label/styles.js b/src/components/label/styles.js
index 60debfa0..af560f33 100644
--- a/src/components/label/styles.js
+++ b/src/components/label/styles.js
@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native'
+import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   container: {
@@ -14,4 +14,4 @@ export default StyleSheet.create({
     includeFontPadding: false,
     textAlignVertical: 'top',
   },
-})
+});
diff --git a/src/components/label/test.js b/src/components/label/test.js
index adc86196..24c3da8f 100644
--- a/src/components/label/test.js
+++ b/src/components/label/test.js
@@ -1,9 +1,9 @@
-import 'react-native'
-import React from 'react'
-import { Animated } from 'react-native'
-import renderer from 'react-test-renderer'
+import 'react-native';
+import React from 'react';
+import { Animated } from 'react-native';
+import renderer from 'react-test-renderer';
 
-import Label from '.'
+import Label from '.';
 
 /* eslint-env jest */
 
@@ -22,25 +22,27 @@ const props = {
   focusAnimation: new Animated.Value(0),
   labelAnimation: new Animated.Value(0),
   label: 'test',
-}
+};
 
 it('renders label', () => {
-  let label = renderer.create(<Label {...props} />)
+  let label = renderer.create(<Label {...props} />);
 
-  expect(label.toJSON()).toMatchSnapshot()
-})
+  expect(label.toJSON()).toMatchSnapshot();
+});
 
 it('renders empty label', () => {
-  let label = renderer.create(<Label {...props} label={null} />)
+  let label = renderer.create(<Label {...props} label={null} />);
 
-  expect(label.toJSON()).toMatchSnapshot()
-})
+  expect(label.toJSON()).toMatchSnapshot();
+});
 
 it('renders active label', () => {
-  let label = renderer.create(<Label {...props} labelAnimation={new Animated.Value(1)} />)
+  let label = renderer.create(
+    <Label {...props} labelAnimation={new Animated.Value(1)} />
+  );
 
-  expect(label.toJSON()).toMatchSnapshot()
-})
+  expect(label.toJSON()).toMatchSnapshot();
+});
 
 it('renders active focused label', () => {
   let label = renderer.create(
@@ -49,10 +51,10 @@ it('renders active focused label', () => {
       labelAnimation={new Animated.Value(1)}
       focusAnimation={new Animated.Value(1)}
     />
-  )
+  );
 
-  expect(label.toJSON()).toMatchSnapshot()
-})
+  expect(label.toJSON()).toMatchSnapshot();
+});
 
 it('renders errored label', () => {
   let label = renderer.create(
@@ -61,10 +63,10 @@ it('renders errored label', () => {
       labelAnimation={new Animated.Value(0)}
       focusAnimation={new Animated.Value(-1)}
     />
-  )
+  );
 
-  expect(label.toJSON()).toMatchSnapshot()
-})
+  expect(label.toJSON()).toMatchSnapshot();
+});
 
 it('renders active errored label', () => {
   let label = renderer.create(
@@ -73,20 +75,20 @@ it('renders active errored label', () => {
       labelAnimation={new Animated.Value(1)}
       focusAnimation={new Animated.Value(-1)}
     />
-  )
+  );
 
-  expect(label.toJSON()).toMatchSnapshot()
-})
+  expect(label.toJSON()).toMatchSnapshot();
+});
 
 it('renders restricted label', () => {
-  let label = renderer.create(<Label restricted={true} {...props} />)
+  let label = renderer.create(<Label restricted={true} {...props} />);
 
-  expect(label.toJSON()).toMatchSnapshot()
-})
+  expect(label.toJSON()).toMatchSnapshot();
+});
 
 it('renders styled label', () => {
-  let style = { textTransform: 'uppercase' }
-  let label = renderer.create(<Label style={style} {...props} />)
+  let style = { textTransform: 'uppercase' };
+  let label = renderer.create(<Label style={style} {...props} />);
 
-  expect(label.toJSON()).toMatchSnapshot()
-})
+  expect(label.toJSON()).toMatchSnapshot();
+});
diff --git a/src/components/line/index.js b/src/components/line/index.js
index 47ceb762..05921b2e 100644
--- a/src/components/line/index.js
+++ b/src/components/line/index.js
@@ -1,10 +1,10 @@
-import PropTypes from 'prop-types'
-import React, { PureComponent } from 'react'
-import { View, Animated } from 'react-native'
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
+import { View, Animated } from 'react-native';
 
-import styles from './styles'
+import styles from './styles';
 
-const lineTypes = PropTypes.oneOf(['solid', 'dotted', 'dashed', 'none'])
+const lineTypes = PropTypes.oneOf(['solid', 'dotted', 'dashed', 'none']);
 
 export default class Line extends PureComponent {
   static defaultProps = {
@@ -13,7 +13,7 @@ export default class Line extends PureComponent {
 
     disabled: false,
     restricted: false,
-  }
+  };
 
   static propTypes = {
     lineType: lineTypes,
@@ -31,21 +31,26 @@ export default class Line extends PureComponent {
     disabledLineWidth: PropTypes.number,
 
     focusAnimation: PropTypes.instanceOf(Animated.Value),
-  }
+  };
 
   static getDerivedStateFromProps(props, state) {
-    let { lineWidth, activeLineWidth, disabledLineWidth } = props
+    let { lineWidth, activeLineWidth, disabledLineWidth } = props;
 
-    let maxLineWidth = Math.max(lineWidth, activeLineWidth, disabledLineWidth, 1)
+    let maxLineWidth = Math.max(
+      lineWidth,
+      activeLineWidth,
+      disabledLineWidth,
+      1
+    );
 
     if (maxLineWidth !== state.maxLineWidth) {
-      return { maxLineWidth }
+      return { maxLineWidth };
     }
 
-    return null
+    return null;
   }
 
-  state = { maxLineWidth: 1 }
+  state = { maxLineWidth: 1 };
 
   borderProps() {
     let {
@@ -58,20 +63,20 @@ export default class Line extends PureComponent {
       tintColor,
       errorColor,
       focusAnimation,
-    } = this.props
+    } = this.props;
 
     if (disabled) {
       return {
         borderColor: baseColor,
         borderWidth: disabledLineWidth,
-      }
+      };
     }
 
     if (restricted) {
       return {
         borderColor: errorColor,
         borderWidth: activeLineWidth,
-      }
+      };
     }
 
     return {
@@ -84,20 +89,23 @@ export default class Line extends PureComponent {
         inputRange: [-1, 0, 1],
         outputRange: [activeLineWidth, lineWidth, activeLineWidth],
       }),
-    }
+    };
   }
 
   render() {
-    let { maxLineWidth } = this.state
-    let { disabled, lineType, disabledLineType } = this.props
+    let { maxLineWidth } = this.state;
+    let { disabled, lineType, disabledLineType } = this.props;
 
-    let borderStyle = disabled ? disabledLineType : lineType
+    let borderStyle = disabled ? disabledLineType : lineType;
 
     if (borderStyle === 'none') {
-      return null
+      return null;
     }
 
-    let [top, right, left] = Array.from(new Array(3), () => -1.5 * maxLineWidth)
+    let [top, right, left] = Array.from(
+      new Array(3),
+      () => -1.5 * maxLineWidth
+    );
 
     let lineStyle = {
       ...this.borderProps(),
@@ -106,12 +114,12 @@ export default class Line extends PureComponent {
       top,
       right,
       left,
-    }
+    };
 
     return (
       <View style={styles.container} pointerEvents="none">
         <Animated.View style={[styles.line, lineStyle]} />
       </View>
-    )
+    );
   }
 }
diff --git a/src/components/line/styles.js b/src/components/line/styles.js
index 08d17b38..d0701be9 100644
--- a/src/components/line/styles.js
+++ b/src/components/line/styles.js
@@ -1,4 +1,4 @@
-import { StyleSheet, Platform } from 'react-native'
+import { StyleSheet, Platform } from 'react-native';
 
 export default StyleSheet.create({
   line: {
@@ -15,4 +15,4 @@ export default StyleSheet.create({
 
     overflow: 'hidden',
   },
-})
+});
diff --git a/src/components/line/test.js b/src/components/line/test.js
index 3e3795e9..c4ae6312 100644
--- a/src/components/line/test.js
+++ b/src/components/line/test.js
@@ -1,9 +1,9 @@
-import 'react-native'
-import React from 'react'
-import { Animated } from 'react-native'
-import renderer from 'react-test-renderer'
+import 'react-native';
+import React from 'react';
+import { Animated } from 'react-native';
+import renderer from 'react-test-renderer';
 
-import Line from '.'
+import Line from '.';
 
 /* eslint-env jest */
 
@@ -17,28 +17,30 @@ const props = {
   activeLineWidth: 2,
   disabledLineWidth: 1,
   focusAnimation: new Animated.Value(0),
-}
+};
 
 it('renders line', () => {
-  let line = renderer.create(<Line {...props} />).toJSON()
+  let line = renderer.create(<Line {...props} />).toJSON();
 
-  expect(line).toMatchSnapshot()
-})
+  expect(line).toMatchSnapshot();
+});
 
 it('renders disabled line', () => {
-  let line = renderer.create(<Line {...props} disabled={true} />).toJSON()
+  let line = renderer.create(<Line {...props} disabled={true} />).toJSON();
 
-  expect(line).toMatchSnapshot()
-})
+  expect(line).toMatchSnapshot();
+});
 
 it('renders restricted line', () => {
-  let line = renderer.create(<Line {...props} restricted={true} />).toJSON()
+  let line = renderer.create(<Line {...props} restricted={true} />).toJSON();
 
-  expect(line).toMatchSnapshot()
-})
+  expect(line).toMatchSnapshot();
+});
 
 it('renders active line', () => {
-  let line = renderer.create(<Line {...props} focusAnimation={new Animated.Value(1)} />).toJSON()
+  let line = renderer
+    .create(<Line {...props} focusAnimation={new Animated.Value(1)} />)
+    .toJSON();
 
-  expect(line).toMatchSnapshot()
-})
+  expect(line).toMatchSnapshot();
+});
diff --git a/src/components/outline/index.js b/src/components/outline/index.js
index 8d0d8c1b..731bdd48 100644
--- a/src/components/outline/index.js
+++ b/src/components/outline/index.js
@@ -1,15 +1,15 @@
-import PropTypes from 'prop-types'
-import React, { Fragment, PureComponent } from 'react'
-import { View, Animated, I18nManager } from 'react-native'
+import PropTypes from 'prop-types';
+import React, { Fragment, PureComponent } from 'react';
+import { View, Animated, I18nManager } from 'react-native';
 
-import styles, { borderRadius } from './styles'
+import styles, { borderRadius } from './styles';
 
 export default class Line extends PureComponent {
   static defaultProps = {
     lineType: 'solid',
     disabled: false,
     restricted: false,
-  }
+  };
 
   static propTypes = {
     lineType: PropTypes.oneOf(['solid', 'none']),
@@ -33,7 +33,7 @@ export default class Line extends PureComponent {
       left: PropTypes.number,
       right: PropTypes.number,
     }),
-  }
+  };
 
   borderProps() {
     let {
@@ -47,20 +47,20 @@ export default class Line extends PureComponent {
       tintColor,
       errorColor,
       focusAnimation,
-    } = this.props
+    } = this.props;
 
     if (disabled) {
       return {
         borderColor: baseColor,
         borderWidth: disabledLineWidth,
-      }
+      };
     }
 
     if (restricted) {
       return {
         borderColor: errorColor,
         borderWidth: activeLineWidth,
-      }
+      };
     }
 
     return {
@@ -75,18 +75,18 @@ export default class Line extends PureComponent {
       }),
 
       borderStyle: lineType,
-    }
+    };
   }
 
   render() {
-    let { lineType, labelWidth, labelAnimation, contentInset } = this.props
+    let { lineType, labelWidth, labelAnimation, contentInset } = this.props;
 
     if (lineType === 'none') {
-      return null
+      return null;
     }
 
-    let labelOffset = 2 * (contentInset.left - 2 * borderRadius)
-    let lineOffset = Animated.add(labelWidth, labelOffset)
+    let labelOffset = 2 * (contentInset.left - 2 * borderRadius);
+    let lineOffset = Animated.add(labelWidth, labelOffset);
 
     let topLineContainerStyle = {
       transform: [
@@ -97,32 +97,40 @@ export default class Line extends PureComponent {
           translateX: Animated.multiply(labelAnimation, lineOffset),
         },
       ],
-    }
+    };
 
     let leftContainerStyle = {
       width: contentInset.left - borderRadius,
-    }
+    };
 
     let rightContainerStyle = {
       width: contentInset.right - borderRadius,
-    }
+    };
 
     let topContainerStyle = {
       left: leftContainerStyle.width,
       right: rightContainerStyle.width,
-    }
+    };
 
-    let lineStyle = this.borderProps()
+    let lineStyle = this.borderProps();
 
     return (
       <Fragment>
-        <View style={[styles.topContainer, topContainerStyle]} pointerEvents="none">
-          <Animated.View style={[styles.topLineContainer, topLineContainerStyle]}>
+        <View
+          style={[styles.topContainer, topContainerStyle]}
+          pointerEvents="none"
+        >
+          <Animated.View
+            style={[styles.topLineContainer, topLineContainerStyle]}
+          >
             <Animated.View style={[styles.borderTop, lineStyle]} />
           </Animated.View>
         </View>
 
-        <View style={[styles.rightContainer, rightContainerStyle]} pointerEvents="none">
+        <View
+          style={[styles.rightContainer, rightContainerStyle]}
+          pointerEvents="none"
+        >
           <Animated.View style={[styles.borderRight, lineStyle]} />
         </View>
 
@@ -130,10 +138,13 @@ export default class Line extends PureComponent {
           <Animated.View style={[styles.borderBottom, lineStyle]} />
         </View>
 
-        <View style={[styles.leftContainer, leftContainerStyle]} pointerEvents="none">
+        <View
+          style={[styles.leftContainer, leftContainerStyle]}
+          pointerEvents="none"
+        >
           <Animated.View style={[styles.borderLeft, lineStyle]} />
         </View>
       </Fragment>
-    )
+    );
   }
 }
diff --git a/src/components/outline/styles.js b/src/components/outline/styles.js
index a6e0d0f0..bdd7e1ad 100644
--- a/src/components/outline/styles.js
+++ b/src/components/outline/styles.js
@@ -1,11 +1,11 @@
-import { StyleSheet, Platform } from 'react-native'
+import { StyleSheet, Platform } from 'react-native';
 
-export const borderRadius = 4
+export const borderRadius = 4;
 
 let containerStyle = {
   position: 'absolute',
   overflow: 'hidden',
-}
+};
 
 export default StyleSheet.create({
   borderLeft: {
@@ -80,4 +80,4 @@ export default StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
     overflow: 'hidden',
   },
-})
+});
diff --git a/src/components/outline/test.js b/src/components/outline/test.js
index 5e36cd21..33ce990f 100644
--- a/src/components/outline/test.js
+++ b/src/components/outline/test.js
@@ -1,9 +1,9 @@
-import 'react-native'
-import React from 'react'
-import { Animated } from 'react-native'
-import renderer from 'react-test-renderer'
+import 'react-native';
+import React from 'react';
+import { Animated } from 'react-native';
+import renderer from 'react-test-renderer';
 
-import Outline from '.'
+import Outline from '.';
 
 /* eslint-env jest */
 
@@ -24,28 +24,30 @@ const props = {
   labelWidth: new Animated.Value(72),
 
   contentInset: { left: 12, right: 12 },
-}
+};
 
 it('renders outline', () => {
-  let line = renderer.create(<Outline {...props} />).toJSON()
+  let line = renderer.create(<Outline {...props} />).toJSON();
 
-  expect(line).toMatchSnapshot()
-})
+  expect(line).toMatchSnapshot();
+});
 
 it('renders disabled outline', () => {
-  let line = renderer.create(<Outline {...props} disabled={true} />).toJSON()
+  let line = renderer.create(<Outline {...props} disabled={true} />).toJSON();
 
-  expect(line).toMatchSnapshot()
-})
+  expect(line).toMatchSnapshot();
+});
 
 it('renders restricted outline', () => {
-  let line = renderer.create(<Outline {...props} restricted={true} />).toJSON()
+  let line = renderer.create(<Outline {...props} restricted={true} />).toJSON();
 
-  expect(line).toMatchSnapshot()
-})
+  expect(line).toMatchSnapshot();
+});
 
 it('renders active outline', () => {
-  let line = renderer.create(<Outline {...props} labelAnimation={new Animated.Value(1)} />).toJSON()
+  let line = renderer
+    .create(<Outline {...props} labelAnimation={new Animated.Value(1)} />)
+    .toJSON();
 
-  expect(line).toMatchSnapshot()
-})
+  expect(line).toMatchSnapshot();
+});