react-native-pager-view icon indicating copy to clipboard operation
react-native-pager-view copied to clipboard

initialPage not working (android)

Open thiagomachado1998 opened this issue 11 months ago • 4 comments

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>`
  
          

thiagomachado1998 avatar Feb 03 '25 19:02 thiagomachado1998

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.

rossicler-hostalky avatar Feb 04 '25 18:02 rossicler-hostalky

Also seeing this, but only when it's in a modal. Normal pager views are opening to the correct initial page

alex-gale avatar May 19 '25 15:05 alex-gale

any solutions?

thiagomachado1998 avatar May 31 '25 22:05 thiagomachado1998

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
        >

thiagomachado1998 avatar May 31 '25 22:05 thiagomachado1998