Closes #3382

e2e/ScreenStyle.test.js

@@ -102,6 +102,11 @@ describe('screen style', () => {
     await expect(elementById('buttonLeft')).toBeVisible();
   });
 
+  test('pass props to custom button component', async () => {
+    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
+    await expect(elementByLabel(`Two`)).toExist();
+  });
+
   test('tab bar items visibility', async () => {
     await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
     await expect(elementById(testIDs.FIRST_TAB_BAR_BUTTON)).toBeVisible();

lib/ios/RNNNavigationButtons.m

@@ -54,7 +54,7 @@
 -(RNNUIBarButtonItem*)buildButton: (NSDictionary*)dictionary {
 	NSString* buttonId = dictionary[@"id"];
 	NSString* title = dictionary[@"title"];
-	NSString* component = dictionary[@"component"][@"name"];
+	NSDictionary* component = dictionary[@"component"];
 	
 	if (!buttonId) {
 		@throw [NSException exceptionWithName:@"NSInvalidArgumentException" reason:[@"button id is not specified " stringByAppendingString:title] userInfo:nil];
@@ -68,7 +68,7 @@
 	
 	RNNUIBarButtonItem *barButtonItem;
 	if (component) {
-		RCTRootView *view = (RCTRootView*)[self.viewController.creator createRootView:component rootViewId:buttonId];
+		RCTRootView *view = (RCTRootView*)[self.viewController.creator createRootView:component[@"name"] rootViewId:component[@"componentId"]];
 		barButtonItem = [[RNNUIBarButtonItem alloc] init:buttonId withCustomView:view];
 	} else if (iconImage) {
 		barButtonItem = [[RNNUIBarButtonItem alloc] init:buttonId withIcon:iconImage];

playground/src/screens/CustomRoundedButton.js

@@ -37,7 +37,7 @@ class CustomRoundedButton extends Component {
       <View style={styles.container} key={'guyguy'}>
         <View style={styles.button}>
           <TouchableOpacity onPress={() => Alert.alert(this.props.title, 'Thanks for that :)')}>
-            <Text style={styles.text}>Hi:)</Text>
+            <Text style={styles.text}>{this.props.title}</Text>
           </TouchableOpacity>
         </View>
       </View>

playground/src/screens/OptionsScreen.js

@@ -66,7 +66,10 @@ class OptionsScreen extends Component {
             id: CUSTOM_BUTTON2,
             testID: CUSTOM_BUTTON2,
             component: {
-              name: 'CustomRoundedButton'
+              name: 'CustomRoundedButton',
+              passProps: {
+                title: "Two"
+              }
             }
           },
           {