Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
react-native-reanimated-carousel
Advanced tools
Changelog
3.5.1
Readme
English | 简体中文
react-native-snap-carousel
!V2 has been released! Join it! [v1 docs]
Support to Web [demo]
Click on the image to see the code snippets. [Try it] 🍺
normal-horizontal | normal-vertical | parallax-horizontal |
parallax-vertical | stack-horizontal-left | stack-horizontal-right |
stack-vertical-left | stack-vertical-right | stack-horizontal-right |
left-align |
Now you can make cool animations with us! Very easy! [Details]
Open a Terminal in the project root and run:
yarn add react-native-reanimated-carousel
Or if you use npm:
npm install react-native-reanimated-carousel
Now we need to install react-native-gesture-handler
and react-native-reanimated(>=2.0.0)
.
react-native-reanimated | react-native-gesture-handler | |
---|---|---|
react-native-reanimated-carousel < v3 | <2.7.0 | * |
react-native-reanimated-carousel >= v3 | >=2.7.0 | * |
import * as React from 'react';
import { Dimensions, Text, View } from 'react-native';
import Carousel from 'react-native-reanimated-carousel';
function Index() {
const width = Dimensions.get('window').width;
return (
<View style={{ flex: 1 }}>
<Carousel
loop
width={width}
height={width / 2}
autoPlay={true}
data={[...new Array(6).keys()]}
scrollAnimationDuration={1000}
onSnapToItem={(index) => console.log('current index:', index)}
renderItem={({ index }) => (
<View
style={{
flex: 1,
borderWidth: 1,
justifyContent: 'center',
}}
>
<Text style={{ textAlign: 'center', fontSize: 30 }}>
{index}
</Text>
</View>
)}
/>
</View>
);
}
export default Index;
Optimizing
Used in ScrollView/FlatList
#143 - Carousel suppresses ScrollView/FlatList scroll gesture handler: When using a carousel with a layout oriented to only one direction (vertical/horizontal) and inside a ScrollView/FlatList, it is important for the user experience that the unused axis does not impede the scroll of the list. So that, for example, the x-axis is free we can change the activeOffsetX of the gesture handler:
<Carousel
{...}
panGestureHandlerProps={{
activeOffsetX: [-10, 10],
}}
/>
RTL
EXPO
Reanimated(v2)
.Working principle
How to run tests in exampleExpo
$ yarn prepare
$ yarn link --global
$ cd ./exampleExpo
$ yarn link react-native-reanimated-carousel --global
$ yarn test
Use react-native-snap-carousel for quick swiping,you can see caton clearly when you reach the junction.(gif 4.6mb)
Compared with react-native-reanimated-carousel,The actual test was ten slides per second, but it didn't show up very well in gif.
:pretty
use pretty images
yarn ios
yarn ios:pretty
yarn android
yarn android:pretty
yarn web
yarn web:pretty
MIT
FAQs
Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.
The npm package react-native-reanimated-carousel receives a total of 107,456 weekly downloads. As such, react-native-reanimated-carousel popularity was classified as popular.
We found that react-native-reanimated-carousel demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer 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
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.