Warning: VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

[jaksm]

I am getting this warning since the new expo SDK 36 update. I was able to solve these warnings by wrapping every <Flatlist> with <SafeAreaView> but I can't seem to find a way to do the same with <KeyboardAwareScrollView>.

Any thoughts on this?

Wrapper Component utilizing KeyboardAwareScrollView

import React, { FC } from 'react';
import {
  KeyboardAwareScrollView,
  KeyboardAwareScrollViewProps,
} from 'react-native-keyboard-aware-scroll-view';

/*
 * THE KEYBOARD IS LAVA 🔥🔥🔥
 * */

export const KeyboardAwareView: FC<KeyboardAwareScrollViewProps> = ({ children, ...rest }) => {
  return <KeyboardAwareScrollView {...rest}>{children}</KeyboardAwareScrollView>;
};

KeyboardAwareView.defaultProps = {
  resetScrollToCoords: { x: 0, y: 0 },
  scrollEnabled: true,
  enableOnAndroid: true,
  contentContainerStyle: {
    flexGrow: 1,
    alignItems: 'stretch',
  },
};

Usage

 // Adding <SafeAreaView> here does nothing
<Screen alignItems={'stretch'} justifyContent={'flex-start'}>
          // Adding <SafeAreaView> here does nothing
      <KeyboardAwareView>
             // Adding <SafeAreaView> here does nothing
            <ProfileImage
              onPick={({ uri }) =>
                this.setState(prevState => ({ ...prevState, photo: uri }), this.handleUserInfoSubmit)
              }
              placeholderURI={user.photoURL}
            />
            <ProfileHeading>{user.displayName}</ProfileHeading>
            <ProfileText>{user.email}</ProfileText>

            <ProfileForm>
              <Field>
                <Subheading>{i18n.t('screens.profile.settings.inputs.name')}</Subheading>
                <Input
                  placeholder={'Full Name'}
                  autoCapitalize={'words'}
                  autoCorrect={false}
                  keyboardType={'name-phone-pad'}
                  autoCompleteType={'name'}
                  onChangeText={displayName => this.handleUserInfoInput('displayName', displayName)}
                  value={displayName}
                  defaultValue={user.displayName}
                />
              </Field>

              <Field>
                <Subheading>{i18n.t('screens.profile.settings.inputs.email')}</Subheading>
                <Input
                  placeholder={'Email'}
                  keyboardType={'email-address'}
                  autoCapitalize={'none'}
                  autoCorrect={false}
                  autoCompleteType={'email'}
                  onChangeText={email => this.handleUserInfoInput('email', email)}
                  value={email}
                  defaultValue={user.email}
                />
              </Field>

              <Field>
                <Subheading>{i18n.t('screens.profile.settings.inputs.phoneNumber')}</Subheading>
                <ChangePhoneNumber defaultValue={user.phoneNumber} />
              </Field>
            </ProfileForm>

            <Button onPress={() => (changed ? this.handleUserInfoSubmit() : logout())}>
              {changed
                ? i18n.t('screens.profile.settings.button.updateInfo')
                : i18n.t('screens.profile.settings.button.logout')}
            </Button>
          </KeyboardAwareView>
      </Screen>

Warning:

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.
- node_modules/expo/build/environment/muteWarnings.fx.js:18:23 in warn
- node_modules/react-native/Libraries/Lists/VirtualizedList.js:1054:16 in ScrollView.Context.Consumer.props.children
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:14701:25 in updateContextConsumer
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20459:25 in beginWork$$1
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19370:24 in performUnitOfWork
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19347:39 in workLoopSync
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18997:22 in renderRoot
* [native code]:null in renderRoot
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18709:28 in runRootCallback
* [native code]:null in runRootCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
- node_modules/scheduler/cjs/scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18796:28 in batchedUpdates$1
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2709:30 in batchedUpdates
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2794:17 in batchedUpdates$argument_0
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2814:26 in receiveEvent
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

Environment:

  Expo CLI 3.11.2 environment info:
    System:
      OS: macOS 10.15.1
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.14.0 - /usr/local/bin/node
      Yarn: 1.21.0 - /usr/local/bin/yarn
      npm: 6.13.4 - /usr/local/bin/npm
    IDEs:
      Xcode: 11.3/11C29 - /usr/bin/xcodebuild
    npmPackages:
      @types/react: ^16.9.9 => 16.9.16
      @types/react-native: ^0.60.21 => 0.60.25
      expo: ^36.0.0 => 36.0.1
      react: 16.9.0 => 16.9.0
      react-native: https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz => 0.61.4
      react-navigation: ^4.0.10 => 4.0.10
    npmGlobalPackages:
      expo-cli: 3.11.2

[mlop113]

• 1 same issue

[arshidkv12]

Same issue

[hkung77]

I have done some digging and I think this answers the question why its happening.

(https://forums.expo.io/t/warning-virtualizedlists-should-never-be-nested-inside-plain-scrollviews-with-the-same-orientation-use-another-virtualizedlist-backed-container-instead/31361/9)

In terms of a solution... perhaps trying KeyboardAwareFlatList instead of KeyboardAwareScrollView could resolve the issue.

[Dallas62]

Hi, This issue is weird because the library works perfectly when this is the root component (before navigation component). But if I want to avoid this kind of nesting, I get strange scroll behaviour (wrong place or huge padding). What can we do to avoid both issues ? Regards

[myhendry]

anyone has found a solution to this issue? im encountering it now

[arundevkv]

I found a temporary work around.

<ScrollView style={{ flex: 1 }} contentContainerStyle={{ width: SCREEN_WIDTH }} scrollEnabled={false} horizontal> <FlatList {...} /> </ScrollView> It worked for my scenario