I'm getting the following warning trying to use reac-native-directed-scrollview, and the ScrollView doesn't allow me to scroll
import React from 'react';
import {
View,
} from 'react-native';
import ScrollView, { ScrollViewChild } from 'react-native-directed-scrollview';
export default class Grid extends React.Component {
render() {
return (
<ScrollView
bounces={true}>
<ScrollViewChild scrollDirection={'both'}>
<View style={{ flexDirection: 'row' }}>
<View style={{ width: '50%', aspectRatio: 1 }}>
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
</View>
<View style={{ width: '50%', aspectRatio: 1 }}>
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
</View>
<View style={{ width: '50%', aspectRatio: 1 }}>
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
<View style={{ marginTop: '2%', width: '10%', aspectRatio: 1, backgroundColor: '#aaffaa' }} />
</View>
</View>
</ScrollViewChild>
</ScrollView>
)
}
}
"dependencies": {
"react": "16.6.3",
"react-native": "0.58.3",
"react-native-gesture-handler": "^1.0.15",
"react-native-navigation": "^2.8.0",
"react-native-paper": "^2.7.0",
"react-native-vector-icons": "^6.2.0",
"react-native-directed-scrollview": "^2.0.0",
"react-navigation": "^3.0.9",
"react-navigation-material-bottom-tabs": "^1.0.0"
},
"devDependencies": {
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "24.0.0",
"jest": "24.0.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.6.3"
},