feat: Add useSvgDimensions() hook to @bothrs/expo

Author: codinsonn

packages/expo/example/App.tsx

@@ -4,7 +4,7 @@ import { useMemo, useState } from 'react'
 import styled from 'styled-components/native'
 import Constants from 'expo-constants'
 // Packages to test
-import { parseConstants, parseGradient, conditionalMarkup, Gradient } from '@bothrs/expo'
+import { parseConstants, parseGradient, conditionalMarkup, Gradient, useSvgDimensions } from '@bothrs/expo'
 
 /* --- Constants ------------------------------------------------------------------------------- */
 
@@ -23,6 +23,13 @@ export default function App() {
   // Vars
   const [orientation, setOrientation] = useState<'landscape' | 'portrait'>(getOrientation())
 
+  // Hooks
+  const svgDimensions = useSvgDimensions({
+    originalSvgWidth: 100,
+    originalSvgHeight: 80,
+    containerWidth: Dimensions.get('screen').width
+  })
+
   // -- Test parseConstants() --
 
   const parsedConstants = useMemo(() => {
@@ -55,6 +62,9 @@ export default function App() {
       <StTitle>{'<Gradient/>'}</StTitle>
       <StGradient linearGradient={EXAMPLE_GRADIENT_STRING} />
       <StSpacer />
+      <StTitle>{'useSvgDimensions()'}</StTitle>
+      <Text>{JSON.stringify(svgDimensions, null, 4)}</Text>
+      <StSpacer />
       <StatusBar style="auto" />
     </ScrollView>
   )

packages/expo/src/hooks/useSvgDimensions.ts

@@ -0,0 +1,27 @@
+import { useMemo } from 'react'
+import { Dimensions } from 'react-native'
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+type UseSvgDimensionsInput = {
+  originalSvgWidth: number
+  originalSvgHeight: number
+  containerWidth?: number
+}
+
+/** --- useSvgDimensions() --------------------------------------------------------------------- */
+/** -i- Auto calculate the width, height & viewBox properties */
+export const useSvgDimensions = ({
+  originalSvgHeight,
+  originalSvgWidth,
+  containerWidth = Dimensions.get('screen').width,
+}: UseSvgDimensionsInput) => {
+  return useMemo(() => {
+    const svgRatio = originalSvgHeight / originalSvgWidth
+    return {
+      width: containerWidth,
+      height: containerWidth * svgRatio,
+      viewBox: `0 0 ${originalSvgWidth} ${originalSvgHeight}`,
+    }
+  }, [originalSvgHeight, originalSvgWidth, containerWidth])
+}

packages/expo/src/index.ts

@@ -3,5 +3,8 @@ export * from './utils/parseConstants'
 export * from './utils/parseGradient'
 export * from './utils/conditionalMarkup'
 
+// Hooks
+export * from './hooks/useSvgDimensions'
+
 // Components
 export * from './components/Gradient'