React-native-google-places-autocomplete: Can't click autocomplete listview in iOS

[chrisoname]

So, I have the GooglePlacesAutocomplete component inside a ViewPager component.

It works perfectly outside of the component by itself, but when surrounded by the component ViewPager, I can't click anything, only sometimes as if it was a styling thing.

This is my code:

{
    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>   
    );
  }
}

This is the code that calls the MyMap component inside the ViewPager:

const PAGES = [
            <View key='cartId'>
              <MyCheckBoxes>
                {}
              </MyCheckBoxes>
            </View>,
            <View key='deliveryInformationId'>
              <MyDatePicker>{}</MyDatePicker>
            </View>,
              <MyMap>{}</MyMap>,
          <View key='orderSummaryId'>
          </View>,
            <View key='paymentMethodId'>
              <OrderSummary>{}</OrderSummary>
            </View>,
            <View key='trackId'>
              <View></View>
            </View>,
            ]

<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>

It works on Android perfectly.

[chrisoname]

Already got it.

For future references:

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>