add typescript support, fix useNativeDriver warning.

index.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+
+export interface PageControlProperties {
+  style?: StyleProp<ViewStyle>;
+  numberOfPages: number;
+  progress?: number;
+  animationDuration?: number;
+  margin?: number;
+  activeTintColor?: string;
+  hidesForSinglePage?: boolean;
+}
+
+export interface PageControlAjiProperties extends PageControlProperties {
+  radius?: number;
+  inactiveTransparency?: number;
+  inactiveBorderColor?: string;
+  inactiveTintColor?: string;
+}
+
+export interface PageControlAleppoProperties extends PageControlProperties {
+  radius?: number;
+  inactiveTransparency?: number;
+  inactiveBorderColor?: string;
+  inactiveTintColor?: string;
+}
+
+export interface PageControlJaloroProperties extends PageControlProperties {
+  width?: number;
+  height?: number;
+  borderRadius?: number;
+  inactiveTransparency?: number;
+  inactiveTintColor?: string;
+}
+
+export interface PageControlPoblanoProperties extends PageControlProperties {
+  radius?: number;
+  inactiveBorderColor?: string;
+  activeTransparency?: number;
+}
+
+export class PageControlAji extends React.Component<PageControlAjiProperties, {}> {}
+export class PageControlAleppo extends React.Component<PageControlAleppoProperties, {}> {}
+export class PageControlJaloro extends React.Component<PageControlJaloroProperties, {}> {}
+export class PageControlPoblano extends React.Component<PageControlPoblanoProperties, {}> {}

package.json

@@ -1,8 +1,9 @@
 {
   "name": "react-native-chi-page-control",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Cool page control animations written in React Native",
   "main": "index.js",
+  "types": "index.d.ts",
   "scripts": {
     "test": "test"
   },

src/PageControlAji.js

@@ -1,26 +1,25 @@
-import React, { Component } from 'react';
-import { View, Animated, Platform, ViewPropTypes } from 'react-native';
-import PropTypes from 'prop-types';
+import React, { Component } from "react";
+import { View, Animated, Platform, ViewPropTypes } from "react-native";
+import PropTypes from "prop-types";
 
 const DOT_RADIUS = 6;
 const DOT_MARGINE = 6;
 
 class PageControlAji extends Component {
-
   translateX = new Animated.Value(0);
-  animationDuration = Platform.OS == 'ios' ? this.props.animationDuration : 0;
+  animationDuration = Platform.OS == "ios" ? this.props.animationDuration : 0;
 
   componentDidMount() {
     this.updatePageControl(0);
-  };
+  }
 
   componentDidUpdate(prevProps) {
     if (prevProps.progress !== this.props.progress) {
       this.updatePageControl();
     }
-  };
+  }
 
-  render(){
+  render() {
     const {
       style,
       numberOfPages,
@@ -30,62 +29,56 @@ class PageControlAji extends Component {
       inactiveBorderColor,
       inactiveTintColor,
       activeTintColor,
-      hidesForSinglePage,
+      hidesForSinglePage
     } = this.props;
 
     const pages = Array.from(Array(numberOfPages).keys());
 
     return (
       <View style={style}>
-        {
-          numberOfPages <= 1 && hidesForSinglePage ? (
-            null
-          ) : (
-            <View style={{flexDirection: 'row'}}>
-              {
-                pages.map((index) =>
-                  <View
-                    key={index}
-                    style={{
-                      width: radius * 2,
-                      height: radius * 2,
-                      marginRight: margin,
-                      borderRadius: radius,
-                      opacity: inactiveTransparency,
-                      backgroundColor: inactiveTintColor,
-                      borderColor: inactiveBorderColor || inactiveTintColor,
-                      borderWidth: 1
-                    }}
-                  />
-                )
-              }
-
-              <Animated.View style={{
+        {(numberOfPages > 1 || !hidesForSinglePage) && (
+          <View style={{ flexDirection: "row" }}>
+            {pages.map(index => (
+              <View
+                key={index}
+                style={{
+                  width: radius * 2,
+                  height: radius * 2,
+                  marginEnd: index === pages.length - 1 ? 0 : margin,
+                  borderRadius: radius,
+                  opacity: inactiveTransparency,
+                  backgroundColor: inactiveTintColor,
+                  borderColor: inactiveBorderColor || inactiveTintColor,
+                  borderWidth: 1
+                }}
+              />
+            ))}
+
+            <Animated.View
+              style={{
                 width: radius * 2,
                 height: radius * 2,
-                marginRight: margin,
                 borderRadius: radius,
-                position: 'absolute',
+                position: "absolute",
                 opacity: 1,
                 backgroundColor: activeTintColor,
-                transform: [{translateX: this.translateX}]
+                transform: [{ translateX: this.translateX }]
               }}
-              />
-            </View>
-          )
-        }
+            />
+          </View>
+        )}
       </View>
-    )
-  };
+    );
+  }
 
   updatePageControl(duration = this.animationDuration) {
-    const newTranslateX  = this.getActiveDotTranslateX();
+    const newTranslateX = this.getActiveDotTranslateX();
     this.animateActiveDotTranslateX(newTranslateX, duration);
-  };
+  }
 
   getActiveDotTranslateX() {
     const { progress, numberOfPages, radius, margin } = this.props;
-    const width = ((numberOfPages - 1) * (radius * 2)) + ((numberOfPages - 1) * margin);
+    const width = (numberOfPages - 1) * (radius * 2) + (numberOfPages - 1) * margin;
 
     if (progress <= 0) {
       return 0;
@@ -94,19 +87,18 @@ class PageControlAji extends Component {
     } else {
       return width * progress;
     }
-  };
+  }
 
   animateActiveDotTranslateX(value, duration) {
-    if (isNaN(value)) return
-    
+    if (isNaN(value)) return;
+
     Animated.timing(this.translateX, {
       toValue: value,
       duration: duration,
-      useNativeDriver: true,      
+      useNativeDriver: true
     }).start();
-  };
-
-};
+  }
+}
 
 PageControlAji.propTypes = {
   style: ViewPropTypes.style,
@@ -119,7 +111,7 @@ PageControlAji.propTypes = {
   inactiveBorderColor: PropTypes.string,
   inactiveTintColor: PropTypes.string,
   activeTintColor: PropTypes.string,
-  hidesForSinglePage: PropTypes.bool,
+  hidesForSinglePage: PropTypes.bool
 };
 
 PageControlAji.defaultProps = {
@@ -129,8 +121,8 @@ PageControlAji.defaultProps = {
   radius: DOT_RADIUS,
   margin: DOT_MARGINE,
   inactiveTransparency: 0.4,
-  inactiveTintColor: 'black',
-  activeTintColor: 'black',
+  inactiveTintColor: "black",
+  activeTintColor: "black",
   hidesForSinglePage: true
 };