Accessing view manager configs directly off UIManager via UIManager['DirectedScrollView'] is no longer supported

[cvgarciarea]

I'm getting the following warning trying to use reac-native-directed-scrollview, and the ScrollView doesn't allow me to scroll

My code:

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>
    )
  }
}

Environment:

  "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"
  },