react-native-navigation 7.30.0-alpha.1-snapshot.722 → 7.30.0

package/ReactNativeNavigation.podspec

@@ -21,13 +21,13 @@ Pod::Spec.new do |s|
     s.exclude_files       = "lib/ios/ReactNativeNavigationTests/**/*.*", "lib/ios/OCMock/**/*.*"
   end
   
-  s.subspec 'Fabric' do |ss|
-    ss.xcconfig = { "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost-for-react-native\" \"$(PODS_ROOT)/RCT-Folly\"",
-                    "OTHER_CFLAGS" => "$(inherited) -DRN_FABRIC_ENABLED -DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1" }
-    ss.dependency 'React-RCTFabric'
-    ss.dependency 'React-Fabric'
-    ss.dependency 'RCT-Folly/Fabric'
-  end
+  # s.subspec 'Fabric' do |ss|
+  #   ss.xcconfig = { "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost-for-react-native\" \"$(PODS_ROOT)/RCT-Folly\"",
+  #                   "OTHER_CFLAGS" => "$(inherited) -DRN_FABRIC_ENABLED -DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1" }
+  #   ss.dependency 'React-RCTFabric'
+  #   ss.dependency 'React-Fabric'
+  #   ss.dependency 'RCT-Folly/Fabric'
+  # end
 
   s.dependency 'React-Core'
   s.dependency 'React-RCTImage'

package/jest-setup.js

@@ -4,9 +4,6 @@ mockDetox(() => require('./playground/index'));
 
 beforeEach(() => {
   const { mockNativeComponents } = require('react-native-navigation/Mock');
-  setTimeout = (func) => {
-    func();
-  };
   mockNativeComponents();
   mockUILib();
 });

