diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index f0d55b0f..111a1258 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -147,8 +147,8 @@ jobs:
       - name: Install cocoapods
         if: env.turbo_cache_hit != 1 && steps.cocoapods-cache.outputs.cache-hit != 'true'
         run: |
-          cd example/ios
-          pod install
+          cd example
+          pod install --project-directory=ios
         env:
           NO_FLIPPER: 1
 
diff --git a/android/src/main/java/com/rcttabview/RCTTabView.kt b/android/src/main/java/com/rcttabview/RCTTabView.kt
index 152037aa..df073ee2 100644
--- a/android/src/main/java/com/rcttabview/RCTTabView.kt
+++ b/android/src/main/java/com/rcttabview/RCTTabView.kt
@@ -1,15 +1,27 @@
 package com.rcttabview
 
 import android.content.Context
+import android.graphics.drawable.BitmapDrawable
+import android.graphics.drawable.Drawable
+import android.net.Uri
 import android.view.Choreographer
 import android.view.MenuItem
-import androidx.appcompat.content.res.AppCompatResources
+import com.facebook.common.references.CloseableReference
+import com.facebook.datasource.DataSources
+import com.facebook.drawee.backends.pipeline.Fresco
+import com.facebook.imagepipeline.image.CloseableBitmap
+import com.facebook.imagepipeline.request.ImageRequestBuilder
 import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.WritableMap
+import com.facebook.react.views.imagehelper.ImageSource
+import com.facebook.react.views.imagehelper.ImageSource.Companion.getTransparentBitmapImageSource
 import com.google.android.material.bottomnavigation.BottomNavigationView
 
