iosでもlottieアニメが動作するように修正

components/駅名表/Sign.js

@@ -99,7 +99,6 @@ export default function Sign(props) {
         style={{ position: "absolute", right: -15, top: -20 }}
         onPress={() => {
           if (testButtonStatus) {
-            lottieRef.current.play(35, 7);
             const otherData = favoriteStation.filter((d) => {
               const compare = JSON.stringify(d);
               const current = JSON.stringify(currentStation);
@@ -112,7 +111,6 @@ export default function Sign(props) {
             AS.setItem("favoriteStation", JSON.stringify(otherData));
             setFavoriteStation(otherData);
           } else {
-            lottieRef.current.play(7, 35);
             let ret = favoriteStation;
             console.log(currentStation);
             ret.push(currentStation);
@@ -122,12 +120,12 @@ export default function Sign(props) {
           setTestButtonStatus(!testButtonStatus);
         }}
       >
-        <LottieView
+        <LottieDelayView
           progress={testButtonStatus ? 1 : 0}
           speed={1.4}
           style={{ width: 80, height: 80 }}
           source={require("../../assets/939-star.json")}
-          ref={lottieRef}
+          lottieRef={lottieRef}
           loop={false}
         />
       </TouchableOpacity>
@@ -141,6 +139,37 @@ export default function Sign(props) {
   );
 }
 
+const LottieDelayView = ({
+  progress,
+  speed,
+  style,
+  source,
+  lottieRef,
+  loop,
+}) => {
+  const [progressState, setProgressState] = useState(undefined);
+  useEffect(() => {
+    if (progress == 0) {
+      lottieRef.current.play(progressState !== undefined ? 35 : 7, 7);
+    } else {
+      lottieRef.current.play(progressState !== undefined ? 7 : 35, 35);
+    }
+  }, [progress]);
+  return (
+    <LottieView
+      progress={progressState}
+      speed={speed}
+      style={style}
+      source={source}
+      ref={lottieRef}
+      loop={loop}
+      onAnimationFinish={(isCanceled) => {
+        console.log("finish");
+        setProgressState(progress);
+      }}
+    />
+  );
+};
 const NexPreStationLine = ({ nexStation, preStation }) => {
   return (
     <View style={styleSheet.下枠フレーム}>