ScrollView not working in Android

[abhideepmallick]

So, my situation is that, the content of the slides are large which requires vertical scrolling. I have implemented Vertical Scrolling and it works fine in iOS. But Android does not respond to the said gesture. I am attaching a code snippet of my implementation: <ScrollView style={{ flex: 1 }} contentContainerStyle={{ alignSelf: 'stretch' }} contentInset={{ top: 64, bottom: 48 }} contentOffset={{ y: -64, x: 0 }} automaticallyAdjustContentInsets={false} > <View style={styles.slideContent}> <View level={0}><Text style={styles.titleFourthSlide}>{this.props.translator.t("onboardFourTitle").toUpperCase()}</Text></View> <View level={1}><Image style={styles.rowImage} source={require('./images/onboarding/4-1.png')} resizeMode={Image.resizeMode.contain} /></View> <View level={2}><Text style={styles.rowText}>{this.props.translator.t("onboardFourTextOne").toUpperCase()}</Text></View> <View level={3}><Image style={styles.rowImage} source={require('./images/onboarding/4-2.png')} resizeMode={Image.resizeMode.contain} /></View> <View level={4}><Text style={styles.rowText}>{this.props.translator.t("onboardFourTextTwo")}</Text></View> <View level={5}><Image style={styles.rowImage} source={require('./images/onboarding/4-3.png')} resizeMode={Image.resizeMode.contain} /></View> <View level={6}><Text style={styles.rowText}>{this.props.translator.t("onboardFourTextThree")}</Text></View> </View> </ScrollView>

This works as expected in iOS, but not in Android. Any solutions/suggestions to fix this?

[shtsht]

The same issue with me.

[joshjconlin]

This is an issue with react native, android can't have nested scrollviews. see issue https://github.com/facebook/react-native/issues/8024

[mazikwyry]

I solved it by changing:

    if (pageArray.length > 0) {
      pages = pageArray.map((page, i) => this.renderBasicSlidePage(i, page));
    } else {
      if (Platform.OS === 'ios') {
        pages = childrens.map((children, i) => this.renderChild(children, i, i));
      } else {
        androidPages = childrens.map((children, i) => {
          const { transform } = this.getTransform(i, -windowsWidth / 3 * 2, 1);
          pages.push(<View key={i} />);
          return (
            <Animated.View key={i} style={[{
              position: 'absolute',
              height: windowsHeight,
              width: windowsWidth,
              top: 0,
            }, {
              ...transform[0],
            }]}
            >
              {this.renderChild(children, i, i)}
            </Animated.View>
          );
        });
      }
    }

to just:

    if (pageArray.length > 0) {
      pages = pageArray.map((page, i) => this.renderBasicSlidePage(i, page));
    } else {
      pages = childrens.map((children, i) => this.renderChild(children, i, i));
    }

in the render method - it works just fine.