Merge pull request #7 from EconomistDigitalSolutions/fixRotationBug

fix: orientation bug

Author: weahforsage

src/dots/ExpandingDot.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import {
-  View,
-  Dimensions,
   Animated,
   StyleSheet,
+  useWindowDimensions,
+  View,
   ViewStyle,
 } from 'react-native';
-
 export interface ExpandingDotProps {
   data: Array<Object>;
   scrollX: Animated.Value;
@@ -18,8 +17,6 @@ export interface ExpandingDotProps {
   activeDotColor?: string;
 }
 
-const { width } = Dimensions.get('screen');
-
 const ExpandingDot = ({
   scrollX,
   data,
@@ -30,6 +27,8 @@ const ExpandingDot = ({
   expandingDotWidth,
   activeDotColor,
 }: ExpandingDotProps) => {
+  const { width } = useWindowDimensions();
+
   const defaultProps = {
     inActiveDotColor: inActiveDotColor || '#000',
     inActiveDotOpacity: inActiveDotOpacity || 0.5,

src/dots/LiquidLike.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import {
-  View,
   Animated,
-  Dimensions,
-  ViewStyle,
   StyleSheet,
+  useWindowDimensions,
+  View,
+  ViewStyle,
 } from 'react-native';
 import { Line, Svg } from 'react-native-svg';
-
 export interface LiquidLikeProps {
   data: Array<Object>;
   scrollX: Animated.Value;
@@ -26,7 +25,6 @@ export interface LiquidLikeProps {
 
 const AnimatedLine = Animated.createAnimatedComponent(Line);
 const AnimatedSvg = Animated.createAnimatedComponent(Svg);
-const { width } = Dimensions.get('screen');
 const LiquidLike = ({
   scrollX,
   data,
@@ -42,6 +40,8 @@ const LiquidLike = ({
   strokeWidth,
   bigHeadScale,
 }: LiquidLikeProps) => {
+  const { width } = useWindowDimensions();
+
   const defaultProps = {
     dotSize: dotSize || 12,
     marginHorizontal: marginHorizontal || 6,

src/dots/ScalingDot.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import {
-  View,
-  Dimensions,
   Animated,
   StyleSheet,
+  useWindowDimensions,
+  View,
   ViewStyle,
 } from 'react-native';
-
 export interface ScalingDotProps {
   data: Array<Object>;
   scrollX: Animated.Value;
@@ -18,8 +17,6 @@ export interface ScalingDotProps {
   activeDotColor?: string;
 }
 
-const { width } = Dimensions.get('screen');
-
 const ScalingDot = ({
   scrollX,
   data,
@@ -30,6 +27,8 @@ const ScalingDot = ({
   activeDotScale,
   activeDotColor,
 }: ScalingDotProps) => {
+  const { width } = useWindowDimensions();
+
   const defaultProps = {
     inActiveDotColor: inActiveDotColor || '#347af0',
     activeDotColor: activeDotColor || '#347af0',

src/dots/SlidingBorder.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import {
-  View,
-  Dimensions,
-  StyleSheet,
   Animated,
+  StyleSheet,
+  useWindowDimensions,
+  View,
   ViewStyle,
 } from 'react-native';
-
 export interface SlidingBorderProps {
   data: Array<Object>;
   scrollX: Animated.Value;
@@ -18,7 +17,6 @@ export interface SlidingBorderProps {
   slidingIndicatorStyle?: ViewStyle;
 }
 
-const { width } = Dimensions.get('screen');
 const SlidingBorder = ({
   scrollX,
   data,
@@ -29,6 +27,8 @@ const SlidingBorder = ({
   slidingIndicatorStyle,
   borderPadding,
 }: SlidingBorderProps) => {
+  const { width } = useWindowDimensions();
+
   const defaultProps = {
     dotSize: dotSize || 24,
     borderPadding: borderPadding || -5,

src/dots/SlidingDot.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import {
-  View,
-  Dimensions,
-  StyleSheet,
   Animated,
+  StyleSheet,
+  useWindowDimensions,
+  View,
   ViewStyle,
 } from 'react-native';
-
 export interface SlidingDotProps {
   data: Array<Object>;
   scrollX: Animated.Value;
@@ -18,7 +17,6 @@ export interface SlidingDotProps {
   marginHorizontal?: number;
 }
 
-const { width } = Dimensions.get('screen');
 const SlidingDot = ({
   scrollX,
   data,
@@ -28,6 +26,8 @@ const SlidingDot = ({
   slidingIndicatorStyle,
   marginHorizontal,
 }: SlidingDotProps) => {
+  const { width } = useWindowDimensions();
+
   const defaultProps = {
     dotSize: dotSize || 12,
     marginHorizontal: marginHorizontal || 3,