Use isFocused method to change state

[noor-soreti]

Describe the problem

This question is a bit off topic but I haven't gotten an answer to my question in other forums and maybe someone can shed some light for me?

Basically, I'm using GooglePlacesAutocomplete in my react-native app. Since the component does not provide an onPress method for the TextInput component which would normally detect a touch gesture, I would like to use the isFocused method which according to documentation, "returns true if the TextInput is currently focused; false otherwise". My question is, how can I use isFocused to dynamically change the UI based on the return value? I would like to be able to alter my UI in case the method evaluates to either true/false.

I've provided my setup below. As you can see, as an example, I would like my view to show "Hello" if isFocused evaluates to true and "Hi" if false however this implementation does not obviously won't work for what I'm trying to do.

Reproduction - (required - issue will be closed without this)

Steps to reproduce the behavior - a minimal reproducible code example, link to a snack or a repository.

Please provide a FULLY REPRODUCIBLE example.

Click to expand!

  import React, { useEffect, useRef, useState } from 'react'
import { Animated, Pressable, StyleSheet, Text, Touchable, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete'
import { GOOGLE_PLACES_API_KEY } from '@env'

export default function SearchComponent({ expanded = false, setExpanded }) {

  const ref = useRef();
  const [top] = useState(new Animated.Value(0))

  useEffect(() => {
      Animated.timing(top, {
          toValue: !expanded ? 70 : 80,
          duration: 150,
          useNativeDriver: false
      }).start();
  }, [expanded, top]);

  return (
      < Animated.View style={{ top }
      } >
          <GooglePlacesAutocomplete
              ref={ref}
              placeholder='Search'
              onPress={(data, details = null) => {
                  console.log(data, details);
              }}
              query={{
                  key: GOOGLE_PLACES_API_KEY,
                  language: 'en',
                  components: 'country:ca'
              }}
          />
          {ref.current?.isFocused() ? (
              <Text>Hello</Text>
          ) : (<Text>Hi</Text>)
          }
      </Animated.View>
  )
}
  

Please remember to remove you google API key from the code you provide here

Additional context

• Library Version: [e.g. 1.4.2]

• React Native Version: [e.g. 0.62.2]

• [x] iOS

• [ ] Android

• [ ] Web

If you are using expo please indicate here:

• [ ] I am using expo

Add any other context about the problem here, screenshots etc

[mannoeu]

Same here. I tried creating a focused state and using the onFocus and onBlur functions sending it to textInputProps. It works but generates side effects, making extra calls to fetch predictions. Otherwise, ref.current.isFocused() doesn't work for what we need because refs don't cause renderings, so when the value changes the interface won't know