Reputation: 5411

react native scrollview not scrolling on android

I have the following component:

export default class StoreComponent extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView contentContainerStyle={styles.scroll}>
          <StoreCarouselComponent />
          <StoreDiscountComponent />
          <StoreDetailsComponent />
        </ScrollView>
      </View>
    );
  }
}

with this style

import { StyleSheet, Dimensions, } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  scroll: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center'
  },
  image: {
    width: Dimensions.get('window').width,
    height: 350,
  },
  box: {
    width: Dimensions.get('window').width - 30,
    position: 'absolute',
    shadowColor: '#000000',
    shadowOpacity: 0.34,
    shadowRadius: 5,
    shadowOffset: {
      width: 0,
      height: 10
    },
    elevation: 10,
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
    borderColor: 'lightgrey',
    backgroundColor: '#ffffff',
    padding: 10,
    marginTop: 410,

  },
  boxDiscount: {
    width: Dimensions.get('window').width - 30,
    position: 'absolute',
    shadowColor: '#000000',
    shadowOpacity: 0.34,
    shadowRadius: 5,
    shadowOffset: {
      width: 0,
      height: 10
    },
    elevation: 10,
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
    borderColor: 'lightgrey',
    backgroundColor: '#253241',
    padding: 10,
    marginTop: 320,
  },
  title: {
    fontSize: 30
  },
  distance: {
    fontSize: 20,
    color: '#767676'
  },
  distanceElement: {
    fontSize: 20,
    color: '#44D9E6'
  },
  address: {
    fontSize: 20,
    color: '#767676'
  },
  category: {
    fontSize: 20,
    color: '#767676',
  },
  categoryElement: {
    fontSize: 20,
    color: '#44D9E6',
  },
  hr: {
    borderBottomColor: 'lightgrey',
    borderBottomWidth: 1,
  },
  icons: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
  }
});

export default styles;

my scrollview works on ios but on android don't and I don't understand why

here a an image of the app and as you can see I need to scroll on android:

Upvotes: 14

Answers (8)

The Mask

Reputation: 579

applying flexDirection over ScrollView can cause scrolling issues over android.

Upvotes: 0

Павел Лунин

Reputation: 11

worked for me now

try to import from

import { ScrollView } from 'react-native-gesture-handler';

instead of from

'react native'

Upvotes: 1

djsdev

Reputation: 136

I too had the similar structure as mentioned in question. I had 3 direct children View inside ScrollView and it wasn't scrolling. I tried all above solutions with flex, flexGrow etc. Nothing worked for me.

What worked for me is wrapping all 3 direct children to another View, so for ScrollView there's only one direct children.

// THIS DOES NOT SCROLL
<ScrollView>
  <View>// 1st direct children</View>
  <View>// 2nd direct children</View>
  <View>// 3rd direct children</View>
</ScrollView>


// THIS WILL SCROLL, As now ScrollView has only one direct children
<ScrollView>
  <View>
    <View>// 1st children</View>
    <View>// 2nd children</View>
    <View>// 3rd children</View>
  </View>
</ScrollView>

Upvotes: 0

ZeivRine

Reputation: 233

try to import from

import { ScrollView } from 'react-native-gesture-handler';

instead of from

'react native'

Upvotes: 22

Nabil CHOUKRI

Reputation: 79

use flex: 1 inside style={styles.container} and delete it from .scroll

Upvotes: 4

ihake

Reputation: 1821

I had a similar issue. The culprit turned out to be contentContainerStyle={{flex: 1}} on my ScrollView. Removing that (It turned out to be unnecessary, anyway.) fixed the problem on Android.

Upvotes: 4