Search code examples
javascriptreactjsreact-nativereact-animatedreact-native-reanimated

Value for value cannot be cast from ReadableNativeMap to Double in React Native


I am trying to implement an animation on the text ams using react-native-reanimated. I am pretty sure it's because of the Animated component, but can't figure out how to resolve it.

error

App.js

import React, {useEffect, useRef} from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
import Logo from './screens/Logo';
import Animated, { useCode, cond, eq, set } from 'react-native-reanimated';
import { withTimingTransition } from 'react-native-redash';

export default function App() {

  const scale = useRef(new Animated.Value(0));
  const scaleAnimation = withTimingTransition(scale.current);

  useCode(() => cond(eq(scale.current, 0), set(scale.current, 1)), []);

  return (
      <>
        <View style={styles.container}>
          <View style={{ ...styles.logoContainer}}>
            <Logo scale={scaleAnimation} />
          </View>
        </View>
        <NavigationContainer>...</NavigationContainer>
      </>
  );
}

Logo.js

import React, {Component} from 'react';
import Animated from 'react-native-reanimated';
import {Button, StyleSheet, Text, View} from 'react-native';

const Logo = (scale) => (
    <Animated.View style={{ ...styles.logo, transform: [{scale: scale}] }}>
        <Text style={{ fontWeight: "400", fontSize: 36}}> ams </Text>
    </Animated.View>
);
export default Logo;

Solution

  • I missed { } while passing scale.

    const Logo = ({scale}) => (