Fix: Add axis label padding conditionally (#60)

* fix: only apply padding if top/bottom axis labels are given

* turn example controls section into ScrollView

Author: Christoph Pader

example/src/screens/GraphPage.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react'
-import { View, StyleSheet, Text, Button } from 'react-native'
+import { View, StyleSheet, Text, Button, ScrollView } from 'react-native'
 import { LineGraph } from 'react-native-graph'
 import StaticSafeAreaInsets from 'react-native-static-safe-area-insets'
 import type { GraphRange } from '../../../src/LineGraphProps'
@@ -104,7 +104,10 @@ export function GraphPage() {
 
       <Button title="Refresh" onPress={refreshData} />
 
-      <View style={styles.controls}>
+      <ScrollView
+        style={styles.controlsScrollView}
+        contentContainerStyle={styles.controlsScrollViewContent}
+      >
         <Toggle
           title="Animated:"
           isEnabled={isAnimated}
@@ -145,7 +148,7 @@ export function GraphPage() {
           isEnabled={indicatorPulsating}
           setIsEnabled={setIndicatorPulsating}
         />
-      </View>
+      </ScrollView>
 
       <View style={styles.spacer} />
     </View>
@@ -181,9 +184,11 @@ const styles = StyleSheet.create({
     height: 35,
     marginLeft: 5,
   },
-  controls: {
+  controlsScrollView: {
     flexGrow: 1,
-    justifyContent: 'center',
     paddingHorizontal: 15,
   },
+  controlsScrollViewContent: {
+    justifyContent: 'center',
+  },
 })

src/AnimatedLineGraph.tsx

@@ -457,10 +457,15 @@ export function AnimatedLineGraph({
     pulseTrigger
   )
 
+  const axisLabelContainerStyle = {
+    paddingTop: TopAxisLabel != null ? 20 : 0,
+    paddingBottom: BottomAxisLabel != null ? 20 : 0,
+  }
+
   return (
     <View {...props}>
       <GestureDetector gesture={gesture}>
-        <Reanimated.View style={[styles.container, styles.axisLabelContainer]}>
+        <Reanimated.View style={[styles.container, axisLabelContainerStyle]}>
           {/* Top Label (max price) */}
           {TopAxisLabel != null && (
             <View style={styles.axisRow}>
@@ -580,9 +585,6 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  axisLabelContainer: {
-    paddingVertical: 20,
-  },
   axisRow: {
     height: 17,
   },