'Disable scroll in View on Expo Web

I am using Expo with react native and just have a plain view with some things inside of it. When I run the code as an expo app on my iPhone the view does not scroll vertically or horizontally (as I intended), but on web it does (Safari - after publishing with expo web). I want to disable this scrolling in both directions because I have swipeable components inside the view, so if the whole view moves things just don't work as intended.

How can I do that?

Here is my code:

<View style={styles.MainContainer}>
     
      {this.state.Sample_Card_Array.map((item, key) => (
        <SwipeableCard
          key={key}
          item={item}
          removeCard={this.removeCard.bind(this, item.id)}
          swipedRight={this.swipedRight.bind(this, item)}
          swipedLeft={this.swipedLeft.bind(this, item.songID)}
        />
        
      ))}
      
      {this.state.No_More_Card ? (
        <View style={{flex:1}}>
          <FlatList
            data={this.state.songNamesApproved}
            renderItem={this._renderItem}
          />
          
        </View>
      ) : null}
      
    </View>

this is maincontainer

MainContainer: {
  flex: 1,
  justifyContent:'center',
  alignItems:'center',
  paddingTop: Platform.OS === 'ios' ? 20 : 0,

},

Solution 1:^[1]

I solved the problem by making the parent view a scrollview, now on Web it doesn't scroll left and right anymore when swiping.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Aatish Parson

'Disable scroll in View on Expo Web

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]