Add Toggles

example/package.json

@@ -24,8 +24,8 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.12.5",
-    "@types/react": "^17.0.0",
-    "@types/react-native": "^0.67.6",
+    "@types/react": "^17.0.42",
+    "@types/react-native": "^0.67.4",
     "babel-plugin-module-resolver": "^4.0.0",
     "metro-react-native-babel-preset": "^0.66.2"
   }

example/src/components/Toggle.tsx

@@ -0,0 +1,45 @@
+import SegmentedControl from '@react-native-segmented-control/segmented-control'
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+interface Props {
+  title: string
+  isEnabled: boolean
+  setIsEnabled: (isEnabled: boolean) => void
+}
+
+export function Toggle({ title, isEnabled, setIsEnabled }: Props) {
+  return (
+    <View style={styles.row}>
+      <Text style={styles.toggleText}>{title}</Text>
+
+      <View style={styles.spacer} />
+
+      <SegmentedControl
+        style={styles.segmentedControl}
+        values={['yes', 'no']}
+        selectedIndex={isEnabled ? 0 : 1}
+        onValueChange={(v) => setIsEnabled(v === 'yes')}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 5,
+  },
+  spacer: {
+    flexGrow: 1,
+  },
+  toggleText: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  segmentedControl: {
+    marginLeft: 10,
+    width: 140,
+  },
+})

example/src/screens/GraphPage.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useState } from 'react'
 import { View, StyleSheet, Text, Button } from 'react-native'
 import { LineGraph } from 'react-native-graph'
 import StaticSafeAreaInsets from 'react-native-static-safe-area-insets'
+import { Toggle } from '../components/Toggle'
 import {
   generateRandomGraphData,
   generateSinusGraphData,
@@ -14,6 +15,9 @@ const POINTS = 70
 export function GraphPage() {
   const colors = useColors()
 
+  const [isAnimated, setIsAnimated] = useState(true)
+  const [enablePanGesture, setEnablePanGesture] = useState(true)
+
   const [points, setPoints] = useState(() => generateRandomGraphData(POINTS))
   const smallPoints = generateSinusGraphData(9)
 
@@ -40,13 +44,28 @@ export function GraphPage() {
 
       <LineGraph
         style={styles.graph}
-        animated={true}
+        animated={isAnimated}
         color="#6a7ee7"
         points={points}
-        enablePanGesture={true}
+        enablePanGesture={enablePanGesture}
       />
 
       <Button title="Refresh" onPress={refreshData} />
+
+      <View style={styles.controls}>
+        <Toggle
+          title="Animated:"
+          isEnabled={isAnimated}
+          setIsEnabled={setIsAnimated}
+        />
+        <Toggle
+          title="Enable Gesture:"
+          isEnabled={enablePanGesture}
+          setIsEnabled={setEnablePanGesture}
+        />
+      </View>
+
+      <View style={styles.spacer} />
     </View>
   )
 }
@@ -55,8 +74,8 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     paddingHorizontal: 15,
-    paddingTop: StaticSafeAreaInsets.safeAreaInsetsTop,
-    paddingBottom: StaticSafeAreaInsets.safeAreaInsetsBottom,
+    paddingTop: StaticSafeAreaInsets.safeAreaInsetsTop + 15,
+    paddingBottom: StaticSafeAreaInsets.safeAreaInsetsBottom + 15,
   },
   spacer: {
     flexGrow: 1,
@@ -80,4 +99,8 @@ const styles = StyleSheet.create({
     height: 35,
     marginLeft: 5,
   },
+  controls: {
+    flexGrow: 1,
+    justifyContent: 'center',
+  },
 })

example/yarn.lock

@@ -1015,7 +1015,7 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
-"@types/react-native@^0.67.6":
+"@types/react-native@^0.67.4":
   version "0.67.6"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.67.6.tgz#9a7de5feba6065aec9f44f9a1e8f6e55ee5d015c"
   integrity sha512-NM6atxrefIXMLE/PyQ1bIQjQ/lWLdls3uVxItzKvNUUVZlGqgn/uGN4MarM9quSf90uSqJYPIAeAgTtBTUjhgg==
@@ -1031,7 +1031,7 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@^17.0.0":
+"@types/react@^17.0.42":
   version "17.0.44"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.44.tgz#c3714bd34dd551ab20b8015d9d0dbec812a51ec7"
   integrity sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==

package.json

@@ -57,8 +57,8 @@
   "devDependencies": {
     "@react-native-community/eslint-config": "^2.0.0",
     "@release-it/conventional-changelog": "^2.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-native": "^0.67.6",
+    "@types/react": "^17.0.42",
+    "@types/react-native": "^0.67.4",
     "eslint": "^7.2.0",
     "eslint-config-prettier": "^7.0.0",
     "eslint-plugin-prettier": "^3.1.3",

tsconfig.json

@@ -25,7 +25,7 @@
   "include": [
     "src",
     ".eslintrc.js",
-    "babel.config.js", "example/src/components/GraphDisplayModeSelector.tsx",
+    "babel.config.js",
   ],
   "exclude": [
     "node_modules",

yarn.lock

@@ -1596,7 +1596,7 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
-"@types/react-native@^0.67.6":
+"@types/react-native@^0.67.4":
   version "0.67.6"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.67.6.tgz#9a7de5feba6065aec9f44f9a1e8f6e55ee5d015c"
   integrity sha512-NM6atxrefIXMLE/PyQ1bIQjQ/lWLdls3uVxItzKvNUUVZlGqgn/uGN4MarM9quSf90uSqJYPIAeAgTtBTUjhgg==
@@ -1612,7 +1612,7 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@^17.0.0":
+"@types/react@^17.0.42":
   version "17.0.44"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.44.tgz#c3714bd34dd551ab20b8015d9d0dbec812a51ec7"
   integrity sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==