refactor(bottom-tabs,iOS): prop renaming (avoid conflicts with UIKit) & workarounds for codegen issues (#18)

## Description

See particular commits description for full context.

- **Rename isFocused -> isSelectedScreen in platform code**
- **Flatten props namespace due to codegen limitations**


Closes #17

## Changes

:point_up:

## Test code and steps to reproduce

N/A

## Checklist

- [ ] Ensured that CI passes

Author: kkafar

apps/src/tests/TestBottomTabs.tsx

@@ -34,8 +34,7 @@ function App() {
     <View style={{ flex: 1 }}>
       <BottomTabs
         tabBarBackgroundColor={Colors.NavyLight100}
-        tabBarAppearance={{ backgroundColor: Colors.NavyLight100 }}
-        tabBarItemAppearance={{ titleFontSize: 28 }}
+        tabBarItemTitleFontSize={14}
       >
         <BottomTabsScreen
           isFocused={focusedTab % 3 === 0}

ios/bottom-tabs/RNSBottomTabsHostComponentView.mm

@@ -149,8 +149,8 @@ - (void)updateProps:(const facebook::react::Props::Shared &)props
         rnscreens::conversion::RNSUIBlurEffectFromRNSBottomTabsTabBarBlurEffect(newComponentProps.tabBarBlurEffect);
   }
 
-  if (newComponentProps.tabBarItemAppearance.titleFontSize != oldComponentProps.tabBarItemAppearance.titleFontSize) {
-    _tabBarItemTitleFontSize = [NSNumber numberWithFloat:newComponentProps.tabBarItemAppearance.titleFontSize];
+  if (newComponentProps.tabBarItemTitleFontSize != oldComponentProps.tabBarItemTitleFontSize) {
+    _tabBarItemTitleFontSize = [NSNumber numberWithFloat:newComponentProps.tabBarItemTitleFontSize];
     _needsTabBarAppearanceUpdate = YES;
   }
 

ios/bottom-tabs/RNSBottomTabsScreenComponentView.h

@@ -31,7 +31,7 @@ NS_ASSUME_NONNULL_BEGIN
  */
 @interface RNSBottomTabsScreenComponentView ()
 
-@property (nonatomic, readonly) BOOL isFocused;
+@property (nonatomic, readonly) BOOL isSelectedScreen;
 @property (nonatomic, readonly, nullable) NSString *badgeValue;
 @property (nonatomic, readonly, nullable) UIColor *badgeColor;
 

ios/bottom-tabs/RNSBottomTabsScreenComponentView.mm

@@ -39,7 +39,7 @@ - (void)initState
 
 - (void)resetProps
 {
-  _isFocused = NO;
+  _isSelectedScreen = NO;
   _badgeValue = nil;
   _title = nil;
   _badgeColor = nil;
@@ -121,7 +121,7 @@ - (void)updateProps:(const facebook::react::Props::Shared &)props
   }
 
   if (newComponentProps.isFocused != oldComponentProps.isFocused) {
-    _isFocused = newComponentProps.isFocused;
+    _isSelectedScreen = newComponentProps.isFocused;
     tabItemNeedsAppearanceUpdate = true;
   }
 

ios/bottom-tabs/RNSTabBarController.mm

@@ -58,6 +58,8 @@ - (void)reactMountingTransactionDidMount
   [self updateTabBarAppearanceIfNeeded];
 }
 
+#pragma mark-- Signals related
+
 - (void)updateReactChildrenControllersIfNeeded
 {
   if (_needsUpdateOfReactChildrenControllers) {
@@ -97,8 +99,8 @@ - (void)updateSelectedViewController
     NSLog(
         @"Update Selected View Controller [%ld] isFocused %d",
         tabViewController.tabScreenComponentView.tag,
-        tabViewController.tabScreenComponentView.isFocused);
-    if (tabViewController.tabScreenComponentView.isFocused == true) {
+        tabViewController.tabScreenComponentView.isSelectedScreen);
+    if (tabViewController.tabScreenComponentView.isSelectedScreen == true) {
       selectedViewController = tabViewController;
       break;
     }
@@ -141,7 +143,7 @@ - (void)assertExactlyOneFocusedTab
 {
   int selectedCount = 0;
   for (RNSTabsScreenViewController *tabViewController in _tabScreenControllers) {
-    if (tabViewController.tabScreenComponentView.isFocused) {
+    if (tabViewController.tabScreenComponentView.isSelectedScreen) {
       ++selectedCount;
     }
   }

ios/bottom-tabs/RNSTabsScreenViewController.mm

@@ -15,7 +15,10 @@ - (nullable RNSBottomTabsScreenComponentView *)tabScreenComponentView
 
 - (void)tabScreenFocusHasChanged
 {
-  NSLog(@"TabScreen [%ld] changed focus: %d", self.tabScreenComponentView.tag, self.tabScreenComponentView.isFocused);
+  NSLog(
+      @"TabScreen [%ld] changed focus: %d",
+      self.tabScreenComponentView.tag,
+      self.tabScreenComponentView.isSelectedScreen);
 
   // The focus of owned tab has been updated from react. We tell the parent controller that it should update the
   // container.

src/fabric/BottomTabsNativeComponent.ts

@@ -7,13 +7,9 @@ import { Float, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
 // TODO: Report issue on RN repo, that nesting color value inside a struct does not work.
 // Generated code is ok, but the value is not passed down correctly - whatever color is set
 // host component receives RGBA(0, 0, 0, 0) anyway.
-type TabBarAppearance = {
-  backgroundColor?: ColorValue;
-};
-
-type TabBarItemAppearance = {
-  titleFontSize?: Float;
-};
+// type TabBarAppearance = {
+//   backgroundColor?: ColorValue;
+// };
 
 type BlurEffect =
   | 'none'
@@ -40,12 +36,11 @@ type BlurEffect =
 
 export interface NativeProps extends ViewProps {
   // Appearance
-  tabBarAppearance?: TabBarAppearance; // Does not work due to codegen issue.
+  // tabBarAppearance?: TabBarAppearance; // Does not work due to codegen issue.
+
   tabBarBackgroundColor?: ColorValue;
   tabBarBlurEffect?: WithDefault<BlurEffect, 'none'>;
-
-  tabBarItemAppearance?: TabBarItemAppearance;
-  tabBarItemSelectedAppearance?: TabBarItemAppearance;
+  tabBarItemTitleFontSize?: Float;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSBottomTabs', {});