{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react-native/issues/19466","repository_url":"https://api.github.com/repos/facebook/react-native","labels_url":"https://api.github.com/repos/facebook/react-native/issues/19466/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react-native/issues/19466/comments","events_url":"https://api.github.com/repos/facebook/react-native/issues/19466/events","html_url":"https://github.com/facebook/react-native/issues/19466","id":326809769,"node_id":"MDU6SXNzdWUzMjY4MDk3Njk=","number":19466,"title":"Flatlist in Modal unable to scroll","user":{"login":"ionush","id":26359601,"node_id":"MDQ6VXNlcjI2MzU5NjAx","avatar_url":"https://avatars1.githubusercontent.com/u/26359601?v=4","gravatar_id":"","url":"https://api.github.com/users/ionush","html_url":"https://github.com/ionush","followers_url":"https://api.github.com/users/ionush/followers","following_url":"https://api.github.com/users/ionush/following{/other_user}","gists_url":"https://api.github.com/users/ionush/gists{/gist_id}","starred_url":"https://api.github.com/users/ionush/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ionush/subscriptions","organizations_url":"https://api.github.com/users/ionush/orgs","repos_url":"https://api.github.com/users/ionush/repos","events_url":"https://api.github.com/users/ionush/events{/privacy}","received_events_url":"https://api.github.com/users/ionush/received_events","type":"User","site_admin":false},"labels":[{"id":860843489,"node_id":"MDU6TGFiZWw4NjA4NDM0ODk=","url":"https://api.github.com/repos/facebook/react-native/labels/:large_orange_diamond:Lists","name":":large_orange_diamond:Lists","color":"fef2c0","default":false},{"id":873908497,"node_id":"MDU6TGFiZWw4NzM5MDg0OTc=","url":"https://api.github.com/repos/facebook/react-native/labels/:small_blue_diamond:Linux","name":":small_blue_diamond:Linux","color":"1d76db","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2018-05-27T11:50:56Z","updated_at":"2018-08-20T12:57:27Z","closed_at":null,"author_association":"NONE","body":"<!-- GitHub Issues in the `facebook/react-native` repository are used exclusively for tracking bugs in React Native. -->\r\n\r\n- [ x] I have reviewed the [documentation](https://facebook.github.io/react-native)\r\n- [ x] I have searched [existing issues](https://github.com/facebook/react-native/issues)\r\n- [ x] I am using the [latest React Native version](https://github.com/facebook/react-native/releases)\r\n\r\n<!-- Describe your issue in detail. -->\r\n\r\nI'm having an issue with scrolling in lists that are in modals ever since upgrading from 0.46.4 to the latest React-Native version (0.55.4). In this case it is a Flatlist.\r\n\r\nThe Flatlist with the problem is inside a modal, which is in another modal that is rendered as a footer component on another Flatlist (it is an add button).\r\n\r\nInitial page: Flatlist items, footer component: add button\r\nAdd Button: Modal with input fields. Upon clicking an input field another modal pops up.\r\nInput field: Modal with Flatlist\r\n\r\n## Environment\r\n\r\nEnvironment:\r\n  OS: Linux 4.13\r\n  Node: 8.9.1\r\n  Yarn: 1.5.1\r\n  npm: 4.6.1\r\n  Watchman: Not Found\r\n  Xcode: N/A\r\n  Android Studio: Not Found\r\n\r\nPackages: (wanted => installed)\r\n  react: ^16.3.2 => 16.3.2\r\n  react-native: ^0.55.4 => 0.55.4\r\n\r\n## Steps to Reproduce\r\n<!--\r\n  Required. Let us know how to reproduce the issue. Include a code sample, share a project,\r\n  or share an app that reproduces the issue using [Snack](https://snack.expo.io/).\r\n-->\r\nAdd button code (button component is my own):\r\n```\r\nimport { observable } from 'mobx';\r\nimport { observer } from 'mobx-react';\r\n\r\n@observer\r\nclass AddButton extends Component {\r\n    @observable visible = false;\r\n\r\n    constructor(props) {\r\n        super(props);\r\n        this.state = {\r\n            mergeName: '',\r\n            coin: undefined\r\n        };\r\n    }\r\n    show = () => {\r\n        this.visible = true;\r\n    };\r\n\r\n    hide = () => {\r\n        this.visible = false;\r\n    };\r\n\r\n    render() {\r\n\r\n        return (\r\n            <View>\r\n                <Button\r\n                    primary\r\n                    onPress={() => {\r\n                        this.show();\r\n                    }}\r\n                    title={'add'}\r\n                    style={{\r\n                        width: '50%',\r\n                        alignSelf: 'center',\r\n                        marginVertical: 16\r\n                    }}\r\n                />\r\n                <Modal\r\n                    visible={this.visible}\r\n                    animationType='slide'\r\n                    onRequestClose={this.hide}\r\n                >\r\n                    <Screen>\r\n                        <View style={{ padding: 5, backgroundColor: '#0003' }}>\r\n                            <TouchableOpacity\r\n                                style={{\r\n                                    width: '50%',\r\n                                    height: 40,\r\n                                    paddingHorizontal: 10,\r\n                                    justifyContent: 'center'\r\n                                }}\r\n                                onPress={this.hide}\r\n                            >\r\n                                <Text style={{ color: '#fff' }}>\r\n                                    {'cancel'}\r\n                                </Text>\r\n                            </TouchableOpacity>\r\n                        </View>\r\n\r\n                        <View>\r\n                            <Row>\r\n                                <RowLabel>{'coin'}:</RowLabel>\r\n                                <Selector\r\n                                    force\r\n                                    ref={'mySelector'}\r\n                                    value={this.coin}\r\n                                    onSelect={coin => {\r\n                                        this.handleSelect();\r\n                                    }}\r\n                                    data={allCoins}\r\n                                />\r\n                            </Row>\r\n                            <Button\r\n                                primary\r\n                                onPress={this.handleSubmit}\r\n                                title={this.props.i18n.'add'}\r\n                                style={{\r\n                                    width: '50%',\r\n                                    alignSelf: 'center',\r\n                                    marginVertical: 16\r\n                                }}\r\n                            />\r\n                        </View>\r\n                    </Screen>\r\n                </Modal>\r\n            </View>\r\n        );\r\n    }\r\n}\r\n\r\nexport default AddButton;\r\n\r\nconst contentStyle = {\r\n    flex: 1,\r\n    backgroundColor: '#0003',\r\n    paddingLeft: 10,\r\n    borderRadius: 3\r\n};\r\n\r\nconst Row = ({ style, ...rest }) => (\r\n    <View\r\n        style={[\r\n            {\r\n                height: 60,\r\n                flexDirection: 'row',\r\n                alignItems: 'center',\r\n                padding: 10,\r\n                marginRight: 10\r\n            },\r\n            style\r\n        ]}\r\n        {...rest}\r\n    />\r\n);\r\n\r\nconst RowLabel = props => (\r\n    <Text style={{ width: 80, color: '#ccc' }} {...props} />\r\n);\r\n\r\nconst Input = (props: TextInputProperties) => (\r\n    <View style={contentStyle}>\r\n        <TextInput\r\n            placeholderTextColor='#fff3'\r\n            style={{ color: '#ccc', flex: 1, fontSize: 14 }}\r\n            {...props}\r\n        />\r\n    </View>\r\n);\r\n```\r\nProblematic Flatlist code:\r\n```\r\n@observer\r\nclass Selector extends Component {\r\n    @observable value = '';\r\n    @observable visible = false;\r\n    constructor(props) {\r\n        super(props);\r\n        if (props.modify) {\r\n            this.selectValue();\r\n        }\r\n    }\r\n\r\n    selectValue = () => {\r\n        this.value = this.props.value;\r\n    };\r\n\r\n    show = () => {\r\n        if (this.props.force) this.visible = true;\r\n        if (!this.props.coin) return;\r\n        this.visible = true;\r\n    };\r\n\r\n    hide = () => {\r\n        this.filterText = '';\r\n        this.visible = false;\r\n    };\r\n\r\n    handleSelect = item => {\r\n        this.value = item;\r\n        if (typeof this.props.onSelect === 'function') {\r\n            this.props.onSelect(item);\r\n        }\r\n        this.hide();\r\n    };\r\n\r\n    componentWillReceiveProps(nextProps) {\r\n        if (nextProps.value !== this.value) {\r\n            this.value = nextProps.value || '';\r\n        }\r\n    }\r\n\r\n    renderItem = ({ item }) => {\r\n        return (\r\n            <TouchableOpacity\r\n                onPress={() => this.handleSelect(item)}\r\n                style={{\r\n                    backgroundColor: '#fff',\r\n                    height: 40,\r\n                    paddingLeft: 10,\r\n                    justifyContent: 'center'\r\n                }}\r\n            >\r\n                <Text style={{ fontSize: 14, color: '#333' }}>\r\n                    {item.toUpperCase()}\r\n                </Text>\r\n            </TouchableOpacity>\r\n        );\r\n    };\r\n\r\n    render() {\r\n        let data = this.props.data;\r\n\r\n        return (\r\n            <View style={[ contentStyle, { justifyContent: 'center' } ]}>\r\n                <TouchableOpacity\r\n                    style={{\r\n                        flex: 1,\r\n                        flexDirection: 'row',\r\n                        alignItems: 'center'\r\n                    }}\r\n                    onPress={this.show}\r\n                >\r\n                    <Text\r\n                        numberOfLines={1}\r\n                        style={{ color: this.value ? '#ccc' : '#fff3' }}\r\n                    >\r\n                        {(\r\n                            this.value ||\r\n                            this.props.placeholder ||\r\n                            ''\r\n                        ).toUpperCase()}\r\n                    </Text>\r\n                </TouchableOpacity>\r\n\r\n                <Modal\r\n                    transparent\r\n                    animationType='fade'\r\n                    visible={this.visible}\r\n                    onRequestClose={this.hide}\r\n                >\r\n                    <View\r\n                        style={{\r\n                            flex: 1,\r\n                            backgroundColor: '#0005',\r\n                            alignItems: 'center',\r\n                            paddingTop: 80\r\n                        }}\r\n                    >\r\n                        <View\r\n                            style={{\r\n                                width: '80%',\r\n                                backgroundColor: '#fff',\r\n                                borderRadius: 5,\r\n                                maxHeight: '80%',\r\n                                overflow: 'hidden'\r\n                            }}\r\n                        >\r\n                            <FlatList\r\n                                data={data}\r\n                                keyExtractor={i => i}\r\n                                getItemLayout={(_, index) => {\r\n                                    const height = 40 + HairSpacer.width;\r\n                                    return {\r\n                                        length: height,\r\n                                        offset: height * index,\r\n                                        index\r\n                                    };\r\n                                }}\r\n                                ItemSeparatorComponent={HairSpacer}\r\n                                renderItem={this.renderItem}\r\n                            />\r\n                        </View>\r\n                        <TouchableOpacity\r\n                            onPress={this.hide}\r\n                            style={{ marginTop: 12 }}\r\n                        >\r\n                            <Icon\r\n                                name='ios-close-circle'\r\n                                size={50}\r\n                                color='#ccc'\r\n                            />\r\n                        </TouchableOpacity>\r\n                    </View>\r\n                </Modal>\r\n            </View>\r\n        );\r\n    }\r\n}\r\n\r\nexport default Selector;\r\n\r\nconst contentStyle = {\r\n    flex: 1,\r\n    backgroundColor: '#0003',\r\n    paddingLeft: 10,\r\n    borderRadius: 3\r\n};\r\n```\r\n\r\n## Expected Behavior\r\nI expect to be able to scroll freely, as in previous versions of react-native\r\n\r\n## Actual Behavior\r\nCannot scroll the flatlist. Tried all the suggested options online, including flexgrow, messing around with other styling, onStartShouldSetResponder, etc\r\n"},"comment":{"url":"https://api.github.com/repos/facebook/react-native/issues/comments/414307154","html_url":"https://github.com/facebook/react-native/issues/19466#issuecomment-414307154","issue_url":"https://api.github.com/repos/facebook/react-native/issues/19466","id":414307154,"node_id":"MDEyOklzc3VlQ29tbWVudDQxNDMwNzE1NA==","user":{"login":"Bobozee","id":2255432,"node_id":"MDQ6VXNlcjIyNTU0MzI=","avatar_url":"https://avatars1.githubusercontent.com/u/2255432?v=4","gravatar_id":"","url":"https://api.github.com/users/Bobozee","html_url":"https://github.com/Bobozee","followers_url":"https://api.github.com/users/Bobozee/followers","following_url":"https://api.github.com/users/Bobozee/following{/other_user}","gists_url":"https://api.github.com/users/Bobozee/gists{/gist_id}","starred_url":"https://api.github.com/users/Bobozee/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Bobozee/subscriptions","organizations_url":"https://api.github.com/users/Bobozee/orgs","repos_url":"https://api.github.com/users/Bobozee/repos","events_url":"https://api.github.com/users/Bobozee/events{/privacy}","received_events_url":"https://api.github.com/users/Bobozee/received_events","type":"User","site_admin":false},"created_at":"2018-08-20T12:57:27Z","updated_at":"2018-08-20T12:57:27Z","author_association":"NONE","body":"upgrading to the last RN solved the problem."}}
{"actor":{"display_login":"Bobozee"}}