Touch Events not propagating through to Page

[Cavallando]

Great work on this library, has been very easy to implement so far!

For some context, I am trying to add my login views to my onboarding flow which involves an email/password input. However, when adding the view that contains the TextInputs to either the image or subtitle for a given page, the TextInput is not able to receive focus to fill in the input.

I tried to pass scrollEnabled: false to the flatlistProps prop in hopes that the pointer events would pass through to my Views but did not help unfortunately. Looking at the code for the library it doesn't seem like anything would prevent touch events explicitly from propagating through to a given page, title, subtitle, image.

To try out a work around I tried to wrap the TextInput in a TouchableNativeFeedback to programmatically trigger focus, however touch events would not trigger the onPress for that component.

I have also tried passing pointerEvents="none" in a number of places which also did not help.

Currently, my pages data is structured like:

backgroundColor: '#000000',
image: (
 // Separate component with it's own state,
 // showing in context
  <View>
    <TextInput {...props} />
  </View
),
title: <Text>Title Text</Text>,

There very well could be something I'm missing, any help is much appreciated!

Thank you!

[Cavallando]

Quick update: After pulling down the code and trying somethings out, it seems that touch events will propagate when I set pointerEvents="none" on the view that wraps the image. Weirdly enough this does not allow the component passed to image to receive touch events but rather the subtitle component can...

[jfilter]

Hey Michael, does this example work for you? https://github.com/jfilter/react-native-onboarding-swiper/blob/master/examples/WithCTA.js

[Tzikas]

@michaelcavallaro03 I'm having the exact same issue. How did you apply pointerEvents="none" on the view that wraps the image?

[Tzikas]

I belive that just like @michaelcavallaro03 I was using react-native-google-places-autocomplete and I wasn't able to press the list items that showed after search. I was able to fix the issue by modifying that module. I simply commented out the display list functionality on line 647 in GooglePlacesAutocomplete.js and now it works.

 const _onBlur = () => {
    // setListViewDisplayed(false);
    inputRef?.current?.blur();
  };