Friday, April 22, 2016

React Native TabBarIOS "More …” Button Crashes

Leave a Comment

When I add more than 5 tabs to my tab bar a “More …” button appears in place of the overflowing items. When that button is clicked in my iPhone 6s emulator it crashes saying that the tab index is out of bounds of the array.

To REPRO .... I have a new v0.22 project. Here is my index.ios.js which crashes when the “More …” button is clicked...

 /**  * Sample React Native App  * https://github.com/facebook/react-native  */  import React, {     AppRegistry,     Component,     StyleSheet,     Text,     View,     TabBarIOS, } from 'react-native';  class SampleTabsIos extends Component {     constructor(props) {         super(props);         this.state = {             selectedTab: 'TabOne'         };     }      render() {         return (                 <TabBarIOS>                     <TabBarIOS.Item                         title="Tab 1"                         selected={this.state.selectedTab === 'TabOne'}                         onPress={() => {                             this.setState({                               selectedTab: 'TabOne',                             });                         }}>                         <Text>Tab 1</Text>                     </TabBarIOS.Item>                      <TabBarIOS.Item                         title="Tab 2"                         selected={this.state.selectedTab === 'TabTwo'}                         onPress={() => {                             this.setState({                               selectedTab: 'TabTwo',                             });                         }}>                         <Text>Tab 2</Text>                     </TabBarIOS.Item>                      <TabBarIOS.Item                         title="Tab 3"                         selected={this.state.selectedTab === 'TabThree'}                         onPress={() => {                             this.setState({                               selectedTab: 'TabThree',                             });                         }}>                         <Text>Tab 3</Text>                     </TabBarIOS.Item>                      <TabBarIOS.Item                         title="Tab 4"                         selected={this.state.selectedTab === 'TabOne'}                         onPress={() => {                             this.setState({                               selectedTab: 'TabOne',                             });                         }}>                         <Text>Tab 4</Text>                     </TabBarIOS.Item>                      <TabBarIOS.Item                         title="Tab 5"                         selected={this.state.selectedTab === 'TabFive'}                         onPress={() => {                             this.setState({                               selectedTab: 'TabFive',                             });                         }}>                         <Text>Tab 5</Text>                     </TabBarIOS.Item>                      <TabBarIOS.Item                         title="Tab 6"                         selected={this.state.selectedTab === 'TabSix'}                         onPress={() => {                             this.setState({                               selectedTab: 'TabSix',                             });                         }}>                         <Text>Tab 6</Text>                     </TabBarIOS.Item>                 </TabBarIOS>         );     } }  const styles = StyleSheet.create({     container   : {         flex           : 1,         justifyContent : 'center',         alignItems     : 'center',         backgroundColor: '#F5FCFF',     },     welcome     : {         fontSize : 20,         textAlign: 'center',         margin   : 10,     },     instructions: {         textAlign   : 'center',         color       : '#333333',         marginBottom: 5,     }, });  AppRegistry.registerComponent('SampleTabsIos', () => SampleTabsIos); 

and if it's helpful - here is the crashed / stack trace

*** Terminating app due to uncaught exception 'NSRangeException', reason: '*** -[__NSArrayM objectAtIndex:]: index 9223372036854775807 beyond bounds [0 .. 5]' *** First throw call stack: (     0   CoreFoundation                      0x0000000109c91f65 __exceptionPreprocess + 165     1   libobjc.A.dylib                     0x0000000108e8fdeb objc_exception_throw + 48     2   CoreFoundation                      0x0000000109b75a94 -[__NSArrayM objectAtIndex:] + 212     3   SampleTabsIos                       0x00000001087bec98 -[RCTTabBar tabBarController:shouldSelectViewController:] + 184     4   UIKit                               0x000000010b78b791 -[UITabBarController _tabBarItemClicked:] + 149     5   UIKit                               0x000000010b5a31fa -[UIApplication sendAction:to:from:forEvent:] + 92     6   UIKit                               0x000000010b955f79 -[UITabBar _sendAction:withEvent:] + 451     7   UIKit                               0x000000010b5a31fa -[UIApplication sendAction:to:from:forEvent:] + 92     8   UIKit                               0x000000010b707504 -[UIControl sendAction:to:forEvent:] + 67     9   UIKit                               0x000000010b7077d0 -[UIControl _sendActionsForEvents:withEvent:] + 311     10  UIKit                               0x000000010b95af9f -[UITabBar(Static) _buttonUp:] + 103     11  UIKit                               0x000000010b5a31fa -[UIApplication sendAction:to:from:forEvent:] + 92     12  UIKit                               0x000000010b707504 -[UIControl sendAction:to:forEvent:] + 67     13  UIKit                               0x000000010b7077d0 -[UIControl _sendActionsForEvents:withEvent:] + 311     14  UIKit                               0x000000010b706906 -[UIControl touchesEnded:withEvent:] + 601     15  UIKit                               0x000000010b60daa3 -[UIWindow _sendTouchesForEvent:] + 835     16  UIKit                               0x000000010b60e691 -[UIWindow sendEvent:] + 865     17  UIKit                               0x000000010b5c0752 -[UIApplication sendEvent:] + 263     18  UIKit                               0x000000010b59bfcc _UIApplicationHandleEventQueue + 6693     19  CoreFoundation                      0x0000000109bbe0a1 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ + 17     20  CoreFoundation                      0x0000000109bb3fcc __CFRunLoopDoSources0 + 556     21  CoreFoundation                      0x0000000109bb3483 __CFRunLoopRun + 867     22  CoreFoundation                      0x0000000109bb2e98 CFRunLoopRunSpecific + 488     23  GraphicsServices                    0x000000010e664ad2 GSEventRunModal + 161     24  UIKit                               0x000000010b5a1676 UIApplicationMain + 171     25  SampleTabsIos                       0x0000000108716d0f main + 111     26  libdyld.dylib                       0x000000010d1a892d start + 1     27  ???                                 0x0000000000000001 0x0 + 1 ) libc++abi.dylib: terminating with uncaught exception of type NSException 

0 Answers

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment