@fountain-ui/core 2.0.0-beta.26 → 2.0.0-beta.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -89,15 +89,18 @@ function TabIndicator(props) {
|
|
|
89
89
|
indexStore
|
|
90
90
|
} = (0, _react.useContext)(_InternalContext.default);
|
|
91
91
|
(0, _react.useEffect)(() => {
|
|
92
|
-
|
|
92
|
+
const scrollToIndex = index => {
|
|
93
93
|
const {
|
|
94
94
|
tx,
|
|
95
95
|
sx
|
|
96
|
-
} = computeAnimationValues(
|
|
96
|
+
} = computeAnimationValues(index);
|
|
97
97
|
startAnimation(translateX, tx);
|
|
98
98
|
startAnimation(scaleX, sx);
|
|
99
|
-
}
|
|
100
|
-
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
scrollToIndex(indexStore.getState());
|
|
102
|
+
return indexStore.subscribe(scrollToIndex);
|
|
103
|
+
}, [computeAnimationValues, coordinates, indexStore]);
|
|
101
104
|
return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, _extends({
|
|
102
105
|
style: [styles.root, disabled ? styles.disabled : undefined, {
|
|
103
106
|
transform: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["INDICATOR_WIDTH","INDICATOR_HEIGHT","SCROLLABLE_TABS_INSET","useStyles","theme","useTheme","root","backgroundColor","palette","secondary","main","left","bottom","width","height","position","disabled","startAnimation","value","toValue","Animated","timing","duration","easing","Easing","bezier","useNativeDriver","start","TabIndicator","props","coordinates","initialIndex","scrollable","style","otherProps","styles","computeAnimationValues","useCallback","currentIndex","x1","x2","defaultCoordinate","tabWidth","nextTranslateX","inset","nextScaleX","tx","sx","initialTx","initialSx","translateX","useAnimatedValue","scaleX","indexStore","useContext","InternalContext","useEffect","subscribe","undefined","transform"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect } from 'react';\nimport { Animated, Easing } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { useAnimatedValue } from '../hooks';\nimport type TabIndicatorProps from './TabIndicatorProps';\nimport { defaultCoordinate } from './TabCoordinate';\nimport InternalContext from './InternalContext';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;\n\nconst INDICATOR_WIDTH = 10;\nconst INDICATOR_HEIGHT = 4;\n\nconst SCROLLABLE_TABS_INSET = 12 * 2;\n\nconst useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {\n const theme = useTheme();\n\n return {\n root: {\n backgroundColor: theme.palette.secondary.main,\n left: 0,\n bottom: 0,\n width: INDICATOR_WIDTH,\n height: INDICATOR_HEIGHT,\n position: 'absolute',\n },\n disabled: {\n height: 0,\n },\n };\n};\n\nconst startAnimation = (value: Animated.Value, toValue: number) => {\n Animated.timing(value, {\n toValue: toValue,\n duration: 300,\n easing: Easing.bezier(0.25, 1, 0.5, 1),\n useNativeDriver: true,\n }).start();\n};\n\nexport default function TabIndicator(props: TabIndicatorProps) {\n const {\n coordinates,\n disabled,\n initialIndex,\n scrollable,\n style,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const computeAnimationValues = useCallback((currentIndex: number) => {\n const { x1, x2 } = coordinates[currentIndex] ?? defaultCoordinate;\n\n const tabWidth = x2 - x1;\n\n const nextTranslateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;\n\n const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;\n const nextScaleX = (tabWidth - inset) / INDICATOR_WIDTH;\n\n return { tx: nextTranslateX, sx: nextScaleX };\n }, [coordinates, scrollable]);\n\n const {\n tx: initialTx,\n sx: initialSx,\n } = computeAnimationValues(initialIndex);\n\n const translateX = useAnimatedValue(initialTx);\n const scaleX = useAnimatedValue(initialSx);\n\n const { indexStore } = useContext(InternalContext);\n\n useEffect(() => {\n
|
|
1
|
+
{"version":3,"names":["INDICATOR_WIDTH","INDICATOR_HEIGHT","SCROLLABLE_TABS_INSET","useStyles","theme","useTheme","root","backgroundColor","palette","secondary","main","left","bottom","width","height","position","disabled","startAnimation","value","toValue","Animated","timing","duration","easing","Easing","bezier","useNativeDriver","start","TabIndicator","props","coordinates","initialIndex","scrollable","style","otherProps","styles","computeAnimationValues","useCallback","currentIndex","x1","x2","defaultCoordinate","tabWidth","nextTranslateX","inset","nextScaleX","tx","sx","initialTx","initialSx","translateX","useAnimatedValue","scaleX","indexStore","useContext","InternalContext","useEffect","scrollToIndex","index","getState","subscribe","undefined","transform"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect } from 'react';\nimport { Animated, Easing } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { useAnimatedValue } from '../hooks';\nimport type TabIndicatorProps from './TabIndicatorProps';\nimport { defaultCoordinate } from './TabCoordinate';\nimport InternalContext from './InternalContext';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;\n\nconst INDICATOR_WIDTH = 10;\nconst INDICATOR_HEIGHT = 4;\n\nconst SCROLLABLE_TABS_INSET = 12 * 2;\n\nconst useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {\n const theme = useTheme();\n\n return {\n root: {\n backgroundColor: theme.palette.secondary.main,\n left: 0,\n bottom: 0,\n width: INDICATOR_WIDTH,\n height: INDICATOR_HEIGHT,\n position: 'absolute',\n },\n disabled: {\n height: 0,\n },\n };\n};\n\nconst startAnimation = (value: Animated.Value, toValue: number) => {\n Animated.timing(value, {\n toValue: toValue,\n duration: 300,\n easing: Easing.bezier(0.25, 1, 0.5, 1),\n useNativeDriver: true,\n }).start();\n};\n\nexport default function TabIndicator(props: TabIndicatorProps) {\n const {\n coordinates,\n disabled,\n initialIndex,\n scrollable,\n style,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const computeAnimationValues = useCallback((currentIndex: number) => {\n const { x1, x2 } = coordinates[currentIndex] ?? defaultCoordinate;\n\n const tabWidth = x2 - x1;\n\n const nextTranslateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;\n\n const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;\n const nextScaleX = (tabWidth - inset) / INDICATOR_WIDTH;\n\n return { tx: nextTranslateX, sx: nextScaleX };\n }, [coordinates, scrollable]);\n\n const {\n tx: initialTx,\n sx: initialSx,\n } = computeAnimationValues(initialIndex);\n\n const translateX = useAnimatedValue(initialTx);\n const scaleX = useAnimatedValue(initialSx);\n\n const { indexStore } = useContext(InternalContext);\n\n useEffect(() => {\n const scrollToIndex = (index: number) => {\n const { tx, sx } = computeAnimationValues(index);\n\n startAnimation(translateX, tx);\n startAnimation(scaleX, sx);\n };\n\n scrollToIndex(indexStore.getState());\n\n return indexStore.subscribe(scrollToIndex);\n }, [\n computeAnimationValues,\n coordinates,\n indexStore,\n ]);\n\n return (\n <Animated.View\n style={[\n styles.root,\n disabled ? styles.disabled : undefined,\n { transform: [{ translateX }, { scaleX }] },\n style,\n ]}\n {...otherProps}\n />\n );\n};\n"],"mappings":"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"}
|
|
@@ -70,15 +70,18 @@ export default function TabIndicator(props) {
|
|
|
70
70
|
indexStore
|
|
71
71
|
} = useContext(InternalContext);
|
|
72
72
|
useEffect(() => {
|
|
73
|
-
|
|
73
|
+
const scrollToIndex = index => {
|
|
74
74
|
const {
|
|
75
75
|
tx,
|
|
76
76
|
sx
|
|
77
|
-
} = computeAnimationValues(
|
|
77
|
+
} = computeAnimationValues(index);
|
|
78
78
|
startAnimation(translateX, tx);
|
|
79
79
|
startAnimation(scaleX, sx);
|
|
80
|
-
}
|
|
81
|
-
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
scrollToIndex(indexStore.getState());
|
|
83
|
+
return indexStore.subscribe(scrollToIndex);
|
|
84
|
+
}, [computeAnimationValues, coordinates, indexStore]);
|
|
82
85
|
return /*#__PURE__*/React.createElement(Animated.View, _extends({
|
|
83
86
|
style: [styles.root, disabled ? styles.disabled : undefined, {
|
|
84
87
|
transform: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useContext","useEffect","Animated","Easing","useTheme","useAnimatedValue","defaultCoordinate","InternalContext","INDICATOR_WIDTH","INDICATOR_HEIGHT","SCROLLABLE_TABS_INSET","useStyles","theme","root","backgroundColor","palette","secondary","main","left","bottom","width","height","position","disabled","startAnimation","value","toValue","timing","duration","easing","bezier","useNativeDriver","start","TabIndicator","props","coordinates","initialIndex","scrollable","style","otherProps","styles","computeAnimationValues","currentIndex","x1","x2","tabWidth","nextTranslateX","inset","nextScaleX","tx","sx","initialTx","initialSx","translateX","scaleX","indexStore","subscribe","undefined","transform"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect } from 'react';\nimport { Animated, Easing } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { useAnimatedValue } from '../hooks';\nimport type TabIndicatorProps from './TabIndicatorProps';\nimport { defaultCoordinate } from './TabCoordinate';\nimport InternalContext from './InternalContext';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;\n\nconst INDICATOR_WIDTH = 10;\nconst INDICATOR_HEIGHT = 4;\n\nconst SCROLLABLE_TABS_INSET = 12 * 2;\n\nconst useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {\n const theme = useTheme();\n\n return {\n root: {\n backgroundColor: theme.palette.secondary.main,\n left: 0,\n bottom: 0,\n width: INDICATOR_WIDTH,\n height: INDICATOR_HEIGHT,\n position: 'absolute',\n },\n disabled: {\n height: 0,\n },\n };\n};\n\nconst startAnimation = (value: Animated.Value, toValue: number) => {\n Animated.timing(value, {\n toValue: toValue,\n duration: 300,\n easing: Easing.bezier(0.25, 1, 0.5, 1),\n useNativeDriver: true,\n }).start();\n};\n\nexport default function TabIndicator(props: TabIndicatorProps) {\n const {\n coordinates,\n disabled,\n initialIndex,\n scrollable,\n style,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const computeAnimationValues = useCallback((currentIndex: number) => {\n const { x1, x2 } = coordinates[currentIndex] ?? defaultCoordinate;\n\n const tabWidth = x2 - x1;\n\n const nextTranslateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;\n\n const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;\n const nextScaleX = (tabWidth - inset) / INDICATOR_WIDTH;\n\n return { tx: nextTranslateX, sx: nextScaleX };\n }, [coordinates, scrollable]);\n\n const {\n tx: initialTx,\n sx: initialSx,\n } = computeAnimationValues(initialIndex);\n\n const translateX = useAnimatedValue(initialTx);\n const scaleX = useAnimatedValue(initialSx);\n\n const { indexStore } = useContext(InternalContext);\n\n useEffect(() => {\n
|
|
1
|
+
{"version":3,"names":["React","useCallback","useContext","useEffect","Animated","Easing","useTheme","useAnimatedValue","defaultCoordinate","InternalContext","INDICATOR_WIDTH","INDICATOR_HEIGHT","SCROLLABLE_TABS_INSET","useStyles","theme","root","backgroundColor","palette","secondary","main","left","bottom","width","height","position","disabled","startAnimation","value","toValue","timing","duration","easing","bezier","useNativeDriver","start","TabIndicator","props","coordinates","initialIndex","scrollable","style","otherProps","styles","computeAnimationValues","currentIndex","x1","x2","tabWidth","nextTranslateX","inset","nextScaleX","tx","sx","initialTx","initialSx","translateX","scaleX","indexStore","scrollToIndex","index","getState","subscribe","undefined","transform"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect } from 'react';\nimport { Animated, Easing } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { useAnimatedValue } from '../hooks';\nimport type TabIndicatorProps from './TabIndicatorProps';\nimport { defaultCoordinate } from './TabCoordinate';\nimport InternalContext from './InternalContext';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;\n\nconst INDICATOR_WIDTH = 10;\nconst INDICATOR_HEIGHT = 4;\n\nconst SCROLLABLE_TABS_INSET = 12 * 2;\n\nconst useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {\n const theme = useTheme();\n\n return {\n root: {\n backgroundColor: theme.palette.secondary.main,\n left: 0,\n bottom: 0,\n width: INDICATOR_WIDTH,\n height: INDICATOR_HEIGHT,\n position: 'absolute',\n },\n disabled: {\n height: 0,\n },\n };\n};\n\nconst startAnimation = (value: Animated.Value, toValue: number) => {\n Animated.timing(value, {\n toValue: toValue,\n duration: 300,\n easing: Easing.bezier(0.25, 1, 0.5, 1),\n useNativeDriver: true,\n }).start();\n};\n\nexport default function TabIndicator(props: TabIndicatorProps) {\n const {\n coordinates,\n disabled,\n initialIndex,\n scrollable,\n style,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const computeAnimationValues = useCallback((currentIndex: number) => {\n const { x1, x2 } = coordinates[currentIndex] ?? defaultCoordinate;\n\n const tabWidth = x2 - x1;\n\n const nextTranslateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;\n\n const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;\n const nextScaleX = (tabWidth - inset) / INDICATOR_WIDTH;\n\n return { tx: nextTranslateX, sx: nextScaleX };\n }, [coordinates, scrollable]);\n\n const {\n tx: initialTx,\n sx: initialSx,\n } = computeAnimationValues(initialIndex);\n\n const translateX = useAnimatedValue(initialTx);\n const scaleX = useAnimatedValue(initialSx);\n\n const { indexStore } = useContext(InternalContext);\n\n useEffect(() => {\n const scrollToIndex = (index: number) => {\n const { tx, sx } = computeAnimationValues(index);\n\n startAnimation(translateX, tx);\n startAnimation(scaleX, sx);\n };\n\n scrollToIndex(indexStore.getState());\n\n return indexStore.subscribe(scrollToIndex);\n }, [\n computeAnimationValues,\n coordinates,\n indexStore,\n ]);\n\n return (\n <Animated.View\n style={[\n styles.root,\n disabled ? styles.disabled : undefined,\n { transform: [{ translateX }, { scaleX }] },\n style,\n ]}\n {...otherProps}\n />\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,UAA7B,EAAyCC,SAAzC,QAA0D,OAA1D;AACA,SAASC,QAAT,EAAmBC,MAAnB,QAAiC,cAAjC;AAEA,SAASC,QAAT,QAAyB,WAAzB;AACA,SAASC,gBAAT,QAAiC,UAAjC;AAEA,SAASC,iBAAT,QAAkC,iBAAlC;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAIA,MAAMC,eAAe,GAAG,EAAxB;AACA,MAAMC,gBAAgB,GAAG,CAAzB;AAEA,MAAMC,qBAAqB,GAAG,KAAK,CAAnC;;AAEA,MAAMC,SAAwC,GAAG,YAAgC;EAC7E,MAAMC,KAAK,GAAGR,QAAQ,EAAtB;EAEA,OAAO;IACHS,IAAI,EAAE;MACFC,eAAe,EAAEF,KAAK,CAACG,OAAN,CAAcC,SAAd,CAAwBC,IADvC;MAEFC,IAAI,EAAE,CAFJ;MAGFC,MAAM,EAAE,CAHN;MAIFC,KAAK,EAAEZ,eAJL;MAKFa,MAAM,EAAEZ,gBALN;MAMFa,QAAQ,EAAE;IANR,CADH;IASHC,QAAQ,EAAE;MACNF,MAAM,EAAE;IADF;EATP,CAAP;AAaH,CAhBD;;AAkBA,MAAMG,cAAc,GAAG,CAACC,KAAD,EAAwBC,OAAxB,KAA4C;EAC/DxB,QAAQ,CAACyB,MAAT,CAAgBF,KAAhB,EAAuB;IACnBC,OAAO,EAAEA,OADU;IAEnBE,QAAQ,EAAE,GAFS;IAGnBC,MAAM,EAAE1B,MAAM,CAAC2B,MAAP,CAAc,IAAd,EAAoB,CAApB,EAAuB,GAAvB,EAA4B,CAA5B,CAHW;IAInBC,eAAe,EAAE;EAJE,CAAvB,EAKGC,KALH;AAMH,CAPD;;AASA,eAAe,SAASC,YAAT,CAAsBC,KAAtB,EAAgD;EAC3D,MAAM;IACFC,WADE;IAEFZ,QAFE;IAGFa,YAHE;IAIFC,UAJE;IAKFC,KALE;IAMF,GAAGC;EAND,IAOFL,KAPJ;EASA,MAAMM,MAAM,GAAG7B,SAAS,EAAxB;EAEA,MAAM8B,sBAAsB,GAAG1C,WAAW,CAAE2C,YAAD,IAA0B;IACjE,MAAM;MAAEC,EAAF;MAAMC;IAAN,IAAaT,WAAW,CAACO,YAAD,CAAX,IAA6BpC,iBAAhD;IAEA,MAAMuC,QAAQ,GAAGD,EAAE,GAAGD,EAAtB;IAEA,MAAMG,cAAc,GAAGH,EAAE,GAAG,CAACE,QAAQ,GAAGrC,eAAZ,IAA+B,CAA3D;IAEA,MAAMuC,KAAK,GAAGV,UAAU,GAAG3B,qBAAH,GAA2B,CAAnD;IACA,MAAMsC,UAAU,GAAG,CAACH,QAAQ,GAAGE,KAAZ,IAAqBvC,eAAxC;IAEA,OAAO;MAAEyC,EAAE,EAAEH,cAAN;MAAsBI,EAAE,EAAEF;IAA1B,CAAP;EACH,CAXyC,EAWvC,CAACb,WAAD,EAAcE,UAAd,CAXuC,CAA1C;EAaA,MAAM;IACFY,EAAE,EAAEE,SADF;IAEFD,EAAE,EAAEE;EAFF,IAGFX,sBAAsB,CAACL,YAAD,CAH1B;EAKA,MAAMiB,UAAU,GAAGhD,gBAAgB,CAAC8C,SAAD,CAAnC;EACA,MAAMG,MAAM,GAAGjD,gBAAgB,CAAC+C,SAAD,CAA/B;EAEA,MAAM;IAAEG;EAAF,IAAiBvD,UAAU,CAACO,eAAD,CAAjC;EAEAN,SAAS,CAAC,MAAM;IACZ,MAAMuD,aAAa,GAAIC,KAAD,IAAmB;MACrC,MAAM;QAAER,EAAF;QAAMC;MAAN,IAAaT,sBAAsB,CAACgB,KAAD,CAAzC;MAEAjC,cAAc,CAAC6B,UAAD,EAAaJ,EAAb,CAAd;MACAzB,cAAc,CAAC8B,MAAD,EAASJ,EAAT,CAAd;IACH,CALD;;IAOAM,aAAa,CAACD,UAAU,CAACG,QAAX,EAAD,CAAb;IAEA,OAAOH,UAAU,CAACI,SAAX,CAAqBH,aAArB,CAAP;EACH,CAXQ,EAWN,CACCf,sBADD,EAECN,WAFD,EAGCoB,UAHD,CAXM,CAAT;EAiBA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,KAAK,EAAE,CACHf,MAAM,CAAC3B,IADJ,EAEHU,QAAQ,GAAGiB,MAAM,CAACjB,QAAV,GAAqBqC,SAF1B,EAGH;MAAEC,SAAS,EAAE,CAAC;QAAER;MAAF,CAAD,EAAiB;QAAEC;MAAF,CAAjB;IAAb,CAHG,EAIHhB,KAJG;EADX,GAOQC,UAPR,EADJ;AAWH;AAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/core",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.27",
|
|
4
4
|
"author": "Fountain-UI Team",
|
|
5
5
|
"description": "React components that implement Tappytoon's Fountain Design.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "17b86a4def2cff70a2f5d92c43c204e449ca7587"
|
|
71
71
|
}
|
|
@@ -77,13 +77,21 @@ export default function TabIndicator(props: TabIndicatorProps) {
|
|
|
77
77
|
const { indexStore } = useContext(InternalContext);
|
|
78
78
|
|
|
79
79
|
useEffect(() => {
|
|
80
|
-
|
|
81
|
-
const { tx, sx } = computeAnimationValues(
|
|
80
|
+
const scrollToIndex = (index: number) => {
|
|
81
|
+
const { tx, sx } = computeAnimationValues(index);
|
|
82
82
|
|
|
83
83
|
startAnimation(translateX, tx);
|
|
84
84
|
startAnimation(scaleX, sx);
|
|
85
|
-
}
|
|
86
|
-
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
scrollToIndex(indexStore.getState());
|
|
88
|
+
|
|
89
|
+
return indexStore.subscribe(scrollToIndex);
|
|
90
|
+
}, [
|
|
91
|
+
computeAnimationValues,
|
|
92
|
+
coordinates,
|
|
93
|
+
indexStore,
|
|
94
|
+
]);
|
|
87
95
|
|
|
88
96
|
return (
|
|
89
97
|
<Animated.View
|