I am making a react native project with my android phone connected to my laptop.
Problem:
When I swipe on the right side of my phone screen the page scrolls. But when I swipe on the center or left side of my phone screen the page does not scroll.
I am also getting a warning in my console
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.I am not able to understand this warning. What is "orientation"?
This is my code:
import React, { FunctionComponent, useState } from "react";import { observer } from "mobx-react-lite";import { Block, Text, Button, Header } from "../../components";import { ThemeProvider, Card } from "react-native-elements";import { View, TouchableWithoutFeedback, Keyboard, Modal, Image, ScrollView, SafeAreaView, StyleSheet, FlatList } from "react-native";import { useNavigation } from "@react-navigation/native";import { typography, colors, spacing } from 'theme';import { buttonStyles } from '../../theme/components/buttonStyles';import Icon from 'react-native-vector-icons/MaterialIcons';import users from './users.js';export const SuperAdminScreensOrganizationDetailsScreen: FunctionComponent<{}> = observer(props => {return (<TouchableWithoutFeedback style={{ flex: 1 }} onPress={Keyboard.dismiss}><SafeAreaView><Header title="Organizations" navigation={props.navigation} /><ScrollView><Block mb={spacing.huge}><Card><Block row space="between"><Block><Text preset="subheader">Organization 1</Text><Text preset="secondary">Expiration Date: 03-08-2019</Text></Block><Block row><Icon name="edit" size={spacing.large} /><Text ml={spacing.tiny} preset="bold"> Edit</Text></Block></Block><Block row space="between"><Block bottom left><Text preset="smallBold"> Prateek Kolhi</Text><Text preset="fieldLabel">+1 654 893 8098</Text></Block><Block><Block row right bottom><ThemeProvider theme={buttonStyles}><Button title="Add User" buttonStyle={{ width: typography.smallButtonWidth, height: typography.smallButtonHeight }} titleStyle={{ fontSize: typography.smallButtonFontSize, marginHorizontal: typography.smallButtonmx }} onPress={() => navigation.navigate('AddNewUser')} /></ThemeProvider><Block mx={spacing.tiny}></Block><ThemeProvider theme={buttonStyles}><Button title="Delete" buttonStyle={{ width: typography.smallButtonWidth, height: typography.smallButtonHeight, backgroundColor: colors.cancelButtonBackground, borderWidth: typography.buttonBorderWidth, borderColor: colors.cancelButtonBorder }} titleStyle={{ fontSize: typography.smallButtonFontSize, marginHorizontal: typography.smallButtonmx, color: colors.titleColor }} onPress={openModal} /></ThemeProvider></Block><Block bottom right><Text preset="fieldLabel">root@organization.com</Text></Block></Block></Block><Text mt={spacing.tiny} pa={spacing.tiny} style={{ backgroundColor: colors.totalMembers }} mx={-spacing.medium} mb={-spacing.medium} pl={spacing.medium}> Total Members: {users.length}</Text><FlatList style={{ marginHorizontal: -spacing.medium }} contentContainerStyle={{ paddingBottom: spacing.medium }} data={users} keyExtractor={(item, index) => item.id} renderItem={({ item }) => (<Card containerStyle={styles.userCards}><Block row space="between" style={{ alignItems: 'center' }}><Block row><Block><Image source={item.src} style={{ height: 50, width: 50, borderRadius: 25 }} /></Block><Block ml={spacing.small} style={{ justifyContent: 'center' }}><Text preset="smallBold">{item.firstName} {item.lastName}</Text><Text preset="secondary">{item.role}</Text></Block></Block><Block><ThemeProvider theme={buttonStyles}><Button onPress={() => navigation.navigate('AddNewUser')} title="Edit Role" buttonStyle={{ width: typography.smallButtonWidth, height: typography.smallButtonHeight }} titleStyle={{ fontSize: typography.smallButtonFontSize, marginHorizontal: typography.smallButtonmx }} /></ThemeProvider></Block></Block></Card> )} /></Card></Block></ScrollView></SafeAreaView></TouchableWithoutFeedback>);});Can anyone tell me how to solve this problem? Thanks.