fix(Android, Tabs): Fix tabs icons loading in release mode

[t0maboro]

Description

This PR improves the approach to loading image assets used as tab icons, addressing issues with inconsistent or unreliable URI resolution - particularly around local resources and assets in Android builds (debug vs. release).

Previously, the image loading logic assumed that assets would always be bundled with a _ prefix in release builds. However, this is not a reliable assumption and can break under certain project setups or custom bundling configurations. Assets are now resolved directly using the appropriate android.resource or android_asset URI schemes.

Additionally, now I'm resolving both drawable and raw into the res:/<id> URI format before being converted to the proper android.resource:// URI expected by Fresco. This ensures consistent behavior regardless of resource type.

This change ensures that both local resources and bundled assets are correctly rendered as tab icons across different build variants, without relying on unstable heuristics.

Fixes #3399

Changes

• Updated the approach in TabsImageLoader

Screenshots / GIFs

Here you can add screenshots / GIFs documenting your change.

You can add before / after section if you're changing some behavior.

Before

Debug:

Release:

After

Debug:

Release:

Test code and steps to reproduce

It's working fine it both debug and release in our examples, before and after applying these changes. Therefore, I was testing it on a separate application with this code snippet:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createNativeBottomTabNavigator } from '@react-navigation/bottom-tabs/unstable';
import { NavigationContainer } from '@react-navigation/native';

const Tab = createNativeBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{
            tabBarIcon: {
              type: "drawableResource",
              name: "custom_home_icon"
            },
          }}
        />
        <Tab.Screen
          name="Profile"
          component={ProfileScreen}
          options={{
            tabBarIcon: {
              type: 'image',
              source: require('./assets/icon_fill.png'),
            },
          }}
        />
        <Tab.Screen
          name="Settings"
          component={SettingsScreen}
          options={{
            tabBarIcon: {
              type: 'image',
              source: require('./assets/icon.png'),
            },
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const HomeScreen = () => (
  <View style={styles.container}>
    <Text>Home</Text>
  </View>
);

const ProfileScreen = () => (
  <View style={styles.container}>
    <Text>Profile</Text>
  </View>
);

const SettingsScreen = () => (
  <View style={styles.container}>
    <Text>Settings</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
});

export default App;

I'm adding custom_home_icon via android resource manager and other icons via assets/ directory

Checklist

• Included code example that can be used to test this change
• Ensured that CI passes

[kkafar]

Looks solid

[dancamdev]

Hey Folks, thanks for the patch, is there an ETA on when this is going to land as a new react-native-screens version?

[kkafar]

@dancamdev, we still need to land few more things before release. Until then use react-native-screens@nightly.