fix: android autofill respond to user

hopetambala · Feb 20, 2021 · f96c306 · f96c306
1 parent 69f8b55
commit f96c306
Showing 1 changed file with 57 additions and 30 deletions.
diff --git a/components/FormikFields/PaperInputPicker/AutoFill/index.js b/components/FormikFields/PaperInputPicker/AutoFill/index.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import {
+  Platform,
   StyleSheet, Text, TouchableOpacity, View,
   YellowBox
 } from 'react-native';
@@ -9,6 +10,7 @@ import { TextInput } from 'react-native-paper';
 import { getData } from '../../../../modules/async-storage';
 import { cacheAutofillData } from '../../../../modules/cached-resources';
 import I18n from '../../../../modules/i18n';
+import { theme } from '../../../../modules/theme';
 import { stylesDefault, stylesPaper } from '../index.style';
 
 YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']);
@@ -56,12 +58,12 @@ export default class AutoFill extends Component {
       label, translatedLabel, formikProps, formikKey, scrollViewScroll, setScrollViewScroll
     } = this.props;
 
-    const placeholder = `${I18n.t('components.autofill.placeholder')} ${I18n.t(label)} ${I18n.t('components.autofill.placeholder_end')}`;
+    const placeholder = I18n.t(label);
 
     return (
       <View style={styles.container}>
         {/* handle issues where autofil does not populate any data */}
-        {!values ? (
+        {!values && (
           <TextInput
             label={translatedLabel.length > 40 ? '' : translatedLabel}
             onChangeText={formikProps.handleChange(formikKey)}
@@ -70,18 +72,20 @@ export default class AutoFill extends Component {
             theme={stylesPaper}
             style={stylesDefault.label}
           />
-        ) : (
+        )}
+        {values && Platform.OS === 'ios' && (
           <View>
             <Autocomplete
               autoCapitalize="none"
               autoCorrect={false}
               containerStyle={styles.autocompleteContainer}
-                // data to show in suggestion
+              inputContainerStyle={styles.textInputContainer}
+              // data to show in suggestion
               data={fields.length === 1 && comp(query, fields[0]) ? [] : fields}
-                // default value if you want to set something in input
+              // default value if you want to set something in input
               defaultValue={query}
-                /* onchange of the text changing the state of the query which will trigger
-                the findFilm method to show the suggestions */
+              /* onchange of the text changing the state of the query which will trigger
+              the findFilm method to show the suggestions */
               onChangeText={(text) => {
                 this.setState({ query: text });
                 formikProps.setFieldValue(formikKey, text);
@@ -94,7 +98,7 @@ export default class AutoFill extends Component {
                 // and on the screen when they are not
                 setScrollViewScroll(false);
                 if (fields.length === 0
-                    && scrollViewScroll === false) {
+                  && scrollViewScroll === false) {
                   setScrollViewScroll(true);
                 }
               }}
@@ -113,13 +117,43 @@ export default class AutoFill extends Component {
                 </TouchableOpacity>
               )}
             />
-            <View style={styles.descriptionContainer}>
-              {fields.length > 0 ? (
-                <Text style={styles.infoText}>{query}</Text>
-              ) : (
-                <Text style={styles.infoText}>{placeholder}</Text>
+          </View>
+        )}
+        {values && Platform.OS === 'android' && (
+          <View>
+            <Autocomplete
+              autoCapitalize="none"
+              autoCorrect={false}
+              containerStyle={styles.autocompleteContainer}
+              inputContainerStyle={styles.textInputContainer}
+              // data to show in suggestion
+              data={fields.length === 1 && comp(query, fields[0]) ? [] : fields}
+              // default value if you want to set something in input
+              defaultValue={query}
+              /* onchange of the text changing the state of the query which will trigger
+              the findFilm method to show the suggestions */
+              onChangeText={(text) => {
+                this.setState({ query: text });
+                formikProps.setFieldValue(formikKey, text);
+              }}
+              placeholder={placeholder}
+              listStyle={styles.listContainer}
+              keyExtractor={(item,) => item.key}
+              renderItem={({ item }) => (
+                // you can change the view you want to show in suggestion from here
+                <TouchableOpacity
+                  key={`${item}`}
+                  onPress={() => {
+                    this.setState({ query: item });
+                    formikProps.setFieldValue(formikKey, item);
+                  }}
+                >
+                  <Text style={styles.itemText} key={item}>
+                    {item}
+                  </Text>
+                </TouchableOpacity>
               )}
-            </View>
+            />
           </View>
         )}
       </View>
@@ -129,30 +163,23 @@ export default class AutoFill extends Component {
 
 const styles = StyleSheet.create({
   container: {
-    // backgroundColor: '#F5FCFF',
     flex: 1,
-    padding: 16,
-    // marginTop: 40,
-    marginBottom: 40,
-  },
-  autocompleteContainer: {
-    backgroundColor: '#ffffff',
-    borderWidth: 0
+    paddingLeft: 15,
+    paddingRight: 15,
+    paddingTop: 10,
+    marginBottom: 75,
   },
-  descriptionContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    borderRadius: 20
+  textInputContainer: {
+    borderColor: theme.colors.primary,
+    borderWidth: 1,
+    color: 'red'
   },
   itemText: {
     fontSize: 15,
     paddingTop: 5,
     paddingBottom: 5,
     margin: 2,
-  },
-  infoText: {
-    textAlign: 'center',
-    fontSize: 16,
+    flex: 1
   },
   listContainer: {
     height: 80,