Keeps rerendering ListView tab

[tomjvk]

Please also see this stackoverflow question: https://stackoverflow.com/questions/70857346/shared-navigation-infinite-loop-react-native.

The ListView in the title references here to Home component.

const HomeTab = () =>  {
    const Stack = createSharedElementStackNavigator();
    return (
            <Stack.Navigator initialRouteName="Home">
                <Stack.Screen key='home' name='Home' component={Home} />
                <Stack.Screen name='Detail' key='detail' component={Detail} sharedElements=
                    {(route, otherRoute, showing) => {
                        //Code in here is never executed
                        return [route.params.id];
                     }}
                />
                <Stack.Screen name='t3' key='t3' component={T3}  /> 
            </Stack.Navigator>
    );
};

const Home = ({ navigation }) => {
    const [APIHook, setAPIHook] = useState(null);
    
    useEffect(() => {
        fetchAPIData();
    }, []);

    const fetchAPIData = async () => {
        //Gets the data
    }

    if (!APIData){
        return (<Text>Loading</Text>);
    }

    return (
        <FlatList data={timeline} renderItem={({item}) => renderDetail(navigation, item)} keyExtractor={(item) => item.id.toString()}/>
    );
};

export default Home;

export default renderDetail = (navigation, item) => (
    ...
    <View onPress={() => navigation.push("Detail", item)}>
        <SharedElement id = {props.id}>
            <Image width={width} source={{uri: props.source}} />
         </SharedElement>
    </View>
    ...
);

const Detail= ({ route, navigation }) => {
    let detail = route.params;
    return (
        ...
        <SharedElement id = {props.id}>
            <Image width={width} source={{uri: props.source}} />
         </SharedElement>
         ...
    )
};
export default Detail;

When clicking om image on Home program gets stuck in infinite loop: first it renders the HomeTab component again -> Home component -> Detail (renderDetail is not rendered again in this loop).

[tomjvk]

Moving const Stack = createSharedElementStackNavigator(); outside the scope fixed the issue:

const HomeTab = () =>  {
    const Stack = createSharedElementStackNavigator();

TO

const Stack = createSharedElementStackNavigator();
const HomeTab = () =>  {

[thespacemanatee]

Thanks! We actually faced the same problem too, did not realise this was ever a problem until createSharedElementStackNavigator, and we decided to migrate all our other navigators to be created at the top-level as well to possibly save some re-renders.