add: remote URL example

Author: okwasniewski

docs/docs/docs/guides/usage-with-react-navigation.mdx

@@ -189,8 +189,12 @@ Function that given `{ focused: boolean }` returns `ImageSource` or `AppleIcon`
   component={Albums}
   options={{
     tabBarIcon: () => require('person.png'),
+    // SVG is also supported
+    tabBarIcon: () => require('person.svg'),
     // or
     tabBarIcon: () => ({ sfSymbol: 'person' }),
+    // You can also pass a URL
+    tabBarIcon: () => ({ uri: 'https://example.com/icon.png' }),
   }}
 />
 ```

example/src/App.tsx

@@ -33,6 +33,7 @@ import TintColorsExample from './Examples/TintColors';
 import NativeBottomTabsVectorIcons from './Examples/NativeBottomTabsVectorIcons';
 import NativeBottomTabsEmbeddedStacks from './Examples/NativeBottomTabsEmbeddedStacks';
 import NativeBottomTabsSVGs from './Examples/NativeBottomTabsSVGs';
+import NativeBottomTabsRemoteIcons from './Examples/NativeBottomTabsRemoteIcons';
 
 const FourTabsIgnoreSafeArea = () => {
   return <FourTabs ignoresTopSafeArea />;
@@ -131,6 +132,10 @@ const examples = [
     component: NativeBottomTabsSVGs,
     name: 'Native Bottom Tabs with SVG Icons',
   },
+  {
+    component: NativeBottomTabsRemoteIcons,
+    name: 'Native Bottom Tabs with SVG Remote Icons',
+  },
   { component: NativeBottomTabs, name: 'Native Bottom Tabs' },
   { component: JSBottomTabs, name: 'JS Bottom Tabs' },
   {

example/src/Examples/NativeBottomTabsRemoteIcons.tsx

@@ -0,0 +1,54 @@
+import { Article } from '../Screens/Article';
+import { Albums } from '../Screens/Albums';
+import { Contacts } from '../Screens/Contacts';
+import { Chat } from '../Screens/Chat';
+// This import works properly when library is published
+import createNativeBottomTabNavigator from '../../../src/react-navigation/navigators/createNativeBottomTabNavigator';
+
+const Tab = createNativeBottomTabNavigator();
+
+function NativeBottomTabsRemoteIcons() {
+  return (
+    <Tab.Navigator labeled>
+      <Tab.Screen
+        name="Article"
+        component={Article}
+        options={{
+          tabBarBadge: '10',
+          tabBarIcon: () => ({
+            uri: 'https://www.svgrepo.com/show/533824/water-container.svg',
+          }),
+        }}
+      />
+      <Tab.Screen
+        name="Albums"
+        component={Albums}
+        options={{
+          tabBarIcon: () => ({
+            uri: 'https://www.svgrepo.com/show/533813/hat-chef.svg',
+          }),
+        }}
+      />
+      <Tab.Screen
+        name="Contacts"
+        component={Contacts}
+        options={{
+          tabBarIcon: () => ({
+            uri: 'https://www.svgrepo.com/show/533826/shop.svg',
+          }),
+        }}
+      />
+      <Tab.Screen
+        name="Chat"
+        component={Chat}
+        options={{
+          tabBarIcon: () => ({
+            uri: 'https://www.svgrepo.com/show/533828/cheese.svg',
+          }),
+        }}
+      />
+    </Tab.Navigator>
+  );
+}
+
+export default NativeBottomTabsRemoteIcons;