ViewPager 和 GooglePlacesAutocomplete 在 Expo 下的 React Native 中不能一起工作

Question

I have a GooglePlacesAutocomplete component inside a ViewPager component, but apparently they're not working well together for iOS.

It works fine with Android.

In this code, it pretty much loops through a list of components and displays them using ViewPager horizontally.

<View style={styles.container}>
        <ViewPager
          keyboardDismissMode={"on-drag"}
          style={styles.viewPager}
          ref={viewPager => {
            this.viewPager = viewPager
          }}
          onPageSelected={page => {
            this.setState({ currentPage: page.position })
          }}>
          {PAGES.map( (page, index) => this.renderViewPagerPage(page, index))}
        </ViewPager>
</View>

This other code is just importing the component for the Places API with a bunch of styles and flags for it.

{
    return (
      <View>
      <Text  style={styles.header}>Pick Up Location</Text>
      <GooglePlacesAutocomplete
      onPress={() => console.log('pressed')} 
       styles={{  
        container: {
          position: "absolute",
          top: 40,
          width: "100%",
      },
      textInputContainer: {
        flex: 1,
        backgroundColor: "transparent",
        height: 54,
        marginHorizontal: 0,
        borderTopWidth: 0,
        borderBottomWidth: 0,
        paddingBottom: 50,

      },
      textInput: {
        height: 54,
        margin: 0,
        borderRadius: 0,
        paddingTop: 0,
        paddingBottom: 0,
        paddingLeft: 20,
        paddingRight: 20,
        marginTop: 0,
        marginLeft: 0,
        marginRight: 0,
        elevation: 5,
        shadowColor: "#000",
        shadowOpacity: 0.1,
        shadowOffset: { x: 0, y: 0 },
        shadowRadius: 15,
        borderWidth: 1,
        borderColor: "#ddd",
        fontSize: 18,
      },
      listView: {
        borderWidth: 1,
        borderColor: "#ddd",
        backgroundColor: "#fff",
        marginHorizontal: 20,
        elevation: 5,
        shadowColor: "#000",
        shadowOpacity: 0.1,
        shadowOffset: { x: 1, y: 0},
        shadowRadius: 15,
        marginTop: 10,
      },
      description: {
        fontSize: 16
      },
      row: {
        padding: 20,
        height: 58,}
      }}
      keyboardShouldPersistTaps='always'
      placeholder="Placeholder"
      keyboardAppearance={'dark'} // Can be left out for default keyboardAppearance https://facebook.github.io/react-native/docs/textinput.html#keyboardappearance
      placeholderTextColor="#333"
      returnKeyType={'default'}
      onPress={(data, details) => {
        console.log(data['description']);
      }}
      currentLocationLabel="Current location"
      currentLocation={true} // Will add a 'Current location' button at the top of the predefined places list
      query={{
        key: GOOGLE_MAPS_API_KEY,
        language: "en",
        components: 'country:pr'
      }}
      textInputProps={{
        autoCapitalize: "none",
        autoCorrect: false
      }}
      fetchDetails={false}
      enablePoweredByContainer={true}
    />
  </View>   
    );
  }
}

I have a ViewPager which is essentially a type of carousel, in which inside will have an AutoComplete input container using Google's Places API.

It works fine outside of the ViewPager component, but when it's inside of it, I can't click the autocomplete list view that it pops while auto completing the text.

Answer 1

The parent component needed to also have:

keyboardShouldPersistTaps={"always"}

        <ViewPager
          keyboardShouldPersistTaps={"always"}
          keyboardDismissMode={"on-drag"}
          style={styles.viewPager}
          ref={viewPager => {
            this.viewPager = viewPager
          }}
          onPageSelected={page => {
            this.setState({ currentPage: page.position })
          }}>
          {PAGES.map( (page, index) => this.renderViewPagerPage(page, index))}
        </ViewPager>