Disable the input from react-native-autocomplete-input

Question

I'm using react-native-autocomplete-input and I'd like disable the <Autocomplete /> input. I tried adding disabled={this.state.loading} (disabling it while the data loads...right now the user can start typing before the autocomplete is available).

I'm confident there's a way to do so but I haven't been able to figure it out. Code below:

<Autocomplete
        data={data}
        defaultValue={query}
        listStyle={styles.autoCompleteItems}
        onChangeText={(text) => this.setState({query: text})}
        renderItem={(data) => (
          <TouchableOpacity onPress={() =>
              this.setState({query: data.name, schoolId: data.id, social: data.social})
            }
            >
            <Text>{data.name}</Text>
          </TouchableOpacity>
        )}
        />

Nakib · Accepted Answer · 2016-07-19 23:13:35Z

3

react-native-autocomplete-input itself does not provide functionality to disable the input field. So passing disabled={this.state.loading} will have no effect.

You can edit the the package by going into your node_modules/react-native-autocomplete-input folder and editing index.js file.

change the render function in index.js to following. Now its accepting isEditable prop and passing it to TextInput

render() {
    const { showResults } = this.state;
    const { containerStyle, inputContainerStyle, onEndEditing, isEditable, style, ...props } = this.props;
    return (
      <View style={[styles.container, containerStyle]}>
        <View style={[styles.inputContainer, inputContainerStyle]}>
          <TextInput
            editable={isEditable}
            style={[styles.input, style]}
            ref="textInput"
            onEndEditing={e =>
              this._showResults(false) || (onEndEditing && onEndEditing(e))
            }
            {...props}
          />
        </View>
        {showResults && this._renderItems()}
      </View>
    );
  }

Now you can pass isEditable={this.loading} as a prop to <Autocomplete />

answered Jul 19, 2016 at 23:13

Nakib

4,7337 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

toddmetheny Over a year ago

Haven't tried it yet but that makes perfect sense. Thanks for your help. Gave you the green check :)

Collectives™ on Stack Overflow

Disable the input from react-native-autocomplete-input

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related