react native scrollview not scrolling on android

Question

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:

ZeivRine · Accepted Answer · 2021-02-12 05:34:26Z

22

try to import from

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

instead of from

'react native'

answered Feb 12, 2021 at 5:34

ZeivRine

2333 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jonathan Over a year ago

Thanks, you saved my life! Not sure why it wasn't included in react-native itself. I'm going to check what react-native-gesture-handler does.

Darryl Young Over a year ago

Thanks! This works for me, but it'd nice to know why we have to use this as opposed to the one from React Native. Do you have any idea?

Gonzalo Lorieto Over a year ago

@ZeivRine can you explain why this works?

Ken Over a year ago

As of today, I can confirm that this is the only thing that worked for me. I spent several hours trying to make a horizontal ScrollView work on Android and nothing worked until I imported ScrollView from 'react-native-gesture-handler'

ikerfah · Accepted Answer · 2019-03-23 10:31:37Z

15

Use flexGrow : 1 inside your styles.scroll instead of flex:1

answered Mar 23, 2019 at 10:31

ikerfah

2,8821 gold badge13 silver badges22 bronze badges

2 Comments

ikerfah Over a year ago

if it's oki to you to change the schema (swap the ScrollView with the view). use this : ``` export default class StoreComponent extends Component { render() { return ( <ScrollView contentContainerStyle={styles.scroll}> <View style={styles.container}> <StoreCarouselComponent /> <StoreDiscountComponent /> <StoreDetailsComponent /> </View> </ScrollView> ); } } ``` if this doesn't work , can you please add nestedScrollEnabled={true} props to your Scrollview ?

user13101751 Over a year ago

This doesn't really work for me. Could you take a look here please? stackoverflow.com/questions/63437251/…

ihake · Accepted Answer · 2020-01-09 18:45:23Z

4

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.

answered Jan 9, 2020 at 18:45

ihake

1,8611 gold badge18 silver badges30 bronze badges

1 Comment

user13101751 Over a year ago

This doesn't really work for me. Could you take a look here please? stackoverflow.com/questions/63437251/…

Nabil CHOUKRI · Accepted Answer · 2020-02-20 14:54:14Z

4

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

answered Feb 20, 2020 at 14:54

Nabil CHOUKRI

791 silver badge9 bronze badges

1 Comment

user13101751 Over a year ago

This doesn't really work for me. Could you take a look here please? stackoverflow.com/questions/63437251/…

Mervzs · Accepted Answer · 2019-03-23 10:32:20Z

2

the styles on your scroll contentContainerStyle is uneccessary

try to remove : styles.scroll

and just give padding or margin on component if you to center it

if its row add props horizontal = true on ScrollView.

answered Mar 23, 2019 at 10:32

Mervzs

1,1548 silver badges21 bronze badges

2 Comments

Jean Over a year ago

thanks, but without the style my content is aling to the left, also a need to scroll vertically no horizontally.

Mervzs Over a year ago

if you dont want to modify your child components margin/padding . another options is add this to your ScrollView contentContainerStyle={{width:'100%', alignItems:'center'}}

Павел Лунин · Accepted Answer · 2024-05-14 11:38:54Z

1

worked for me now

try to import from

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

instead of from

'react native'

edited May 14, 2024 at 11:38

answered May 14, 2024 at 11:37

Павел Лунин

112 bronze badges

1 Comment

Ajay Shah Over a year ago

this is the only solution that worked for me. thanks.

djsdev · Accepted Answer · 2021-07-08 13:21:22Z

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>

The Mask · Accepted Answer · 2024-07-01 12:38:49Z

0

applying flexDirection over ScrollView can cause scrolling issues over android.

answered Jul 1, 2024 at 12:38

The Mask

5777 silver badges20 bronze badges

Collectives™ on Stack Overflow

react native scrollview not scrolling on android

8 Answers 8

4 Comments

2 Comments

1 Comment

1 Comment

2 Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

4 Comments

2 Comments

1 Comment

1 Comment

2 Comments

1 Comment

Comments

Comments

Linked

Related