Description
import { useEffect } from 'react';
import { Text, StyleSheet, Animated, Platform, Easing,} from 'react-native';
const RowAnimate = props => {
const {data, _active} = props;
useEffect(() => {
if (props._active !== nextProps._active) {
Animated.timing(_active, {
duration: 300,
easing: Easing.bounce,
toValue: Number(nextProps._active),
}).start();
}
},[nextProps])
return(
<Animated.View style={[
styles.animationStyle,
]}>
<Text >{data.name}</Text>
</Animated.View>
)
};
const styles = StyleSheet.create({
animationStyle : {
...Platform.select({
ios: {
transform: [{
scale: this._active.interpolate({
inputRange: [0, 1],
outputRange: [1, 1.1],
}),
}],
shadowRadius: this._active.interpolate({
inputRange: [0, 1],
outputRange: [2, 10],
}),
},
android: {
transform: [{
scale: this._active.interpolate({
inputRange: [0, 1],
outputRange: [1, 1.07],
}),
}],
elevation: this._active.interpolate({
inputRange: [0, 1],
outputRange: [2, 6],
}),
},
})
}
});
export default RowAnimate;
import {
Animated,
Easing,
Dimensions,
Platform,
} from 'react-native';
import RowAnimate from '../components/Row';
const window = Dimensions.get('window');
const FavoritesScreen = props => {
const favorites = useSelector(state => state.favorites.favoritedExercises);
const _active = new Animated.Value(0);
const WorkoutRenderHandler = ({favorites, _active}) => {
return(
<RowAnimate data={favorites} active={_active} />
)
};
return (
<View>
<SortableList
style={styles.screen}
contentContainerStyle={styles.contentContainer}
data={favorites}
renderRow={WorkoutRenderHandler}
/>
)
};
errors:::
TypeError: undefined is not an object (evaluating 'this._active.interpolate')
at node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:34:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:172:19 in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
at node_modules@react-native\polyfills\error-guard.js:49:36 in ErrorUtils.reportFatalError
at node_modules\metro-runtime\src\polyfills\require.js:204:6 in guardedLoadModule
at http://192.168.1.15:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:295266:3 in global code
Invariant Violation: "main" has not been registered. This can happen if:
- Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
- A module failed to load due to an error and
AppRegistry.registerComponentwasn't called.
at node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:34:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:172:19 in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
at node_modules@react-native\polyfills\error-guard.js:49:36 in ErrorUtils.reportFatalError
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:367:8 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:4 in callFunctionReturnFlushedQueue