Touchoubles not working in StickyView

[cveklica]

When touchable are inserted in StickyView, they work only when scroll is on top. They are always on the top, but they are not working when scroller down. Same with both FlatList and ScrollView. Also used recommended pointerEvents. Any suggestion?

      <CollapsibleHeaderContainer>
        <StickyView pointerEvents="box-none">
          <Button onPress={() => console.log('aaaaaaa')} />
        </StickyView>
        <View height="50px" color="purple" pointerEvents="none" />
        <StickyView pointerEvents="box-none">
          <View color="yellow" pointerEvents="box-none">
            <TextInput />
          </View>
        </StickyView>
      </CollapsibleHeaderContainer>
      <CollapsibleFlatList // 4️⃣ (Required) Your FlatList/ScrollView
        data={Array(10)}
        keyExtractor={(item, index) => index}
        renderItem={({item, index}) => (
          <View height="150px" color={index % 2 === 0 ? 'blue' : 'red'}>
            <Text>saldjaslkd</Text>
          </View>
        )}
        headerSnappable={false}
      />
    </CollapsibleContainer>```

[r0b0t3d]

Hi, Please try with Touchable from react-native-gesture-handler

import { TouchableOpacity } from 'react-native-gesture-handler';

[cveklica]

that works, thanks 😄 but what about TextInput? I'm making search bar. I added it also from 'react-native-gesture-handler' but not working

[r0b0t3d]

@cveklica TextInput please try with the one from "react-native". I don't have any issue with it.

[cveklica]

@cveklica TextInput please try with the one from "react-native". I don't have any issue with it.

Tried everything, none is working. Only way I managed to do it is with ref and wrapping it iside TouchableOpacity. Here is example (try clicking on textInput to see it's not reacting), please tell me what am I doing wrong

    <CollapsibleContainer>
      <CollapsibleHeaderContainer>
        <StickyView pointerEvents="box-none">
          <TextInput ref={ref}/>
          <TouchableOpacity
            onPress={() => {
              console.log('aaaaaaa');
              ref.current.focus();
            }}>
            <View height="50px" color='green'></View>
          </TouchableOpacity>
        </StickyView>
        <View height="50px" color="purple" pointerEvents="none" />
      </CollapsibleHeaderContainer>
      <CollapsibleFlatList
        data={Array(10)}
        keyExtractor={(item, index) => index}
        renderItem={({item, index}) => (
          <View height="150px" color={index % 2 === 0 ? 'blue' : 'red'}>
            <Text>Hello</Text>
          </View>
        )}
      />
    </CollapsibleContainer>```

[r0b0t3d]

@cveklica can you please try to run the example and see if it works?

[cveklica]

yes, but textInput is in tab view, not in main. In main view is textInput inside collapsible view

[r0b0t3d]

can you please make a minimal reproduced repo? I can have a look on it

[cveklica]

Example works good, problem was with my custom component. Thank you for your answers

[r0b0t3d]

oh, nice to hear that @cveklica . Thanks for using this lib :)

[Amazing1974]

Hi, Please try with Touchable from react-native-gesture-handler

import { TouchableOpacity } from 'react-native-gesture-handler';

it works but when press touch button on StickView, it also trigger touch button in flatlist under the StickView. I want to make it works only on stickview. can you help me please?