feat(bottom-tabs,iOS): add support for title (#10)

## Description

PR title says it all.

## Changes

- **Native support for title**
- **Expose title on JS side**
- **Update example**

## Test code and steps to reproduce

`TestBottomTabs`

## Checklist

- [x] Included code example that can be used to test this change
- [ ] Ensured that CI passes

Author: kkafar

apps/src/tests/TestBottomTabs.tsx

@@ -33,21 +33,21 @@ function App() {
   return (
     <View style={{ flex: 1 }}>
       <BottomTabs tabBarBackgroundColor={Colors.NavyLight100}>
-        <BottomTabsScreen isFocused={focusedTab % 3 === 0} badgeValue="Tab 1" badgeColor={Colors.NavyDark80}>
+        <BottomTabsScreen isFocused={focusedTab % 3 === 0} badgeValue="1" badgeColor={Colors.NavyDark80} title="Tab1">
           <LayoutView style={{ backgroundColor: Colors.OffWhite }} tabID={0}>
             <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
               <Text>Hello world from native bottom tab</Text>
               <Button title="Next tab" onPress={selectNextTab} />
             </View>
           </LayoutView>
         </BottomTabsScreen>
-        <BottomTabsScreen isFocused={focusedTab % 3 === 1} badgeValue="Tab 2" badgeColor={Colors.PurpleLight100}>
+        <BottomTabsScreen isFocused={focusedTab % 3 === 1} badgeValue="2" badgeColor={Colors.PurpleLight100} title="Tab2">
           <LayoutView style={{ backgroundColor: Colors.PurpleLight80 }} tabID={1}>
             <Text>Tab2 world from native bottom tab</Text>
             <Button title="Next tab" onPress={selectNextTab} />
           </LayoutView>
         </BottomTabsScreen>
-        <BottomTabsScreen isFocused={focusedTab % 3 === 2} badgeValue="Tab 3" badgeColor={Colors.YellowDark120}>
+        <BottomTabsScreen isFocused={focusedTab % 3 === 2} badgeValue="3" badgeColor={Colors.YellowDark120} title="Tab3">
           <LayoutView style={{ backgroundColor: Colors.YellowDark80 }} tabID={2}>
             <Text>Tab3 world from native bottom tab</Text>
             <Button title="Next tab" onPress={selectNextTab} />

ios/bottom-tabs/RNSBottomTabsScreenComponentView.h

@@ -34,6 +34,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, readonly) BOOL isFocused;
 @property (nonatomic, readonly, nullable) NSString *badgeValue;
 @property (nonatomic, readonly, nullable) UIColor *badgeColor;
+@property (nonatomic, readonly, nullable) NSString *title;
 
 @end
 

ios/bottom-tabs/RNSBottomTabsScreenComponentView.mm

@@ -1,4 +1,5 @@
 #import "RNSBottomTabsScreenComponentView.h"
+#import "RNSDefines.h"
 #import "RNSTabBarController.h"
 
 #import <React/RCTConversions.h>
@@ -28,8 +29,10 @@ - (void)initState
 {
   static const auto defaultProps = std::make_shared<const react::RNSBottomTabsScreenProps>();
   _props = defaultProps;
+
   _controller = [RNSTabsScreenViewController new];
   _controller.view = self;
+
   _reactSuperview = nil;
   [self resetProps];
 }
@@ -38,12 +41,16 @@ - (void)resetProps
 {
   _isFocused = NO;
   _badgeValue = nil;
+  _title = nil;
+  _badgeColor = nil;
 }
 
+RNS_IGNORE_SUPER_CALL_BEGIN
 - (nullable RNSBottomTabsHostComponentView *)reactSuperview
 {
   return _reactSuperview;
 }
+RNS_IGNORE_SUPER_CALL_END
 
 #pragma mark - Events
 
@@ -101,6 +108,11 @@ - (void)updateProps:(const facebook::react::Props::Shared &)props
   const auto &oldComponentProps = *std::static_pointer_cast<const react::RNSBottomTabsScreenProps>(_props);
   const auto &newComponentProps = *std::static_pointer_cast<const react::RNSBottomTabsScreenProps>(props);
 
+  if (newComponentProps.title != oldComponentProps.title) {
+    _title = RCTNSStringFromStringNilIfEmpty(newComponentProps.title);
+    _controller.title = _title;
+  }
+
   if (newComponentProps.isFocused != oldComponentProps.isFocused) {
     _isFocused = newComponentProps.isFocused;
     [_controller tabScreenFocusHasChanged];

src/components/BottomTabsScreen.tsx

@@ -17,6 +17,7 @@ export interface BottomTabsScreenProps {
   isFocused?: boolean;
   badgeValue?: string;
   badgeColor?: ColorValue;
+  title?: string;
 }
 
 // const LIFECYCLE_STATE_INITIAL = 0;

src/fabric/BottomTabScreenNativeComponent.ts

@@ -29,6 +29,9 @@ export interface NativeProps extends ViewProps {
   // Appearance
   badgeValue?: string;
   badgeColor?: ColorValue;
+
+  // General
+  title?: string | undefined | null;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSBottomTabsScreen', {});