Open hedonicadapter opened 3 years ago
@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
}
}
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!