Element on top of the entire slider

[hedonicadapter]

Trying to have one or more image components on top of the slider (independent of the slides). I've tried a text component, which works when I tweak some zIndex props and wrap the slider in a view, but it makes the rest of the slider unclickable.

Thanks in advance!

[brunoboto]

@yungmilky I've adapted this from Custom Pagination you can grab styles and extra from there and add the images on top of the pagination dots:

export default function App() {
  let slider: AppIntroSlider | undefined; //do this

  const _renderPagination = (s: number) => { //grab slide number
    return (
      <View style={{ backgroundColor: 'red', width: '100%', height: 50, position: 'absolute', top: 0 }}>
          <View style={styles.paginationDots}>
            {slides.length > 1 &&
              slides.map((_, i) => (
                <TouchableOpacity
                  key={i}
                  style={[
                    styles.dot,
                    i === s
                      ? { backgroundColor: 'white' }
                      : { backgroundColor: 'rgba(0, 0, 0, .2)', height: 8, width: 8 },
                  ]}
                  onPress={() => slider?.goToSlide(i, true)} //go to the slide
                />
              ))}
          </View>
       </View>       
    );
  };

//then at the bottom
if (!isLoadingComplete) {
    return null;
  } else {
    if (show_Main_App) {
      return (
        <SafeAreaProvider>
          <Navigation ref={navigationRef} colorScheme={colorScheme} />
          <StatusBar />
        </SafeAreaProvider>
      )
    } else {
      return <AppIntroSlider renderItem={_renderItem} data={slides} onDone={_onDone} renderNextButton={_renderNextButton} bottomButton={true} renderPagination={_renderPagination} style={{ position: 'relative', width: '100%', height: '100%' }} ref={(ref) => (slider = ref!)} /> //set the reference here and it should work
    }
  }