title: How can I switch to the second input when first will be done in React Native
body: <p>I am creating a Taxi Application just like Uber where user enters two locations in given inputs (Pickup and Dropoff), I done with the PickUp when User enters a location it shows the googleautocomplete listview for location and can select the pickup location, but I am stuch with the Dropoff when I write something in the second input it changes the first too or when I click the clear icon it clears text from both inputs. So what do I have to do to solve this problem kindly help please Thanks. </p>
  
  <p>AutoCompeleteInputs.js</p>
  
  <pre><code>import React from 'react';
  import { TextInput, View, StyleSheet, Animated, TouchableOpacity } from "react-native";
  import AutoCompleteListView from "./AutoCompleteListView";
  import Events from "react-native-simple-events";
  import debounce from '../utils/debounce'
  import fetch from 'react-native-cancelable-fetch';
  import MaterialIcons from "react-native-vector-icons/MaterialIcons";
  
  const AUTOCOMPLETE_URL = "https://maps.googleapis.com/maps/api/place/autocomplete/json";
  const REVRSE_GEO_CODE_URL = "https://maps.googleapis.com/maps/api/geocode/json";
  
  
  
  export default class AutoCompleteInput extends React.Component {
  
      static defaultProps = {
          language: 'en'
      };
  
      constructor(props) {
          super(props);
      }
  
      componentWillUnmount() {
          this._abortRequest();
      }
  
      state = {
          predictions: [],
          loading: false,
          inFocus: false,
      };
  
      _abortRequest = () =&gt; {
          fetch.abort(this);
      };
  
      fetchAddressForLocation = (location) =&gt; {
          this.setState({ loading: true, predictions: [] });
          let { latitude, longitude } = location;
          fetch(`${REVRSE_GEO_CODE_URL}?key=${API_KEY}&amp;latlng=${latitude},${longitude}`, null, this)
              .then(res =&gt; res.json())
              .then(data =&gt; {
                  this.setState({ loading: false });
                  let { results } = data;
                  if (results.length &gt; 0) {
                      let { formatted_address } = results[0];
                      this.setState({ text: formatted_address });
                  }
              });
      }
  
      _request = (text) =&gt; {
          this._abortRequest();
          if (text.length &gt;= 3) {
              fetch(`${AUTOCOMPLETE_URL}?input=${encodeURIComponent(text)}&amp;key=${API_KEY}&amp;language=${this.props.language}`, null, this)
                  .then(res =&gt; res.json())
                  .then(data =&gt; {
                      let { predictions } = data;
                      this.setState({ predictions });
                  });
          } else {
              this.setState({ predictions: [] });
          }
      }
  
      _onChangeText = (text) =&gt; {
          this._request(text);
          this.setState({ text });
      }
  
  
      _onFocus = () =&gt; {
          this._abortRequest();
          this.setState({ loading: false, inFocus: true });
          Events.trigger('InputFocus');
      }
  
      _onBlur = () =&gt; {
          this.setState({ inFocus: false });
          Events.trigger('InputBlur');
      }
  
      blur = () =&gt; {
          this._input.blur();
      }
  
      _onPressClear = () =&gt; {
          this.setState({ text: '', predictions: [] });
      }
  
      _getClearButton = () =&gt; {
          return this.state.inFocus ?
              (&lt;TouchableOpacity style={styles.btn} onPress={this._onPressClear}&gt;
                  &lt;MaterialIcons name={'clear'} size={20} /&gt;
              &lt;/TouchableOpacity&gt;) : null;
      }
  
      getAddress = () =&gt; {
          return this.state.loading ? '' : this.state.text;
      }
  
      render() {
          return (
              &lt;Animated.View style={this.props.style}&gt;
  
                  &lt;View style={{ flexDirection: 'column' }}&gt;
                      &lt;View
                          style={styles.textInputPickupContainer}
                          elevation={5}&gt;
  
                          &lt;TextInput
                              ref={input =&gt; this._input = input}
                              value={this.state.loading ? 'Loading...' : this.state.text}
                              style={styles.textInput}
                              underlineColorAndroid={'transparent'}
                              placeholder={'Pickup'}
                              onFocus={this._onFocus}
                              onBlur={this._onBlur}
                              onChangeText={this._onChangeText}
                              outlineProvider='bounds'
                              autoCorrect={false}
                              spellCheck={false} /&gt;
                          {this._getClearButton()}
                      &lt;/View&gt;
  
                      &lt;View
                          style={styles.textInputDropoffContainer}
                          elevation={5}&gt;
  
                          &lt;TextInput
                              ref={input =&gt; this._input = input}
                              value={this.state.loading ? 'Loading...' : this.state.dropOff}
                              style={styles.textInput}
                              underlineColorAndroid={'transparent'}
                              placeholder={'Dropoff'}
                              onFocus={this._onFocus}
                              onBlur={this._onBlur}
                              onChangeText={(text) =&gt; this.setState({dropOff: text})}
                              outlineProvider='bounds'
                              autoCorrect={false}
                              spellCheck={false} /&gt;
                          {this._getClearButton()}
                      &lt;/View&gt;
                  &lt;/View&gt;
  
                  &lt;View style={styles.listViewContainer}&gt;
                      &lt;AutoCompleteListView
                          predictions={this.state.predictions} /&gt;
                  &lt;/View&gt;
  
              &lt;/Animated.View&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
      textInputPickupContainer: {
          flexDirection: 'row',
          height: 40,
          zIndex: 10,
          paddingLeft: 10,
          borderRadius: 5,
          backgroundColor: 'white',
          shadowOffset: {
              width: 0,
              height: 2
          },
          shadowRadius: 2,
          alignItems: 'center'
      },
  
      textInputDropoffContainer: {
          flexDirection: 'row',
          height: 40,
          zIndex: 10,
          paddingLeft: 10,
          marginTop: 10,
          borderRadius: 5,
          backgroundColor: 'white',
          shadowOffset: {
              width: 0,
              height: 2
          },
          shadowRadius: 2,
          alignItems: 'center'
      },
  
      textInput: {
          flex: 1,
          fontSize: 17,
          color: '#404752'
      },
  
      btn: {
          width: 30,
          height: 30,
          padding: 5,
          justifyContent: 'center',
          alignItems: 'center'
      },
  
      listViewContainer: {
          paddingLeft: 3,
          paddingRight: 3,
          paddingBottom: 3
      },
  });
  </code></pre>
  
  <p>SearchRoute.js(Main)</p>
  
  <pre><code>return (
          &lt;View style={styles.container}&gt;
              &lt;MapView
                  ref={(mapView) =&gt; this._map = mapView}
                  style={styles.mapView}
                  region={this.state.region}
                  showsMyLocationButton={true}
                  showsUserLocation={false}
                  onPress={({ nativeEvent }) =&gt; this._setRegion(nativeEvent.coordinate)}
                  onRegionChange={this._onMapRegionChange}
                  onRegionChangeComplete={this._onMapRegionChangeComplete}
              /&gt;
              &lt;Entypo name={'location-pin'} size={30}
                  color={this.props.markerColor}
                  style={{ backgroundColor: 'transparent' }} /&gt;
              &lt;View style={styles.fullWidthContainer}&gt;
  
                  &lt;AutoCompleteInput
                      ref={input =&gt; this._input = input}
                      apiKey={API_KEY}
                      style={[styles.input, { transform: [{ scale: inputScale }] }]}
                      debounceDuration={this.props.debounceDuration}
                  /&gt;
  
              &lt;/View&gt;
  </code></pre>