React-native-swiper: error when use in typescript

[wallel]

Which OS ?

win7 64bit

Version

Which versions are you using:

• react-native-swiper V1.5.13
• react-native v0.49.3
• typescript v2.5.3

I got error when use with typescript:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",        
    "module": "commonjs",   
    "jsx": "react",         
    "sourceMap": true,      
    "outDir": "./lib",      
  },
  "include": ["./src/"]
}

when i write a simple component:

import * as React from 'react';
import Swiper from 'react-native-swiper'; // import default
import {View,Image} from 'react-native';
const Test =()=>(
    <Swiper loop={false}>
        <View >
            <Image source={require(`../../images/test1.png`)}></Image>
        </View>
        <View >
            <Image source={require(`../../images/test2.png`)}></Image>
        </View>
    </Swiper>
)
export default Test;

the result after tsc compile is:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const react_native_swiper_1 = require("react-native-swiper");
const react_native_1 = require("react-native");
const Test = () => (React.createElement(react_native_swiper_1.default, { loop: false },
    React.createElement(react_native_1.View, null,
        React.createElement(react_native_1.Image, { source: require(`../../images/test1.png`) })),
    React.createElement(react_native_1.View, null,
        React.createElement(react_native_1.Image, { source: require(`../../images/test2.png`) }))));
exports.default = Test;
//# sourceMappingURL=test.js.map

you can see that, in compiled js code use React.createElement(react_native_swiper_1.default, { loop: false }create Swiper component,but actually react_native_swiper_1 is the valid component,while react_native_swiper_1.default is undefined,Because in index.js:

import Swiper from './src/'
module.exports = Swiper

I see the PR #393 resolved the problem. so why not use it?

[sunny635533]

In node_modules/react-native-swiper has index.d.ts,but its version is old.When we use "npm install @types/react-native-swiper", could get the latest d.ts.
However our project with typescript only check the old d.ts, so please change the old d.ts with another name,not " index.d.ts",or update its type as the latest d.ts.

[nikolasleblanc]

You can just import from 'react-native-swiper/src' for now.

[andra-work]

I'm having the same error here, and indeed, if I import the Swiper from 'react-native-swiper/src', it works fine. But then I'm getting the following TypeScript error: "Could not find a declaration file for module 'react-native-swiper/src'". Any suggestions? Thanks.

[wallel]

@andra-work my pr #678 fixed this problem,but you must use "require" when import it,see doc of ts.you can try it!,

[rcchen]

This is the least terrible solution I've found:

1. Create a folder types/react-native-swiper/index.d.ts and copy the contents of index.d.ts from this library into that.
2. Ensure that you can use type overrides by adding the following to tsconfig.json

{
  "baseUrl": ".",
  "paths": {
    "*": [ "./types/*" ]
  }
}

1. Modify the typings that you've copied so that the props are now exported

export interface SwiperProps {

1. Use in code like so:

import * as React from "react";
import { SwiperProps } from "react-native-swiper";
const Swiper: React.ComponentClass<
  SwiperProps
> = require("react-native-swiper");

Advantage of this approach is that Swiper is not any typed so you still get type safety relative to the defined props.

The better solution would be to properly do an ES6 export from the component root level but it's not clear that PRs are being merged at the moment / maintenance is being done on this library. Specifically, if https://github.com/leecade/react-native-swiper/pull/644 were to be merged, a separate set of typings would not have to be maintained for this library.

[guodf]

Two solutions (old):

1. Use commonjs specification：
   const Swiper = require('react-native-swiper');
2. Use ES6 specification：
   import Swiper from 'react-native-swiper/src';

Solutions (New): fix #623

1. CommonJS code
   const Swiper = require('react-native-swiper');
2. ES6 code
   import Swiper from 'react-native-swiper';