How to use goToSlide method in react-native-app-intro-slider? - react-native

Question

I use library react-native-app-intro-slider
I make custom renderPagination, but I can't use goToSlide method in library.
I've already tried custom Pagination Login Signup Buttons, but I can't use too.
This is my code:
const _renderPagination = (activeIndex) => {
return (
<View style={style.paginationContainer}>
<SafeAreaView>
<View style={style.paginationDots}>
{slides.length > 1 &&
slides.map((_, i) => (
<TouchableOpacity
key={i}
style={[
style.dot,
i === activeIndex
? {backgroundColor: '#9948fc'}
: {backgroundColor: 'rgba(0, 0, 0, .2)'},
]}
onPress={() => goToSlide(activeIndex, true)} //Error
/>
))}
</View>
{activeIndex === slides.length - 1 ? (
<View>
<TouchableOpacity
style={[style.button, {backgroundColor: '#9948fc'}]}
onPress={() => navigation.navigate('signup')}
>
<Text style={style.buttonText}>회원가입</Text>
</TouchableOpacity>
<TouchableOpacity
style={[style.button, {backgroundColor: 'transparent'}]}
onPress={()=> navigation.navigate('signup', {log:1})}>
<Text style={[style.buttonText, {color: '#707070'}]}>
로그인
</Text>
</TouchableOpacity>
</View>
) : (
<View>
<TouchableOpacity
style={[style.button, {backgroundColor: 'transparent'}]}
><Text style={style.buttonText}/></TouchableOpacity>
<TouchableOpacity
style={[style.button, {backgroundColor: 'transparent'}]}
onPress={() => goToSlide(activeIndex+1, true)}
>
<Text style={[style.buttonText, {color: '#707070'}]}>
다음
</Text>
</TouchableOpacity>
</View>
)}
</SafeAreaView>
</View>
);
};

Answer 1

i just want to add the solution in functional component. This works for me:
const slider = useRef();
return(
<AppIntroSlider
renderItem={renderItem}
data={slides}
onDone={onDone}
showNextButton={true}
ref={(ref) => (slider.current = ref)} // the ref
/>
);
onPress={() => slider.current.goToSlide(1, true)}

Answer 2

The problems is :
You have to set your reference from your AppIntroSlider Tag like:
render() {
return (
<View style={{flex: 1}}>
<StatusBar translucent backgroundColor="transparent" />
<AppIntroSlider
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
renderPagination={this._renderPagination}
data={data}
ref={(ref) => (this.slider = ref)} //Here~~~~~~~~~~~~~~~!!!!!
/>
</View>
);
}
}
So that you could call goToSlide() like this:
<TouchableOpacity
key={i}
style={[
styles.dot,
i === activeIndex
? {backgroundColor: 'white'}
: {backgroundColor: 'rgba(0, 0, 0, .2)'},
]}
onPress={() => this.slider.goToSlide(i, true)} //Here~~~~~~~~!!! From the reference
/>
DOC example