React-native-tab-view: TabView inside ScrollView can not scroll vertically

Created on 19 Dec 2019  ·  1Comment  ·  Source: satya164/react-native-tab-view

# Current behaviour
rendering TabView inside ScrollView, the scene height is higher than screen height, but the ScrollView could not scroll vertically

Expected behaviour

when the content of TabView is higher than screen height, ScrollView could scroll vertivally

Code sample

import * as React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';

const FirstRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);

const SecondRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);

const initialLayout = { width: Dimensions.get('window').width };

export default function TabViewExample() {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' },
  ]);

  const renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
  });

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
    />
  );
}

const styles = StyleSheet.create({
  scene: {
    height: 1000
  },
});

app.js

<ScrollView style={{flex: 1}} contentContainerStyle={{flex:1}}>
 <TabViewExample />
</ScrollView>

Screenshots (if applicable)

What have you tried

Your Environment

    OS: macOS 10.15.2
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 624.64 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.3.0 - /usr/local/bin/node
    Yarn: 1.19.1 - ~/.yarn/bin/yarn
    npm: 6.7.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 21, 23, 26, 27, 28
      Build Tools: 23.0.1, 26.0.1, 28.0.3, 29.0.2
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.3/11C29 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.5 => 0.61.5
bug

Most helpful comment

oh, i finally find what is wrong. change ScrollView's props contentContainerStyle={{flex:1}}
to contentContainerStyle={{flexGrow:1}}.
see https://github.com/facebook/react-native/issues/4099
and solution https://github.com/facebook/react-native/issues/4099#issuecomment-307541206

>All comments

oh, i finally find what is wrong. change ScrollView's props contentContainerStyle={{flex:1}}
to contentContainerStyle={{flexGrow:1}}.
see https://github.com/facebook/react-native/issues/4099
and solution https://github.com/facebook/react-native/issues/4099#issuecomment-307541206

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ios-dev-newbie picture ios-dev-newbie  ·  3Comments

t3chnoboy picture t3chnoboy  ·  3Comments

compojoom picture compojoom  ·  4Comments

ahmedrowaihi picture ahmedrowaihi  ·  3Comments

chen504554911 picture chen504554911  ·  3Comments