React Component re-renders in iOS but not in Android

Question

I am developing an app using React Native and I'm struggling to figure out why my component re-renders in iOS but not in Android. I'm expecting it not to re-render, which means that the Android behavior is the one I'm looking for. The problem is, I don't want this headerIcons to be re-rendered. I've tried useCallback, useMemo, React.memo but it keeps refreshing in iOS devices...

The re-rendering part is the headerIcons argument inside the headerRightIcons parameter of the <Header.NoTitle> component. And here is the thing, this <Header.NoTitle> shows two icons on the screen, one is the < goBack button and the other is the ? help center button (the headerRightIcons parameter) but the only icon being re-rendered is the ? icon. The other one stays fixed.

All the components are being wrapped in a Pull-to-refresh scheme, but the requisition is only being made inside the last Container. Which means that the only part of the screen I wanted to be refreshed is the Container.

const headerIcons = useMemo(
        () => [
            {
                icon: 'question-circle',
                onPress: () =>
                    goToSection(
                        navigation as never,
                        EnumInvoiceMainScreenArrivedFrom.MyInvoices,
                    ),
            },
        ],
        [navigation],
    );

    
    return (
        <Wrapper>
            <ScrollView
                refreshControl={
                    <RefreshControl onRefresh={onRefresh} refreshing={isRefresh} />
                }
                stickyHeaderIndices={[0]}
            >
                <HeaderContainer>
                    <Header.NoTitle onBackPress={goBack} headerRightIcons={headerIcons} />
                    <Title>{t(`${i18nPrefix}.title`)}</Title>

                    <TabRender
                        tabs={tabsToRender}
                        tabIndex={tabIndex}
                        onTabSelected={setTabIndex}
                    />
                </HeaderContainer>

                <Container flex={1} key={`list-updated-${refreshCounter}-times`}>
                    {children}
                </Container>
            </ScrollView>
        </Wrapper>
    );
};

The re-rendering part is the `headerIcons` argument inside the `headerRightIcons` parameter of the component. And here is the thing, this shows two icons on the screen, one is the `<` goBack button and the other is the `?` help center button (the headerRightIcons parameter). The only icon being re-rendered is the `?`icon. The other one stays fixed. — Lucas Antunes, Mar 23 '22 at 13:30

score 0 · Answer 1 · answered Mar 23 '22 at 13:40

0

Does the same thing happen if you do it like this?

const handleRightIconPress = ()=>{
   goToSection(navigation, EnumInvoiceMainScreenArrivedFrom.MyInvoices)
}

<Header.NoTitle onBackPress={goBack} 
    headerRightIcons={{
       icon: 'question-circle',
       onPress: handleRightIconPress,
    }} 
/>

answered Mar 23 '22 at 13:40

RodSar

1,211
1
4
14

1

Yes, it does... Although your solution is something I haven't tried yet, the moment I tried it the same unnecessary re-rendering kept happening. But hey, can't say how much I appreciate your time invested here! =) – Lucas Antunes Mar 23 '22 at 14:06
have you tried removing onPress completely, just to narrow down the reasons – RodSar Mar 23 '22 at 14:10

React Component re-renders in iOS but not in Android

1 Answers1