InterfaceKit / React Native Interactive Image Gallery
Licence: mit
πΌ A React Native component to display a gallery of images.
Stars: β 111
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Interactive Image Gallery
React Cassette Player
Simple ReactJS HTML5 audio player component built with SVG icons from The Noun Project.
Stars: β 93 (-16.22%)
Mutual labels: react-component
Tagify
π lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
Stars: β 2,305 (+1976.58%)
Mutual labels: react-component
Ui Predicate
Finally a Predicate/Rule Editor UI component for the Web π
Stars: β 86 (-22.52%)
Mutual labels: react-component
Re Resizable
π A resizable component for React.
Stars: β 1,302 (+1072.97%)
Mutual labels: react-component
React Native Swipeable Parallax Carousel
React Native Swipeable Parallax Carousel
Stars: β 98 (-11.71%)
Mutual labels: react-component
Refluent
A chainable & composable alternative React component API.
Stars: β 75 (-32.43%)
Mutual labels: react-component
React Stepper
Well-designed stepper component for react
Stars: β 108 (-2.7%)
Mutual labels: react-component
React Responsive Picture
A future-proof responsive image component that supports latest Picture specification
Stars: β 91 (-18.02%)
Mutual labels: react-component
Babel Plugin Stateful Functional React Components
Stateful functional React components without runtime overhead
Stars: β 86 (-22.52%)
Mutual labels: react-component
React Promise
a react.js hook for general promise in typescript
Stars: β 90 (-18.92%)
Mutual labels: react-component
React Textarea Autosize
<textarea /> component for React which grows with content
Stars: β 1,357 (+1122.52%)
Mutual labels: react-component
React Easy Swipe
Easy handler for common swipe operations
Stars: β 85 (-23.42%)
Mutual labels: react-component
React Image Fallback
stop displaying broken images, have another image to fallback on.
Stars: β 106 (-4.5%)
Mutual labels: react-component
Reactjs Popup
React Popup Component - Modals,Tooltips and Menusβββ All inΒ one
Stars: β 1,211 (+990.99%)
Mutual labels: react-component
React Css Component
Injecting CSS via React Components
Stars: β 98 (-11.71%)
Mutual labels: react-component
React Multi Select
A Multi Select component built with and for React
Stars: β 111 (+0%)
Mutual labels: react-component
React Color
π¨ Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more
Stars: β 10,287 (+9167.57%)
Mutual labels: react-component
React Contextmenu
Project is no longer maintained
Stars: β 1,361 (+1126.13%)
Mutual labels: react-component
react-native-interactive-image-gallery
A React Native component to display a gallery of images.
Getting started
$ yarn addreact-native-interactive-image-gallery
Mostly automatic installation
$ react-native link react-native-interactive-image-gallery
Manual installation
iOS
- In Xcode, in the project navigator, right click
Libraries
βAdd Files to [your project's name]
- Go to
node_modules
βreact-native-interactive-image-gallery
and addRNIKInteractiveImageLibrary.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNIKInteractiveImageLibrary.a
to your project'sBuild Phases
βLink Binary With Libraries
- Run your project (
Cmd+R
)<
Android
No additional setup needed.
Usage
import ImageBrowser from 'react-native-interactive-image-gallery'
class Images extends React.PureComponent<Props> {
render() {
const imageURLs: Array<Object> = this.props.images.map(
(img: Object, index: number) => ({
URI: img.uri,
thumbnail: img.thumbnail,
id: String(index),
title: img.title,
description: img.description
})
)
return <ImageBrowser images={imageURLs} />
}
}
API
The <ImageBrowser />
component accepts the following props
Props
Prop | Type | Mandatory |
---|---|---|
images |
Array<ImageSource> |
Yes |
onPressImage |
Function |
|
topMargin |
number |
|
closeText |
string |
|
infoTitleStyles |
Animated.View.style |
|
infoDescriptionStyles |
Animated.View.style |
|
enableTilt (experimental, iOS only) |
boolean |
Where ImageSource
represents
ImageSource
Name | Type | Mandatory |
---|---|---|
id |
string |
Yes |
URI |
string |
Yes |
thumbnail |
string |
Yes |
title |
string |
|
description |
string |
Aknowledgements
Thanks to Eric Vicenti (https://github.com/ericvicenti) and his talk at React Native EU 2017 called "Practical Hacks for delightful interactions" for the inspiration and the iOS animations present in this library
The main idea of the library and some parts of the code were inspired or taken from his presentation, available at this repo.
License
MIT.
Author
Γlvaro Medina Ballester <amedina at apsl.net>
Built with π by APSL.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].