react-native-navigation 7.21.0 → 7.22.0-snapshot.1649

package/lib/dist/NavigationDelegate.d.ts

@@ -48,7 +48,7 @@ export declare class NavigationDelegate {
     /**
      * Update a mounted component's props
      */
-    updateProps(componentId: string, props: object): void;
+    updateProps(componentId: string, props: object, callback?: () => void): void;
     /**
      * Show a screen as a modal.
      */

package/lib/dist/NavigationDelegate.js

@@ -63,8 +63,8 @@ class NavigationDelegate {
     /**
      * Update a mounted component's props
      */
-    updateProps(componentId, props) {
-        this.concreteNavigation.updateProps(componentId, props);
+    updateProps(componentId, props, callback) {
+        this.concreteNavigation.updateProps(componentId, props, callback);
     }
     /**
      * Show a screen as a modal.

package/lib/dist/adapters/TouchablePreview.js

@@ -46,6 +46,7 @@ class TouchablePreview extends React.PureComponent {
                     this.props.onPeekIn();
                 }
             }
+            //@ts-ignore
             this.timeout = setTimeout(this.onTouchEnd, PREVIEW_TIMEOUT);
         };
         this.onTouchEnd = () => {

package/lib/dist/commands/Commands.d.ts

@@ -23,7 +23,7 @@ export declare class Commands {
     setRoot(simpleApi: LayoutRoot): Promise<any>;
     setDefaultOptions(options: Options): void;
     mergeOptions(componentId: string, options: Options): void;
-    updateProps(componentId: string, props: object): void;
+    updateProps(componentId: string, props: object, callback?: () => void): void;
     showModal(layout: Layout): Promise<any>;
     dismissModal(componentId: string, mergeOptions?: Options): Promise<any>;
     dismissAllModals(mergeOptions?: Options): Promise<any>;

package/lib/dist/commands/Commands.js

@@ -63,8 +63,8 @@ class Commands {
         this.nativeCommandsSender.mergeOptions(componentId, input);
         this.commandsObserver.notify(CommandName_1.CommandName.MergeOptions, { componentId, options });
     }
-    updateProps(componentId, props) {
-        this.store.updateProps(componentId, props);
+    updateProps(componentId, props, callback) {
+        this.store.updateProps(componentId, props, callback);
         this.commandsObserver.notify(CommandName_1.CommandName.UpdateProps, { componentId, props });
     }
     showModal(layout) {

package/lib/dist/commands/OptionsProcessor.js

@@ -73,14 +73,20 @@ class OptionsProcessor {
                 options[key] = 'NoColor';
             }
             else if (value instanceof Object) {
-                if ('dynamic' in value) {
-                    options[key].dynamic.light = this.colorService.toNativeColor(value.dynamic.light);
-                    options[key].dynamic.dark = this.colorService.toNativeColor(value.dynamic.dark);
+                if ('semantic' in value) {
+                    options[key] = value;
+                }
+                else if ('dynamic' in value) {
+                    options[key] = react_native_1.DynamicColorIOS({
+                        light: this.colorService.toNativeColor(value.dynamic.light),
+                        dark: this.colorService.toNativeColor(value.dynamic.dark),
+                    });
                 }
                 else {
-                    options[key].light = this.colorService.toNativeColor(value.light);
-                    options[key].dark = this.colorService.toNativeColor(value.dark);
-                    options[key] = react_native_1.DynamicColorIOS(options[key]);
+                    options[key] = react_native_1.DynamicColorIOS({
+                        light: this.colorService.toNativeColor(value.light),
+                        dark: this.colorService.toNativeColor(value.dark)
+                    });
                 }
             }
             else {

package/lib/dist/components/ComponentWrapper.d.ts

@@ -3,7 +3,7 @@ import { ComponentProvider } from 'react-native';
 import { Store } from './Store';
 import { ComponentEventsObserver } from '../events/ComponentEventsObserver';
 export interface IWrappedComponent extends React.Component {
-    setProps(newProps: Record<string, any>): void;
+    setProps(newProps: Record<string, any>, callback?: () => void): void;
     isMounted: boolean;
 }
 export declare class ComponentWrapper {

package/lib/dist/components/ComponentWrapper.js

@@ -30,13 +30,13 @@ class ComponentWrapper {
             get isMounted() {
                 return this._isMounted;
             }
-            setProps(newProps) {
+            setProps(newProps, callback) {
                 this.setState((prevState) => ({
                     allProps: {
                         ...prevState.allProps,
                         ...newProps,
                     },
-                }));
+                }), callback);
             }
             componentDidMount() {
                 this._isMounted = true;

package/lib/dist/components/Modal.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+export interface RNNModalProps extends ViewProps {
+    visible: boolean;
+    transparent: boolean;
+    blurOnUnmount: boolean;
+    animationType: 'none' | 'fade' | 'slide';
+    onShow?: () => any;
+    onRequestClose: () => any;
+}
+export declare class Modal extends React.Component<RNNModalProps> {
+    static defaultProps: {
+        transparent: boolean;
+        blurOnUnmount: boolean;
+        animationType: string;
+    };
+    constructor(props: RNNModalProps);
+    render(): JSX.Element | null;
+    private proccessProps;
+}

package/lib/dist/components/Modal.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_native_ui_lib_1 = require("react-native-ui-lib");
+const RNNModalViewManager = react_native_1.requireNativeComponent('RNNModalViewManager');
+class Modal extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const processed = this.proccessProps();
+        if (this.props.visible) {
+            return (react_1.default.createElement(RNNModalViewManager, Object.assign({}, processed),
+                react_1.default.createElement(react_native_ui_lib_1.View, { style: styles.container, collapsable: false }, this.props.children)));
+        }
+        else {
+            return null;
+        }
+    }
+    proccessProps() {
+        const processed = { ...this.props, style: styles.modal };
+        if (this.props.animationType === 'none') {
+            processed.animation = {
+                showModal: { enabled: false },
+                dismissModal: { enabled: false },
+            };
+        }
+        else {
+            const isSlide = this.props.animationType === 'slide';
+            processed.animation = {
+                showModal: {
+                    enter: isSlide ? showModalSlideEnterAnimations : showModalFadeEnterAnimations,
+                },
+                dismissModal: {
+                    exit: isSlide ? dismissModalSlideExitAnimations : dismissModalFadeExitAnimations,
+                },
+            };
+        }
+        return processed;
+    }
+}
+exports.Modal = Modal;
+Modal.defaultProps = {
+    transparent: false,
+    blurOnUnmount: false,
+    animationType: 'slide',
+};
+const height = Math.round(react_native_1.Dimensions.get('window').height);
+const SCREEN_ANIMATION_DURATION = 500;
+const showModalSlideEnterAnimations = {
+    translationY: {
+        from: height,
+        to: 0,
+        duration: SCREEN_ANIMATION_DURATION,
+        interpolation: { type: 'decelerate' },
+    },
+};
+const dismissModalSlideExitAnimations = {
+    translationY: {
+        from: 0,
+        to: height,
+        duration: SCREEN_ANIMATION_DURATION,
+        interpolation: { type: 'decelerate' },
+    },
+};
+const showModalFadeEnterAnimations = {
+    alpha: {
+        from: 0,
+        to: 1,
+        duration: SCREEN_ANIMATION_DURATION,
+        interpolation: { type: 'decelerate' },
+    },
+};
+const dismissModalFadeExitAnimations = {
+    alpha: {
+        from: 1,
+        to: 0,
+        duration: SCREEN_ANIMATION_DURATION,
+        interpolation: { type: 'decelerate' },
+    },
+};
+const styles = react_native_1.StyleSheet.create({
+    modal: {
+        position: 'absolute',
+    },
+    container: {
+        top: 0,
+        flex: 1,
+    },
+});

package/lib/dist/components/Store.d.ts

@@ -7,7 +7,7 @@ export declare class Store {
     private componentsInstancesById;
     private wrappedComponents;
     private lazyRegistratorFn;
-    updateProps(componentId: string, props: any): void;
+    updateProps(componentId: string, props: any, callback?: () => void): void;
     getPropsForId(componentId: string): any;
     mergeNewPropsForId(componentId: string, newProps: any): void;
     clearComponent(componentId: string): void;

package/lib/dist/components/Store.js

@@ -8,11 +8,11 @@ class Store {
         this.componentsInstancesById = {};
         this.wrappedComponents = {};
     }
-    updateProps(componentId, props) {
+    updateProps(componentId, props, callback) {
         this.mergeNewPropsForId(componentId, props);
         const component = this.componentsInstancesById[componentId];
         if (component) {
-            this.componentsInstancesById[componentId].setProps(props);
+            this.componentsInstancesById[componentId].setProps(props, callback);
         }
     }
     getPropsForId(componentId) {

package/lib/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { NavigationDelegate } from './NavigationDelegate';
 export declare const Navigation: NavigationDelegate;
+export * from './components/Modal';
 export * from './events/EventsRegistry';
 export * from './adapters/Constants';
 export * from './interfaces/ComponentEvents';

package/lib/dist/index.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const NavigationDelegate_1 = require("./NavigationDelegate");
 const navigationDelegate = new NavigationDelegate_1.NavigationDelegate();
 exports.Navigation = navigationDelegate;
+tslib_1.__exportStar(require("./components/Modal"), exports);
 tslib_1.__exportStar(require("./events/EventsRegistry"), exports);
 tslib_1.__exportStar(require("./adapters/Constants"), exports);
 tslib_1.__exportStar(require("./interfaces/ComponentEvents"), exports);

package/lib/dist/interfaces/Options.d.ts

@@ -283,6 +283,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
@@ -930,6 +935,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 {
     /**

package/lib/ios/BottomTabPresenter.h

@@ -1,7 +1,10 @@
 #import "RNNBasePresenter.h"
-
+#import "RNNTabBarItemCreator.h"
 @interface BottomTabPresenter : RNNBasePresenter
 
+- (instancetype)initWithDefaultOptions:(RNNNavigationOptions *)defaultOptions
+                            tabCreator:(RNNTabBarItemCreator *)tabCreator;
+
 - (void)applyOptions:(RNNNavigationOptions *)options child:(UIViewController *)child;
 
 - (void)applyOptionsOnWillMoveToParentViewController:(RNNNavigationOptions *)options

package/lib/ios/BottomTabPresenter.m

@@ -3,7 +3,16 @@
 #import "UIViewController+LayoutProtocol.h"
 #import "UIViewController+RNNOptions.h"
 
-@implementation BottomTabPresenter
+@implementation BottomTabPresenter {
+    RNNTabBarItemCreator *_tabCreator;
+}
+
+- (instancetype)initWithDefaultOptions:(RNNNavigationOptions *)defaultOptions
+                            tabCreator:(RNNTabBarItemCreator *)tabCreator {
+    self = [super initWithDefaultOptions:defaultOptions];
+    _tabCreator = tabCreator;
+    return self;
+}
 
 - (void)applyOptions:(RNNNavigationOptions *)options child:(UIViewController *)child {
     RNNNavigationOptions *withDefault = [options withDefault:self.defaultOptions];
@@ -37,8 +46,7 @@
 
 - (void)createTabBarItem:(UIViewController *)child
         bottomTabOptions:(RNNBottomTabOptions *)bottomTabOptions {
-    child.tabBarItem = [RNNTabBarItemCreator createTabBarItem:bottomTabOptions
-                                                    mergeItem:child.tabBarItem];
+    child.tabBarItem = [_tabCreator createTabBarItem:bottomTabOptions mergeItem:child.tabBarItem];
 }
 
 @end

package/lib/ios/BottomTabPresenterCreator.m

@@ -1,14 +1,21 @@
 #import "BottomTabPresenterCreator.h"
-#import "BottomTabAppearancePresenter.h"
+#import "RNNTabBarItemCreator.h"
+#import "TabBarItemAppearanceCreator.h"
+#import "TabBarItemIOS15Creator.h"
 
 @implementation BottomTabPresenterCreator
 
 + (BottomTabPresenter *)createWithDefaultOptions:(RNNNavigationOptions *)defaultOptions {
-    if (@available(iOS 13.0, *)) {
-        return [[BottomTabAppearancePresenter alloc] initWithDefaultOptions:defaultOptions];
+    RNNTabBarItemCreator *tabCreator;
+    if (@available(iOS 15.0, *)) {
+        tabCreator = [TabBarItemIOS15Creator new];
+    } else if (@available(iOS 13.0, *)) {
+        tabCreator = [TabBarItemAppearanceCreator new];
     } else {
-        return [[BottomTabPresenter alloc] initWithDefaultOptions:defaultOptions];
+        tabCreator = [RNNTabBarItemCreator new];
     }
+
+    return [[BottomTabPresenter alloc] initWithDefaultOptions:defaultOptions tabCreator:tabCreator];
 }
 
 @end

package/lib/ios/BottomTabsAppearancePresenter.m

@@ -28,8 +28,14 @@
 
 - (void)setTabBarBackgroundColor:(UIColor *)backgroundColor {
     [self setTabBarOpaqueBackground];
-    for (UIViewController *childViewController in self.tabBarController.childViewControllers)
+    for (UIViewController *childViewController in self.tabBarController.childViewControllers) {
         childViewController.tabBarItem.standardAppearance.backgroundColor = backgroundColor;
+#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 150000
+        if (@available(iOS 15.0, *)) {
+            childViewController.tabBarItem.scrollEdgeAppearance.backgroundColor = backgroundColor;
+        }
+#endif
+    }
 }
 
 - (void)setTabBarTranslucent:(BOOL)translucent {
@@ -46,18 +52,37 @@
 }
 
 - (void)setTabBarTranslucentBackground {
-    for (UIViewController *childViewController in self.tabBarController.childViewControllers)
+    for (UIViewController *childViewController in self.tabBarController.childViewControllers) {
         [childViewController.tabBarItem.standardAppearance configureWithDefaultBackground];
+#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 150000
+        if (@available(iOS 15.0, *)) {
+            [childViewController.tabBarItem.scrollEdgeAppearance configureWithDefaultBackground];
+        }
+#endif
+    }
 }
 
 - (void)setTabBarTransparentBackground {
-    for (UIViewController *childViewController in self.tabBarController.childViewControllers)
+    for (UIViewController *childViewController in self.tabBarController.childViewControllers) {
         [childViewController.tabBarItem.standardAppearance configureWithTransparentBackground];
+#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 150000
+        if (@available(iOS 15.0, *)) {
+            [childViewController.tabBarItem
+                    .scrollEdgeAppearance configureWithTransparentBackground];
+        }
+#endif
+    }
 }
 
 - (void)setTabBarOpaqueBackground {
-    for (UIViewController *childViewController in self.tabBarController.childViewControllers)
+    for (UIViewController *childViewController in self.tabBarController.childViewControllers) {
         [childViewController.tabBarItem.standardAppearance configureWithOpaqueBackground];
+#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 150000
+        if (@available(iOS 15.0, *)) {
+            [childViewController.tabBarItem.scrollEdgeAppearance configureWithOpaqueBackground];
+        }
+#endif
+    }
 }
 
 @end

package/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;

package/lib/ios/RNNBackButtonOptions.m

@@ -7,6 +7,7 @@
 
     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 @@
         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

package/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;
 

package/lib/ios/RNNBottomTabOptions.m

@@ -29,6 +29,8 @@
     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 @@
         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 @@
            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

package/lib/ios/RNNBottomTabsController.m

@@ -40,6 +40,11 @@
     if (@available(iOS 13.0, *)) {
         self.tabBar.standardAppearance = [UITabBarAppearance new];
     }
+#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 150000
+    if (@available(iOS 15.0, *)) {
+        self.tabBar.scrollEdgeAppearance = [UITabBarAppearance new];
+    }
+#endif
 
     self.longPressRecognizer =
         [[UILongPressGestureRecognizer alloc] initWithTarget:self

package/lib/ios/RNNDotIndicatorPresenter.m

@@ -49,12 +49,18 @@
     if ([self hasIndicator:child])
         [self remove:child];
 
+    UITabBarController *bottomTabs = [self getTabBarController:child];
+    int index = (int)[[bottomTabs childViewControllers] indexOfObject:child];
+    UIView *tabIcon = [bottomTabs getTabIcon:index];
+
+    if (!tabIcon) {
+        return;
+    }
+
     UIView *indicator = [self createIndicator:options];
     [child tabBarItem].tag = indicator.tag;
 
-    UITabBarController *bottomTabs = [self getTabBarController:child];
-    int index = (int)[[bottomTabs childViewControllers] indexOfObject:child];
-    [[bottomTabs getTabView:index] addSubview:indicator];
+    [tabIcon addSubview:indicator];
     [self applyConstraints:options badge:indicator tabBar:bottomTabs index:index];
 }
 
@@ -85,14 +91,14 @@
     if (![self hasIndicator:child])
         return NO;
     UIView *currentIndicator = [self getCurrentIndicator:child];
-    return
-        [[currentIndicator backgroundColor] isEqual:[options.color withDefault:[UIColor redColor]]];
+
+    return [[currentIndicator backgroundColor] isEqual:[options.color withDefault:[UIColor redColor]]];
 }
 
 - (UIView *)getCurrentIndicator:(UIViewController *)child {
     UITabBarController *bottomTabs = [self getTabBarController:child];
     int tabIndex = (int)[[bottomTabs childViewControllers] indexOfObject:child];
-    return [[bottomTabs getTabView:tabIndex] viewWithTag:[child tabBarItem].tag];
+    return [[bottomTabs getTabIcon:tabIndex] viewWithTag:[child tabBarItem].tag];
 }
 
 - (BOOL)hasIndicator:(UIViewController *)child {

package/lib/ios/RNNSegmentedControl.h

@@ -1,4 +1,4 @@
-#import "HMSegmentedControl.h"
+#import <HMSegmentedControl/HMSegmentedControl.h>
 #import <Foundation/Foundation.h>
 
 @interface RNNSegmentedControl : HMSegmentedControl

package/lib/ios/RNNTabBarItemCreator.h

@@ -4,14 +4,14 @@
 
 @interface RNNTabBarItemCreator : NSObject
 
-+ (UITabBarItem *)createTabBarItem:(RNNBottomTabOptions *)bottomTabOptions
+- (UITabBarItem *)createTabBarItem:(RNNBottomTabOptions *)bottomTabOptions
                          mergeItem:(UITabBarItem *)mergeItem;
 
-+ (UITabBarItem *)createTabBarItem:(UITabBarItem *)mergeItem;
+- (UITabBarItem *)createTabBarItem:(UITabBarItem *)mergeItem;
 
-+ (void)setTitleAttributes:(UITabBarItem *)tabItem titleAttributes:(NSDictionary *)titleAttributes;
+- (void)setTitleAttributes:(UITabBarItem *)tabItem titleAttributes:(NSDictionary *)titleAttributes;
 
-+ (void)setSelectedTitleAttributes:(UITabBarItem *)tabItem
+- (void)setSelectedTitleAttributes:(UITabBarItem *)tabItem
            selectedTitleAttributes:(NSDictionary *)selectedTitleAttributes;
 
 @end

package/lib/ios/RNNTabBarItemCreator.m

@@ -4,11 +4,11 @@
 
 @implementation RNNTabBarItemCreator
 
-+ (UITabBarItem *)createTabBarItem:(UITabBarItem *)mergeItem {
+- (UITabBarItem *)createTabBarItem:(UITabBarItem *)mergeItem {
     return [UITabBarItem new];
 }
 
-+ (UITabBarItem *)createTabBarItem:(RNNBottomTabOptions *)bottomTabOptions
+- (UITabBarItem *)createTabBarItem:(RNNBottomTabOptions *)bottomTabOptions
                          mergeItem:(UITabBarItem *)mergeItem {
     UITabBarItem *tabItem = [self createTabBarItem:mergeItem];
     UIImage *icon = [bottomTabOptions.icon withDefault:nil];
@@ -16,6 +16,16 @@
     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];
@@ -44,7 +54,7 @@
     return tabItem;
 }
 
-+ (UIImage *)getSelectedIconImage:(UIImage *)selectedIcon
+- (UIImage *)getSelectedIconImage:(UIImage *)selectedIcon
                 selectedIconColor:(UIColor *)selectedIconColor {
     if (selectedIcon) {
         if (selectedIconColor) {
@@ -58,7 +68,7 @@
     return nil;
 }
 
-+ (UIImage *)getIconImage:(UIImage *)icon withTint:(UIColor *)tintColor {
+- (UIImage *)getIconImage:(UIImage *)icon withTint:(UIColor *)tintColor {
     if (icon) {
         if (tintColor) {
             return [[icon withTintColor:tintColor]
@@ -71,7 +81,7 @@
     return nil;
 }
 
-+ (void)appendTitleAttributes:(UITabBarItem *)tabItem
+- (void)appendTitleAttributes:(UITabBarItem *)tabItem
              bottomTabOptions:(RNNBottomTabOptions *)bottomTabOptions {
     UIColor *textColor = [bottomTabOptions.textColor withDefault:[UIColor blackColor]];
     UIColor *selectedTextColor =
@@ -97,11 +107,11 @@
     [self setTitleAttributes:tabItem titleAttributes:normalAttributes];
 }
 
-+ (void)setTitleAttributes:(UITabBarItem *)tabItem titleAttributes:(NSDictionary *)titleAttributes {
+- (void)setTitleAttributes:(UITabBarItem *)tabItem titleAttributes:(NSDictionary *)titleAttributes {
     [tabItem setTitleTextAttributes:titleAttributes forState:UIControlStateNormal];
 }
 
-+ (void)setSelectedTitleAttributes:(UITabBarItem *)tabItem
+- (void)setSelectedTitleAttributes:(UITabBarItem *)tabItem
            selectedTitleAttributes:(NSDictionary *)selectedTitleAttributes {
     [tabItem setTitleTextAttributes:selectedTitleAttributes forState:UIControlStateSelected];
 }