fix: fix helper text not shown the first time it's visible

callstack · Oct 18, 2018 · 5a51af4 · 5a51af4
1 parent 56840ee
commit 5a51af4
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/example/src/TextInputExample.js b/example/src/TextInputExample.js
@@ -40,10 +40,9 @@ class TextInputExample extends React.Component<Props, State> {
 
     return (
       <KeyboardAvoidingView
-        style={{ flex: 1 }}
-        behavior={'padding'}
-        keyboardVerticalOffset="80"
-        enabled
+        style={styles.wrapper}
+        behavior="padding"
+        keyboardVerticalOffset={80}
       >
         <ScrollView
           style={[styles.container, { backgroundColor: background }]}
@@ -99,6 +98,9 @@ const styles = StyleSheet.create({
     flex: 1,
     padding: 8,
   },
+  wrapper: {
+    flex: 1,
+  },
   inputContainerStyle: {
     margin: 8,
   },

diff --git a/src/components/HelperText.js b/src/components/HelperText.js
@@ -82,25 +82,28 @@ class HelperText extends React.PureComponent<Props, State> {
     textHeight: 0,
   };
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.visible !== this.props.visible) {
+  componentDidUpdate(prevProps, prevState) {
+    if (
+      prevProps.visible !== this.props.visible ||
+      prevState.textHeight !== this.state.textHeight
+    ) {
       if (this.props.visible) {
-        this._animateFocus();
+        this._showText();
       } else {
-        this._animateBlur();
+        this._hideText();
       }
     }
   }
 
-  _animateFocus = () => {
+  _showText = () => {
     Animated.timing(this.state.shown, {
       toValue: 1,
       duration: 150,
       useNativeDriver: true,
     }).start();
   };
 
-  _animateBlur = () => {
+  _hideText = () => {
     Animated.timing(this.state.shown, {
       toValue: 0,
       duration: 180,

diff --git a/src/components/TextInput.js b/src/components/TextInput.js
@@ -198,10 +198,10 @@ class TextInput extends React.Component<Props, State> {
   }
 
   state = {
-    labeled: new Animated.Value(this.props.value ? 0 : 1),
+    labeled: new Animated.Value(this.props.value || this.props.error ? 0 : 1),
     error: new Animated.Value(this.props.error ? 1 : 0),
     focused: false,
-    placeholder: '',
+    placeholder: this.props.error ? this.props.placeholder : '',
     value: this.props.value,
     labelLayout: {
       measured: false,
@@ -216,7 +216,7 @@ class TextInput extends React.Component<Props, State> {
     ) {
       // The label should be minimized if the text input is focused, or has text
       // In minimized mode, the label moves up and becomes small
-      if (this.state.value || this.state.focused) {
+      if (this.state.value || this.state.focused || this.props.error) {
         this._minmizeLabel();
       } else {
         this._restoreLabel();
@@ -227,10 +227,10 @@ class TextInput extends React.Component<Props, State> {
       prevState.focused !== this.state.focused ||
       prevProps.label !== this.props.label
     ) {
-      // Show placeholder text only if the input is focused or there's no label
+      // Show placeholder text only if the input is focused, or has error, or there's no label
       // We don't show placeholder if there's a label because the label acts as placeholder
       // When focused, the label moves up, so we can show a placeholder
-      if (this.state.focused || !this.props.label) {
+      if (this.state.focused || this.props.error || !this.props.label) {
         this._showPlaceholder();
       } else {
         this._hidePlaceholder();
@@ -328,7 +328,9 @@ class TextInput extends React.Component<Props, State> {
   };
 
   _handleChangeText = (value: string) => {
-    if (!this.props.editable) return;
+    if (!this.props.editable) {
+      return;
+    }
 
     this.setState({ value });
     this.props.onChangeText && this.props.onChangeText(value);