feat(bottom-tabs,iOS): add support for badgeValue (#7)

## Description

This PR adds support for setting the `badgeValue` of a tab bar item.

## Changes

- **Remove redundant import**
- **Add support for badgeValue**
- **Update example**

## Checklist

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

Author: kkafar

apps/src/tests/TestBottomTabs.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 import { Button, Text, View, ViewProps } from 'react-native';
 
 import { BottomTabs, BottomTabsScreen, enableFreeze } from 'react-native-screens';
@@ -32,21 +32,21 @@ function App() {
   return (
     <View style={{ flex: 1 }}>
       <BottomTabs tabBarBackgroundColor={'rgba(255, 255, 0, 0.5)'} tabBarBlurEffect={'dark'}>
-        <BottomTabsScreen isFocused={focusedTab % 3 === 0}>
+        <BottomTabsScreen isFocused={focusedTab % 3 === 0} badgeValue="Tab 1">
           <LayoutView style={{ backgroundColor: 'lightgreen' }} 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}>
+        <BottomTabsScreen isFocused={focusedTab % 3 === 1} badgeValue="Tab 2">
           <LayoutView style={{ backgroundColor: 'lightblue' }} tabID={1}>
             <Text>Tab2 world from native bottom tab</Text>
             <Button title="Next tab" onPress={selectNextTab} />
           </LayoutView>
         </BottomTabsScreen>
-        <BottomTabsScreen isFocused={focusedTab % 3 === 2}>
+        <BottomTabsScreen isFocused={focusedTab % 3 === 2} badgeValue="Tab 3">
           <LayoutView style={{ backgroundColor: 'yellow' }} tabID={2}>
             <Text>Tab3 world from native bottom tab</Text>
             <Button title="Next tab" onPress={selectNextTab} />

ios/bottom-tabs/RNSBottomTabsScreenComponentView.h

@@ -32,6 +32,7 @@ NS_ASSUME_NONNULL_BEGIN
 @interface RNSBottomTabsScreenComponentView ()
 
 @property (nonatomic, readonly) BOOL isFocused;
+@property (nonatomic, readonly, nullable) NSString *badgeValue;
 
 @end
 

ios/bottom-tabs/RNSBottomTabsScreenComponentView.mm

@@ -31,7 +31,13 @@ - (void)initState
   _controller = [RNSTabsScreenViewController new];
   _controller.view = self;
   _reactSuperview = nil;
+  [self resetProps];
+}
+
+- (void)resetProps
+{
   _isFocused = NO;
+  _badgeValue = nil;
 }
 
 - (nullable RNSBottomTabsHostComponentView *)reactSuperview
@@ -100,6 +106,11 @@ - (void)updateProps:(const facebook::react::Props::Shared &)props
     [_controller tabScreenFocusHasChanged];
   }
 
+  if (newComponentProps.badgeValue != oldComponentProps.badgeValue) {
+    _badgeValue = RCTNSStringFromStringNilIfEmpty(newComponentProps.badgeValue);
+    _controller.tabBarItem.badgeValue = _badgeValue;
+  }
+
   [super updateProps:props oldProps:oldProps];
 }
 

src/components/BottomTabsScreen.tsx

@@ -9,6 +9,7 @@ import { freezeEnabled } from '../core';
 export interface BottomTabsScreenProps {
   children: ViewProps['children'];
   isFocused?: boolean;
+  badgeValue?: string;
 }
 
 // const LIFECYCLE_STATE_INITIAL = 0;

src/fabric/BottomTabScreenNativeComponent.ts

@@ -16,12 +16,18 @@ export type LifecycleStateChangeEvent = Readonly<{
 }>;
 
 export interface NativeProps extends ViewProps {
-  isFocused?: boolean;
+  // Events
   onLifecycleStateChange?: DirectEventHandler<LifecycleStateChangeEvent>;
   onWillAppear?: DirectEventHandler<GenericEmptyEvent>;
   onDidAppear?: DirectEventHandler<GenericEmptyEvent>;
   onWillDisappear?: DirectEventHandler<GenericEmptyEvent>;
   onDidDisappear?: DirectEventHandler<GenericEmptyEvent>;
+
+  // Control
+  isFocused?: boolean;
+
+  // Appearance
+  badgeValue?: string;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSBottomTabsScreen', {});