docs: add custom tab bars documentation, update how is it different

docs/docs/docs/getting-started/how-is-it-different.mdx

@@ -49,6 +49,12 @@ SwiftUI's TabView offer built-in smooth animations between tabs.
 
 Using one prop you can add haptic feedback support to your tab bar on both Android and iOS. This can significantly enhance users experience.
 
+### Picture In Picture avoidance
+
+When picture in picture popup is shown system will automatically avoid tabs from being covered by it.
+
+<video controls width="100%" src='https://github.com/user-attachments/assets/061ed6bc-39ea-4ee0-820f-981a9af9a203' />
+
 ## When to use JS Bottom Tabs
 
 Using native components enforce certain constraints that we need to adapt to.

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

@@ -172,6 +172,38 @@ Supported properties:
 - `fontSize`
 - `fontWeight`
 
+#### `tabBar`
+
+Function that returns a React element to display as the tab bar.
+
+The function receives an object containing the following properties as the argument:
+
+- `state` - The state object for the tab navigator.
+- `descriptors` - The descriptors object containing options for the tab navigator.
+- `navigation` - The navigation object for the tab navigator.
+
+The state.routes array contains all the routes defined in the navigator. Each route's options can be accessed using `descriptors[route.key].options`.
+
+Example:
+
+```tsx
+function MyTabBar({ state, descriptors, navigation }) {
+  // Render your tab bar here
+}
+
+function MyTabs() {
+  return (
+    <Tab.Navigator
+      tabBar={(props) => <MyTabBar {...props} />}
+    >
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="Profile" component={ProfileScreen} />
+    </Tab.Navigator>
+  );
+}
+```
+
+
 ### Options
 
 The following options can be used to configure the screens in the navigator. These can be specified under `screenOptions` prop of `Tab.navigator` or `options` prop of `Tab.Screen`.