+
 class ReactBottomNavigationView(context: Context) : BottomNavigationView(context) {
   private val ANIMATION_DURATION: Long = 300
+  private val icons: MutableMap<Int, ImageSource> = mutableMapOf()
 
   var items: MutableList<TabInfo>? = null
   var onTabSelectedListener: ((WritableMap) -> Unit)? = null
@@ -62,17 +74,10 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
 
   fun updateItems(items: MutableList<TabInfo>) {
     this.items = items
-    // TODO: This doesn't work with hot reload. It clears all menu items
-    menu.clear()
     items.forEachIndexed {index, item ->
-      val menuItem = menu.add(0, index, 0, item.title)
-      val iconResourceId = resources.getIdentifier(
-        item.icon, "drawable", context.packageName
-      )
-      if (iconResourceId != 0) {
-        menuItem.icon = AppCompatResources.getDrawable(context, iconResourceId)
-      } else {
-        menuItem.setIcon(android.R.drawable.btn_star) // fallback icon
+      val menuItem = getOrCreateItem(index, item.title)
+      if (icons.containsKey(index)) {
+        menuItem.icon = getDrawable(icons[index]!!)
       }
       if (item.badge.isNotEmpty()) {
         val badge = this.getOrCreateBadge(index)
@@ -84,6 +89,47 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
     }
   }
 
+  private fun getOrCreateItem(index: Int, title: String): MenuItem {
+    return menu.findItem(index) ?: menu.add(0, index, 0, title)
+  }
+
+  fun setIcons(icons: ReadableArray?) {
+    if (icons == null || icons.size() == 0) {
+      return
+    }
+
+    for (idx in 0 until icons.size()) {
+      val source = icons.getMap(idx)
+      var imageSource =
+        ImageSource(
+          context,
+          source.getString("uri")
+        )
+      if (Uri.EMPTY == imageSource.uri) {
+        imageSource = getTransparentBitmapImageSource(context)
+      }
+      this.icons[idx] = imageSource
+
+      // Update existing item if exists.
+      menu.findItem(idx)?.let { menuItem ->
+        menuItem.icon = getDrawable(imageSource)
+      }
+    }
+  }
+
+  private fun getDrawable(imageSource: ImageSource): Drawable {
+    // TODO: Check if this can be done using some built-in React Native class
+    val imageRequest = ImageRequestBuilder.newBuilderWithSource(imageSource.uri).build()
+    val dataSource = Fresco.getImagePipeline().fetchDecodedImage(imageRequest, context)
+    val result = DataSources.waitForFinalResult(dataSource) as CloseableReference<CloseableBitmap>
+    val bitmap = result.get().underlyingBitmap
+
+    CloseableReference.closeSafely(result)
+    dataSource.close()
+
+    return BitmapDrawable(resources, bitmap)
+  }
+
   // Fixes issues with BottomNavigationView children layouting.
   private fun measureAndLayout() {
       measure(
diff --git a/android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt b/android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt
index ffa98afd..bb451df0 100644
--- a/android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt
+++ b/android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt
@@ -18,7 +18,6 @@ import com.facebook.yoga.YogaNode
 
 data class TabInfo(
   val key: String,
-  val icon: String,
   val title: String,
   val badge: String
 )
@@ -40,7 +39,6 @@ class RCTTabViewViewManager :
           itemsArray.add(
             TabInfo(
               key = item.getString("key") ?: "",
-              icon = item.getString("icon") ?: "",
               title = item.getString("title") ?: "",
               badge = item.getString("badge") ?: ""
             )
@@ -57,6 +55,11 @@ class RCTTabViewViewManager :
     }
   }
 
+  @ReactProp(name = "icons")
+  fun setIcons(view: ReactBottomNavigationView, icons: ReadableArray?) {
+    view.setIcons(icons)
+  }
+
   public override fun createViewInstance(context: ThemedReactContext): ReactBottomNavigationView {
     eventDispatcher = context.getNativeModule(UIManagerModule::class.java)!!.eventDispatcher
     val view = ReactBottomNavigationView(context)
diff --git a/example/assets/icons/article_dark.png b/example/assets/icons/article_dark.png
new file mode 100644
index 00000000..bb7148e7
Binary files /dev/null and b/example/assets/icons/article_dark.png differ
diff --git a/example/assets/icons/chat_dark.png b/example/assets/icons/chat_dark.png
new file mode 100644
index 00000000..c79f74a3
Binary files /dev/null and b/example/assets/icons/chat_dark.png differ
diff --git a/example/assets/icons/grid_dark.png b/example/assets/icons/grid_dark.png
new file mode 100644
index 00000000..7556ecdf
Binary files /dev/null and b/example/assets/icons/grid_dark.png differ
diff --git a/example/assets/icons/person_dark.png b/example/assets/icons/person_dark.png
new file mode 100644
index 00000000..a24a6807
Binary files /dev/null and b/example/assets/icons/person_dark.png differ
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
index 24207675..bd5cafa7 100644
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@@ -1774,15 +1774,15 @@ SPEC CHECKSUMS:
   React-CoreModules: 2d68c251bc4080028f2835fa47504e8f20669a21
   React-cxxreact: bb0dc212b515d6dba6c6ddc4034584e148857db9
   React-debug: fd0ed8ecd5f8a23c7daf5ceaca8aa722a4d083fd
-  React-defaultsnativemodule: 371dc516e5020f8b87f1d32f8fa6872cafcc2081
-  React-domnativemodule: 5d1288b9b8666b818a1004b56a03befc00eb5698
+  React-defaultsnativemodule: 0d824306a15dd80e2bea12f4079fbeff9712b301
+  React-domnativemodule: 195491d7c1725befd636f84c67bf229203fc7d07
   React-Fabric: c12ce848f72cba42fb9e97a73a7c99abc6353f23
   React-FabricComponents: 7813d5575c8ea2cda0fef9be4ff9d10987cba512
   React-FabricImage: c511a5d612479cb4606edf3557c071956c8735f6
   React-featureflags: cf78861db9318ae29982fa8953c92d31b276c9ac
-  React-featureflagsnativemodule: e774cf495486b0e2a8b324568051d6b4c722fa93
+  React-featureflagsnativemodule: 54f6decea27c187c2127e3669a7f5bf2e145e637
   React-graphics: 7572851bca7242416b648c45d6af87d93d29281e
-  React-idlecallbacksnativemodule: d2009bad67ef232a0ee586f53193f37823e81ef1
+  React-idlecallbacksnativemodule: 7d21b0e071c3e02bcc897d2c3db51319642dd466
   React-ImageManager: aedf54d34d4475c66f4c3da6b8359b95bee904e4
   React-jsc: 92ac98e0e03ee54fdaa4ac3936285a4fdb166fab
   React-jserrorhandler: 0c8949672a00f2a502c767350e591e3ec3d82fb3
@@ -1792,8 +1792,8 @@ SPEC CHECKSUMS:
   React-jsitracing: 3935b092f85bb1e53b8cf8a00f572413648af46b
   React-logger: 4072f39df335ca443932e0ccece41fbeb5ca8404
   React-Mapbuffer: 714f2fae68edcabfc332b754e9fbaa8cfc68fdd4
-  React-microtasksnativemodule: 987cf7e0e0e7129250a48b807e70d3b906c726cf
-  react-native-bottom-tabs: 894d1fb8fc4e6d525b2da35e83e00e18c420cdf2
+  React-microtasksnativemodule: 618b64238e43ef3154079f193aa6649e5320ae19
+  react-native-bottom-tabs: 5662b5e3b5968bec6258b9d6f1a0a834bd3f7553
   react-native-safe-area-context: 851c62c48dce80ccaa5637b6aa5991a1bc36eca9
   React-nativeconfig: 4a9543185905fe41014c06776bf126083795aed9
   React-NativeModulesApple: 651670a799672bd54469f2981d91493dda361ddf
@@ -1820,11 +1820,11 @@ SPEC CHECKSUMS:
   React-utils: b2baee839fb869f732d617b97dcfa384b4b4fdb3
   ReactCodegen: f177b8fd67788c5c6ff45a39c7482c5f8d77ace6
   ReactCommon: 627bd3192ef01a351e804e9709673d3741d38fec
-  ReactNativeHost: 99c0ffb175cd69de2ac9a70892cd22dac65ea79d
+  ReactNativeHost: 62249d6e1e42a969159946c035c1cd3f4b1035dd
   ReactTestApp-DevSupport: b7cd76a3aeee6167f5e14d82f09685059152c426
   ReactTestApp-Resources: 7db90c026cccdf40cfa495705ad436ccc4d64154
-  RNGestureHandler: 18b9b5d65c77c4744a640f69b7fccdd47ed935c0
-  RNScreens: 5288a8dbeedb3c5051aa2d5658c1c553c050b80a
+  RNGestureHandler: 366823a3ebcc5ddd25550dbfe80e89779c4760b2
+  RNScreens: d86f05e9c243a063ca67cda7f4e05d28fe5c31d4
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: 4ef80d96a5534f0e01b3055f17d1e19a9fc61b63
 
diff --git a/example/package.json b/example/package.json
index a15fe9c2..6e05fd86 100644
--- a/example/package.json
+++ b/example/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "android": "react-native run-android",
     "build:android": "npm run mkdist && react-native bundle --entry-file index.js --platform android --dev true --bundle-output dist/main.android.jsbundle --assets-dest dist && react-native build-android --extra-params \"--no-daemon --console=plain -PreactNativeArchitectures=arm64-v8a\"",
-    "build:ios": "npm run mkdist && react-native bundle --entry-file index.js --platform ios --dev true --bundle-output dist/main.ios.jsbundle --assets-dest dist && react-native build-ios --scheme SwiftuiTabviewExample --mode Debug --extra-params \"-sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO\"",
+    "build:ios": "npm run mkdist && react-native bundle --entry-file index.js --platform ios --dev true --bundle-output dist/main.ios.jsbundle --assets-dest dist && react-native build-ios --scheme ReactNativeBottomTabs --mode Debug --extra-params \"-sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO\"",
     "build:visionos": "npm run mkdist && react-native bundle --entry-file index.js --platform ios --dev true --bundle-output dist/main.visionos.jsbundle --assets-dest dist",
     "ios": "react-native run-ios",
     "mkdist": "node -e \"require('node:fs').mkdirSync('dist', { recursive: true, mode: 0o755 })\"",
@@ -22,6 +22,7 @@
     "react": "18.3.1",
     "react-native": "0.75.3",
     "react-native-gesture-handler": "^2.20.0",
+    "react-native-paper": "^5.12.5",
     "react-native-safe-area-context": "^4.11.0",
     "react-native-screens": "^3.34.0"
   },
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 14836362..49dbe840 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -18,16 +18,20 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import JSBottomTabs from './Examples/JSBottomTabs';
 import ThreeTabs from './Examples/ThreeTabs';
 import FourTabs from './Examples/FourTabs';
+import MaterialBottomTabs from './Examples/MaterialBottomTabs';
+import SFSymbols from './Examples/SFSymbols';
 
 const examples = [
   { component: ThreeTabs, name: 'Three Tabs' },
   { component: FourTabs, name: 'Four Tabs' },
+  { component: SFSymbols, name: 'SF Symbols' },
   {
     component: FourTabs,
     name: 'Four Tabs - No header',
     screenOptions: { headerShown: false },
   },
   { component: JSBottomTabs, name: 'JS Bottom Tabs' },
+  { component: MaterialBottomTabs, name: 'Material (JS) Bottom Tabs' },
 ];
 
 function App() {
diff --git a/example/src/Examples/FourTabs.tsx b/example/src/Examples/FourTabs.tsx
index 6ec946a9..aef79b1f 100644
--- a/example/src/Examples/FourTabs.tsx
+++ b/example/src/Examples/FourTabs.tsx
@@ -8,15 +8,29 @@ import { Chat } from '../Screens/Chat';
 export default function FourTabs() {
   const [index, setIndex] = useState(0);
   const [routes] = useState([
-    { key: 'article', title: 'Article', icon: 'document.fill', badge: '!' },
+    {
+      key: 'article',
+      title: 'Article',
+      focusedIcon: require('../../assets/icons/article_dark.png'),
+      unfocusedIcon: require('../../assets/icons/chat_dark.png'),
+      badge: '!',
+    },
     {
       key: 'albums',
       title: 'Albums',
-      icon: 'square.grid.2x2.fill',
+      focusedIcon: require('../../assets/icons/grid_dark.png'),
       badge: '5',
     },
-    { key: 'contacts', title: 'Contacts', icon: 'person.fill' },
-    { key: 'chat', title: 'Chat', icon: 'keyboard' },
+    {
+      key: 'contacts',
+      focusedIcon: require('../../assets/icons/person_dark.png'),
+      title: 'Contacts',
+    },
+    {
+      key: 'chat',
+      focusedIcon: require('../../assets/icons/chat_dark.png'),
+      title: 'Chat',
+    },
   ]);
 
   const renderScene = SceneMap({
diff --git a/example/src/Examples/MaterialBottomTabs.tsx b/example/src/Examples/MaterialBottomTabs.tsx
new file mode 100644
index 00000000..1313506b
--- /dev/null
+++ b/example/src/Examples/MaterialBottomTabs.tsx
@@ -0,0 +1,61 @@
+import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation';
+import { Article } from '../Screens/Article';
+import { Albums } from '../Screens/Albums';
+import { Contacts } from '../Screens/Contacts';
+import { Chat } from '../Screens/Chat';
+import { Image, type ImageSourcePropType } from 'react-native';
+
+const Tab = createMaterialBottomTabNavigator();
+
+const TabBarIcon = ({ source }: { source: ImageSourcePropType }) => (
+  <Image style={{ width: 20, height: 23 }} source={source} />
+);
+
+function MaterialBottomTabs() {
+  return (
+    <Tab.Navigator shifting>
+      <Tab.Screen
+        name="Article"
+        component={Article}
+        options={{
+          tabBarIcon: () => (
+            <TabBarIcon
+              source={require('../../assets/icons/article_dark.png')}
+            />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Albums"
+        component={Albums}
+        options={{
+          tabBarIcon: () => (
+            <TabBarIcon source={require('../../assets/icons/grid_dark.png')} />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Contacts"
+        component={Contacts}
+        options={{
+          tabBarIcon: () => (
+            <TabBarIcon
+              source={require('../../assets/icons/person_dark.png')}
+            />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Chat"
+        component={Chat}
+        options={{
+          tabBarIcon: () => (
+            <TabBarIcon source={require('../../assets/icons/chat_dark.png')} />
+          ),
+        }}
+      />
+    </Tab.Navigator>
+  );
+}
+
+export default MaterialBottomTabs;
diff --git a/example/src/Examples/SFSymbols.tsx b/example/src/Examples/SFSymbols.tsx
new file mode 100644
index 00000000..6e166015
--- /dev/null
+++ b/example/src/Examples/SFSymbols.tsx
@@ -0,0 +1,54 @@
+import TabView, { SceneMap } from 'react-native-bottom-tabs';
+import { useState } from 'react';
+import { Article } from '../Screens/Article';
+import { Albums } from '../Screens/Albums';
+import { Contacts } from '../Screens/Contacts';
+import { Platform } from 'react-native';
+
+const isAndroid = Platform.OS === 'android';
+
+export default function SFSymbols() {
+  const [index, setIndex] = useState(0);
+  const [routes] = useState([
+    {
+      key: 'article',
+      title: 'Article',
+      focusedIcon: isAndroid
+        ? require('../../assets/icons/article_dark.png')
+        : { sfSymbol: 'document.fill' },
+      unfocusedIcon: isAndroid
+        ? require('../../assets/icons/chat_dark.png')
+        : { sfSymbol: 'bubble.left.fill' },
+      badge: '!',
+    },
+    {
+      key: 'albums',
+      title: 'Albums',
+      focusedIcon: isAndroid
+        ? require('../../assets/icons/grid_dark.png')
+        : { sfSymbol: 'square.grid.3x2.fill' },
+      badge: '5',
+    },
+    {
+      key: 'contacts',
+      focusedIcon: isAndroid
+        ? require('../../assets/icons/person_dark.png')
+        : { sfSymbol: 'person.fill' },
+      title: 'Contacts',
+    },
+  ]);
+
+  const renderScene = SceneMap({
+    article: Article,
+    albums: Albums,
+    contacts: Contacts,
+  });
+
+  return (
+    <TabView
+      navigationState={{ index, routes }}
+      onIndexChange={setIndex}
+      renderScene={renderScene}
+    />
+  );
+}
diff --git a/example/src/Examples/ThreeTabs.tsx b/example/src/Examples/ThreeTabs.tsx
index 87ea997c..8c867471 100644
--- a/example/src/Examples/ThreeTabs.tsx
+++ b/example/src/Examples/ThreeTabs.tsx
@@ -7,14 +7,24 @@ import { Contacts } from '../Screens/Contacts';
 export default function ThreeTabs() {
   const [index, setIndex] = useState(0);
   const [routes] = useState([
-    { key: 'article', title: 'Article', icon: 'document.fill', badge: '!' },
+    {
+      key: 'article',
+      title: 'Article',
+      focusedIcon: require('../../assets/icons/article_dark.png'),
+      unfocusedIcon: require('../../assets/icons/chat_dark.png'),
+      badge: '!',
+    },
     {
       key: 'albums',
       title: 'Albums',
-      icon: 'square.grid.2x2.fill',
+      focusedIcon: require('../../assets/icons/grid_dark.png'),
       badge: '5',
     },
-    { key: 'contacts', title: 'Contacts', icon: 'person.fill' },
+    {
+      key: 'contacts',
+      focusedIcon: require('../../assets/icons/person_dark.png'),
+      title: 'Contacts',
+    },
   ]);
 
   const renderScene = SceneMap({
diff --git a/example/src/Screens/Article.tsx b/example/src/Screens/Article.tsx
index 9e76905c..9accefb2 100644
--- a/example/src/Screens/Article.tsx
+++ b/example/src/Screens/Article.tsx
@@ -3,6 +3,7 @@ import {
   Button,
   Image,
   Platform,
+  SafeAreaView,
   ScrollView,
   type ScrollViewProps,
   StyleSheet,
@@ -49,95 +50,98 @@ export function Article({
 
   console.log(Platform.OS, ' Rendering Article');
   return (
-    <ScrollView
-      ref={ref}
-      style={{ backgroundColor: '#fff' }}
-      contentContainerStyle={styles.content}
-      {...rest}
-    >
-      <View style={styles.author}>
+    <SafeAreaView>
+      <ScrollView
+        ref={ref}
+        style={{ backgroundColor: '#fff' }}
+        contentContainerStyle={styles.content}
+        {...rest}
+      >
+        <View style={styles.author}>
+          <Image
+            style={styles.avatar}
+            source={require('../../assets/avatar-1.png')}
+          />
+          <View style={styles.meta}>
+            <Text style={[styles.name, { color: '#000' }]}>{author.name}</Text>
+            <Text style={[styles.timestamp, { color: '#000' }]}>{date}</Text>
+          </View>
+        </View>
+        <Button
+          title="Go to Albums"
+          onPress={() => {
+            jumpTo?.('albums');
+          }}
+        />
+        <Heading>What is Lorem Ipsum?</Heading>
+        <Paragraph>
+          Lorem Ipsum is simply dummy text of the printing and typesetting
+          industry. Lorem Ipsum has been the industry&apos;s standard dummy text
+          ever since the 1500s, when an unknown printer took a galley of type
+          and scrambled it to make a type specimen book. It has survived not
+          only five centuries, but also the leap into electronic typesetting,
+          remaining essentially unchanged. It was popularised in the 1960s with
+          the release of Letraset sheets containing Lorem Ipsum passages, and
+          more recently with desktop publishing software like Aldus PageMaker
+          including versions of Lorem Ipsum.
+        </Paragraph>
         <Image
-          style={styles.avatar}
-          source={require('../../assets/avatar-1.png')}
+          style={styles.image}
+          resizeMode="cover"
+          source={require('../../assets/book.jpg')}
         />
-        <View style={styles.meta}>
-          <Text style={[styles.name, { color: '#000' }]}>{author.name}</Text>
-          <Text style={[styles.timestamp, { color: '#000' }]}>{date}</Text>
-        </View>
-      </View>
-      <Button
-        title="Go to Albums"
-        onPress={() => {
-          jumpTo?.('albums');
-        }}
-      />
-      <Heading>What is Lorem Ipsum?</Heading>
-      <Paragraph>
-        Lorem Ipsum is simply dummy text of the printing and typesetting
-        industry. Lorem Ipsum has been the industry&apos;s standard dummy text
-        ever since the 1500s, when an unknown printer took a galley of type and
-        scrambled it to make a type specimen book. It has survived not only five
-        centuries, but also the leap into electronic typesetting, remaining
-        essentially unchanged. It was popularised in the 1960s with the release
-        of Letraset sheets containing Lorem Ipsum passages, and more recently
-        with desktop publishing software like Aldus PageMaker including versions
-        of Lorem Ipsum.
-      </Paragraph>
-      <Image
-        style={styles.image}
-        resizeMode="cover"
-        source={require('../../assets/book.jpg')}
-      />
-      <Heading>Where does it come from?</Heading>
-      <Paragraph>
-        Contrary to popular belief, Lorem Ipsum is not simply random text. It
-        has roots in a piece of classical Latin literature from 45 BC, making it
-        over 2000 years old. Richard McClintock, a Latin professor at
-        Hampden-Sydney College in Virginia, looked up one of the more obscure
-        Latin words, consectetur, from a Lorem Ipsum passage, and going through
-        the cites of the word in classical literature, discovered the
-        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
-        of &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good and
-        Evil) by Cicero, written in 45 BC. This book is a treatise on the theory
-        of ethics, very popular during the Renaissance. The first line of Lorem
-        Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in
-        section 1.10.32.
-      </Paragraph>
-      <Paragraph>
-        The standard chunk of Lorem Ipsum used since the 1500s is reproduced
-        below for those interested. Sections 1.10.32 and 1.10.33 from &quot;de
-        Finibus Bonorum et Malorum&quot; by Cicero are also reproduced in their
-        exact original form, accompanied by English versions from the 1914
-        translation by H. Rackham.
-      </Paragraph>
-      <Heading>Why do we use it?</Heading>
-      <Paragraph>
-        It is a long established fact that a reader will be distracted by the
-        readable content of a page when looking at its layout. The point of
-        using Lorem Ipsum is that it has a more-or-less normal distribution of
-        letters, as opposed to using &quot;Content here, content here&quot;,
-        making it look like readable English. Many desktop publishing packages
-        and web page editors now use Lorem Ipsum as their default model text,
-        and a search for &quot;lorem ipsum&quot; will uncover many web sites
-        still in their infancy. Various versions have evolved over the years,
-        sometimes by accident, sometimes on purpose (injected humour and the
-        like).
-      </Paragraph>
-      <Heading>Where can I get some?</Heading>
-      <Paragraph>
-        There are many variations of passages of Lorem Ipsum available, but the
-        majority have suffered alteration in some form, by injected humour, or
-        randomised words which don&apos;t look even slightly believable. If you
-        are going to use a passage of Lorem Ipsum, you need to be sure there
-        isn&apos;t anything embarrassing hidden in the middle of text. All the
-        Lorem Ipsum generators on the Internet tend to repeat predefined chunks
-        as necessary, making this the first true generator on the Internet. It
-        uses a dictionary of over 200 Latin words, combined with a handful of
-        model sentence structures, to generate Lorem Ipsum which looks
-        reasonable. The generated Lorem Ipsum is therefore always free from
-        repetition, injected humour, or non-characteristic words etc.
-      </Paragraph>
-    </ScrollView>
+        <Heading>Where does it come from?</Heading>
+        <Paragraph>
+          Contrary to popular belief, Lorem Ipsum is not simply random text. It
+          has roots in a piece of classical Latin literature from 45 BC, making
+          it over 2000 years old. Richard McClintock, a Latin professor at
+          Hampden-Sydney College in Virginia, looked up one of the more obscure
+          Latin words, consectetur, from a Lorem Ipsum passage, and going
+          through the cites of the word in classical literature, discovered the
+          undoubtable source. Lorem Ipsum comes from sections 1.10.32 and
+          1.10.33 of &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of
+          Good and Evil) by Cicero, written in 45 BC. This book is a treatise on
+          the theory of ethics, very popular during the Renaissance. The first
+          line of Lorem Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes
+          from a line in section 1.10.32.
+        </Paragraph>
+        <Paragraph>
+          The standard chunk of Lorem Ipsum used since the 1500s is reproduced
+          below for those interested. Sections 1.10.32 and 1.10.33 from &quot;de
+          Finibus Bonorum et Malorum&quot; by Cicero are also reproduced in
+          their exact original form, accompanied by English versions from the
+          1914 translation by H. Rackham.
+        </Paragraph>
+        <Heading>Why do we use it?</Heading>
+        <Paragraph>
+          It is a long established fact that a reader will be distracted by the
+          readable content of a page when looking at its layout. The point of
+          using Lorem Ipsum is that it has a more-or-less normal distribution of
+          letters, as opposed to using &quot;Content here, content here&quot;,
+          making it look like readable English. Many desktop publishing packages
+          and web page editors now use Lorem Ipsum as their default model text,
+          and a search for &quot;lorem ipsum&quot; will uncover many web sites
+          still in their infancy. Various versions have evolved over the years,
+          sometimes by accident, sometimes on purpose (injected humour and the
+          like).
+        </Paragraph>
+        <Heading>Where can I get some?</Heading>
+        <Paragraph>
+          There are many variations of passages of Lorem Ipsum available, but
+          the majority have suffered alteration in some form, by injected
+          humour, or randomised words which don&apos;t look even slightly
+          believable. If you are going to use a passage of Lorem Ipsum, you need
+          to be sure there isn&apos;t anything embarrassing hidden in the middle
+          of text. All the Lorem Ipsum generators on the Internet tend to repeat
+          predefined chunks as necessary, making this the first true generator
+          on the Internet. It uses a dictionary of over 200 Latin words,
+          combined with a handful of model sentence structures, to generate
+          Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is
+          therefore always free from repetition, injected humour, or
+          non-characteristic words etc.
+        </Paragraph>
+      </ScrollView>
+    </SafeAreaView>
   );
 }
 
diff --git a/example/visionos/Podfile.lock b/example/visionos/Podfile.lock
index f5af0161..6cb235ef 100644
--- a/example/visionos/Podfile.lock
+++ b/example/visionos/Podfile.lock
@@ -1243,7 +1243,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-swiftui-tabview (0.1.0):
+  - react-native-bottom-tabs (0.1.0):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.01.01.00)
@@ -1264,6 +1264,8 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - react-native-safe-area-context (4.11.0):
+    - React-Core
   - React-nativeconfig (0.75.0)
   - React-NativeModulesApple (0.75.0):
     - glog
@@ -1553,6 +1555,49 @@ PODS:
     - React-Core
     - React-jsi
   - ReactTestApp-Resources (1.0.0-dev)
+  - RNGestureHandler (2.20.0):
+    - DoubleConversion
+    - glog
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - RNScreens (3.34.0):
+    - DoubleConversion
+    - glog
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-RCTImage
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - SocketRocket (0.7.0.1)
   - Yoga (0.0.0)
 
@@ -1593,7 +1638,8 @@ DEPENDENCIES:
   - "React-logger (from `../node_modules/@callstack/react-native-visionos/ReactCommon/logger`)"
   - "React-Mapbuffer (from `../node_modules/@callstack/react-native-visionos/ReactCommon`)"
   - "React-microtasksnativemodule (from `../node_modules/@callstack/react-native-visionos/ReactCommon/react/nativemodule/microtasks`)"
-  - react-native-swiftui-tabview (from `../..`)
+  - react-native-bottom-tabs (from `../..`)
+  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - "React-nativeconfig (from `../node_modules/@callstack/react-native-visionos/ReactCommon`)"
   - "React-NativeModulesApple (from `../node_modules/@callstack/react-native-visionos/ReactCommon/react/nativemodule/core/platform/ios`)"
   - "React-perflogger (from `../node_modules/@callstack/react-native-visionos/ReactCommon/reactperflogger`)"
@@ -1625,6 +1671,8 @@ DEPENDENCIES:
   - "ReactNativeHost (from `../node_modules/@rnx-kit/react-native-host`)"
   - ReactTestApp-DevSupport (from `../node_modules/react-native-test-app`)
   - ReactTestApp-Resources (from `..`)
+  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNScreens (from `../node_modules/react-native-screens`)
   - "SocketRocket (from `../node_modules/@callstack/react-native-visionos/third-party-podspecs/SocketRocket.podspec`)"
   - "Yoga (from `../node_modules/@callstack/react-native-visionos/ReactCommon/yoga`)"
 
@@ -1697,8 +1745,10 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@callstack/react-native-visionos/ReactCommon"
   React-microtasksnativemodule:
     :path: "../node_modules/@callstack/react-native-visionos/ReactCommon/react/nativemodule/microtasks"
-  react-native-swiftui-tabview:
+  react-native-bottom-tabs:
     :path: "../.."
+  react-native-safe-area-context:
+    :path: "../node_modules/react-native-safe-area-context"
   React-nativeconfig:
     :path: "../node_modules/@callstack/react-native-visionos/ReactCommon"
   React-NativeModulesApple:
@@ -1761,6 +1811,10 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-test-app"
   ReactTestApp-Resources:
     :path: ".."
+  RNGestureHandler:
+    :path: "../node_modules/react-native-gesture-handler"
+  RNScreens:
+    :path: "../node_modules/react-native-screens"
   SocketRocket:
     :podspec: "../node_modules/@callstack/react-native-visionos/third-party-podspecs/SocketRocket.podspec"
   Yoga:
@@ -1801,7 +1855,8 @@ SPEC CHECKSUMS:
   React-logger: 3b9cc828d9dd5f8ba7da014dab19fcff6beceb79
   React-Mapbuffer: b925e985164304a420b29103c38c6c9d91691d2d
   React-microtasksnativemodule: 1940f8375742bf1fa2100cbc1dba3e9b20c1b8b5
-  react-native-swiftui-tabview: 3be89c5b1d6efe6643ce44ee9aa3ce4bf7760320
+  react-native-bottom-tabs: 894d1fb8fc4e6d525b2da35e83e00e18c420cdf2
+  react-native-safe-area-context: 851c62c48dce80ccaa5637b6aa5991a1bc36eca9
   React-nativeconfig: afe30c46ab7d8b251f38961a644698387f5f9e6d
   React-NativeModulesApple: ccef48a493eae993fcddc7c7b7f80e5cdd2add8a
   React-perflogger: 76276a729b69a8131bf2a56f9edb811448ea1408
@@ -1833,9 +1888,11 @@ SPEC CHECKSUMS:
   ReactNativeHost: 99c0ffb175cd69de2ac9a70892cd22dac65ea79d
   ReactTestApp-DevSupport: b7cd76a3aeee6167f5e14d82f09685059152c426
   ReactTestApp-Resources: 0be6dec7d289172429c080c56dbd4f5aeb5e1ced
+  RNGestureHandler: 18b9b5d65c77c4744a640f69b7fccdd47ed935c0
+  RNScreens: 5288a8dbeedb3c5051aa2d5658c1c553c050b80a
   SocketRocket: 0ba3e799f983d2dfa878777017659ef6c866e5c6
   Yoga: 7c17e3a94a522222e393c1e9c9387afd9428f6eb
 
-PODFILE CHECKSUM: ef8414f59a2b45c9341c759274184990c6e69561
+PODFILE CHECKSUM: f89ba4e3c51d912721e2bf52a0d5575eb0309fc2
 
 COCOAPODS: 1.15.2
diff --git a/ios/RCTTabViewViewManager.mm b/ios/RCTTabViewViewManager.mm
index 4191df3c..52668c3b 100644
--- a/ios/RCTTabViewViewManager.mm
+++ b/ios/RCTTabViewViewManager.mm
@@ -1,5 +1,6 @@
 #import <React/RCTViewManager.h>
 #import <React/RCTUIManager.h>
+#import <React/RCTImageLoader.h>
 #import "RCTBridge.h"
 #import "react_native_bottom_tabs-Swift.h"
 
@@ -12,12 +13,14 @@ @implementation RCTTabView
 
 - (UIView *)view
 {
-  return [[TabViewProvider alloc] initWithEventDispatcher:self.bridge.eventDispatcher];
+  RCTImageLoader *imageLoader = [self.bridge moduleForClass:[RCTImageLoader class]];
+  return [[TabViewProvider alloc] initWithEventDispatcher:self.bridge.eventDispatcher imageLoader:imageLoader];
 }
 
 RCT_EXPORT_VIEW_PROPERTY(items, NSArray)
 RCT_EXPORT_VIEW_PROPERTY(onPageSelected, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(selectedPage, NSString)
 RCT_EXPORT_VIEW_PROPERTY(tabViewStyle, NSString)
+RCT_EXPORT_VIEW_PROPERTY(icons, NSArray<RCTImageSource *>);
 
 @end
diff --git a/ios/TabViewImpl.swift b/ios/TabViewImpl.swift
index 736e85fa..9be08d1e 100644
--- a/ios/TabViewImpl.swift
+++ b/ios/TabViewImpl.swift
@@ -1,5 +1,6 @@
 import Foundation
 import SwiftUI
+import React
 
 /**
  Props that component accepts. SwiftUI view gets re-rendered when ObservableObject changes.
@@ -9,6 +10,7 @@ class TabViewProps: ObservableObject {
   @Published var items: TabData?
   @Published var selectedPage: String?
   @Published var tabViewStyle: String?
+  @Published var icons: [Int: UIImage] = [:]
 }
 
 /**
@@ -35,19 +37,35 @@ struct TabViewImpl: View {
       ForEach(props.children?.indices ?? 0..<0, id: \.self) { index in
         let child = props.children?[safe: index] ?? UIView()
         let tabData = props.items?.tabs[safe: index]
+        let icon = props.icons[index]
         RepresentableView(view: child)
-          .frame(width: child.frame.width, height: child.frame.height)
+          .frame(maxWidth: .infinity, maxHeight: .infinity)
           .tabItem {
-            Label(tabData?.title ?? "", systemImage: tabData?.icon ?? "")
+            TabItem(icon: icon, sfSymbol: tabData?.sfSymbol, title: tabData?.title)
           }
           .tag(tabData?.key)
           .tabBadge(tabData?.badge)
       }
+      .getTabViewStyle(name: props.tabViewStyle ?? "")
+      .onChange(of: props.selectedPage ?? "") { newValue in
+        onSelect(newValue)
+      }
     }
-    .getTabViewStyle(name: props.tabViewStyle ?? "")
-    .onChange(of: props.selectedPage ?? "") { newValue in
-      onSelect(newValue)
+  }
+}
+
+struct TabItem: View {
+  var icon: UIImage?
+  var sfSymbol: String?
+  var title: String?
+  
+  var body: some View {
+    if let icon {
+      Image(uiImage: icon)
+    } else if let sfSymbol, !sfSymbol.isEmpty {
+      Image(systemName: sfSymbol)
     }
+    Text(title ?? "")
   }
 }
 
@@ -81,4 +99,3 @@ extension View {
     }
   }
 }
-
diff --git a/ios/TabViewProvider.swift b/ios/TabViewProvider.swift
index c64caecf..51f0b365 100644
--- a/ios/TabViewProvider.swift
+++ b/ios/TabViewProvider.swift
@@ -1,11 +1,12 @@
 import Foundation
 import SwiftUI
+import React
 
 struct TabInfo: Codable {
   let key: String
-  let icon: String
   let title: String
   let badge: String
+  let sfSymbol: String
 }
 
 struct TabData: Codable {
@@ -16,28 +17,41 @@ struct TabData: Codable {
   var props = TabViewProps()
   private var hostingController: UIHostingController<TabViewImpl>?
   private var coalescingKey: UInt16 = 0
-  var eventDispatcher: RCTEventDispatcherProtocol?
+  private var eventDispatcher: RCTEventDispatcherProtocol?
+  private var imageLoader: RCTImageLoaderProtocol?
+  private var iconSize = CGSize(width: 27, height: 27)
+  
   
   @objc var onPageSelected: RCTDirectEventBlock?
+  
+  @objc var icons: NSArray? {
+    didSet {
+      loadIcons(icons)
+    }
+  }
+  
   @objc var selectedPage: NSString? {
     didSet {
       props.selectedPage = selectedPage as? String
     }
   }
+  
   @objc var tabViewStyle: NSString? {
     didSet {
       props.tabViewStyle = tabViewStyle as? String
     }
   }
+  
   @objc var items: NSArray? {
     didSet {
       props.items = parseTabData(from: items)
     }
   }
   
-  @objc public convenience init(eventDispatcher: RCTEventDispatcherProtocol) {
+  @objc public convenience init(eventDispatcher: RCTEventDispatcherProtocol, imageLoader: RCTImageLoader) {
     self.init()
     self.eventDispatcher = eventDispatcher
+    self.imageLoader = imageLoader
   }
   
   public override func didUpdateReactSubviews() {
@@ -59,7 +73,7 @@ struct TabData: Codable {
       self.coalescingKey += 1
       self.eventDispatcher?.send(PageSelectedEvent(reactTag: self.reactTag, key: NSString(string: key), coalescingKey: self.coalescingKey))
     })
-    if let hostingController = self.hostingController, let parentViewController = findViewController() {
+    if let hostingController = self.hostingController, let parentViewController = reactViewController() {
       parentViewController.addChild(hostingController)
       addSubview(hostingController.view)
       hostingController.view.translatesAutoresizingMaskIntoConstraints = false
@@ -68,18 +82,35 @@ struct TabData: Codable {
     }
   }
   
-  private func findViewController() -> UIViewController? {
-    var responder: UIResponder? = self
-    while let nextResponder = responder?.next {
-      if let viewController = nextResponder as? UIViewController {
-        return viewController
+  private func loadIcons(_ icons: NSArray?) {
+    // TODO: Diff the arrays and update only changed items.
+    // Now if the user passes `unfocusedIcon` we update every item.
+    if let imageSources = icons as? [RCTImageSource?] {
+      for (index, imageSource) in imageSources.enumerated() {
+        guard let imageSource, let imageLoader else { continue }
+        imageLoader.loadImage(
+          with: imageSource.request,
+          size: iconSize,
+          scale: imageSource.scale,
+          clipped: true,
+          resizeMode: RCTResizeMode.contain,
+          progressBlock: { _,_ in },
+          partialLoad: { _ in },
+          completionBlock: { error, image in
+            if error != nil {
+              print("[TabView] Error loading image: \(error!.localizedDescription)")
+              return
+            }
+            guard let image else { return }
+            DispatchQueue.main.async {
+              self.props.icons[index] = image
+            }
+          })
       }
-      responder = nextResponder
     }
-    return nil
   }
   
-  func parseTabData(from array: NSArray?) -> TabData? {
+  private func parseTabData(from array: NSArray?) -> TabData? {
     guard let array else { return nil }
     var items: [TabInfo] = []
     
@@ -88,9 +119,9 @@ struct TabData: Codable {
         items.append(
           TabInfo(
             key: itemDict["key"] as? String ?? "",
-            icon: itemDict["icon"] as? String ?? "",
             title: itemDict["title"] as? String ?? "",
-            badge: itemDict["badge"] as? String ?? ""
+            badge: itemDict["badge"] as? String ?? "",
+            sfSymbol: itemDict["sfSymbol"] as? String ?? ""
           )
         )
       }
diff --git a/package.json b/package.json
index 924bbfff..e1446483 100644
--- a/package.json
+++ b/package.json
@@ -197,6 +197,7 @@
     "version": "0.41.2"
   },
   "dependencies": {
+    "sf-symbols-typescript": "^2.0.0",
     "use-latest-callback": "^0.2.1"
   }
 }
diff --git a/src/TabView.tsx b/src/TabView.tsx
index 7e76ecaa..eaf1b00e 100644
--- a/src/TabView.tsx
+++ b/src/TabView.tsx
@@ -1,21 +1,15 @@
-import React from 'react';
 import type { TabViewItems } from './TabViewNativeComponent';
-import { Platform, StyleSheet, View } from 'react-native';
+import { Image, Platform, StyleSheet, View } from 'react-native';
+
+//@ts-ignore
+import type { ImageSource } from 'react-native/Libraries/Image/ImageSource';
 import TabViewAdapter from './TabViewAdapter';
 import useLatestCallback from 'use-latest-callback';
+import { useMemo, useState } from 'react';
+import type { BaseRoute, NavigationState } from './types';
 
-export type BaseRoute = {
-  key: string;
-  title?: string;
-  badge?: string;
-  lazy?: boolean;
-  icon?: string;
-};
-
-type NavigationState<Route extends BaseRoute> = {
-  index: number;
-  routes: Route[];
-};
+const isAppleSymbol = (icon: any): icon is { sfSymbol: string } =>
+  icon.sfSymbol;
 
 interface Props<Route extends BaseRoute> {
   navigationState: NavigationState<Route>;
@@ -44,22 +38,63 @@ const TabView = <Route extends BaseRoute>({
   // @ts-ignore
   const focusedKey = navigationState.routes[navigationState.index].key;
 
+  if (navigationState.routes.length > 6) {
+    throw new Error('TabView only supports up to 6 tabs');
+  }
+
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
    */
-  const [loaded, setLoaded] = React.useState<string[]>([focusedKey]);
+  const [loaded, setLoaded] = useState<string[]>([focusedKey]);
 
   if (!loaded.includes(focusedKey)) {
     // Set the current tab to be loaded if it was not loaded before
     setLoaded((loaded) => [...loaded, focusedKey]);
   }
 
-  const items: TabViewItems = navigationState.routes.map((route) => ({
-    key: route.key,
-    title: route.title ?? route.key,
-    icon: route.icon,
-    badge: route.badge,
-  }));
+  const icons = useMemo(
+    () =>
+      navigationState.routes.map((route) =>
+        route.unfocusedIcon
+          ? route.key === focusedKey
+            ? route.focusedIcon
+            : route.unfocusedIcon
+          : route.focusedIcon
+      ),
+    [focusedKey, navigationState.routes]
+  );
+
+  const items: TabViewItems = useMemo(
+    () =>
+      navigationState.routes.map((route, index) => {
+        const icon = icons[index];
+        const isSfSymbol = isAppleSymbol(icon);
+
+        if (Platform.OS === 'android' && isSfSymbol) {
+          console.warn(
+            'SF Symbols are not supported on Android. Use require() or pass uri to load an image instead.'
+          );
+        }
+        return {
+          key: route.key,
+          title: route.title ?? route.key,
+          sfSymbol: isSfSymbol ? icon.sfSymbol : undefined,
+          badge: route.badge,
+        };
+      }),
+    [icons, navigationState.routes]
+  );
+
+  const resolvedIconAssets: ImageSource[] = useMemo(
+    () =>
+      // Pass empty object for icons that are not provided to avoid index mismatch on native side.
+      icons.map((icon) =>
+        icon && !isAppleSymbol(icon)
+          ? Image.resolveAssetSource(icon)
+          : { uri: '' }
+      ),
+    [icons]
+  );
 
   const jumpTo = useLatestCallback((key: string) => {
     const index = navigationState.routes.findIndex(
@@ -73,13 +108,10 @@ const TabView = <Route extends BaseRoute>({
     <TabViewAdapter
       style={styles.fullWidth}
       items={items}
+      icons={resolvedIconAssets}
       selectedPage={focusedKey}
       onPageSelected={({ nativeEvent: { key } }) => {
-        const index = navigationState.routes.findIndex((r) => r.key === key);
-
-        if (index !== -1) {
-          onIndexChange?.(index);
-        }
+        jumpTo(key);
       }}
       {...props}
     >
diff --git a/src/TabViewNativeComponent.ts b/src/TabViewNativeComponent.ts
index aaa1ce26..7e854758 100644
--- a/src/TabViewNativeComponent.ts
+++ b/src/TabViewNativeComponent.ts
@@ -4,6 +4,8 @@ import type {
   DirectEventHandler,
   WithDefault,
 } from 'react-native/Libraries/Types/CodegenTypes';
+//@ts-ignore
+import type { ImageSource } from 'react-native/Libraries/Image/ImageSource';
 
 export type OnPageSelectedEventData = Readonly<{
   key: string;
@@ -12,7 +14,7 @@ export type OnPageSelectedEventData = Readonly<{
 export type TabViewItems = ReadonlyArray<{
   key: string;
   title: string;
-  icon?: string;
+  sfSymbol?: string;
   badge?: string;
 }>;
 
@@ -21,8 +23,7 @@ export interface TabViewProps extends ViewProps {
   selectedPage: string;
   onPageSelected?: DirectEventHandler<OnPageSelectedEventData>;
   tabViewStyle?: WithDefault<'automatic' | 'sidebarAdaptable', 'automatic'>;
+  icons?: ReadonlyArray<ImageSource>;
 }
 
-export default codegenNativeComponent<TabViewProps>('RCTTabView', {
-  excludedPlatforms: ['android'],
-});
+export default codegenNativeComponent<TabViewProps>('RCTTabView');
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 00000000..5a1992a1
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,20 @@
+import type { ImageSourcePropType } from 'react-native';
+import type { SFSymbol } from 'sf-symbols-typescript';
+
+export type IconSource = string | ImageSourcePropType;
+
+export type AppleIcon = { sfSymbol: SFSymbol };
+
+export type BaseRoute = {
+  key: string;
+  title?: string;
+  badge?: string;
+  lazy?: boolean;
+  focusedIcon?: ImageSourcePropType | AppleIcon;
+  unfocusedIcon?: ImageSourcePropType | AppleIcon;
+};
+
+export type NavigationState<Route extends BaseRoute> = {
+  index: number;
+  routes: Route[];
+};
diff --git a/yarn.lock b/yarn.lock
index 8a1f3060..b4d153ae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1684,6 +1684,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@callstack/react-theme-provider@npm:^3.0.9":
+  version: 3.0.9
+  resolution: "@callstack/react-theme-provider@npm:3.0.9"
+  dependencies:
+    deepmerge: ^3.2.0
+    hoist-non-react-statics: ^3.3.0
+  peerDependencies:
+    react: ">=16.3.0"
+  checksum: f888ef0b8f993d393a9d49864f75b04b5cf7259e72f290ec570fc5e314315f75c979b03b391243a72578ab55db4ffcdd4dc9dc1a2f8ec2b516cabb958971a85e
+  languageName: node
+  linkType: hard
+
 "@commitlint/cli@npm:^17.8.1":
   version: 17.8.1
   resolution: "@commitlint/cli@npm:17.8.1"
@@ -5121,7 +5133,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-convert@npm:^1.9.0":
+"color-convert@npm:^1.9.0, color-convert@npm:^1.9.3":
   version: 1.9.3
   resolution: "color-convert@npm:1.9.3"
   dependencies:
@@ -5153,7 +5165,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-string@npm:^1.9.0":
+"color-string@npm:^1.6.0, color-string@npm:^1.9.0":
   version: 1.9.1
   resolution: "color-string@npm:1.9.1"
   dependencies:
@@ -5163,6 +5175,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"color@npm:^3.1.2":
+  version: 3.2.1
+  resolution: "color@npm:3.2.1"
+  dependencies:
+    color-convert: ^1.9.3
+    color-string: ^1.6.0
+  checksum: f81220e8b774d35865c2561be921f5652117638dcda7ca4029262046e37fc2444ac7bbfdd110cf1fd9c074a4ee5eda8f85944ffbdda26186b602dd9bb05f6400
+  languageName: node
+  linkType: hard
+
 "color@npm:^4.2.3":
   version: 4.2.3
   resolution: "color@npm:4.2.3"
@@ -5842,6 +5864,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"deepmerge@npm:^3.2.0":
+  version: 3.3.0
+  resolution: "deepmerge@npm:3.3.0"
+  checksum: 4322195389e0170a0443c07b36add19b90249802c4b47b96265fdc5f5d8beddf491d5e50cbc5bfd65f85ccf76598173083863c202f5463b3b667aca8be75d5ac
+  languageName: node
+  linkType: hard
+
 "deepmerge@npm:^4.2.2, deepmerge@npm:^4.3.0":
   version: 4.3.1
   resolution: "deepmerge@npm:4.3.1"
@@ -11478,6 +11507,7 @@ __metadata:
     react-native: 0.75.3
     react-native-builder-bob: ^0.30.2
     react-native-gesture-handler: ^2.20.0
+    react-native-paper: ^5.12.5
     react-native-safe-area-context: ^4.11.0
     react-native-screens: ^3.34.0
     react-native-test-app: ^3.10.10
@@ -11505,6 +11535,7 @@ __metadata:
     react-native: 0.75.3
     react-native-builder-bob: ^0.30.2
     release-it: ^15.0.0
+    sf-symbols-typescript: ^2.0.0
     turbo: ^1.10.7
     typescript: ^5.2.2
     use-latest-callback: ^0.2.1
@@ -11561,6 +11592,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-paper@npm:^5.12.5":
+  version: 5.12.5
+  resolution: "react-native-paper@npm:5.12.5"
+  dependencies:
+    "@callstack/react-theme-provider": ^3.0.9
+    color: ^3.1.2
+    use-latest-callback: ^0.1.5
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+    react-native-safe-area-context: "*"
+    react-native-vector-icons: "*"
+  checksum: 35ce56e0bb19c46ce85adc47a504527b7ec455d1a15f3ace0d6fd438abd51b1fe30e1b44351950e16d6376ddbc18ecc94b558e267767d0a9fd886a5f66a4c322
+  languageName: node
+  linkType: hard
+
 "react-native-safe-area-context@npm:^4.11.0":
   version: 4.11.0
   resolution: "react-native-safe-area-context@npm:4.11.0"
@@ -12439,6 +12486,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sf-symbols-typescript@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "sf-symbols-typescript@npm:2.0.0"
+  checksum: e3c74a84b0f6ab11948c8a6df38197641150c70d5113a7e07ea579f70e28e6c653bfe43a8ce1b8734d3f54cc83801240b1a5352f408d257606f82a17a9d95ae5
+  languageName: node
+  linkType: hard
+
 "shallow-clone@npm:^3.0.0":
   version: 3.0.1
   resolution: "shallow-clone@npm:3.0.1"
@@ -13670,6 +13724,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-latest-callback@npm:^0.1.5":
+  version: 0.1.11
+  resolution: "use-latest-callback@npm:0.1.11"
+  peerDependencies:
+    react: ">=16.8"
+  checksum: cc6df404a4ed3a39d0eb014a815c2e568a6abbe8c5ff09f9205a08bf68e86201826ed633865a6056ca0fd9581e0e7e70f18ca26c592a9eaccea5d244cf283b1f
+  languageName: node
+  linkType: hard
+
 "use-latest-callback@npm:^0.2.1":
   version: 0.2.1
   resolution: "use-latest-callback@npm:0.2.1"