Add SF Symbols support to bottom tab and top bar's back button

lib/ios/RNNBackButtonOptions.h

@@ -3,6 +3,7 @@
 @interface RNNBackButtonOptions : RNNOptions
 
 @property(nonatomic, strong) Image *icon;
+@property(nonatomic, strong) Text *sfSymbol;
 @property(nonatomic, strong) Text *title;
 @property(nonatomic, strong) Text *fontFamily;
 @property(nonatomic, strong) Number *fontSize;

lib/ios/RNNBackButtonOptions.m

@@ -7,6 +7,7 @@ - (instancetype)initWithDict:(NSDictionary *)dict {
 
     self.identifier = [TextParser parse:dict key:@"identifier"];
     self.icon = [ImageParser parse:dict key:@"icon"];
+    self.sfSymbol = [TextParser parse:dict key:@"sfSymbol"];
     self.title = [TextParser parse:dict key:@"title"];
     self.transition = [TextParser parse:dict key:@"transition"];
     self.color = [ColorParser parse:dict key:@"color"];
@@ -49,12 +50,14 @@ - (void)mergeOptions:(RNNBackButtonOptions *)options {
         self.displayMode = options.displayMode;
     if (options.popStackOnPress.hasValue)
         self.popStackOnPress = options.popStackOnPress;
+    if (options.sfSymbol.hasValue)
+        self.sfSymbol = options.sfSymbol;
 }
 
 - (BOOL)hasValue {
     return self.icon.hasValue || self.showTitle.hasValue || self.color.hasValue ||
            self.fontFamily.hasValue || self.fontSize.hasValue || self.title.hasValue ||
-           self.enableMenu.hasValue || self.displayMode.hasValue;
+           self.enableMenu.hasValue || self.displayMode.hasValue || self.sfSymbol.hasValue;
 }
 
 @end

lib/ios/RNNBottomTabOptions.h

@@ -23,6 +23,8 @@
 @property(nonatomic, strong) Number *fontSize;
 @property(nonatomic, strong) Bool *visible;
 @property(nonatomic, strong) Bool *selectTabOnPress;
+@property(nonatomic, strong) Text *sfSymbol;
+@property(nonatomic, strong) Text *sfSelectedSymbol;
 
 - (BOOL)hasValue;
 

lib/ios/RNNBottomTabOptions.m

@@ -29,6 +29,8 @@ - (instancetype)initWithDict:(NSDictionary *)dict {
     self.fontSize = [NumberParser parse:dict key:@"fontSize"];
     self.visible = [BoolParser parse:dict key:@"visible"];
     self.selectTabOnPress = [BoolParser parse:dict key:@"selectTabOnPress"];
+    self.sfSymbol = [TextParser parse:dict key:@"sfSymbol"];
+    self.sfSelectedSymbol = [TextParser parse:dict key:@"sfSelectedSymbol"];
 
     return self;
 }
@@ -70,6 +72,10 @@ - (void)mergeOptions:(RNNBottomTabOptions *)options {
         self.visible = options.visible;
     if (options.selectTabOnPress.hasValue)
         self.selectTabOnPress = options.selectTabOnPress;
+    if (options.sfSymbol.hasValue)
+        self.sfSymbol = options.sfSymbol;
+    if (options.sfSelectedSymbol.hasValue)
+        self.sfSelectedSymbol = options.sfSelectedSymbol;
 }
 
 - (BOOL)hasValue {
@@ -78,7 +84,7 @@ - (BOOL)hasValue {
            self.testID.hasValue || self.icon.hasValue || self.selectedIcon.hasValue ||
            self.iconColor.hasValue || self.selectedIconColor.hasValue ||
            self.selectedTextColor.hasValue || self.iconInsets.hasValue || self.textColor.hasValue ||
-           self.visible.hasValue || self.selectTabOnPress.hasValue;
+           self.visible.hasValue || self.selectTabOnPress.hasValue || self.sfSymbol.hasValue || self.sfSelectedSymbol.hasValue;
 }
 
 @end

lib/ios/RNNTabBarItemCreator.m

@@ -16,6 +16,16 @@ + (UITabBarItem *)createTabBarItem:(RNNBottomTabOptions *)bottomTabOptions
     UIColor *iconColor = [bottomTabOptions.iconColor withDefault:nil];
     UIColor *selectedIconColor = [bottomTabOptions.selectedIconColor withDefault:iconColor];
 
+    if (@available(iOS 13.0, *)) {
+        if (bottomTabOptions.sfSymbol.hasValue) {
+            icon = [UIImage systemImageNamed: [bottomTabOptions.sfSymbol withDefault:nil]];
+        }
+
+        if (bottomTabOptions.sfSelectedSymbol.hasValue) {
+            selectedIcon = [UIImage systemImageNamed: [bottomTabOptions.sfSelectedSymbol withDefault:nil]];
+        }
+    }
+
     tabItem.image = [self getIconImage:icon withTint:iconColor];
     tabItem.selectedImage = [self getSelectedIconImage:selectedIcon
                                      selectedIconColor:selectedIconColor];

lib/ios/TopBarPresenter.m

@@ -150,6 +150,7 @@ - (UINavigationItemBackButtonDisplayMode)getBackButtonDisplayMode:(NSString *)di
 
 - (void)setBackButtonOptions:(RNNBackButtonOptions *)backButtonOptions {
     UIImage *icon = [backButtonOptions.icon withDefault:nil];
+    UIImage *sfSymbol = [UIImage systemImageNamed:[backButtonOptions.sfSymbol withDefault:nil]];
     UIColor *color = [backButtonOptions.color withDefault:nil];
     NSString *title = [backButtonOptions.title withDefault:nil];
     BOOL showTitle = [backButtonOptions.showTitle withDefault:YES];
@@ -160,9 +161,18 @@ - (void)setBackButtonOptions:(RNNBackButtonOptions *)backButtonOptions {
     UIBarButtonItem *backItem = [[RNNUIBarBackButtonItem alloc] initWithOptions:backButtonOptions];
     UINavigationItem *previousNavigationItem = previousViewControllerInStack.navigationItem;
 
-    icon = color ? [[icon withTintColor:color]
-                       imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]
-                 : icon;
+
+    if (@available(iOS 13.0, *)) {
+        if (backButtonOptions.sfSymbol.hasValue) {
+            icon = color ? [sfSymbol imageWithTintColor:color renderingMode:UIImageRenderingModeAlwaysOriginal]
+                         : [sfSymbol imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
+        } else {
+            icon = color ? [[icon withTintColor:color] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] : icon;
+        }
+    } else {
+        icon = color ? [[icon withTintColor:color] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] : icon;
+    }
+
     [self setBackIndicatorImage:icon withColor:color];
 
     title = title ? title : (previousNavigationItem.title ? previousNavigationItem.title : @"");

lib/src/interfaces/Options.ts

@@ -336,6 +336,11 @@ export interface OptionsTopBarBackButton {
    * Image to show as the back button
    */
   icon?: ImageResource;
+  /**
+   * SF Symbol to show as the back button
+   * #### (iOS 13+ specific)
+   */
+  sfSymbol?: string;
   /**
    * Weither the back button is visible or not
    * @default true
@@ -1010,6 +1015,16 @@ export interface OptionsBottomTab {
    * #### (Android specific)
    */
   popToRoot?: boolean;
+  /**
+   * Set the SF symbol as icon (will be used primarily)
+   * #### (iOS 13+ specific)
+   */
+  sfSymbol?: string;
+  /**
+   * Set the SF symbol as selected icon (will be used primarily)
+   * #### (iOS 13+ specific)
+   */
+  sfSelectedSymbol?: string;
 }
 
 export interface SideMenuSide {

website/docs/api/options-backButton.mdx

@@ -46,6 +46,14 @@ Change the default back button icon.
 | ------------------------------------------ | -------- | -------- |
 | [ImageResource](options-imageResource.mdx) | No       | Both     |
 
+### `sfSymbol`
+
+SF Symbol to show as the back button
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| string | No       | iOS 13+  |
+
 ### `showTitle`
 
 Show or hide the text displayed next to the back button.

website/docs/api/options-bottomTab.mdx

@@ -175,6 +175,23 @@ Overrides the text that's read by the screen reader when the user interacts with
 | ----- | -------- | -------- |
 | color | No       | Both     |
 
+### `sfSymbol`
+
+Set the SF symbol as icon (will be used primarily).
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| string | No       | iOS 13+  |
+
+
+### `sfSelectedSymbol`
+
+Set the SF symbol as selected icon (will be used primarily)
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| string | No       | iOS 13+  |
+
 ## DotIndicator
 
 ##### color?: color