├── .expo-shared ├── README.md └── assets.json ├── .github └── dependabot.yml ├── .gitignore ├── .prettierrc ├── App.tsx ├── README.md ├── app.json ├── assets ├── adaptive-icon.png ├── expoqr.png ├── favicon.png ├── icon.png ├── reanimated-visualizer-mohit23x-mockup.png └── splash.png ├── babel.config.js ├── package.json ├── src ├── assets │ ├── Chart.tsx │ ├── Copy.tsx │ ├── Github.tsx │ ├── Move.tsx │ ├── ReactNative.tsx │ ├── Rotate.tsx │ ├── Scale.tsx │ ├── Setting.tsx │ ├── Spring.tsx │ └── Timing.tsx ├── components │ ├── Actions.tsx │ ├── AnimatedNumber.tsx │ ├── AnimationOptions.tsx │ ├── Attribution.tsx │ ├── Chart.tsx │ ├── Chip.tsx │ ├── ConfigureLimit.tsx │ ├── GithubIcon.tsx │ ├── InputRenderer.tsx │ ├── InputSection.tsx │ ├── Movement.tsx │ ├── OutputSection.tsx │ ├── PlayButton.tsx │ ├── Rotate.tsx │ ├── Scale.tsx │ ├── Select.tsx │ ├── SettingModal.tsx │ ├── Slider.tsx │ ├── Tabs.tsx │ ├── WithSpring.tsx │ ├── WithTiming.tsx │ ├── index.tsx │ └── ui.tsx ├── constants │ ├── TimingConfig.ts │ └── index.tsx ├── screen │ └── HomeScreen.tsx ├── styles │ └── index.tsx ├── types │ └── index.ts └── utils │ └── index.tsx ├── tsconfig.json └── yarn.lock /.expo-shared/README.md: -------------------------------------------------------------------------------- 1 | > Why do I have a folder named ".expo-shared" in my project? 2 | 3 | The ".expo-shared" folder is created when running commands that produce state that is intended to be shared with all developers on the project. For example, "npx expo-optimize". 4 | 5 | > What does the "assets.json" file contain? 6 | 7 | The "assets.json" file describes the assets that have been optimized through "expo-optimize" and do not need to be processed again. 8 | 9 | > Should I commit the ".expo-shared" folder? 10 | 11 | Yes, you should share the ".expo-shared" folder with your collaborators. 12 | -------------------------------------------------------------------------------- /.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "9d69cbe74fa841f48d08c605454c3dfcb0efe144f1737ecd9dfb90ea2681fd91": true, 3 | "ed1af881baff41bbd15236d9885eab1079701b6176126e6fa1601a6dec2c9389": true, 4 | "b888dc1584fa5acca6f0d1fbe76c19b06d2bd15fe7b27c6e993f6d2c2fe88fd3": true, 5 | "7154a908d6b7247386cc43fd67b307ad0fe67a6b78903e6bdf4358a5d921c869": true, 6 | "aa44c963e3440d8c16abce5c76ea0950f20876acdf6300b90e18334b46500a63": true 7 | } 8 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: "/" 5 | schedule: 6 | interval: monthly 7 | time: "23:30" 8 | open-pull-requests-limit: 10 9 | ignore: 10 | - dependency-name: "@babel/core" 11 | versions: 12 | - 7.13.16 13 | - dependency-name: "@react-native-async-storage/async-storage" 14 | versions: 15 | - 1.15.3 16 | - dependency-name: react-native-web 17 | versions: 18 | - 0.15.4 19 | - 0.16.0 20 | - dependency-name: expo-clipboard 21 | versions: 22 | - 1.0.2 23 | - dependency-name: "@types/react-dom" 24 | versions: 25 | - 17.0.2 26 | - dependency-name: react-native-reanimated 27 | versions: 28 | - 2.0.0 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | .expo/* 3 | npm-debug.* 4 | *.jks 5 | *.p8 6 | *.p12 7 | *.key 8 | *.mobileprovision 9 | *.orig.* 10 | web-build/ 11 | 12 | # macOS 13 | .DS_Store 14 | 15 | .idea 16 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true 3 | } 4 | -------------------------------------------------------------------------------- /App.tsx: -------------------------------------------------------------------------------- 1 | import { StatusBar } from 'expo-status-bar'; 2 | import * as React from 'react'; 3 | import { SafeAreaView } from 'react-native'; 4 | import { GithubIcon } from 'src/components/GithubIcon'; 5 | import { HomeScreen } from 'src/screen/HomeScreen'; 6 | import { ThemeProvider, StyleSheet } from 'src/styles'; 7 | 8 | export default function App() { 9 | return ( 10 | 11 | 17 | ); 18 | } 19 | 20 | const s = StyleSheet.create((theme) => ({ 21 | safeArea: { 22 | flex: 1, 23 | backgroundColor: theme.background, 24 | }, 25 | })); 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Reanimated Config Visualizer 2 | 3 | Works on Android, IOS and web in both potrait and landscape mode. 4 |
5 | 6 | ![Mobile and Desktop View](./assets/reanimated-visualizer-mohit23x-mockup.png) 7 | 8 | ## Live Demo 9 | 10 | Use the expo app and scan this QR 11 | 12 | https://expo.io/@mohit23x/projects/reanimated-config-visualizer 13 | 14 | ![expo qr](./assets/expoqr.png) 15 | 16 | or 17 | 18 | [Click here for the web version](https://mohit23x.github.io/reanimated-config-visualizer/) 19 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "reanimated-config-visualizer", 4 | "slug": "reanimated-config-visualizer", 5 | "version": "1.0.0", 6 | "orientation": "default", 7 | "description": "Reanimated animation config visualizer", 8 | "icon": "./assets/icon.png", 9 | "splash": { 10 | "image": "./assets/splash.png", 11 | "resizeMode": "contain", 12 | "backgroundColor": "#ffffff" 13 | }, 14 | "updates": { 15 | "fallbackToCacheTimeout": 0 16 | }, 17 | "assetBundlePatterns": ["**/*"], 18 | "ios": { 19 | "supportsTablet": true 20 | }, 21 | "android": { 22 | "adaptiveIcon": { 23 | "foregroundImage": "./assets/adaptive-icon.png", 24 | "backgroundColor": "#FFFFFF" 25 | } 26 | }, 27 | "web": { 28 | "favicon": "./assets/favicon.png" 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohit23x/reanimated-config-visualizer/5f27b9bcb1c0f3a875d6513074c2b51b3f7873d3/assets/adaptive-icon.png -------------------------------------------------------------------------------- /assets/expoqr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohit23x/reanimated-config-visualizer/5f27b9bcb1c0f3a875d6513074c2b51b3f7873d3/assets/expoqr.png -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohit23x/reanimated-config-visualizer/5f27b9bcb1c0f3a875d6513074c2b51b3f7873d3/assets/favicon.png -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohit23x/reanimated-config-visualizer/5f27b9bcb1c0f3a875d6513074c2b51b3f7873d3/assets/icon.png -------------------------------------------------------------------------------- /assets/reanimated-visualizer-mohit23x-mockup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohit23x/reanimated-config-visualizer/5f27b9bcb1c0f3a875d6513074c2b51b3f7873d3/assets/reanimated-visualizer-mohit23x-mockup.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohit23x/reanimated-config-visualizer/5f27b9bcb1c0f3a875d6513074c2b51b3f7873d3/assets/splash.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | plugins: [ 6 | [ 7 | 'module-resolver', 8 | { 9 | alias: { 10 | src: './src/', 11 | }, 12 | }, 13 | ], 14 | ['react-native-reanimated/plugin'], 15 | ], 16 | }; 17 | }; 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "scripts": { 4 | "start": "expo start", 5 | "android": "expo start --android", 6 | "ios": "expo start --ios", 7 | "web": "expo start --web", 8 | "eject": "expo eject", 9 | "deploy": "gh-pages -d web-build", 10 | "predeploy": "expo export:web" 11 | }, 12 | "dependencies": { 13 | "@expo/html-elements": "^0.0.2", 14 | "@expo/webpack-config": "^0.17.0", 15 | "@react-native-async-storage/async-storage": "~1.17.3", 16 | "@react-native-community/slider": "3.0.3", 17 | "@react-native-picker/picker": "2.4.2", 18 | "@types/react-helmet": "^6.1.3", 19 | "expo": "^46.0.0", 20 | "expo-clipboard": "~3.1.0", 21 | "expo-status-bar": "~1.4.0", 22 | "react": "18.0.0", 23 | "react-dom": "18.0.0", 24 | "react-helmet": "^6.1.0", 25 | "react-native": "0.69.6", 26 | "react-native-easing": "^1.0.1", 27 | "react-native-reanimated": "~2.9.1", 28 | "react-native-redash": "^16.1.1", 29 | "react-native-sugar-style": "^0.1.22", 30 | "react-native-svg": "12.3.0", 31 | "react-native-web": "~0.18.7" 32 | }, 33 | "devDependencies": { 34 | "@babel/core": "^7.18.6", 35 | "@types/react": "~18.0.0", 36 | "@types/react-dom": "~18.0.0", 37 | "@types/react-native": "~0.69.1", 38 | "gh-pages": "^3.2.2", 39 | "typescript": "^4.6.3" 40 | }, 41 | "homepage": "http://mohit23x.github.io/reanimated-config-visualizer", 42 | "private": true 43 | } 44 | -------------------------------------------------------------------------------- /src/assets/Chart.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Svg, { Rect } from 'react-native-svg'; 3 | 4 | const ChartIcon = () => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | ); 12 | 13 | export default ChartIcon; 14 | -------------------------------------------------------------------------------- /src/assets/Copy.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Svg, { Path } from 'react-native-svg'; 3 | 4 | function SvgComponent(props) { 5 | return ( 6 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default SvgComponent; 22 | -------------------------------------------------------------------------------- /src/assets/Github.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Svg, { Path } from 'react-native-svg'; 3 | 4 | function SvgComponent(props) { 5 | return ( 6 | 36 | ); 37 | } 38 | 39 | export default SvgComponent; 40 | -------------------------------------------------------------------------------- /src/assets/Move.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Svg, { Path } from 'react-native-svg'; 3 | 4 | function SvgComponent(props) { 5 | return ( 6 | 7 | 8 | 9 | 10 | ); 11 | } 12 | 13 | export default SvgComponent; 14 | -------------------------------------------------------------------------------- /src/assets/ReactNative.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Svg, { Circle, G, Ellipse } from 'react-native-svg'; 3 | 4 | function SvgComponent(props) { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | 17 | export default SvgComponent; 18 | -------------------------------------------------------------------------------- /src/assets/Rotate.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Svg, { Path } from 'react-native-svg'; 3 | 4 | function SvgComponent(props) { 5 | return ( 6 | 14 | 15 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default SvgComponent; 22 | -------------------------------------------------------------------------------- /src/assets/Scale.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Svg, { Path } from 'react-native-svg'; 3 | 4 | function SvgComponent(props) { 5 | return ( 6 | 14 | 15 | 16 | ); 17 | } 18 | 19 | export default SvgComponent; 20 | -------------------------------------------------------------------------------- /src/assets/Setting.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Svg, { Path } from 'react-native-svg'; 3 | 4 | function SvgComponent(props) { 5 | return ( 6 | 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | } 21 | 22 | export default SvgComponent; 23 | -------------------------------------------------------------------------------- /src/assets/Spring.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Svg, { Path } from 'react-native-svg'; 3 | 4 | function SvgComponent(props) { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | 12 | export default SvgComponent; 13 | -------------------------------------------------------------------------------- /src/assets/Timing.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Svg, { Path } from 'react-native-svg'; 3 | 4 | function SvgComponent(props) { 5 | return ( 6 | 14 | 15 | 16 | 17 | ); 18 | } 19 | 20 | export default SvgComponent; 21 | -------------------------------------------------------------------------------- /src/components/Actions.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { TouchableOpacity, View } from 'react-native'; 3 | import { StyleSheet } from 'src/styles'; 4 | import { PlayButton } from './PlayButton'; 5 | import SettingIcon from 'src/assets/Setting'; 6 | import CopyIcon from 'src/assets/Copy'; 7 | 8 | export const Actions = ({ 9 | onPlay, 10 | handleSetting, 11 | handleCopy, 12 | }: { 13 | onPlay: () => void; 14 | handleSetting: () => void; 15 | handleCopy: () => void; 16 | }) => { 17 | const onCopyPress = () => { 18 | handleCopy(); 19 | alert('🎉🎉🎉copied!🎉🎉🎉'); 20 | }; 21 | return ( 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | ); 36 | }; 37 | 38 | const s = StyleSheet.create((theme) => ({ 39 | row: { flexDirection: 'row', alignItems: 'center' }, 40 | setting: { 41 | height: 50, 42 | paddingHorizontal: 15, 43 | backgroundColor: StyleSheet.theme.primary, 44 | justifyContent: 'center', 45 | borderRadius: theme.borderRadius.m, 46 | marginRight: 5, 47 | }, 48 | })); 49 | -------------------------------------------------------------------------------- /src/components/AnimatedNumber.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { StyleSheet } from 'src/styles'; 3 | import Animated, { 4 | useAnimatedRef, 5 | useDerivedValue, 6 | } from 'react-native-reanimated'; 7 | import { TextInput } from 'react-native'; 8 | import { ReText } from 'react-native-redash'; 9 | 10 | const FIXED = 1000; 11 | Animated.addWhitelistedNativeProps({ text: true }); 12 | const ReTextInput = Animated.createAnimatedComponent(TextInput); 13 | 14 | type Props = { x: Animated.SharedValue }; 15 | 16 | const WebText = ({ x }: Props) => { 17 | const inputAnimatedRef = useAnimatedRef(); 18 | 19 | useDerivedValue(() => { 20 | if (inputAnimatedRef && inputAnimatedRef.current) { 21 | inputAnimatedRef.current?.setNativeProps({ 22 | text: (Math.floor(x.value * FIXED) / FIXED).toString(), 23 | }); 24 | } 25 | return 0; 26 | }); 27 | 28 | return ( 29 | 35 | ); 36 | }; 37 | 38 | const NativeText = ({ x }: Props) => { 39 | const animatedText = useDerivedValue(() => 40 | (Math.floor(x.value * FIXED) / FIXED).toString() 41 | ); 42 | 43 | return ; 44 | }; 45 | 46 | export const AnimatedNumber = ({ x }: Props) => { 47 | if (StyleSheet.constants.platform.web) { 48 | return ; 49 | } 50 | 51 | return ; 52 | }; 53 | 54 | const s = StyleSheet.create((theme) => ({ 55 | text: { 56 | color: theme.text, 57 | textAlign: 'right', 58 | fontSize: theme.font.m, 59 | opacity: 0.8, 60 | }, 61 | })); 62 | -------------------------------------------------------------------------------- /src/components/AnimationOptions.tsx: -------------------------------------------------------------------------------- 1 | import { P } from '@expo/html-elements'; 2 | import * as React from 'react'; 3 | import { View, ScrollView, TouchableOpacity } from 'react-native'; 4 | import { ExampleKeyType } from 'src/constants'; 5 | import { StyleSheet } from 'src/styles'; 6 | 7 | export const Option = ({ 8 | option, 9 | toggleAnimation, 10 | active, 11 | }: { 12 | option: any; 13 | active: ExampleKeyType; 14 | toggleAnimation: (name: ExampleKeyType) => void; 15 | }) => { 16 | const Icon = option.icon; 17 | 18 | const activeColor = 19 | active === option.key ? option.color : StyleSheet.theme.icon; 20 | 21 | return ( 22 | toggleAnimation(option.key)}> 23 | 24 | 30 |

