How to Add hyphen in react-native autocomplete dropdown input value

Question

I'am using react-native-autocomplete-dropdown package for selecting options fetched from an api. I require that when user type first 6 digits then hyphen(-) automatically should be added after that and user must continue typing after that also .

Like if user types 12151996. then in input box it should look like 121519-96 acoording to requirement user will not type hyphen . it should be automatically added .

link for package : https://www.npmjs.com/package/react-native-autocomplete-dropdown My code :

 <AutocompleteDropdown
                        ref={searchRef}
                        onFocus={() => {
                          setactiveCpr(true);
                        }}
                        clearOnFocus={false}
                        onClear={() => {
                          setactiveCpr(false);
                        }}
                        // onBlur={() => {
                        //   setactiveCpr(false);
                        // }}
                        // closeOnBlur={true}
                        controller={controller => {
                          dropdownController.current = controller;
                        }}
                        dataSet={suggestionsList}
                        onChangeText={text => {
                          getSuggestions(text);
                          onChangeTextHandler(text);
                          text = text + '';
                        }}
                        onSelectItem={item => {
                          item && setSelectedItem(item.id);
                          item && fullLookUp(item.id);
                          item && journalHistory(item.id);
                          item && Laboratoriesvar(item.id);
                          setSuggestionsList(null);
                        }}
                        // debounce={600}
                        onSubmit={() => {
                          setactiveCpr(false);
                        }}
                        onClear={() => {
                          setactiveCpr(false);
                          setSelectedItem(null);
                         
                        }}
                        //  onSubmit={(e) => onSubmitSearch(e.nativeEvent.text)}
                        // onOpenSuggestionsList={onOpenSuggestionsList}
                        loading={loading}
                        useFilter={false} // prevent rerender twice
                        textInputProps={{
                        
                        
                          editable: selectedItem ? false : true,
                        
                         
                          value: selectedItem,
                          onChangeText: t => {
                            searchRef.current.onChangeText = i => {
                              console.log(i);
                            };
                          },
                          style: {
                            backgroundColor: theme.inputBg,
    
                            color: '#000',
                            paddingLeft: 13,
                            fontSize: 14,
                          },
                        }}
                        rightButtonsContainerStyle={{
                          borderRadius: 25,
                          right: 8,
                          height: 30,
                          top: 5,
                          alignSelfs: 'center',
                          backgroundColor: 'transparent',
                        }}
                        inputContainerStyle={{
                          backgroundColor: 'transparent',
    
                          
                        }}
                        suggestionsListContainerStyle={{
                          backgroundColor: 'white',
                        
                          zIndex: 300,
                        }}
                       
                        renderItem={(item, text) => (
                          <Text style={{color: '#000', padding: 15}}>
                            {`${item.id} ${item.title}`}
                          </Text>
                        )}
                      
                        inputHeight={40}
                        showChevron={false}
                       
                      />

score 0 · Answer 1 · answered Oct 06 '21 at 11:43

You can achieve that by checking for the length of the text and adding a hyphen if the length equals 6. Here is a minimal example as your code is pretty convoluted.

import React, { useState } from "react";
import { Text, TextInput, View, StyleSheet } from 'react-native';
import { AutocompleteDropdown } from "react-native-autocomplete-dropdown"

export default function App() {
  const [selectedItem, setSelectedItem] = useState(null)
  const [searchText, setSearchText] = useState('');
  const handleTextChange = (text) => {
    if(text.length==6) {
      setSearchText(text+'-')
      } else {
      setSearchText(text);
      } 
  }

  return (
    <View style={{marginTop: 50}}>
      <AutocompleteDropdown
        clearOnFocus={false}
        closeOnBlur={true}
        initialValue={{ id: "2" }} // or just '2'
        onSelectItem={setSelectedItem}
        onChange={handleTextChange}
        onChangeText={handleTextChange}
        textInputProps={{value: searchText}}
        dataSet={[
          { id: "1", title: "Alpha" },
          { id: "2", title: "Beta" },
          { id: "3", title: "Gamma" }
        ]}
      />
      <Text style={{ color: "#668", fontSize: 13 }}>
        Selected item: {JSON.stringify(selectedItem)}
      </Text>
    </View>
  )
}

How to Add hyphen in react-native autocomplete dropdown input value

1 Answers1