
Product
Introducing Socket MCP for Claude Desktop
Add secure dependency scanning to Claude Desktop with Socket MCP, a one-click extension that keeps your coding conversations safe from malicious packages.
github.com/anvilabs/react-native-image-carousel
Image carousel with support for heading, captions, fullscreen mode, image swiping and pinch-to-zoom in fullscreen mode.
Supports both Android and iOS. Zoom feature works on iOS only.
npm install --save react-native-image-carousel
import ImageCarousel from 'react-native-image-carousel';
export default class App extends Component<any, any, any> {
_imageCarousel: ImageCarousel;
componentWillMount() {
(this: any)._renderHeader = this._renderHeader.bind(this);
}
_renderHeader(): ReactElement<any> {
return (
<TouchableWithoutFeedback onPress={this._imageCarousel.close}>
<View>
<Text style={styles.closeText}>Exit</Text>
</View>
</TouchableWithoutFeedback>
);
}
_renderFooter(): ReactElement<any> {
return (
<Text style={styles.footerText}>Footer!</Text>
);
}
_renderContent(idx: number): ReactElement<any> {
return (
<Image
style={styles.container}
source={{ uri: urls[idx] }}
resizeMode={'contain'}
/>
);
}
render(): ReactElement<any> {
return (
<View style={styles.container}>
<ImageCarousel
ref={(imageCarousel: ImageCarousel) => {
this._imageCarousel = imageCarousel;
}}
renderContent={this._renderContent}
renderHeader={this._renderHeader}
renderFooter={this._renderFooter}
>
{urls.map((url: string): ReactElement<any> => (
<Image
key={url}
style={styles.image}
source={{ uri: url, height: 100 }}
resizeMode={'contain'}
/>
))}
</ImageCarousel>
</View>
);
}
}
Check full example in Example folder.
Every prop is optional.
Name | Type | Description |
---|---|---|
activeProps? | Object | Props of each child when in fullscreen mode. (For a component to fill the screen activeProp's style must be flex: 1 ). This prop is ignored in case renderContent prop is provided. |
activeComponents? | [ReactElement<any>] | Active components' bounds will be used for opening/closing fullscreen mode animations. If not provided, the immediate children are used. |
zoomEnabled? | boolean | true by default, if false , children are not zoomable. |
hideStatusBarOnOpen? | boolean | true by default, if false , status bar does not fade out on open. |
renderContent? | (idx: number) => ReactElement<any> | Component to render in fullscreen mode for the given index. |
renderHeader? | () => ReactElement<any> | Component to render at the top when in fullscreen mode. |
renderFooter? | () => ReactElement<any> | Component to render at the bottom when in fullscreen mode. |
onIdxChange? | (idx: number) | Fired on index change in fullscreen mode. |
onOpen? | () => void | Fired on fullscreen mode open. |
onClose? | () => void | Fired on fullscreen mode close. |
react-native-image-carousel also provides two methods for opening and closing the fullscreen mode respectively:
open(startIdx: number)
, close
.
MIT License © Anvilabs LLC
FAQs
Unknown package
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.
Product
Add secure dependency scanning to Claude Desktop with Socket MCP, a one-click extension that keeps your coding conversations safe from malicious packages.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.