Ndtyjky

I want to make an example that includes an infinite-scroll list contains CardImage components. I follow this blog and it is used impagination package. Only different from that example is that I use vue-native which is a wrapper around React Native APIs.

When I start the app on the emulator, CardImage component is rendered successfully. But when I call the setupImpagination() function I get an error that "_impagination.Dataset is not a constructor". Did I missed something or is this a compatibility issue between react-native and vue-native? Any help would be great.

App.vue

<template>

    <nb-container>

        <nb-header />

        <nb-content padder>

            <nb-card>

                <nb-card-item>

                    <nb-left>

                        <nb-thumbnail :source="logo"></nb-thumbnail>

                        <nb-body>

                            <nb-text>NativeBase</nb-text>

                            <nb-text note>GeekyAnts</nb-text>

                        </nb-body>

                    </nb-left>

                </nb-card-item> 

                <nb-card-item cardBody>

                    <image :source="cardImage" class="card-item-image" :style="stylesObj.cardItemImage"/>

                </nb-card-item>

                <nb-card-item>

                    <nb-left>

                        <nb-button :onPress="setupImpagination">

                            <nb-icon name="thumbs-up" active></nb-icon>

                            <nb-text>4923 Likes</nb-text>

                        </nb-button>

                    </nb-left>

                    <nb-body>

                        <nb-button transparent>

                            <nb-icon name="chatbubbles" active></nb-icon>

                            <nb-text>89 Comments</nb-text>

                        </nb-button>

                    </nb-body>

                    <nb-right>

                        <nb-text>11h ago</nb-text>

                    </nb-right>

                </nb-card-item>

            </nb-card>

        </nb-content>

    </nb-container>

</template>



<style>

.container {

    background-color: white;

    align-items: center;

    justify-content: center;

    flex: 1;

}

.text-color-primary {

    color: blue;

}

.card-item-image {

    align-self: center;

    height: 150;

    margin-vertical: 5;

}

</style>



<script>

    import { Dataset }  from "impagination";

    import logo from "./assets/logo.png";

    import cardImage from "./assets/drawer-cover.png";

    import { Dimensions } from "react-native";

    const deviceWidth = Dimensions.get("window").width;



    export default {

        data: function() {

            return {

                logo,

                cardImage,

                stylesObj: {

                    cardItemImage: {

                        resizeMode: "cover",

                        width: deviceWidth / 1.18

                    }

                }

            };

        },

        methods: {

            setupImpagination:function(){

                console.log("setupImpagination");

                let dataset = new Dataset({

                    pageSize: 15,

                    loadHorizon: 10,

      fetch:function(pageOffset, pageSize, stats) {

        return fetch('https://serene-beach-38011.herokuapp.com/api/faker?page='+${pageOffset + 1}+'&per_page='+${pageSize}+')'

        .then(response => {response.json();

            console.log(response.json())})

        .catch((error) => {

            console.error(error);

        });

      },

      unfetch: function(records, pageOffset) {

        console.log("unfetch")

      },

      filter: function(element, index, array) {

        console.log("filter")

      },

        observe:(datasetState) => {

        console.log("observe");

      }

  });

            }   



        }



    }

</script>

package.json

{

  "name": "my_app",

  "version": "0.0.1",

  "private": true,

  "scripts": {

    "start": "node node_modules/react-native/local-cli/cli.js start",

    "test": "jest"

  },

  "dependencies": {

    "impagination": "^1.0.0-alpha.3",

    "native-base": "^2.8.1",

    "react": "16.3.1",

    "react-native": "0.55.4",

    "vue-native-core": "0.0.8",

    "vue-native-helper": "0.0.9"

  },

  "devDependencies": {

    "babel-jest": "23.6.0",

    "babel-preset-react-native": "4.0.1",

    "jest": "23.6.0",

    "react-test-renderer": "16.3.1",

    "vue-native-scripts": "0.0.14"

  },

  "jest": {

    "preset": "react-native"

  }

}