{option.title}

31 | 32 | 33 | ); 34 | }; 35 | 36 | export const AnimationOptions = ({ 37 | options, 38 | toggleAnimation, 39 | active, 40 | }: { 41 | options: any; 42 | toggleAnimation: (name: ExampleKeyType) => void; 43 | active: ExampleKeyType; 44 | }) => { 45 | return ( 46 | 47 | 480 ? true : false} 50 | > 51 | {options.map((option) => ( 52 | 60 | 61 | ); 62 | }; 63 | 64 | const s = StyleSheet.create((theme) => ({ 65 | container: { 66 | maxWidth: [60, undefined, undefined], 67 | maxHeight: [undefined, 70], 68 | marginHorizontal: 8, 69 | marginVertical: [0, 10], 70 | }, 71 | scroll: { 72 | backgroundColor: theme.surface, 73 | flexGrow: 1, 74 | justifyContent: 'space-evenly', 75 | paddingHorizontal: [8, undefined], 76 | paddingVertical: [undefined, 8], 77 | borderRadius: theme.borderRadius.m, 78 | }, 79 | outputOption: { 80 | alignItems: 'center', 81 | justifyContent: 'center', 82 | }, 83 | svg: { 84 | height: 30, 85 | width: 30, 86 | }, 87 | outputText: { 88 | fontSize: 12, 89 | marginVertical: 5, 90 | fontWeight: 'bold', 91 | }, 92 | })); 93 | -------------------------------------------------------------------------------- /src/components/Attribution.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { View, Text } from 'react-native'; 3 | import { StyleSheet } from 'src/styles'; 4 | import { H1, A } from '@expo/html-elements'; 5 | 6 | const GithubURL = 'https://github.com/mohit23x/reanimated-config-visualizer'; 7 | 8 | const TECH = [ 9 | { title: 'React Native', url: 'https://reactnative.dev/' }, 10 | { title: 'Expo', url: 'https://expo.io/' }, 11 | { 12 | title: 'React Native Reanimated', 13 | url: 'https://docs.swmansion.com/react-native-reanimated/', 14 | }, 15 | { 16 | title: 'React Native Web', 17 | url: 'https://necolas.github.io/react-native-web/', 18 | }, 19 | { 20 | title: 'React Native Redash', 21 | url: 'https://github.com/wcandillon/react-native-redash', 22 | }, 23 | { 24 | title: '@react-native-community/slider', 25 | url: 'https://github.com/callstack/react-native-slider', 26 | }, 27 | { 28 | title: '@react-native-picker/picker', 29 | url: 'https://www.npmjs.com/package/@react-native-community/picker', 30 | }, 31 | { 32 | title: 'React Native Svg', 33 | url: 'react-native-svg', 34 | }, 35 | { 36 | title: 'React Native Sugar Style', 37 | url: 'https://github.com/mohit23x/react-native-sugar-style', 38 | }, 39 | ]; 40 | 41 | const Link = ({ title, url }: { title: string; url: string }) => { 42 | return ( 43 | 51 | {title} 52 | 53 | ); 54 | }; 55 | 56 | export const Attribution = () => { 57 | return ( 58 | 65 | 66 | Thanks to for 67 | the assets 68 | 69 | 70 |

Made with

71 | 72 | {TECH.map((d) => ( 73 | 74 | ))} 75 | 76 |

Open source

77 | Made with ❤️ by Mohit23x 78 | 79 | source available at 80 | 81 | 82 | ); 83 | }; 84 | 85 | const s = StyleSheet.create((theme) => ({ 86 | title: { 87 | color: theme.text, 88 | fontWeight: 'bold', 89 | fontSize: theme.font.m, 90 | textAlign: 'center', 91 | marginVertical: 2, 92 | paddingTop: 10, 93 | }, 94 | label: { 95 | color: theme.text, 96 | }, 97 | })); 98 | -------------------------------------------------------------------------------- /src/components/Chart.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { runOnJS, useFrameCallback } from 'react-native-reanimated'; 3 | import { AnimationCompProps } from 'src/types'; 4 | import { useEffect, useRef, useState } from 'react'; 5 | import Svg, { Polyline } from 'react-native-svg'; 6 | import { View } from 'react-native'; 7 | 8 | const LineChart = ({data, width, height} : {data: Array, width: number, height: number}) => { 9 | const maxYValue = Math.max(...data); 10 | const minYValue = Math.min(...data); 11 | const points = data 12 | .map((point: number, index: number) => { 13 | const x = (width / (data.length - 1)) * index; 14 | const y = ((point - minYValue) / (maxYValue - minYValue)) * height; 15 | return `${x},${y}`; 16 | }) 17 | .join(' '); 18 | // @ts-ignore 19 | return 20 | 21 | 27 | 28 | 29 | } 30 | 31 | export const Chart = ({ x, running }: AnimationCompProps) => { 32 | const trackedValueRef = useRef([]) 33 | const [trackedValues, setTrackedValues] = useState([]); 34 | 35 | const setValuesInRef = (newValue: number) => { 36 | trackedValueRef.current = [...trackedValueRef.current, newValue] 37 | } 38 | 39 | const frameCallback = useFrameCallback(() => { 40 | const currentValue = x.value; 41 | runOnJS(setValuesInRef)(currentValue); 42 | }) 43 | 44 | useEffect(() => { 45 | if (!running && trackedValueRef.current.length !== 0) { 46 | frameCallback.setActive(false) 47 | setTrackedValues(trackedValueRef.current) 48 | trackedValueRef.current = [] 49 | } 50 | if (running) { 51 | frameCallback.setActive(true) 52 | } 53 | }, [running]); 54 | 55 | 56 | 57 | return 58 | 59 | }; 60 | 61 | -------------------------------------------------------------------------------- /src/components/Chip.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { View, Text } from 'react-native'; 3 | import { StyleSheet } from 'src/styles'; 4 | 5 | // https://stackoverflow.com/questions/59827667/how-to-implement-bezier-function-in-react-native-animation 6 | 7 | export default function Chip = ({title="With Spring"}) => { 8 | return ( 9 | 10 | {title} 11 | 12 | ) 13 | } 14 | 15 | const s = StyleSheet.create(() => ({ 16 | container: { 17 | 18 | }, 19 | text: { 20 | 21 | } 22 | })) -------------------------------------------------------------------------------- /src/components/ConfigureLimit.tsx: -------------------------------------------------------------------------------- 1 | import { H1, H6 } from '@expo/html-elements'; 2 | import * as React from 'react'; 3 | import { View, Text, TouchableOpacity } from 'react-native'; 4 | import { LimitType } from 'src/constants'; 5 | import { StyleSheet } from 'src/styles'; 6 | import { Button } from './ui'; 7 | 8 | export const ConfigureLimit = ({ 9 | limit, 10 | setConfig, 11 | handleSave, 12 | handleReset, 13 | }: { 14 | limit: LimitType; 15 | setConfig: (a: any) => void; 16 | handleSave: () => void; 17 | handleReset: () => void; 18 | }) => { 19 | return ( 20 | 21 |

Configure max limits

22 | 27 | 28 | 33 | 38 | 39 | 40 |