{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react-native/issues/15081","repository_url":"https://api.github.com/repos/facebook/react-native","labels_url":"https://api.github.com/repos/facebook/react-native/issues/15081/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react-native/issues/15081/comments","events_url":"https://api.github.com/repos/facebook/react-native/issues/15081/events","html_url":"https://github.com/facebook/react-native/issues/15081","id":243713216,"number":15081,"title":"TabBarIOS (Tabs) in AppleTV flickering when switching between tabs","user":{"login":"rada","id":43495,"avatar_url":"https://avatars2.githubusercontent.com/u/43495?v=4","gravatar_id":"","url":"https://api.github.com/users/rada","html_url":"https://github.com/rada","followers_url":"https://api.github.com/users/rada/followers","following_url":"https://api.github.com/users/rada/following{/other_user}","gists_url":"https://api.github.com/users/rada/gists{/gist_id}","starred_url":"https://api.github.com/users/rada/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rada/subscriptions","organizations_url":"https://api.github.com/users/rada/orgs","repos_url":"https://api.github.com/users/rada/repos","events_url":"https://api.github.com/users/rada/events{/privacy}","received_events_url":"https://api.github.com/users/rada/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-07-18T13:20:40Z","updated_at":"2017-07-18T20:48:20Z","closed_at":null,"body":"<!--\r\n  PLEASE DON'T DELETE THIS TEMPLATE UNTIL YOU HAVE READ THE FIRST SECTION.\r\n-->\r\n\r\n### Is this a bug report?\r\n\r\nYes\r\n\r\n<!--\r\n  If you answered \"Yes\":\r\n\r\n    We expect that it will take you about 30 minutes to produce a high-quality bug report.\r\n    While this may seem like a lot, putting care into issues helps us fix them faster.\r\n    For bug reports, it is REQUIRED to fill the rest of this template, or the issue will be closed.\r\n\r\n  If you answered \"No\":\r\n\r\n    We use GitHub Issues exclusively for tracking bugs in React Native. If you're looking for help,\r\n    check out the How to Get In Touch section of the following guide: \r\n    https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#how-to-get-in-touch\r\n\r\n  Now scroll below!\r\n-->\r\n\r\n\r\n### Have you read the Bugs section of the Contributing to React Native Guide?\r\n\r\nYes\r\n\r\n<!--\r\n  Please read through the bug reporting guidelines thoroughly:\r\n  https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#bugs\r\n-->\r\n\r\n### Environment\r\n\r\n<!--\r\n  Please fill in all the relevant fields by running these commands in terminal.\r\n-->\r\n\r\n1. `react-native -v`: 0.46.1\r\n2. `node -v`: 6.5.0\r\n3. `npm -v`: 3.10.3\r\n4. `yarn --version` (if you use Yarn):\r\n\r\nThen, specify:\r\n\r\n<!-- (What platform are you building for? Choose any from iOS, Android, AppleTV.) -->\r\n- Target Platform: AppleTV\r\n\r\n<!-- Which operating system are you using? Specify macOS, Windows, or Linux, along with specific release versions -->\r\n- Development Operating System: macOS Sierra (10.12.5)\r\n\r\n<!-- Include any additional relevant information. Are you using Xcode or Android Studio to build native code? Is the issue specific to a particular iOS or Android SDK? -->\r\n- Build tools: Xcode (8.3.3)\r\n\r\n### Steps to Reproduce\r\n\r\n1. Switch to any Tab back and forth\r\n2. Switch to any Tab back and forth\r\n\r\n### Expected Behavior\r\n\r\nThe switch to any tab is smooth and without any flickering or selection falling back to previous tab.\r\n\r\n### Actual Behavior\r\n\r\nSwitching between TabBarIOS.Items is flickering and is not smooth. While selecting the new tab, It seems like first the new tab is selected, then immediately the old one and then again the new tab. This results in tab flickering when switching between the tabs. Worse case is, when the tabs render some more complex composed element. In this case, the new tab is not being selected, as the render is taking longer. Once it is rendered, we can select it but again the flickering occurs.\r\n\r\nIt looks like by the time the JS processes the received native event (tab switch) and sends an event (prop) back to Native, the tab selection falls back to the previous tab.\r\n\r\nI have included very basic TabBar example with plain view and one text where flickering occurs. However, given the simple View is used in tabs here, switching is occasionally smooth.\r\n\r\n### Reproducible Demo\r\n\r\n```javascript\r\n/**\r\n * Sample React Native App\r\n * https://github.com/facebook/react-native\r\n * @flow\r\n */\r\n\r\nimport React, { Component } from 'react';\r\nimport {\r\n  AppRegistry,\r\n  Text,\r\n  View,\r\n  TabBarIOS,\r\n} from 'react-native';\r\n\r\nexport default class tvTabBar extends Component {\r\n\r\n\t_tabItems: Array<{ key: string }> = [\r\n\t\t{ key: 'TAB 1' },\r\n\t\t{ key: 'TAB 2' },\r\n\t\t{ key: 'TAB 3' },\r\n\t\t{ key: 'TAB 4' },\r\n\t];\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.state = { activeTab: 'TAB 1' };\r\n\t}\r\n\r\n\t_getTabItem = (key: string) => {\r\n\t\tswitch (key) {\r\n\t\t\tcase 'TAB 1':\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<View style={{ flex: 1, top: 140, borderColor: 'red', borderWidth: 10 }}>\r\n\t\t\t\t\t\t<Text style={{ fontSize: 30 }}>TAB 1</Text>\r\n\t\t\t\t\t</View>\r\n\t\t\t\t);\r\n\t\t\tcase 'TAB 2':\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<View style={{ flex: 1, top: 140, borderColor: 'green', borderWidth: 20 }}>\r\n\t\t\t\t\t\t<Text style={{ fontSize: 30 }}>TAB 2</Text>\r\n\t\t\t\t\t</View>\r\n\t\t\t\t);\r\n\t\t\tcase 'TAB 3':\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<View style={{ flex: 1, top: 140, borderColor: 'darkblue', borderWidth: 30 }}>\r\n\t\t\t\t\t\t<Text style={{ fontSize: 30 }}>TAB 3</Text>\r\n\t\t\t\t\t</View>\r\n\t\t\t\t);\r\n\t\t\tcase 'TAB 4':\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<View style={{ flex: 1, top: 140, borderColor: 'deeppink', borderWidth: 40 }}>\r\n\t\t\t\t\t\t<Text style={{ fontSize: 30 }}>TAB 4</Text>\r\n\t\t\t\t\t</View>\r\n\t\t\t\t);\r\n\t\t\tdefault:\r\n\t\t\t\treturn null;\r\n\t\t}\r\n\t}\r\n\r\n\t_setTab(key) {\r\n\t\treturn () => {\r\n\t\t\tconsole.log('Selecting tab: ', key);\r\n\t\t\tthis.setState({ activeTab: key });\r\n\t\t};\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t<TabBarIOS>\r\n\t\t\t\t{\r\n\t\t\t\t\tthis._tabItems.map((tabItem) => {\r\n\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t<TabBarIOS.Item\r\n\t\t\t\t\t\t\t\tkey={tabItem.key}\r\n\t\t\t\t\t\t\t\tonPress={this._setTab(tabItem.key)}\r\n\t\t\t\t\t\t\t\ttitle={tabItem.key}\r\n\t\t\t\t\t\t\t\tselected={tabItem.key === this.state.activeTab}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t{ this._getTabItem(tabItem.key) }\r\n\t\t\t\t\t\t\t</TabBarIOS.Item>\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t})\r\n\t\t\t\t}\r\n\t\t\t</TabBarIOS>\r\n\t\t);\r\n\t}\r\n}\r\n\r\nAppRegistry.registerComponent('tvTabBar', () => { return tvTabBar; });\r\n\r\n```\r\n\r\nlink to project in gitlab: https://gitlab.com/radamich/tvTabBar\r\n"},"comment":{"url":"https://api.github.com/repos/facebook/react-native/issues/comments/316193013","html_url":"https://github.com/facebook/react-native/issues/15081#issuecomment-316193013","issue_url":"https://api.github.com/repos/facebook/react-native/issues/15081","id":316193013,"user":{"login":"dlowder-salesforce","id":6577821,"avatar_url":"https://avatars0.githubusercontent.com/u/6577821?v=4","gravatar_id":"","url":"https://api.github.com/users/dlowder-salesforce","html_url":"https://github.com/dlowder-salesforce","followers_url":"https://api.github.com/users/dlowder-salesforce/followers","following_url":"https://api.github.com/users/dlowder-salesforce/following{/other_user}","gists_url":"https://api.github.com/users/dlowder-salesforce/gists{/gist_id}","starred_url":"https://api.github.com/users/dlowder-salesforce/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dlowder-salesforce/subscriptions","organizations_url":"https://api.github.com/users/dlowder-salesforce/orgs","repos_url":"https://api.github.com/users/dlowder-salesforce/repos","events_url":"https://api.github.com/users/dlowder-salesforce/events{/privacy}","received_events_url":"https://api.github.com/users/dlowder-salesforce/received_events","type":"User","site_admin":false},"created_at":"2017-07-18T20:48:20Z","updated_at":"2017-07-18T20:48:20Z","body":"Thanks for the bug report, I'll take a look.... might be a race condition between the native focus engine calls and JS"}}
{"actor":{"display_login":"dlowder-salesforce"}}