background options refactor

lib/ios/RNNBackgrounOptions.h

+#import "RNNOptions.h"
+
+@interface RNNBackgrounOptions : RNNOptions
+
+@property (nonatomic, strong) NSNumber* color;
+@property (nonatomic, strong) NSString* component;
+
+@end

lib/ios/RNNBackgrounOptions.m

+#import "RNNBackgrounOptions.h"
+
+@implementation RNNBackgrounOptions
+
+- (void)applyOn:(UIViewController *)viewController {
+	if (self.color) {
+		UIColor* backgroundColor = [RCTConvert UIColor:self.color];
+		viewController.navigationController.navigationBar.barTintColor = backgroundColor;
+	} else {
+		viewController.navigationController.navigationBar.barTintColor = nil;
+	}
+}
+
+@end

lib/ios/RNNRootViewController.m

 }
 
 - (void)setCustomNavigationComponentBackground {
-	if (self.options.topBar.backgroundComponentName) {
-		RCTRootView *reactView = (RCTRootView*)[_creator createRootView:self.options.topBar.backgroundComponentName rootViewId:@"navBarBackground"];
+	if (self.options.topBar.background.component) {
+		RCTRootView *reactView = (RCTRootView*)[_creator createRootView:self.options.topBar.background.component rootViewId:@"navBarBackground"];
 
 		RNNCustomTitleView *titleView = [[RNNCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds subView:reactView alignment:@"fill"];
 		[self.navigationController.navigationBar insertSubview:titleView atIndex:1];
+		self.navigationController.navigationBar.clipsToBounds = YES;
 	}
 }
 

lib/ios/RNNTopBarOptions.h

 #import "RNNOptions.h"
 #import "RNNTitleOptions.h"
+#import "RNNBackgrounOptions.h"
 
 @interface RNNTopBarOptions : RNNOptions
 
 @property (nonatomic, strong) NSArray* leftButtons;
 @property (nonatomic, strong) NSArray* rightButtons;
-@property (nonatomic, strong) NSNumber* backgroundColor;
 @property (nonatomic, strong) NSNumber* visible;
 @property (nonatomic, strong) NSNumber* hideOnScroll;
 @property (nonatomic, strong) NSNumber* buttonColor;
 @property (nonatomic, strong) NSNumber* largeTitle;
 @property (nonatomic, strong) NSString* testID;
 @property (nonatomic, strong) RNNTitleOptions* title;
+@property (nonatomic, strong) RNNBackgrounOptions* background;
 @property (nonatomic, strong) NSNumber* backButtonImage;
 @property (nonatomic, strong) NSNumber* backButtonHidden;
 @property (nonatomic, strong) NSString* backButtonTitle;
 @property (nonatomic, strong) NSNumber* hideBackButtonTitle;
 
 @property (nonatomic, strong) NSString* componentName;
-@property (nonatomic, strong) NSString* backgroundComponentName;
 
 @end

lib/ios/RNNTopBarOptions.m

 - (instancetype)initWithDict:(NSDictionary *)dict {
 	self = [super initWithDict:dict];
 	self.title = [RNNTitleOptions new];
-
+	self.background = [RNNBackgrounOptions new];
+	
 	return self;
 }
 
 - (void)applyOn:(UIViewController*)viewController {
 	[self.title applyOn:viewController];
-	if (self.backgroundColor) {
-		UIColor* backgroundColor = [RCTConvert UIColor:self.backgroundColor];
-		viewController.navigationController.navigationBar.barTintColor = backgroundColor;
-	} else {
-		viewController.navigationController.navigationBar.barTintColor = nil;
-	}
-
+	[self.background applyOn:viewController];
+	
 	if (@available(iOS 11.0, *)) {
 		if (self.largeTitle){
 			if ([self.largeTitle boolValue]) {

lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj

 		50CB3B6A1FDE911400AA153B /* RNNSideMenuOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 50CB3B681FDE911400AA153B /* RNNSideMenuOptions.m */; };
 		50D031342005149000386B3D /* RNNOverlayManager.h in Headers */ = {isa = PBXBuildFile; fileRef = 50D031322005149000386B3D /* RNNOverlayManager.h */; };
 		50D031352005149000386B3D /* RNNOverlayManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 50D031332005149000386B3D /* RNNOverlayManager.m */; };
+		50EB4ED72068EBE000D6ED34 /* RNNBackgrounOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 50EB4ED52068EBE000D6ED34 /* RNNBackgrounOptions.h */; };
+		50EB4ED82068EBE000D6ED34 /* RNNBackgrounOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 50EB4ED62068EBE000D6ED34 /* RNNBackgrounOptions.m */; };
 		50EB93421FE14A3E00BD8EEE /* RNNBottomTabOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 50EB93401FE14A3E00BD8EEE /* RNNBottomTabOptions.m */; };
 		50F5DFC11F407A8C001A00BC /* RNNTabBarController.h in Headers */ = {isa = PBXBuildFile; fileRef = 50F5DFBF1F407A8C001A00BC /* RNNTabBarController.h */; };
 		50F5DFC21F407A8C001A00BC /* RNNTabBarController.m in Sources */ = {isa = PBXBuildFile; fileRef = 50F5DFC01F407A8C001A00BC /* RNNTabBarController.m */; };
 		50CB3B681FDE911400AA153B /* RNNSideMenuOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNSideMenuOptions.m; sourceTree = "<group>"; };
 		50D031322005149000386B3D /* RNNOverlayManager.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNOverlayManager.h; sourceTree = "<group>"; };
 		50D031332005149000386B3D /* RNNOverlayManager.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNOverlayManager.m; sourceTree = "<group>"; };
+		50EB4ED52068EBE000D6ED34 /* RNNBackgrounOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNBackgrounOptions.h; sourceTree = "<group>"; };
+		50EB4ED62068EBE000D6ED34 /* RNNBackgrounOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNBackgrounOptions.m; sourceTree = "<group>"; };
 		50EB933F1FE14A3E00BD8EEE /* RNNBottomTabOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNBottomTabOptions.h; sourceTree = "<group>"; };
 		50EB93401FE14A3E00BD8EEE /* RNNBottomTabOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNBottomTabOptions.m; sourceTree = "<group>"; };
 		50F5DFBF1F407A8C001A00BC /* RNNTabBarController.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNTabBarController.h; sourceTree = "<group>"; };
 				A7626BFC1FC2FB2C00492FB8 /* RNNTopBarOptions.m */,
 				50570B242061473D006A1B5C /* RNNTitleOptions.h */,
 				50570B252061473D006A1B5C /* RNNTitleOptions.m */,
+				50EB4ED52068EBE000D6ED34 /* RNNBackgrounOptions.h */,
+				50EB4ED62068EBE000D6ED34 /* RNNBackgrounOptions.m */,
 				A7626BFF1FC578AB00492FB8 /* RNNBottomTabsOptions.h */,
 				A7626C001FC5796200492FB8 /* RNNBottomTabsOptions.m */,
 				50EB933F1FE14A3E00BD8EEE /* RNNBottomTabOptions.h */,
 			buildActionMask = 2147483647;
 			files = (
 				261F0E6A1E6F028A00989DE2 /* RNNNavigationStackManager.h in Headers */,
+				50EB4ED72068EBE000D6ED34 /* RNNBackgrounOptions.h in Headers */,
 				504AFE761FFFF1E00076E904 /* RNNNavigationOptions.h in Headers */,
 				504AFE771FFFF1E20076E904 /* RNNTopBarOptions.h in Headers */,
 				26916C981E4B9E7700D13680 /* RNNReactRootViewCreator.h in Headers */,
 				2DCD9196200014A900EDC75D /* RNNBridgeManager.m in Sources */,
 				263905C11E4C6F440023D7D3 /* SidebarAirbnbAnimation.m in Sources */,
 				263905D71E4C94970023D7D3 /* RNNSideMenuController.m in Sources */,
+				50EB4ED82068EBE000D6ED34 /* RNNBackgrounOptions.m in Sources */,
 				507F43CA1FF4F9CC00D9425B /* RNNTopTabOptions.m in Sources */,
 				26916C991E4B9E7700D13680 /* RNNReactRootViewCreator.m in Sources */,
 				214545251F4DC125006E8DA1 /* RNNUIBarButtonItem.m in Sources */,

playground/src/screens/CustomRoundedButton.js

 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    width: 48,
-    height: 48,
     backgroundColor: 'transparent',
     flexDirection: 'column',
     justifyContent: 'center',