Implemented OulinedTextField component

Author: n4kz

index.js

@@ -1,4 +1,5 @@
 import TextField from './src/components/field';
-import FilledTextField from './src/components/filled';
+import FilledTextField from './src/components/field-filled';
+import OutlinedTextField from './src/components/field-outlined';
 
-export { TextField, FilledTextField };
+export { TextField, FilledTextField, OutlinedTextField };

src/components/field-outlined/index.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Animated, StyleSheet } from 'react-native';
+
+import TextField from '../field';
+import Outline from '../outline';
+
+export default class OutlinedTextField extends TextField {
+  static contentInset = {
+    ...TextField.contentInset,
+
+    input: 16,
+
+    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);
+
+    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 scale = labelFontSize / fontSize;
+
+    labelWidth.setValue(lines[0].width * scale);
+  }
+
+  renderLabel(props) {
+    let { onTextLayout } = this;
+
+    return super.renderLabel({ ...props, onTextLayout });
+  }
+
+  renderLine(props) {
+    let { labelWidth } = this.state;
+
+    return (
+      <Outline {...props} labelWidth={labelWidth} />
+    );
+  }
+}