feat(android): take whole screen, refactor measurements (#236)

* feat: take whole screen, refactor measurements

* feat: use ViewPager

* fix: remove custom shadow nodes measurements

* feat: add changesets

* fix: use optional chaining for 0.77 RC

* fix: use TabViewImpl to share code across architectures

* fix: remove TabViewAdapter as its no longer needed

* feat: use LinearLayout, make measurements better

* feat: migrate off viewpager to frame layout (WIP)

Author: okwasniewski

.changeset/smart-tomatoes-serve.md

@@ -0,0 +1,5 @@
+---
+'react-native-bottom-tabs': minor
+---
+
+feat: refactor android, change views on the native side, add page animations

apps/example/android/gradle.properties

@@ -40,7 +40,7 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
 # to write custom TurboModules/Fabric components OR use libraries that
 # are providing them.
 # Note that this is incompatible with web debugging.
-newArchEnabled=false
+newArchEnabled=true
 #bridgelessEnabled=true
 
 # Uncomment the line below to build React Native from source.

apps/example/src/App.tsx

@@ -27,6 +27,7 @@ import TintColorsExample from './Examples/TintColors';
 import NativeBottomTabsEmbeddedStacks from './Examples/NativeBottomTabsEmbeddedStacks';
 import NativeBottomTabsSVGs from './Examples/NativeBottomTabsSVGs';
 import NativeBottomTabsRemoteIcons from './Examples/NativeBottomTabsRemoteIcons';
+import NativeBottomTabsUnmounting from './Examples/NativeBottomTabsUnmounting';
 
 const FourTabsIgnoreSafeArea = () => {
   return <FourTabs ignoresTopSafeArea />;
@@ -95,7 +96,6 @@ const examples = [
   {
     component: FourTabsNoAnimations,
     name: 'Four Tabs - no animations',
-    platform: 'ios',
   },
   {
     component: FourTabsTransparentScrollEdgeAppearance,
@@ -128,6 +128,10 @@ const examples = [
     component: NativeBottomTabsSVGs,
     name: 'Native Bottom Tabs with SVG Icons',
   },
+  {
+    component: NativeBottomTabsUnmounting,
+    name: 'Native Bottom Tabs unmounting',
+  },
   {
     component: NativeBottomTabsRemoteIcons,
     name: 'Native Bottom Tabs with SVG Remote Icons',

apps/example/src/Examples/NativeBottomTabsUnmounting.tsx

@@ -0,0 +1,63 @@
+import { Article } from '../Screens/Article';
+import { Albums } from '../Screens/Albums';
+import { Contacts } from '../Screens/Contacts';
+import { Chat } from '../Screens/Chat';
+import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
+import React from 'react';
+import { Alert } from 'react-native';
+
+const Tab = createNativeBottomTabNavigator();
+
+function NativeBottomTabsUnmounting() {
+  const [isTabMounted, setIsTabMounted] = React.useState(true);
+
+  React.useEffect(() => {
+    const id = setTimeout(() => {
+      setIsTabMounted(false);
+      Alert.alert('Tab is unmounted');
+    }, 1000);
+
+    return () => clearTimeout(id);
+  }, []);
+  return (
+    <Tab.Navigator initialRouteName="Chat" labeled={true}>
+      <Tab.Screen
+        name="Article"
+        component={Article}
+        options={{
+          tabBarButtonTestID: 'articleTestID',
+          tabBarBadge: '10',
+          tabBarIcon: ({ focused }) =>
+            focused
+              ? require('../../assets/icons/person_dark.png')
+              : require('../../assets/icons/article_dark.png'),
+        }}
+      />
+      <Tab.Screen
+        name="Albums"
+        component={Albums}
+        options={{
+          tabBarIcon: () => require('../../assets/icons/grid_dark.png'),
+        }}
+      />
+      <Tab.Screen
+        name="Contacts"
+        component={Contacts}
+        options={{
+          tabBarIcon: () => require('../../assets/icons/person_dark.png'),
+        }}
+      />
+      {isTabMounted && (
+        <Tab.Screen
+          name="Chat"
+          component={Chat}
+          options={{
+            tabBarIcon: () => require('../../assets/icons/chat_dark.png'),
+          }}
+        />
+      )}
+    </Tab.Navigator>
+  );
+}
+
+export default NativeBottomTabsUnmounting;

apps/example/src/Examples/ThreeTabs.tsx

@@ -5,7 +5,7 @@ import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
 
 export default function ThreeTabs() {
-  const [index, setIndex] = useState(0);
+  const [index, setIndex] = useState(1);
   const [routes] = useState([
     {
       key: 'article',

packages/react-native-bottom-tabs/android/build.gradle

@@ -14,11 +14,6 @@ buildscript {
   }
 }
 
-def reactNativeArchitectures() {
-  def value = rootProject.getProperties().get("reactNativeArchitectures")
-  return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
-}
-
 def isNewArchitectureEnabled() {
   return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
 }