Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@react-spring/native
Advanced tools
[`react-native`](https://github.com/facebook/react-native) support
@react-spring/native is a library for creating animations in React Native applications. It provides a set of hooks and components that allow developers to create smooth and interactive animations with ease. The library is built on top of the react-spring animation library, which is known for its physics-based animations.
Basic Animation
This feature allows you to create basic animations. In this example, a view fades in from opacity 0 to opacity 1.
import { useSpring, animated } from '@react-spring/native';
import { View } from 'react-native';
const App = () => {
const props = useSpring({ to: { opacity: 1 }, from: { opacity: 0 } });
return <animated.View style={props}><View style={{ width: 100, height: 100, backgroundColor: 'red' }} /></animated.View>;
};
Spring Animation
This feature allows you to create spring animations that can be toggled. In this example, a button toggles the opacity of a view between 0 and 1.
import { useSpring, animated } from '@react-spring/native';
import { View, Button } from 'react-native';
import { useState } from 'react';
const App = () => {
const [toggle, setToggle] = useState(false);
const props = useSpring({ to: { opacity: toggle ? 1 : 0 }, from: { opacity: 0 } });
return (
<View>
<Button title="Toggle" onPress={() => setToggle(!toggle)} />
<animated.View style={props}><View style={{ width: 100, height: 100, backgroundColor: 'blue' }} /></animated.View>
</View>
);
};
Gesture-based Animation
This feature allows you to create gesture-based animations. In this example, a view can be dragged around the screen and will return to its original position when released.
import { useSpring, animated } from '@react-spring/native';
import { PanResponder, View } from 'react-native';
import { useRef } from 'react';
const App = () => {
const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }));
const panResponder = useRef(
PanResponder.create({
onMoveShouldSetPanResponder: () => true,
onPanResponderMove: (e, { dx, dy }) => set({ x: dx, y: dy }),
onPanResponderRelease: () => set({ x: 0, y: 0 })
})
).current;
return (
<animated.View {...panResponder.panHandlers} style={{ transform: [{ translateX: x }, { translateY: y }] }}>
<View style={{ width: 100, height: 100, backgroundColor: 'green' }} />
</animated.View>
);
};
react-native-reanimated is another popular library for creating animations in React Native. It provides a more declarative API and is known for its performance, especially for complex animations. Compared to @react-spring/native, react-native-reanimated offers more control over the animation lifecycle and better integration with gesture handling.
react-native-animatable is a library that provides a set of pre-defined animations and transitions for React Native components. It is easier to use for simple animations but lacks the flexibility and physics-based animations that @react-spring/native offers. It is a good choice for quick and simple animations.
lottie-react-native is a library for rendering Adobe After Effects animations in React Native. It is ideal for complex, designer-created animations. While it does not offer the same level of interactivity and physics-based animations as @react-spring/native, it excels in rendering high-quality animations created in After Effects.
react-native
support
Note: This package is not compiled before being published, because Metro handles that for us, which means we get proper sourcemap support!
FAQs
[`react-native`](https://github.com/facebook/react-native) support
We found that @react-spring/native demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.