{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react-native/issues/22272","repository_url":"https://api.github.com/repos/facebook/react-native","labels_url":"https://api.github.com/repos/facebook/react-native/issues/22272/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react-native/issues/22272/comments","events_url":"https://api.github.com/repos/facebook/react-native/issues/22272/events","html_url":"https://github.com/facebook/react-native/issues/22272","id":380695423,"node_id":"MDU6SXNzdWUzODA2OTU0MjM=","number":22272,"title":"Unpredictable behaviour with conditional opacity in TouchableOpacity and FlatList","user":{"login":"HighSoftWare96","id":22793967,"node_id":"MDQ6VXNlcjIyNzkzOTY3","avatar_url":"https://avatars1.githubusercontent.com/u/22793967?v=4","gravatar_id":"","url":"https://api.github.com/users/HighSoftWare96","html_url":"https://github.com/HighSoftWare96","followers_url":"https://api.github.com/users/HighSoftWare96/followers","following_url":"https://api.github.com/users/HighSoftWare96/following{/other_user}","gists_url":"https://api.github.com/users/HighSoftWare96/gists{/gist_id}","starred_url":"https://api.github.com/users/HighSoftWare96/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/HighSoftWare96/subscriptions","organizations_url":"https://api.github.com/users/HighSoftWare96/orgs","repos_url":"https://api.github.com/users/HighSoftWare96/repos","events_url":"https://api.github.com/users/HighSoftWare96/events{/privacy}","received_events_url":"https://api.github.com/users/HighSoftWare96/received_events","type":"User","site_admin":false},"labels":[{"id":337217254,"node_id":"MDU6TGFiZWwzMzcyMTcyNTQ=","url":"https://api.github.com/repos/facebook/react-native/labels/Ran%20Commands","name":"Ran Commands","color":"ffffff","default":false},{"id":846765400,"node_id":"MDU6TGFiZWw4NDY3NjU0MDA=","url":"https://api.github.com/repos/facebook/react-native/labels/%E2%8F%AAOld%20Version","name":"⏪Old Version","color":"d4c5f9","default":false},{"id":1056126664,"node_id":"MDU6TGFiZWwxMDU2MTI2NjY0","url":"https://api.github.com/repos/facebook/react-native/labels/%F0%9F%94%B6Components","name":"🔶Components","color":"fef2c0","default":false},{"id":1113225538,"node_id":"MDU6TGFiZWwxMTEzMjI1NTM4","url":"https://api.github.com/repos/facebook/react-native/labels/%F0%9F%94%B6FlatList","name":"🔶FlatList","color":"fef2c0","default":false},{"id":860843489,"node_id":"MDU6TGFiZWw4NjA4NDM0ODk=","url":"https://api.github.com/repos/facebook/react-native/labels/%F0%9F%94%B6Lists","name":"🔶Lists","color":"fef2c0","default":false},{"id":1113219676,"node_id":"MDU6TGFiZWwxMTEzMjE5Njc2","url":"https://api.github.com/repos/facebook/react-native/labels/%F0%9F%94%B6TouchableOpacity","name":"🔶TouchableOpacity","color":"fef2c0","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-11-14T13:21:48Z","updated_at":"2018-11-30T00:05:12Z","closed_at":null,"author_association":"NONE","body":"<!-- Requirements: please go through this checklist before opening a new issue -->\r\n  - [-] Review the documentation: https://facebook.github.io/react-native\r\n  - [-] Search for existing issues: https://github.com/facebook/react-native/issues\r\n  - [-] Use the latest React Native release: https://github.com/facebook/react-native/releases\r\n\r\n## Environment\r\nEnvironment:\r\n  OS: macOS 10.14\r\n  Node: 8.12.0\r\n  Yarn: 1.10.1\r\n  npm: 6.4.1\r\n  Watchman: 4.9.0\r\n  Xcode: Xcode 10.0 Build version 10A255\r\n  Android Studio: 3.2 AI-181.5540.7.32.5014246\r\n\r\nPackages: (wanted => installed)\r\n  react: 16.6.1 => 16.6.1\r\n  react-native: 0.57 => 0.57\r\n\r\n## Description\r\nConditional style with different opacity has unpredictable behaviour inside TouchableOpacity and FlatList renderItems. The opacity does not correctly update when the data inside the FlatList changes.\r\n\r\n## Reproducible Demo\r\nhttps://snack.expo.io/B14-BsFTm\r\nClicking twice the item in the list mysteriously trigger the opacity update.\r\n\r\n## Possible workaround\r\nInstead of using directly TouchableOpacity use a View that wraps that TouchableOpacity like this:\r\n```\r\n        <FlatList\r\n          data={this.state.data}\r\n          renderItem={({item}) => (\r\n            <View style={{\r\n                ...styles.btn,\r\n                ...(item.selected ? styles.selected : styles.unselected),\r\n              }}>\r\n              <TouchableOpacity onPress={() => {this._onPress(item.id)}} >\r\n                <Text>{item.id}</Text>\r\n              </TouchableOpacity>\r\n            </View>\r\n          )}\r\n        />\r\n```"},"comment":{"url":"https://api.github.com/repos/facebook/react-native/issues/comments/443040589","html_url":"https://github.com/facebook/react-native/issues/22272#issuecomment-443040589","issue_url":"https://api.github.com/repos/facebook/react-native/issues/22272","id":443040589,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0MzA0MDU4OQ==","user":{"login":"react-native-bot","id":32686087,"node_id":"MDQ6VXNlcjMyNjg2MDg3","avatar_url":"https://avatars0.githubusercontent.com/u/32686087?v=4","gravatar_id":"","url":"https://api.github.com/users/react-native-bot","html_url":"https://github.com/react-native-bot","followers_url":"https://api.github.com/users/react-native-bot/followers","following_url":"https://api.github.com/users/react-native-bot/following{/other_user}","gists_url":"https://api.github.com/users/react-native-bot/gists{/gist_id}","starred_url":"https://api.github.com/users/react-native-bot/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/react-native-bot/subscriptions","organizations_url":"https://api.github.com/users/react-native-bot/orgs","repos_url":"https://api.github.com/users/react-native-bot/repos","events_url":"https://api.github.com/users/react-native-bot/events{/privacy}","received_events_url":"https://api.github.com/users/react-native-bot/received_events","type":"User","site_admin":false},"created_at":"2018-11-30T00:05:12Z","updated_at":"2018-11-30T00:05:12Z","author_association":"COLLABORATOR","body":"I am closing this issue because it does not appear to have been verified on the latest release, and there has been no followup in a while.\n\nIf you found this thread after encountering the same issue in the [latest release](https://github.com/facebook/react-native/releases), please feel free to create a new issue with up-to-date information by clicking [here](https://github.com/facebook/react-native/issues/new)."}}
{"actor":{"display_login":"react-native-bot"}}