ScrollView inside Modal doesn't scroll

[zelgan90]

Pretty simple issue at a first glance, I have a modal activated by a TouchableOpacity inside a card, there's nothing wrong at displaying said modal, the issue comes with a ScrollView that is inside the modal and doesn't scroll.

I already tried with zIndex, but doesn't change anything (that is if I'm using it correctly, I'm pretty new to React-Native though I've used it before so I don't think zIndex is helping in any way).

I'm using the example provided in the "Exemples" folder, still this my App.js

import React, {Component} from 'react' import Swiper from 'react-native-deck-swiper' import {Button, StyleSheet, Text, View, TouchableOpacity, Alert, Modal, Dimensions, TouchableWithoutFeedback, Image, ScrollView} from 'react-native' ` const {height, width}= Dimensions.get('window')` export default class Exemple extends Component { constructor (props) { super(props) this.state = { cards: ['1', '2', '3'], swipedAllCards: false, swipeDirection: '', isSwipingBack: false, cardIndex: 0, horizontalSwipe: true, verticalSwipe: true, modalPerfilDuenioVisible: false } } ` alert()` ` {` ` this.setState({horizontalSwipe: !this.state.horizontalSwipe, verticalSwipe: !this.state.verticalSwipe})` this.visibilidadModalPerfilDuenio(true) } ` visibilidadModalPerfilDuenio(modalPerfilDuenioVisible)` ` {` ` this.setState({modalPerfilDuenioVisible})` ` }` renderCard = (card) => { return ( <View style={styles.card}> <TouchableOpacity onPress={() => {this.alert()}} style={{height: 50, width: 50, backgroundColor: 'red'}}> <Text>Soy un botón</Text> </TouchableOpacity> <Text style={styles.text}>{card}</Text> </View> ) }; ` onSwipedAllCards = () => {` ` this.setState({` ` swipedAllCards: true` ` })` ` };` swipeBack = () => { if (!this.state.isSwipingBack) { this.setIsSwipingBack(true, () => { this.swiper.swipeBack(() => { this.setIsSwipingBack(false) }) }) } }; ` setIsSwipingBack = (isSwipingBack, cb) => {` ` this.setState(` ` {` ` isSwipingBack: isSwipingBack` ` },` ` cb` ` )` ` };` swipeLeft = () => { this.swiper.swipeLeft() }; ` render () {` ` return (` ` <View style={styles.container}>` ` {/*<Modal de perfil de dueño>*/}` ` <Modal` ` animationType="fade"` ` transparent={true}` ` visible={this.state.modalPerfilDuenioVisible}` ` onRequestClose={() => {this.visibilidadModalPerfilDuenio(false);}}` ` >` <TouchableOpacity activeOpacity= {1} style={styles.modalContainerBackground} onPress={() => this.visibilidadModalPerfilDuenio(false)}> <TouchableWithoutFeedback>{/*Para que no se cierre el modal cuando hagas click en el modal*/} <View style={[styles.modalContainer]}> <Image style={styles.iconoModal} source={require('./img/modal_usuario.png')}></Image> <ScrollView contentContainerStyle={{alignItems: 'center'}} style={styles.contenedorDuenio}> <Text style={styles.contenedorDuenioTitulo}>{"\n"}sadsadsdsadsdsadsdsadsad{"\n"}</Text> <Text style={styles.contenedorDuenioTexto}>sadsadsdsadsdsadsdsadsad años / sadsadsdsadsdsadsdsadsad{"\n"}</Text> <Text style={styles.contenedorDuenioTexto}>sadsadsdsadsdsadsdsadsad{"\n"}</Text> <Text style={styles.contenedorDuenioTexto}>sadsadsdsadsdsadsdsadsad{"\n"}</Text> <Text style={styles.contenedorDuenioTexto}>sadsadsdsadsdsadsdsadsad{"\n"}</Text> <Text style={styles.contenedorDuenioTexto}>sadsadsdsadsdsadsdsadsad{"\n"}</Text> <Text style={styles.contenedorDuenioTexto}>sadsadsdsadsdsadsdsadsad{"\n"}</Text> <Text style={styles.contenedorDuenioTexto}>sadsadsdsadsdsadsdsadsad{"\n"}</Text> <Text style={styles.contenedorDuenioTexto}>sadsadsdsadsdsadsdsadsad{"\n"}</Text> <Text style={styles.contenedorDuenioTexto}>sadsadsdsadsdsadsdsadsad{"\n"}</Text> <Text style={styles.contenedorDuenioTexto}>sadsadsdsadsdsadsdsadsad{"\n"}</Text> <Text style={styles.contenedorDuenioTexto}>sadsadsdsadsdsadsdsadsad{"\n"}</Text> <Text style={styles.contenedorDuenioTexto}>sadsadsdsadsdsadsdsadsad{"\n"}</Text> <Text style={styles.contenedorDuenioTexto}>sadsadsdsadsdsadsdsadsad{"\n"}</Text> <Text style={styles.contenedorDuenioTexto}>sadsadsdsadsdsadsdsadsad{"\n"}</Text> <Text style={styles.contenedorDuenioTexto}>sadsadsdsadsdsadsdsadsad{"\n"}</Text> </ScrollView> </View> </TouchableWithoutFeedback> </TouchableOpacity> </Modal> {/*</Modal de perfil de dueño>*/} ` <Swiper` ` ref={swiper => {this.swiper = swiper}}` ` onSwiped={this.onSwiped}` ` cards={this.state.cards}` ` cardIndex={this.state.cardIndex}` ` renderCard={this.renderCard}` ` onSwipedAll={this.onSwipedAllCards}` ` horizontalSwipe={this.state.horizontalSwipe}` ` verticalSwipe={this.state.verticalSwipe}` ` animateOverlayLabelsOpacity` ` animateCardOpacity` ` >` ` <Button onPress={this.swipeLeft} title='Swipe Left' />` ` </Swiper>` ` </View>` ` )` ` }` ` }` const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', zIndex: 0, }, card: { flex: 1, borderRadius: 4, borderWidth: 2, borderColor: '#E8E8E8', justifyContent: 'center', backgroundColor: 'white' }, text: { textAlign: 'center', fontSize: 50, backgroundColor: 'transparent' }, done: { textAlign: 'center', fontSize: 30, color: 'white', backgroundColor: 'transparent' }, modalContainerBackground: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#00000080', zIndex: 1, }, modalContainer: { backgroundColor: '#F4F4F4', minHeight: height * 0.05, maxHeight: height * 0.50, width: width * 0.85, borderTopLeftRadius: 20, borderTopRightRadius: 20, borderBottomLeftRadius: 20, alignItems: 'center', justifyContent: 'center', padding: 20, paddingTop: 50 }, contenedorDuenio: { backgroundColor: '#f4f7f7', borderRadius: 10, minHeight: height * 0.10, width: width * 0.75, paddingHorizontal: 10 }, contenedorDuenioTitulo: { fontWeight: 'bold', fontSize: 20 }, contenedorDuenioTexto: { fontSize: 16 }, iconoModal: { marginTop: -80, }, })

And this is my Package.json

{ "name": "Exemple", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "lodash.isequal": "^4.5.0", "prop-types": "^15.5.10", "react": "^16.2.0", "react-native": "^0.49.5", "react-native-deck-swiper": "^1.4.7" }, "devDependencies": { "babel-jest": "19.0.0", "babel-preset-react-native": "1.9.1", "jest": "19.0.2", "react-test-renderer": "16.0.0-alpha.6" }, "jest": { "preset": "react-native" } }

[zelgan90]

Never mind, turns out for some reason this component doesn't allow for a ScrollView to be inside a TouchableOpacity, as the tap will be recognized for this last component so you will have to modify your code so that the ScrollView isn't inside the touchable component. Still would be nice for the code I included to work since it does in other swiping components. I'll close this now.

[ankymtan]

I fixed it by adding a Touchable as the child of ScrollView `

...

`