Merge pull request #66 from Abhinandan-Kushwaha/development

Fixed Animation issue in Bar Charts on Android

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "The most complete library for Bar, Line, Area, Pie and Donut charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "files": [

src/BarChart/Animated2DWithGradient.tsx

@@ -1,7 +1,18 @@
 import React, {useEffect, useState} from 'react';
-import {View, ColorValue, LayoutAnimation, Platform} from 'react-native';
+import {
+  View,
+  ColorValue,
+  LayoutAnimation,
+  Platform,
+  UIManager,
+} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 
+if (Platform.OS === 'android') {
+  UIManager.setLayoutAnimationEnabledExperimental &&
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
 type propTypes = {
   item: itemType;
   height: number;
@@ -44,7 +55,7 @@ type itemType = {
 
 const Animated2DWithGradient = (props: propTypes) => {
   const {item, opacity, animationDuration, noGradient, noAnimation} = props;
-  const [height, setHeight] = useState(noAnimation ? props.height : 0);
+  const [height, setHeight] = useState(noAnimation ? props.height : 2);
   const [initialRender, setInitialRender] = useState(
     noAnimation ? false : true,
   );

src/Components/AnimatedBar/index.tsx

@@ -5,10 +5,16 @@ import {
   ColorValue,
   LayoutAnimation,
   Platform,
+  UIManager,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {styles} from './styles';
 
+if (Platform.OS === 'android') {
+  UIManager.setLayoutAnimationEnabledExperimental &&
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
 type trianglePropTypes = {
   style: any;
   width: number;
@@ -89,7 +95,7 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
   const layoutAppear = () => {
     LayoutAnimation.configureNext({
       duration: Platform.OS == 'ios' ? animationDuration : 20,
-      create: {type: 'linear', property: 'opacity'},
+      create: {type: 'linear', property: 'scaleXY'},
       // update: { type: 'linear' }
     });
     setInitialRender(false);