react-native-modals
react-native-modals copied to clipboard
jacklam718
ScrollView inside ModalContent
scrollToInitialPosition = () => { *******.map((item, key) => { if(item.selected == true) { this.scrollViewRef.scrollTo({ y: key * 31}); } }); }
Remove '*' and add your variable in which you have your data and set index instead of '31'. it is working fine for me. if you have any issue, let me know and share your code where you are facing issue. Moreover, in official document, it's explanation is also provided.
Here is another example. < ScrollView ref={(ref) => { this.scrollListReftop = ref; }}>
< /ScrollView>
// write this to get scroll on top
this.scrollListReftop.scrollTo({x: 0, y: 0, animated: true})
I totally agree, scroll view is not working in the modal
Simple Example : https://snack.expo.io/ry!D35T_I
any help someone please ? @jacklam718 @MAsad-Nawaz
I totally agree, scroll view is not working in the modal
Simple Example : https://snack.expo.io/ry!D35T_I
any help someone please ? @jacklam718 @MAsad-Nawaz
here is the example in which scroll-view is working fine. If you want to know something else let me know. This modal example is perfectly working on iOS and android. `import React, { Component } from 'react'; import { Modal, ScrollView,Text, TouchableHighlight, View, StyleSheet}
from 'react-native' class ModalExample extends Component { state = { modalVisible: false, } toggleModal(visible) { this.setState({ modalVisible: visible }); } render() { return ( <View style = {styles.container}>
<Modal transparent = {false}
animationType = {"slide"}
visible = {this.state.modalVisible}
onRequestClose = {() => { this.setState({ modalVisible: false }) }}
presentationStyle = "formSheet"
>
<View style = {styles.modal}>
<Text style = {styles.text}>Modal is open!</Text>
<ScrollView>
<TouchableHighlight onPress = {() => {
this.toggleModal(!this.state.modalVisible)}}>
<Text style = {styles.text}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
praesentium non minima exercitationem sequi nostrum, accusamus
commodi vero laborum laudantium odit, alias perspiciatis id eius
culpa architecto quo ratione nesciunt? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Beatae praesentium non minima
exercitationem sequi nostrum, accusamus commodi vero laborum
laudantium odit, alias perspiciatis id eius culpa architecto quo
ratione nesciunt? Lorem ipsum dolor sit amet consectetur
adipisicing elit. Beatae praesentium non minima exercitationem
sequi nostrum, accusamus commodi vero laborum laudantium odit,
alias perspiciatis id eius culpa architecto quo ratione nesciunt?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
praesentium non minima exercitationem sequi nostrum, accusamus
commodi vero laborum laudantium odit, alias perspiciatis id eius
culpa architecto quo ratione nesciunt? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Beatae praesentium non minima
exercitationem sequi nostrum, accusamus commodi vero laborum
laudantium odit, alias perspiciatis id eius culpa architecto quo
ratione nesciunt? Lorem ipsum dolor sit amet consectetur
adipisicing elit. Beatae praesentium non minima exercitationem
sequi nostrum, accusamus commodi vero laborum laudantium odit,
alias perspiciatis id eius culpa architecto quo ratione nesciunt?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
praesentium non minima exercitationem sequi nostrum, accusamus
commodi vero laborum laudantium odit, alias perspiciatis id eius
culpa architecto quo ratione nesciunt? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Beatae praesentium non minima
exercitationem sequi nostrum, accusamus commodi vero laborum
laudantium odit, alias perspiciatis id eius culpa architecto quo
ratione nesciunt? Lorem ipsum dolor sit amet consectetur
adipisicing elit. Beatae praesentium non minima exercitationem
sequi nostrum, accusamus commodi vero laborum laudantium odit,
alias perspiciatis id eius culpa architecto quo ratione nesciunt?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
praesentium non minima exercitationem sequi nostrum, accusamus
commodi vero laborum laudantium odit, alias perspiciatis id eius
culpa architecto quo ratione nesciunt?
</Text>
</TouchableHighlight>
</ScrollView>
</View>
</Modal>
<TouchableHighlight onPress = {() => {this.toggleModal(true)}}>
<Text style = {styles.text}>Open Modal</Text>
</TouchableHighlight>
</View>
)
} } export default ModalExample
const styles = StyleSheet.create ({ container: { alignItems: 'center', backgroundColor: 'green', padding: 20 }, modal: { flex: 1, alignItems: 'center', backgroundColor: 'black', height:100, padding: 100 }, text: { color: 'white', marginTop: 10 } })`
I totally agree, scroll view is not working in the modal
Simple Example : https://snack.expo.io/ry!D35T_I
any help someone please ? @jacklam718 @MAsad-Nawaz
here is the link https://snack.expo.io/BkEWBRCbL
@MAsad-Nawaz thanks for the hint, i'm moving to the community package https://github.com/react-native-community/react-native-modal which seems more reliable :)
@MAsad-Nawaz thanks for the hint, i'm moving to the community package https://github.com/react-native-community/react-native-modal which seems more reliable :)
Welcome :) if you need any help, let me know
I am experiencing the same issue, iOS only though. The ScrollView is almost not possible to be scrolled - only sometimes it "catches" the scroll events and in a limited manner.
@jacklam718 any input on this? Thanks!
For those still looking for a solution, I created a library dedicated to this behaviour of swiping/scrolling all together: https://github.com/jeremybarbet/react-native-modalize
I totally agree, scroll view is not working in the modal Simple Example : https://snack.expo.io/ry!D35T_I any help someone please ? @jacklam718 @MAsad-Nawaz
here is the example in which scroll-view is working fine. If you want to know something else let me know. This modal example is perfectly working on iOS and android. `import React, { Component } from 'react'; import { Modal, ScrollView,Text, TouchableHighlight, View, StyleSheet}
from 'react-native' class ModalExample extends Component { state = { modalVisible: false, } toggleModal(visible) { this.setState({ modalVisible: visible }); } render() { return (
<Modal transparent = {false} animationType = {"slide"} visible = {this.state.modalVisible} onRequestClose = {() => { this.setState({ modalVisible: false }) }} presentationStyle = "formSheet" > <View style = {styles.modal}> <Text style = {styles.text}>Modal is open!</Text> <ScrollView> <TouchableHighlight onPress = {() => { this.toggleModal(!this.state.modalVisible)}}> <Text style = {styles.text}> Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae praesentium non minima exercitationem sequi nostrum, accusamus commodi vero laborum laudantium odit, alias perspiciatis id eius culpa architecto quo ratione nesciunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae praesentium non minima exercitationem sequi nostrum, accusamus commodi vero laborum laudantium odit, alias perspiciatis id eius culpa architecto quo ratione nesciunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae praesentium non minima exercitationem sequi nostrum, accusamus commodi vero laborum laudantium odit, alias perspiciatis id eius culpa architecto quo ratione nesciunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae praesentium non minima exercitationem sequi nostrum, accusamus commodi vero laborum laudantium odit, alias perspiciatis id eius culpa architecto quo ratione nesciunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae praesentium non minima exercitationem sequi nostrum, accusamus commodi vero laborum laudantium odit, alias perspiciatis id eius culpa architecto quo ratione nesciunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae praesentium non minima exercitationem sequi nostrum, accusamus commodi vero laborum laudantium odit, alias perspiciatis id eius culpa architecto quo ratione nesciunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae praesentium non minima exercitationem sequi nostrum, accusamus commodi vero laborum laudantium odit, alias perspiciatis id eius culpa architecto quo ratione nesciunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae praesentium non minima exercitationem sequi nostrum, accusamus commodi vero laborum laudantium odit, alias perspiciatis id eius culpa architecto quo ratione nesciunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae praesentium non minima exercitationem sequi nostrum, accusamus commodi vero laborum laudantium odit, alias perspiciatis id eius culpa architecto quo ratione nesciunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae praesentium non minima exercitationem sequi nostrum, accusamus commodi vero laborum laudantium odit, alias perspiciatis id eius culpa architecto quo ratione nesciunt? </Text> </TouchableHighlight> </ScrollView> </View> </Modal> <TouchableHighlight onPress = {() => {this.toggleModal(true)}}> <Text style = {styles.text}>Open Modal</Text> </TouchableHighlight> </View> )} } export default ModalExample
const styles = StyleSheet.create ({ container: { alignItems: 'center', backgroundColor: 'green', padding: 20 }, modal: { flex: 1, alignItems: 'center', backgroundColor: 'black', height:100, padding: 100 }, text: { color: 'white', marginTop: 10 } })`
But this is actually not using this package - instead a normal modal right? ...
I came across a workaround (albeit intended for a different package), but it seems to solve for me: Wrap your content with TouchableOpacity.
Ref: https://stackoverflow.com/a/57960538
I came across a workaround (albeit intended for a different package), but it seems to solve for me: Wrap your content with
TouchableOpacity.Ref: https://stackoverflow.com/a/57960538
But can you then use controls like buttons inside it as well?
I was able to fix this based on @rchavik's tip:
<ModalContent
style={{
flex: 1,
backgroundColor: COLORS.WHITE,
}}>
<ScrollView style={{flex: 1}}>
<View style={{flex: 1}} onStartShouldSetResponder={() => true}>
{product.simpleProducts.map((simple) => (
<TouchableOpacity
disabled={!simple.in_stock}
style={[styles.selectorRow]}
onPress={async () => {
await selectProductAttribute(
`${simple.attributes[0].id}:${simple.attributes[0].value_id}`,
);
setVisible(false);
}}>
<Text>
{simple.attributes[0].value}
</Text>
</TouchableOpacity>
))}
</View>
</ScrollView>
...
I came across a workaround (albeit intended for a different package), but it seems to solve for me: Wrap your content with
TouchableOpacity.Ref: https://stackoverflow.com/a/57960538
Note: This workaround is not working properly on real device.
Hey everyone I found a fix based on the maintainers response above. Just wrap your content directly inside the ScrollView with TouchableOpacity:
<ScrollView>
<TouchableOpacity activeOpacity={.99}>
{...modalchildren}
</TouchableOpacity>
</ScrollView>
Hi, modify like this. It's my work around. But, I don't sure it's a good solution.
https://github.com/307499815/react-native-modals/commit/0f3596c7fa37ad2363ac34a6e31b442b83a6007f
