search

chrisfisher / react-native-directed-scrollview

UNMAINTAINED- see below. A natively implemented scrollview component which lets you specify different scroll directions for child content.
MIT License
149 stars 67 forks source link

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

Open cvgarciarea opened 5 years ago

cvgarciarea commented 5 years ago

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

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