In my TypeScript React Native mobile app, I'm using the react-native-swiper package and using all the latest packages/dependencies except @types/react-native (^0.70.6) and react-native (0.70.6). After I click a button, new slides will be appended and the swiper is not firing the slide change event (onIndexChanged) and the paginations bullets are not updating. The swiper pretty much stops working.
My Code:
// ...render(): ReactNode { return <><App_Context.Consumer> {(appcontext: AppContext_) => appcontext && <> // Button here to append new slide `Content` item<View style={styles["parent"]}><Swiper autoplay={false} horizontal={true} loop={false} index={0} loadMinimal={true} pagingEnabled={true} showsButtons={true} showsPagination={true} onIndexChanged={(index: number): void => { console.log(index); // Not working }}> {this.state.content.prcs.map((prc: Content, i: number) => <View key={i} style={styles["child"]}> // Custom Video Player child component here</View>)}</Swiper></View></>}</App_Context.Consumer></>;}...export const styles = StyleSheet.create<{"parent": ViewStyle;"child": ViewStyle;}>({"parent": { backgroundColor: "red", borderColor: "blue", borderStyle: "solid", borderWidth: 3, marginVertical: 20, width: "100%", paddingTop: 5, paddingBottom: 5, height: 480 },"child": { }});