package/jest.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   preset: 'react-native',
   transformIgnorePatterns: [
-    'node_modules/(?!(@react-native|react-native|react-native-ui-lib|react-native-animatable)/)',
+    'node_modules/(?!(@react-native|react-native|react-native-ui-lib|react-native-animatable|react-native-reanimated)/)',
   ],
   transform: {
     '\\.[jt]sx?$': 'babel-jest',

package/lib/Mock/Components/NavigationButton.tsx

@@ -45,8 +45,10 @@ export const NavigationButton = class extends Component<ButtonProps> {
       <TouchableOpacity
         onPress={() => {
           if (this.ref) {
-            // @ts-ignore
-            this.invokeOnClick(this.ref!._reactInternalFiber.return.stateNode);
+            this.invokeOnClick(
+              // @ts-ignore
+              (this.ref!._reactInternalFiber || this.ref!._reactInternals).return.stateNode
+            );
           }
 
           events.invokeNavigationButtonPressed({

package/lib/android/app/build.gradle

@@ -12,9 +12,9 @@ def safeExtGetFallbackLowerBound(prop, fallback) {
     Math.max(safeExtGet(prop,fallback),fallback)
 }
 
-def DEFAULT_COMPILE_SDK_VERSION = 33
+def DEFAULT_COMPILE_SDK_VERSION = 30
 def DEFAULT_MIN_SDK_VERSION = 21
-def DEFAULT_TARGET_SDK_VERSION = 33
+def DEFAULT_TARGET_SDK_VERSION = 30
 def DEFAULT_KOTLIN_VERSION = "1.5.31"
 def DEFAULT_KOTLIN_STDLIB = 'kotlin-stdlib-jdk8'
 def kotlinVersion = safeExtGet("RNNKotlinVersion", DEFAULT_KOTLIN_VERSION)
@@ -22,7 +22,7 @@ def kotlinStdlib = safeExtGet('RNNKotlinStdlib',DEFAULT_KOTLIN_STDLIB )
 def kotlinCoroutinesCore = safeExtGet('RNNKotlinCoroutinesCore', '1.5.2')
 android {
     compileSdkVersion safeExtGetFallbackLowerBound('compileSdkVersion', DEFAULT_COMPILE_SDK_VERSION)
-    buildToolsVersion = "33.0.0"
+
     defaultConfig {
         minSdkVersion safeExtGetFallbackLowerBound('minSdkVersion', DEFAULT_MIN_SDK_VERSION)
         targetSdkVersion safeExtGetFallbackLowerBound('targetSdkVersion', DEFAULT_TARGET_SDK_VERSION)
@@ -65,11 +65,11 @@ android {
         }
     }
     compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
+        sourceCompatibility JavaVersion.VERSION_11
+        targetCompatibility JavaVersion.VERSION_11
     }
     kotlinOptions {
-        jvmTarget = JavaVersion.VERSION_1_8
+        jvmTarget = JavaVersion.VERSION_11
     }
 
     flavorDimensions "RNN.reactNativeVersion"
@@ -167,27 +167,6 @@ List reactNativeVersionComponents(rnPackageJsonFile) {
     return reactNativeVersion.tokenize('-')[0].tokenize('.')
 }
 
-task installBuildToolsAndRenameD8IfNeeded {
-    def buildToolsVersion = android.getBuildToolsVersion()
-    def sdkDir = android.sdkDirectory
-    def buildToolsDir = new File(sdkDir, "/build-tools/" + buildToolsVersion)
-
-    if (!buildToolsDir.exists()) {
-        def command = sdkDir.absolutePath + "/cmdline-tools/latest/bin/sdkmanager build-tools;" + buildToolsVersion
-        command.execute().waitForProcessOutput(System.out, System.err)
-    }
-
-    def d8File = new File(buildToolsDir, "d8")
-    def dxFile = new File(buildToolsDir, "dx")
-    d8File.renameTo(dxFile)
-
-    def buildToolsLibDir = new File(buildToolsDir, "lib")
-    d8File = new File(buildToolsLibDir, "d8.jar")
-    dxFile = new File(buildToolsLibDir, "dx.jar")
-    d8File.renameTo(dxFile)
-}
-build.dependsOn installBuildToolsAndRenameD8IfNeeded
-
 dependencies {
 
     implementation "androidx.core:core-ktx:1.6.0"

package/lib/android/app/src/main/AndroidManifest.xml

@@ -1,9 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools"
-    package="com.reactnativenavigation">
+          package="com.reactnativenavigation">
 
-    <application
-        android:enableOnBackInvokedCallback="true">
+    <application>
         <activity
             android:name="com.facebook.react.devsupport.DevSettingsActivity"
             android:exported="false"/>

package/lib/android/app/src/main/java/com/reactnativenavigation/NavigationActivity.java

@@ -22,7 +22,6 @@ import com.reactnativenavigation.viewcontrollers.child.ChildControllersRegistry;
 import com.reactnativenavigation.viewcontrollers.modal.ModalStack;
 import com.reactnativenavigation.viewcontrollers.navigator.Navigator;
 
-import androidx.activity.OnBackPressedCallback;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.appcompat.app.AppCompatActivity;
@@ -48,7 +47,6 @@ public class NavigationActivity extends AppCompatActivity implements DefaultHard
         );
         navigator.bindViews();
         getReactGateway().onActivityCreated(this);
-        setBackPressedCallback();
     }
 
     @Override
@@ -105,6 +103,11 @@ public class NavigationActivity extends AppCompatActivity implements DefaultHard
         getReactGateway().onActivityResult(this, requestCode, resultCode, data);
     }
 
+    @Override
+    public void onBackPressed() {
+        getReactGateway().onBackPressed();
+    }
+
     @Override
     public boolean onKeyUp(final int keyCode, final KeyEvent event) {
         return getReactGateway().onKeyUp(this, keyCode) || super.onKeyUp(keyCode, event);
@@ -149,14 +152,4 @@ public class NavigationActivity extends AppCompatActivity implements DefaultHard
     public void onCatalystInstanceDestroy() {
         runOnUiThread(() -> navigator.destroyViews());
     }
-
-    private void setBackPressedCallback() {
-        OnBackPressedCallback callback = new OnBackPressedCallback(true) {
-            @Override
-            public void handleOnBackPressed() {
-                getReactGateway().onBackPressed();
-            }
-        };
-        getOnBackPressedDispatcher().addCallback(this, callback);
-    }
 }

package/lib/android/app/src/main/java/com/reactnativenavigation/options/TopBarOptions.java

@@ -50,6 +50,8 @@ public class TopBarOptions {
         options.leftButtonColor = ThemeColour.parse(context, json.optJSONObject("leftButtonColor"));
         options.leftButtonDisabledColor = ThemeColour.parse(context, json.optJSONObject("leftButtonDisabledColor"));
         options.rightButtonDisabledColor = ThemeColour.parse(context, json.optJSONObject("rightButtonDisabledColor"));
+        options.leftButtonBackgroundColor = ThemeColour.parse(context, json.optJSONObject("leftButtonBackgroundColor"));
+        options.rightButtonBackgroundColor = ThemeColour.parse(context, json.optJSONObject("rightButtonBackgroundColor"));
 
         options.validate();
         return options;
@@ -76,6 +78,8 @@ public class TopBarOptions {
     public ThemeColour leftButtonColor = new NullThemeColour();
     public ThemeColour rightButtonDisabledColor = new NullThemeColour();
     public ThemeColour leftButtonDisabledColor = new NullThemeColour();
+    public ThemeColour rightButtonBackgroundColor = new NullThemeColour();
+    public ThemeColour leftButtonBackgroundColor = new NullThemeColour();
 
     public TopBarOptions copy() {
         TopBarOptions result = new TopBarOptions();
@@ -94,6 +98,8 @@ public class TopBarOptions {
         if (other.leftButtonColor.hasValue()) leftButtonColor = other.leftButtonColor;
         if (other.rightButtonDisabledColor.hasValue()) rightButtonDisabledColor = other.rightButtonDisabledColor;
         if (other.leftButtonDisabledColor.hasValue()) leftButtonDisabledColor = other.leftButtonDisabledColor;
+        if (other.rightButtonBackgroundColor.hasValue()) rightButtonBackgroundColor = other.rightButtonBackgroundColor;
+        if (other.leftButtonBackgroundColor.hasValue()) rightButtonBackgroundColor = other.rightButtonBackgroundColor;
 
         if (other.testId.hasValue()) testId = other.testId;
         if (other.visible.hasValue()) visible = other.visible;
@@ -122,6 +128,8 @@ public class TopBarOptions {
         if (!leftButtonColor.hasValue()) leftButtonColor = defaultOptions.leftButtonColor;
         if (!rightButtonDisabledColor.hasValue()) rightButtonDisabledColor = defaultOptions.rightButtonDisabledColor;
         if (!leftButtonDisabledColor.hasValue()) leftButtonDisabledColor = defaultOptions.leftButtonDisabledColor;
+        if (!rightButtonBackgroundColor.hasValue()) rightButtonBackgroundColor = defaultOptions.rightButtonBackgroundColor;
+        if (!leftButtonBackgroundColor.hasValue()) rightButtonBackgroundColor = defaultOptions.rightButtonBackgroundColor;
 
         if (!visible.hasValue()) visible = defaultOptions.visible;
         if (!animate.hasValue()) animate = defaultOptions.animate;

package/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackPresenter.java

@@ -458,12 +458,12 @@ public class StackPresenter {
     private void mergeButtons(TopBarOptions options, TopBarOptions optionsToMerge, View child, StackController stack) {
         mergeRightButtons(options, optionsToMerge.buttons, child);
         mergeLeftButton(options, optionsToMerge.buttons, child);
-        mergeLeftButtonsColor(child, optionsToMerge.leftButtonColor, optionsToMerge.leftButtonDisabledColor);
-        mergeRightButtonsColor(child, optionsToMerge.rightButtonColor, optionsToMerge.rightButtonDisabledColor);
+        mergeLeftButtonsColor(child, optionsToMerge.leftButtonColor, optionsToMerge.leftButtonDisabledColor, optionsToMerge.leftButtonBackgroundColor);
+        mergeRightButtonsColor(child, optionsToMerge.rightButtonColor, optionsToMerge.rightButtonDisabledColor, optionsToMerge.rightButtonBackgroundColor);
         mergeBackButton(optionsToMerge.buttons, stack);
     }
 
-    private void mergeLeftButtonsColor(View child, ThemeColour color, ThemeColour disabledColor) {
+    private void mergeLeftButtonsColor(View child, ThemeColour color, ThemeColour disabledColor, ThemeColour backgroundColor) {
         if (color.hasValue() || disabledColor.hasValue()) {
             Map<String, ButtonController> stringButtonControllerMap = componentLeftButtons.get(child);
             if (stringButtonControllerMap != null) {
@@ -474,12 +474,15 @@ public class StackPresenter {
                     if (disabledColor.hasValue()) {
                         btnController.applyDisabledColor(topBarController.getView().getLeftButtonBar(), disabledColor);
                     }
+                    if (backgroundColor.hasValue()) {
+                        btnController.applyBackgroundColor(topBarController.getView().getLeftButtonBar(), backgroundColor);
+                    }
                 });
             }
         }
     }
 
-    private void mergeRightButtonsColor(View child, ThemeColour color, ThemeColour disabledColor) {
+    private void mergeRightButtonsColor(View child, ThemeColour color, ThemeColour disabledColor, ThemeColour backgroundColor) {
         if (color.hasValue() || disabledColor.hasValue()) {
             Map<String, ButtonController> stringButtonControllerMap = componentRightButtons.get(child);
             if (stringButtonControllerMap != null) {
@@ -490,6 +493,9 @@ public class StackPresenter {
                     if (disabledColor.hasValue()) {
                         btnController.applyDisabledColor(topBarController.getView().getRightButtonBar(), disabledColor);
                     }
+                    if (backgroundColor.hasValue()) {
+                        btnController.applyBackgroundColor(topBarController.getView().getRightButtonBar(), backgroundColor);
+                    }
                 });
             }
         }

package/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/topbar/button/ButtonController.kt

@@ -81,6 +81,8 @@ open class ButtonController(activity: Activity,
 
     open fun applyDisabledColor(toolbar: Toolbar, disabledColour: ThemeColour) = this.menuItem?.let { presenter.applyDisabledColor(toolbar, it, disabledColour) }
 
+    open fun applyBackgroundColor(toolbar: Toolbar, color: ThemeColour) = this.menuItem?.let { presenter.applyBackgroundColor(toolbar, it, color) }
+
     fun addToMenu(buttonBar: ButtonBar, order: Int) {
         if (button.component.hasValue() && buttonBar.containsButton(menuItem, order)) return
         buttonBar.menu.removeItem(button.intId)

package/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/topbar/button/ButtonPresenter.kt

@@ -71,10 +71,15 @@ open class ButtonPresenter(private val context: Context, private val button: But
         }
     }
 
+    fun applyBackgroundColor(toolbar: Toolbar, menuItem: MenuItem, color: ThemeColour) {
+        button.iconBackground.color = color
+        applyIcon(menuItem)
+    }
+
     private fun applyAccessibilityLabel(menuItem: MenuItem) {
         if (button.accessibilityLabel.hasValue()) {
             if (button.component.hasValue()) {
-                menuItem.actionView?.contentDescription = button.accessibilityLabel.get()
+                menuItem.actionView.contentDescription = button.accessibilityLabel.get()
             } else {
                 MenuItemCompat.setContentDescription(menuItem, button.accessibilityLabel.get())
             }

package/lib/android/app/src/main/java/com/reactnativenavigation/views/animations/BaseViewAnimator.kt

@@ -43,17 +43,17 @@ open class BaseViewAnimator<T : View>(
     private inner class AnimatorListener(private val startState: AnimationState, private val endVisibility: Int) : AnimatorListenerAdapter() {
         var isCancelled = false
 
-        override fun onAnimationStart(animation: Animator) {
+        override fun onAnimationStart(animation: Animator?) {
             view.resetViewProperties()
             view.visibility = View.VISIBLE
             animationState = startState
         }
 
-        override fun onAnimationCancel(animation: Animator) {
+        override fun onAnimationCancel(animation: Animator?) {
             isCancelled = true
         }
 
-        override fun onAnimationEnd(animation: Animator) {
+        override fun onAnimationEnd(animation: Animator?) {
             if (!isCancelled) {
                 animationState = AnimationState.Idle
                 view.visibility = endVisibility

package/lib/android/app/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/IconBackgroundDrawable.kt

@@ -68,15 +68,17 @@ class IconBackgroundDrawable(
         super.setBounds(r)
     }
 
-    override fun onBoundsChange(bounds: Rect) {
-        backgroundRect = Rect((bounds.width() - backgroundWidth) / 2,
-                (bounds.height() - backgroundHeight) / 2,
-                bounds.width() - (bounds.width() - backgroundWidth) / 2,
-                bounds.height() - (bounds.height() - backgroundHeight) / 2)
-        bitmapRect = Rect((bounds.width() - bitmapWidth) / 2,
-                (bounds.height() - bitmapHeight) / 2,
-                bounds.width() - (bounds.width() - bitmapWidth) / 2,
-                bounds.height() - (bounds.height() - bitmapHeight) / 2)
+    override fun onBoundsChange(bounds: Rect?) {
+        if (bounds != null) {
+            backgroundRect = Rect((bounds.width() - backgroundWidth) / 2,
+                    (bounds.height() - backgroundHeight) / 2,
+                    bounds.width() - (bounds.width() - backgroundWidth) / 2,
+                    bounds.height() - (bounds.height() - backgroundHeight) / 2)
+            bitmapRect = Rect((bounds.width() - bitmapWidth) / 2,
+                    (bounds.height() - bitmapHeight) / 2,
+                    bounds.width() - (bounds.width() - bitmapWidth) / 2,
+                    bounds.height() - (bounds.height() - bitmapHeight) / 2)
+        }
         super.onBoundsChange(bounds)
     }
 

package/lib/dist/Mock/Components/NavigationButton.js

@@ -31,8 +31,9 @@ const NavigationButton = class extends react_1.Component {
         const props = react_native_navigation_1.Navigation.mock.store.getPropsForId(buttonComponentId);
         return (react_1.default.createElement(react_native_1.TouchableOpacity, { onPress: () => {
                 if (this.ref) {
+                    this.invokeOnClick(
                     // @ts-ignore
-                    this.invokeOnClick(this.ref._reactInternalFiber.return.stateNode);
+                    (this.ref._reactInternalFiber || this.ref._reactInternals).return.stateNode);
                 }
                 EventsStore_1.events.invokeNavigationButtonPressed({
                     buttonId: button.id,

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

@@ -568,6 +568,8 @@ export interface OptionsTopBar {
      */
     leftButtonColor?: Color;
     rightButtonColor?: Color;
+    leftButtonBackgroundColor?: Color;
+    rightButtonBackgroundColor?: Color;
     leftButtonDisabledColor?: Color;
     rightButtonDisabledColor?: Color;
     /**

package/lib/ios/RNNButtonOptions.h

@@ -25,7 +25,7 @@
 
 - (RNNButtonOptions *)withDefault:(RNNButtonOptions *)defaultOptions;
 
-- (UIColor *)resolveColor;
+- (Color *)resolveColor;
 
 - (RNNButtonOptions *)withDefaultColor:(Color *)color disabledColor:(Color *)disabledColor;
 
@@ -33,4 +33,6 @@
 
 - (BOOL)isEnabled;
 
+- (UIControlState)state;
+
 @end

package/lib/ios/RNNButtonOptions.m

@@ -93,11 +93,11 @@
     return [self.enabled withDefault:YES];
 }
 
-- (UIColor *)resolveColor {
+- (Color *)resolveColor {
     if (![_enabled withDefault:YES] && _disabledColor.hasValue)
-        return _disabledColor.get;
+        return _disabledColor;
     else
-        return [_color withDefault:nil];
+        return _color;
 }
 
 - (RNNButtonOptions *)withDefault:(RNNButtonOptions *)defaultOptions {
@@ -116,4 +116,8 @@
     return self;
 }
 
+- (UIControlState)state {
+    return self.isEnabled ? UIControlStateNormal : UIControlStateDisabled;
+}
+
 @end

package/lib/ios/RNNButtonsPresenter.h

@@ -20,9 +20,13 @@
      defaultDisabledColor:(Color *)defaultDisabledColor
                  animated:(BOOL)animated;
 
-- (void)applyLeftButtonsColor:(UIColor *)color;
+- (void)applyLeftButtonsColor:(Color *)color;
 
-- (void)applyRightButtonsColor:(UIColor *)color;
+- (void)applyRightButtonsColor:(Color *)color;
+
+- (void)applyLeftButtonsBackgroundColor:(Color *)color;
+
+- (void)applyRightButtonsBackgroundColor:(Color *)color;
 
 - (void)componentWillAppear;
 

package/lib/ios/RNNButtonsPresenter.m

@@ -47,15 +47,27 @@
         defaultDisabledColor:defaultDisabledColor];
 }
 
-- (void)applyLeftButtonsColor:(UIColor *)color {
+- (void)applyLeftButtonsColor:(Color *)color {
     for (RNNUIBarButtonItem *button in self.viewController.navigationItem.leftBarButtonItems) {
-        [button applyColor:color];
+        [button mergeColor:color];
     }
 }
 
-- (void)applyRightButtonsColor:(UIColor *)color {
+- (void)applyRightButtonsColor:(Color *)color {
     for (RNNUIBarButtonItem *button in self.viewController.navigationItem.rightBarButtonItems) {
-        [button applyColor:color];
+        [button mergeColor:color];
+    }
+}
+
+- (void)applyRightButtonsBackgroundColor:(Color *)color {
+    for (RNNUIBarButtonItem *button in self.viewController.navigationItem.rightBarButtonItems) {
+        [button mergeBackgroundColor:color];
+    }
+}
+
+- (void)applyLeftButtonsBackgroundColor:(Color *)color {
+    for (RNNUIBarButtonItem *button in self.viewController.navigationItem.leftBarButtonItems) {
+        [button mergeBackgroundColor:color];
     }
 }
 

package/lib/ios/RNNComponentPresenter.m

@@ -209,11 +209,19 @@
     }
 
     if (mergeOptions.topBar.leftButtonColor.hasValue) {
-        [_buttonsPresenter applyLeftButtonsColor:mergeOptions.topBar.leftButtonColor.get];
+        [_buttonsPresenter applyLeftButtonsColor:mergeOptions.topBar.leftButtonColor];
     }
 
     if (mergeOptions.topBar.rightButtonColor.hasValue) {
-        [_buttonsPresenter applyRightButtonsColor:mergeOptions.topBar.rightButtonColor.get];
+        [_buttonsPresenter applyRightButtonsColor:mergeOptions.topBar.rightButtonColor];
+    }
+    
+    if (mergeOptions.topBar.rightButtonBackgroundColor.hasValue) {
+        [_buttonsPresenter applyRightButtonsBackgroundColor:mergeOptions.topBar.rightButtonBackgroundColor];
+    }
+    
+    if (mergeOptions.topBar.leftButtonBackgroundColor.hasValue) {
+        [_buttonsPresenter applyLeftButtonsBackgroundColor:mergeOptions.topBar.leftButtonBackgroundColor];
     }
 
     if (mergeOptions.overlay.interceptTouchOutside.hasValue) {

package/lib/ios/RNNIconDrawer.m

@@ -29,7 +29,7 @@
     UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
     UIGraphicsEndImageContext();
 
-    return [newImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
+    return newImage;
 }
 
 @end

package/lib/ios/RNNTitleViewHelper.h

@@ -8,6 +8,10 @@
 
 @property(nonatomic, strong) UILabel *subtitleLabel;
 
+- (void)setTitleColor:(UIColor *)color;
+
+- (void)setSubtitleColor:(UIColor *)color;
+
 @end
 
 @interface RNNTitleViewHelper : NSObject
@@ -21,4 +25,8 @@
 
 - (void)setup;
 
+- (void)setTitleColor:(UIColor *)color;
+
+- (void)setSubtitleColor:(UIColor *)color;
+
 @end

package/lib/ios/RNNTitleViewHelper.m

@@ -16,6 +16,14 @@
                                         self.frame.size.width, _subtitleLabel.frame.size.height)];
 }
 
+- (void)setTitleColor:(UIColor *)color {
+    _titleLabel.textColor = color;
+}
+
+- (void)setSubtitleColor:(UIColor *)color {
+    _subtitleLabel.textColor = color;
+}
+
 @end
 
 @interface RNNTitleViewHelper ()
@@ -170,4 +178,12 @@
     return titleLabel;
 }
 
+- (void)setTitleColor:(UIColor *)color {
+    [_titleView setTitleColor:color];
+}
+
+- (void)setSubtitleColor:(UIColor *)color {
+    [_titleView setSubtitleColor:color];
+}
+
 @end

package/lib/ios/RNNTopBarOptions.h

@@ -20,6 +20,8 @@
 @property(nonatomic, strong) Color *rightButtonColor;
 @property(nonatomic, strong) Color *leftButtonDisabledColor;
 @property(nonatomic, strong) Color *rightButtonDisabledColor;
+@property(nonatomic, strong) Color *leftButtonBackgroundColor;
+@property(nonatomic, strong) Color *rightButtonBackgroundColor;
 @property(nonatomic, strong) Bool *drawBehind;
 @property(nonatomic, strong) Bool *noBorder;
 @property(nonatomic, strong) Color *borderColor;

package/lib/ios/RNNTopBarOptions.m

@@ -14,6 +14,8 @@
     self.rightButtonColor = [ColorParser parse:dict key:@"rightButtonColor"];
     self.leftButtonDisabledColor = [ColorParser parse:dict key:@"leftButtonDisabledColor"];
     self.rightButtonDisabledColor = [ColorParser parse:dict key:@"rightButtonDisabledColor"];
+    self.leftButtonBackgroundColor = [ColorParser parse:dict key:@"leftButtonBackgroundColor"];
+    self.rightButtonBackgroundColor = [ColorParser parse:dict key:@"rightButtonBackgroundColor"];
     self.drawBehind = [BoolParser parse:dict key:@"drawBehind"];
     self.noBorder = [BoolParser parse:dict key:@"noBorder"];
     self.borderColor = [ColorParser parse:dict key:@"borderColor"];
@@ -63,6 +65,10 @@
         self.leftButtonDisabledColor = options.leftButtonDisabledColor;
     if (options.rightButtonDisabledColor.hasValue)
         self.rightButtonDisabledColor = options.rightButtonDisabledColor;
+    if (options.leftButtonBackgroundColor.hasValue)
+        self.leftButtonBackgroundColor = options.leftButtonBackgroundColor;
+    if (options.rightButtonBackgroundColor.hasValue)
+        self.rightButtonBackgroundColor = options.rightButtonBackgroundColor;
     if (options.drawBehind.hasValue)
         self.drawBehind = options.drawBehind;
     if (options.noBorder.hasValue)

package/lib/ios/RNNUIBarButtonItem.h

@@ -26,7 +26,8 @@ typedef void (^RNNButtonPressCallback)(NSString *buttonId);
 - (instancetype)initWithSystemItem:(RNNButtonOptions *)buttonOptions
                            onPress:(RNNButtonPressCallback)onPress;
 
-- (void)applyColor:(UIColor *)color;
+- (void)mergeColor:(Color *)color;
+- (void)mergeBackgroundColor:(Color *)color;
 
 - (void)notifyWillAppear;
 - (void)notifyDidAppear;

package/lib/ios/RNNUIBarButtonItem.m

@@ -11,7 +11,10 @@
 
 @end
 
-@implementation RNNUIBarButtonItem
+@implementation RNNUIBarButtonItem {
+    RNNIconCreator* _iconCreator;
+    RNNButtonOptions* _buttonOptions;
+}
 
 - (instancetype)init {
     self = [super init];
@@ -52,7 +55,8 @@
 - (instancetype)initCustomIcon:(RNNButtonOptions *)buttonOptions
                    iconCreator:(RNNIconCreator *)iconCreator
                        onPress:(RNNButtonPressCallback)onPress {
-    UIImage *icon = [iconCreator create:buttonOptions];
+    _iconCreator = iconCreator;
+    UIImage *icon = [_iconCreator create:buttonOptions];
     UIButton *button =
         [[UIButton alloc] initWithFrame:CGRectMake(0, 0, icon.size.width, icon.size.height)];
     [button addTarget:self
@@ -125,6 +129,7 @@
 }
 
 - (void)applyOptions:(RNNButtonOptions *)buttonOptions {
+    _buttonOptions = buttonOptions;
     self.buttonId = buttonOptions.identifier.get;
     self.accessibilityLabel = [buttonOptions.accessibilityLabel withDefault:nil];
     self.enabled = [buttonOptions.enabled withDefault:YES];
@@ -134,17 +139,35 @@
     [self applyDisabledTitleTextAttributes:buttonOptions];
 }
 
-- (void)applyColor:(UIColor *)color {
-    if (color) {
+- (void)applyColor:(Color *)color {
+    if (color.hasValue) {
         NSMutableDictionary *titleTextAttributes = [NSMutableDictionary
             dictionaryWithDictionary:[self titleTextAttributesForState:UIControlStateNormal]];
-        [titleTextAttributes setValue:color forKey:NSForegroundColorAttributeName];
+        [titleTextAttributes setValue:color.get forKey:NSForegroundColorAttributeName];
         [self setTitleTextAttributes:titleTextAttributes forState:UIControlStateNormal];
         [self setTitleTextAttributes:titleTextAttributes forState:UIControlStateHighlighted];
     } else
         self.image = [self.image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
 
-    self.tintColor = color;
+    self.tintColor = color.get;
+}
+
+- (void)mergeBackgroundColor:(Color *)color {
+    _buttonOptions.iconBackground.color = color;
+    [self redrawIcon];
+}
+
+- (void)mergeColor:(Color *)color {
+    _buttonOptions.color = color;
+    [self applyColor:color];
+    [self redrawIcon];
+}
+
+- (void)redrawIcon {
+    if (_buttonOptions.icon.hasValue && [self.customView isKindOfClass:UIButton.class]) {
+        UIImage* icon = [_iconCreator create:_buttonOptions];
+        [(UIButton *)self.customView setImage:icon forState:_buttonOptions.state];
+    }
 }
 
 - (void)applyTitleTextAttributes:(RNNButtonOptions *)button {

package/lib/ios/TopBarTitlePresenter.m

@@ -33,6 +33,13 @@
         [self removeTitleComponents];
         self.boundViewController.navigationItem.title = resolvedOptions.title.text.get;
     }
+    
+    if (options.title.color.hasValue) {
+        [_titleViewHelper setTitleColor:options.title.color.get];
+    }
+    if (options.subtitle.color.hasValue) {
+        [_titleViewHelper setSubtitleColor:options.subtitle.color.get];
+    }
 }
 
 - (void)setTitleViewWithSubtitle:(RNNTopBarOptions *)options {

package/lib/src/interfaces/Options.ts

@@ -637,6 +637,8 @@ export interface OptionsTopBar {
 
   leftButtonColor?: Color;
   rightButtonColor?: Color;
+  leftButtonBackgroundColor?: Color;
+  rightButtonBackgroundColor?: Color;
   leftButtonDisabledColor?: Color;
   rightButtonDisabledColor?: Color;
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-navigation",
-  "version": "7.30.0-alpha.1-snapshot.722",
+  "version": "7.30.0",
   "description": "React Native Navigation - truly native navigation for iOS and Android",
   "license": "MIT",
   "nativePackage": true,
@@ -67,10 +67,10 @@
     "tslib": "1.9.3"
   },
   "devDependencies": {
-    "pixelmatch": "^5.2.1",
-    "pngjs": "^6.0.0",
+    "@babel/core": "7.15.8",
     "@babel/plugin-proposal-export-default-from": "7.10.1",
     "@babel/plugin-proposal-export-namespace-from": "7.10.1",
+    "@babel/runtime": "7.15.4",
     "@babel/types": "7.15.6",
     "@react-native-community/blur": "^3.6.0",
     "@react-native-community/datetimepicker": "^3.4.7",
@@ -88,38 +88,37 @@
     "@types/react-test-renderer": "16.9.2",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
-    "babel-jest": "^27.2.5",
+    "babel-jest": "^26.6.3",
     "clang-format": "^1.4.0",
-    "detox": "19.12.6",
-    "eslint": "7.3.0",
+    "detox": "19.12.1",
+    "detox-testing-library-rnn-adapter": "2.x.x",
+    "eslint": "7.32.0",
     "eslint-config-prettier": "6.11.0",
     "eslint-plugin-prettier": "3.1.4",
     "github-release-notes": "https://github.com/yogevbd/github-release-notes/tarball/e601b3dba72dcd6cba323c1286ea6dd0c0110b58",
     "husky": "4.2.5",
     "identity-obj-proxy": "3.0.0",
-    "@babel/core": "7.15.8",
-    "@babel/runtime": "7.15.4",
-    "jest": "^27.2.5",
-    "jest-circus": "^27.2.5",
+    "jest": "^26.6.3",
     "lint-staged": "10.2.11",
-    "metro-react-native-babel-preset": "0.66.2",
+    "metro-react-native-babel-preset": "^0.70.3",
+    "pixelmatch": "^5.2.1",
+    "pngjs": "^6.0.0",
     "prettier": "2.1.2",
-    "react": "17.0.2",
-    "react-native": "0.66.3",
+    "react": "18.0.0",
+    "react-native": "0.69.5",
     "react-native-fast-image": "^8.3.4",
     "react-native-gesture-handler": "^1.6.1",
-    "react-native-reanimated": "2.3.0-beta.2",
-    "react-native-ui-lib": "5.11.0",
+    "react-native-reanimated": "2.10.0",
+    "react-native-ui-lib": "6.21.0",
     "react-redux": "5.x.x",
-    "react-test-renderer": "16.13.1",
+    "react-test-renderer": "18.0.0",
     "redux": "3.x.x",
+    "remx": "3.x.x",
     "semver": "5.x.x",
     "shell-utils": "1.x.x",
     "ts-mockito": "^2.3.1",
     "typedoc": "0.x.x",
-    "typescript": "4.4.3",
-    "detox-testing-library-rnn-adapter": "2.x.x",
-    "remx": "3.x.x"
+    "typescript": "4.4.3"
   },
   "husky": {
     "hooks": {

package/react-native.config.js

@@ -14,9 +14,6 @@ module.exports = {
     },
   },
   project: {
-    ios: {
-      project: './playground/ios/playground.xcworkspace',
-    },
     android: {
       sourceDir: './playground/android/',
     },