initialPage not working (android)
Environment
react native 0.76.5
Description
I've tested most of the latest versions of the library, but none of them have this feature working.
`<PagerView
style={{ flex: 1 }}
initialPage={indexImagem.current}
>
{imagens.map((item, index) =>
(<View style={{ flex: 1, backgroundColor: 'black' }} key={index}>
<View style={[StyleSheet.absoluteFill, { flex: 1 }]}>
<FastImage
style={[StyleSheet.absoluteFill, { flex: 1 }]}
source={{
uri: item.imagePath,
headers: { Authorization: 'someAuthToken' },
priority: FastImage.priority.high,
}}
resizeMode={FastImage.resizeMode.contain}
/>
</View>
<View
style={{
width: '100%',
flexDirection: 'row',
justifyContent: 'space-between',
backgroundColor: 'transparent',
padding: 10,
}}
>
<TouchableOpacity
onPress={() => [
setModalGaleria(false)
]}
>
<Text
style={{
backgroundColor: 'white',
paddingLeft: 15,
paddingRight: 15,
paddingTop: 5,
paddingBottom: 5,
borderRadius: 50,
fontSize: alturaDaTela * 0.015,
color: '#121212',
}}
>
Sair
</Text>
</TouchableOpacity>
<TouchableOpacity >
<Icon
style={{ padding: 5 }}
name="trash-outline"
size={alturaDaTela * 0.024}
color="white"
/>
</TouchableOpacity>
</View>
</View>
)
)}
</PagerView>`
Same here, initial page is not working on Android, the only way I could make it work is to use setPageWithoutAnimation after first render is done. It also only worked if I wrap it with setTimeout, like setTimeout(() => ref.current?.setPageWithoutAnimation(currentIndex), 0);.
This is not ideal at all, as the user can see the page changing.
Also seeing this, but only when it's in a modal. Normal pager views are opening to the correct initial page
any solutions?
I found solution :
const pagerRef = useRef(null);
const handleModalShow = () => { if (pagerRef.current && selecionarImagemIndex != null) { // Força o PagerView a ir para a página correta pagerRef.current.setPage(selecionarImagemIndex); } };
<Modal transparent={false} visible={modalGaleria} onRequestClose={() => [setVisibilidade(!modalGaleria)]} onShow={handleModalShow} >
<PagerView
ref={pagerRef}
style={{ flex: 1 }}
initialPage={selecionarImagemIndex}
onPageSelected={(e) => setImagemIndex(e.nativeEvent.position)} // Função chamada ao mudar de página
>