Giter Site home page Giter Site logo

terrysahaidak / react-native-gallery-toolkit Goto Github PK

View Code? Open in Web Editor NEW
664.0 10.0 38.0 36.95 MB

Reanimated 2 powered gallery implementation

License: MIT License

JavaScript 4.86% Starlark 0.52% Java 6.34% Ruby 0.57% Objective-C 0.34% Objective-C++ 2.09% TypeScript 85.28%
gallery android ios react-native reanimated reanimated2 imageviewer react animations pinch-to-zoom

react-native-gallery-toolkit's Introduction

React Native Gallery Toolkit

Reanimated 2 and Gesturer Handler powered Gallery implementation

Gallery in action gif Instagram feed clone

npm

Important!

The library uses Reanimated 2 alpha. It means that it may be unstable. Also, the library itself is in the alpha testing stage and may contain bugs.

Installation

Use npm or yarn to install the library

npm i --save react-native-gallery-toolkit

Also, you need to install [email protected] (the new 2 version) and react-native-gesture-handler, and follow their installation instructions.

Expo is supported since SDK 40.

npm install [email protected]

More information is available https://docs.expo.io/versions/latest/sdk/reanimated/

Standalone gallery

Standalone gallery renders Pager which supports thousands of images thanks to virtualization. Each page renders ImageTransformer component which gives ability to pinch-to-zoom, double tap to zoom, also you can run custom callbacks and worklets on on tab, double tap, pan.

import {
  StandaloneGallery,
  GalleryItemType,
  StandaloneGalleryHandler,
} from 'react-native-gallery-toolkit';

const images: GalleryItemType[] = [
  {
    id: '1',
    width: 300,
    height: 300,
    uri: 'https://placekitten.com/300/300',
  },
  {
    id: '2',
    width: 400,
    height: 200,
    uri: 'https://placekitten.com/400/200',
  },
];

export default function App() {
  return <StandaloneGallery items={images} />;
}

See Full featured example for example of usage of all the props.

Limitations

  • Only portrait orientation currently supported
  • There is no way to change dimensions without full re-render of the gallery
  • Debugging is not supported because of Reanimated v2 uses TurboModules. Use flipper to debug your JS Context.
  • On Android tap on hold on the screen while page changes doesn't trigger animation to stop due to bug in Gesture Handler.

Base props

Prop Description Type Default
items The array of items to render. But can also accept Map, Set, or Object with keys. If the type is not array, then getTotalCount and getItem should be defined too. Array<{ width: number, height: number, id: string, uri: string }> undefined
width? Viewport width number Dimensions.get('window').width
height? Viewport height number Dimensions.get('window').height
numToRender? How many pages should be rendered at the same time number 2
gutterWidth? The width of the gutter between pages number 0
initialIndex? The initial page index number 0
keyExtractor? Callback which extract the key of the page. Receives current item of the provided items as well as current index (item: T, index: number) => string Uses index as a key by default

Advance props

Prop Description Type Default
getTotalCount? If the type of items is not an array, then this method should be defined to provide the total count of items (data: T) => number Required when items is not an array
getItem? If the type of items is not an array, then this method should be defined to provide the current item based on the index. Can return either the item or undefined. (data: T, index: number) => ItemT or undefined Required when items is not an array
renderImage? Callback that can be used to render custom image component. As an example, it can be used to render custom loading/error states (props: RenderImageProps, item: ItemT, index: number) => JSX.Element () => Image
renderPage? Callback that can be used to render custom page. Can be used to display some non-image pages such as Video, for instance (props: ImageRendererProps<T>, index: number) => JSX.Element ImageTransformer

Handlers

Prop Description Type Is worklet? Default
onIndexChange? Fires when active index changes (nextIndex: number) => void Function or Worklet undefined
onTap? Executes when tap image transformer receives tap () => void Function or Worklet undefined
onDoubleTap? Executes when tap image transformer receives double-tap () => void Function or Worklet undefined
onInteraction? Is called when either pan or scale has happened. (type: 'scale' or 'pan') => void Function or Worklet undefined
onPagerTranslateChange? Executes on pager's horizontal pan (translateX: number) => void Function or Worklet undefined
onGesture? Executes on pager's gesture (event: PanGestureHandlerGestureEvent, isActive: SharedValue<boolean>) => void Function or Worklet undefined
shouldPagerHandleGestureEvent? Worklet that will be passed to pager's shouldHandleEvent to determine should pager handle this event. Can be used to handle "swipe down to close". (event: PanGestureHandlerGestureEvent) => boolean Only Worklet undefined

Methods

Name Description Type
goNext Changes the active index forward () => void
goBack Changes the active index backward () => void
setIndex Sets the active index (nextIndex: number) => void

Pager

TODO

Transformer

TODO

Scalable Image

TODO

Examples

The source code for the example (showcase) app is under the Example/ directory. Clone the repo, go to the Example/ folder and run:

npm install

Running on iOS

Before running the app, install the cocoapods dependencies:

npx pod-install

Now, you can start the app:

npm run ios

Running on Android

npm run android

TODOs

  • Add invariants to all the required props
  • Finish documentation
  • Lightbox with examples
  • Lightbox Gallery with examples
  • Try to use react-native-shared-element

LICENSE

MIT

react-native-gallery-toolkit's People

Contributors

alw3ys avatar dependabot[bot] avatar hirbod avatar perunt avatar terrysahaidak avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

decisionnguyen naturalclar renanmav irontony saonam ferrannp trendingtechnology perunt kamote codebunny786 delta94 suretarget graphtobinary gorhom chronsyn nghi-nv nhannah liz-arizto r0b0t3d dimstefanakis trozee yayanartha syedpeer yurifa krifayounes stelmakhivan kristijantomic lokiuz guistrutzki whydidoo rnproj esdebe xyztlp chiffresgroup thesocialler

react-native-gallery-toolkit's Issues

Android Crash on startup

The application crashes on startup for Android. "Unfortunately, ReanimatedGalleryExample has stopped". Used Lenovo phone & OnePlus6.

StandaloneGallery: Tried to synchronously call function {setTempIndex} from a different thread

When:

onTap and swipe for change image in StandaloneGallery
It has been stopped working when I updated from "react-native-reanimated": "^2.0.0-alpha.7"to "^2.0.0-rc.0"

Info:

iPhone 11 emulator ios 14.2
package.json:

    "@react-native-community/blur": "^3.6.0",
    "@react-native-community/cameraroll": "^4.0.0",
    "@react-native-community/datetimepicker": "^3.0.8",
    "@react-native-community/viewpager": "^4.1.6",
    "expo-av": "^8.6.0",
    "expo-media-library": "^9.2.1",
    "mobx": "^6.0.4",
    "mobx-react": "^7.0.5",
    "mobx-react-lite": "^3.1.6",
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-camera": "^3.40.0",
    "react-native-fast-image": "^8.3.2",
    "react-native-gallery-toolkit": "^1.0.0-alpha.1",
    "react-native-gesture-handler": "^1.8.0",
    "react-native-haptic-feedback": "^1.11.0",
    "react-native-image-picker": "^2.3.3",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-modal": "^11.5.6",
    "react-native-navigation": "^7.5.0",
    "react-native-reanimated": "^2.0.0-rc.0",
    "react-native-redash": "^15.10.1",
    "react-native-static-safe-area-insets": "^2.1.1",
    "react-native-tab-view": "^2.15.2",
    "react-native-tab-view-viewpager-adapter": "^1.1.0",
    "react-native-unimodules": "^0.11.0",
    "react-native-vector-icons": "^7.0.0"
    ...

Full stack error from the app:

Tried to synchronously call function {setTempIndex} from a different thread.
Solution is:
a) If you want to synchronously execute this method, mark it as a Worklet
b) If you want to execute this method on the JS thread, wrap it using runOnJS


reanimated::REAIOSErrorHandler::raiseSpec()
    REAIOSErrorHandler.mm:17
reanimated::ErrorHandler::raise()::'lambda'()::operator()()
decltype(std::__1::forward<reanimated::ErrorHandler::raise()::'lambda'()&>(fp)()) std::__1::__invoke<reanimated::ErrorHandler::raise()::'lambda'()&>(reanimated::ErrorHandler::raise()::'lambda'()&)
void std::__1::__invoke_void_return_wrapper<void>::__call<reanimated::ErrorHandler::raise()::'lambda'()&>(reanimated::ErrorHandler::raise()::'lambda'()&)
std::__1::__function::__alloc_func<reanimated::ErrorHandler::raise()::'lambda'(), std::__1::allocator<reanimated::ErrorHandler::raise()::'lambda'()>, void ()>::operator()()
std::__1::__function::__func<reanimated::ErrorHandler::raise()::'lambda'(), std::__1::allocator<reanimated::ErrorHandler::raise()::'lambda'()>, void ()>::operator()()
std::__1::__function::__value_func<void ()>::operator()() const
std::__1::function<void ()>::operator()() const
reanimated::REAIOSScheduler::scheduleOnUI(std::__1::function<void ()>)
reanimated::ErrorHandler::raise()
reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const
decltype(std::__1::forward<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0&>(fp)(std::__1::forward<facebook::jsi::Runtime&>(fp0), std::__1::forward<facebook::jsi::Value const&>(fp0), std::__1::forward<facebook::jsi::Value const*>(fp0), std::__1::forward<unsigned long>(fp0))) std::__1::__invoke<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
facebook::jsi::Value std::__1::__invoke_void_return_wrapper<facebook::jsi::Value>::__call<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__alloc_func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0, std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0, std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__value_func<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&) const
std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const
facebook::jsc::JSCRuntime::createFunctionFromHostFunction(facebook::jsi::PropNameID const&, unsigned int, std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>)::HostFunctionMetadata::call(OpaqueJSContext const*, OpaqueJSValue*, OpaqueJSValue*, unsigned long, OpaqueJSValue const* const*, OpaqueJSValue const**)
JSC::JSCallbackObject<JSC::JSNonFinalObject>::call(JSC::JSGlobalObject*, JSC::CallFrame*)
JSC::LLInt::setUpCall(JSC::CallFrame*, JSC::CodeSpecializationKind, JSC::JSValue, JSC::LLIntCallLinkInfo*)
llint_entry
vmEntryToJavaScript
JSC::Interpreter::executeCall(JSC::JSGlobalObject*, JSC::JSObject*, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSC::profiledCall(JSC::JSGlobalObject*, JSC::ProfilingReason, JSC::JSValue, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSObjectCallAsFunction
facebook::jsc::JSCRuntime::call(facebook::jsi::Function const&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)
facebook::jsi::Function::callWithThis(facebook::jsi::Runtime&, facebook::jsi::Object const&, facebook::jsi::Value const*, unsigned long) const
reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)
decltype(std::__1::forward<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&>(fp)(std::__1::forward<facebook::jsi::Runtime&>(fp0), std::__1::forward<facebook::jsi::Value const&>(fp0), std::__1::forward<facebook::jsi::Value const*>(fp0), std::__1::forward<unsigned long>(fp0))) std::__1::__invoke<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
facebook::jsi::Value std::__1::__invoke_void_return_wrapper<facebook::jsi::Value>::__call<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__alloc_func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2, std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2, std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__value_func<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&) const
std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const
facebook::jsc::JSCRuntime::createFunctionFromHostFunction(facebook::jsi::PropNameID const&, unsigned int, std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>)::HostFunctionMetadata::call(OpaqueJSContext const*, OpaqueJSValue*, OpaqueJSValue*, unsigned long, OpaqueJSValue const* const*, OpaqueJSValue const**)
JSC::JSCallbackObject<JSC::JSNonFinalObject>::call(JSC::JSGlobalObject*, JSC::CallFrame*)
JSC::LLInt::setUpCall(JSC::CallFrame*, JSC::CodeSpecializationKind, JSC::JSValue, JSC::LLIntCallLinkInfo*)
llint_entry
vmEntryToJavaScript
JSC::Interpreter::executeCall(JSC::JSGlobalObject*, JSC::JSObject*, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSC::profiledCall(JSC::JSGlobalObject*, JSC::ProfilingReason, JSC::JSValue, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSObjectCallAsFunction
facebook::jsc::JSCRuntime::call(facebook::jsi::Function const&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)
facebook::jsi::Function::callWithThis(facebook::jsi::Runtime&, facebook::jsi::Object const&, facebook::jsi::Value const*, unsigned long) const
reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)
decltype(std::__1::forward<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&>(fp)(std::__1::forward<facebook::jsi::Runtime&>(fp0), std::__1::forward<facebook::jsi::Value const&>(fp0), std::__1::forward<facebook::jsi::Value const*>(fp0), std::__1::forward<unsigned long>(fp0))) std::__1::__invoke<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
facebook::jsi::Value std::__1::__invoke_void_return_wrapper<facebook::jsi::Value>::__call<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__alloc_func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2, std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2, std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__value_func<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&) const
std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const
facebook::jsc::JSCRuntime::createFunctionFromHostFunction(facebook::jsi::PropNameID const&, unsigned int, std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>)::HostFunctionMetadata::call(OpaqueJSContext const*, OpaqueJSValue*, OpaqueJSValue*, unsigned long, OpaqueJSValue const* const*, OpaqueJSValue const**)
JSC::JSCallbackObject<JSC::JSNonFinalObject>::call(JSC::JSGlobalObject*, JSC::CallFrame*)
JSC::LLInt::setUpCall(JSC::CallFrame*, JSC::CodeSpecializationKind, JSC::JSValue, JSC::LLIntCallLinkInfo*)
llint_entry
vmEntryToJavaScript
JSC::Interpreter::executeCall(JSC::JSGlobalObject*, JSC::JSObject*, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSC::profiledCall(JSC::JSGlobalObject*, JSC::ProfilingReason, JSC::JSValue, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSObjectCallAsFunction
facebook::jsc::JSCRuntime::call(facebook::jsi::Function const&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)
facebook::jsi::Function::callWithThis(facebook::jsi::Runtime&, facebook::jsi::Object const&, facebook::jsi::Value const*, unsigned long) const
reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)
decltype(std::__1::forward<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&>(fp)(std::__1::forward<facebook::jsi::Runtime&>(fp0), std::__1::forward<facebook::jsi::Value const&>(fp0), std::__1::forward<facebook::jsi::Value const*>(fp0), std::__1::forward<unsigned long>(fp0))) std::__1::__invoke<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
facebook::jsi::Value std::__1::__invoke_void_return_wrapper<facebook::jsi::Value>::__call<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__alloc_func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2, std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2, std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__value_func<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&) const
std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const
facebook::jsc::JSCRuntime::createFunctionFromHostFunction(facebook::jsi::PropNameID const&, unsigned int, std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>)::HostFunctionMetadata::call(OpaqueJSContext const*, OpaqueJSValue*, OpaqueJSValue*, unsigned long, OpaqueJSValue const* const*, OpaqueJSValue const**)
JSC::JSCallbackObject<JSC::JSNonFinalObject>::call(JSC::JSGlobalObject*, JSC::CallFrame*)
JSC::LLInt::setUpCall(JSC::CallFrame*, JSC::CodeSpecializationKind, JSC::JSValue, JSC::LLIntCallLinkInfo*)
llint_entry
vmEntryToJavaScript
JSC::Interpreter::executeCall(JSC::JSGlobalObject*, JSC::JSObject*, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSC::profiledCall(JSC::JSGlobalObject*, JSC::ProfilingReason, JSC::JSValue, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSObjectCallAsFunction
facebook::jsc::JSCRuntime::call(facebook::jsi::Function const&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)
facebook::jsi::Function::callWithThis(facebook::jsi::Runtime&, facebook::jsi::Object const&, facebook::jsi::Value const*, unsigned long) const
reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)
decltype(std::__1::forward<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&>(fp)(std::__1::forward<facebook::jsi::Runtime&>(fp0), std::__1::forward<facebook::jsi::Value const&>(fp0), std::__1::forward<facebook::jsi::Value const*>(fp0), std::__1::forward<unsigned long>(fp0))) std::__1::__invoke<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
facebook::jsi::Value std::__1::__invoke_void_return_wrapper<facebook::jsi::Value>::__call<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__alloc_func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2, std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2, std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__value_func<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&) const
std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const
facebook::jsc::JSCRuntime::createFunctionFromHostFunction(facebook::jsi::PropNameID const&, unsigned int, std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>)::HostFunctionMetadata::call(OpaqueJSContext const*, OpaqueJSValue*, OpaqueJSValue*, unsigned long, OpaqueJSValue const* const*, OpaqueJSValue const**)
JSC::JSCallbackObject<JSC::JSNonFinalObject>::call(JSC::JSGlobalObject*, JSC::CallFrame*)
vmEntryToNative
JSC::Interpreter::executeCall(JSC::JSGlobalObject*, JSC::JSObject*, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSC::profiledCall(JSC::JSGlobalObject*, JSC::ProfilingReason, JSC::JSValue, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSObjectCallAsFunction
facebook::jsc::JSCRuntime::call(facebook::jsi::Function const&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)
facebook::jsi::Function::callWithThis(facebook::jsi::Runtime&, facebook::jsi::Object const&, facebook::jsi::Value const*, unsigned long) const
facebook::jsi::Function::callWithThis(facebook::jsi::Runtime&, facebook::jsi::Object const&, std::initializer_list<facebook::jsi::Value>) const
facebook::jsi::Value facebook::jsi::Function::callWithThis<facebook::jsi::Value&>(facebook::jsi::Runtime&, facebook::jsi::Object const&, facebook::jsi::Value&) const
reanimated::EventHandler::process(facebook::jsi::Runtime&, facebook::jsi::Value&)
reanimated::EventHandlerRegistry::processEvent(facebook::jsi::Runtime&, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)
reanimated::NativeReanimatedModule::onEvent(std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)
invocation function for block in reanimated::createReanimatedModule(std::__1::shared_ptr<facebook::react::CallInvoker>)
__33-[REANodesManager dispatchEvent:]_block_invoke
RCTExecuteOnMainQueue
-[REANodesManager dispatchEvent:]
-[REAModule eventDispatcherWillDispatchEvent:]
-[REAEventDispatcher sendEvent:]
-[RNGestureHandlerManager sendStateChangeEvent:]
-[RNGestureHandler sendEventsInState:forViewWithTag:withExtraData:]
-[RNGestureHandler handleGesture:]
-[UIGestureRecognizerTarget _sendActionWithGestureRecognizer:]
_UIGestureRecognizerSendTargetActions
_UIGestureRecognizerSendActions
-[UIGestureRecognizer _updateGestureForActiveEvents]
_UIGestureEnvironmentUpdate
-[UIGestureEnvironment _updateForEvent:window:]
-[UIWindow sendEvent:]
-[UIApplication sendEvent:]
__processEventQueue
__eventFetcherSourceCallback
__CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__
__CFRunLoopDoSource0
__CFRunLoopDoSources0
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start
0x0

Thank you in advance! :)

[Question]: error while patching an example project

When I ran yarn in example path, I got below error

**ERROR** Failed to apply patch for package react-native-reanimated at path
  
    node_modules/react-native-reanimated

  This error was caused because react-native-reanimated has changed since you
  made the patch file for it. This introduced conflicts with your patch,
  just like a merge conflict in Git when separate incompatible changes are
  made to the same piece of code.

  Maybe this means your patch file is no longer necessary, in which case
  hooray! Just delete it!

  Otherwise, you need to generate a new patch file.

  To generate a new one, just repeat the steps you made to generate the first
  one.

  i.e. manually make the appropriate file changes, then run 

    patch-package react-native-reanimated

  Info:
    Patch file: patches/react-native-reanimated+2.0.0-alpha.6.patch
    Patch was made for version: 2.0.0-alpha.6
    Installed version: 2.0.1

Is this patch is needed in the example project ?

Cannot make it work in a fresh project (RN 0.62.2): Object.values requires that input parameter not be null or undefined

First of all thank you very much for this library you are creating. It looks really amazing and I think there is nothing better out there.

I got a problem when trying to make it work though and I am not sure if is because I am not using react-native: 0.63.x or I am doing something wrong.

The error I get is: Object.values requires that input parameter not be null or undefined.

image

Here is a repo: https://github.com/ferrannp/reanimated-gallery-example. It is a fresh app with react-native init using react-native: 0.62.x. The app code is a copy-paste of your example: https://github.com/ferrannp/reanimated-gallery-example/blob/master/App.js

Buttons not working inside renderPage component.

Really cool component, thanks for sharing.

I've run into a problem where onPress events aren't called when the button is rendered inside the renderPage component in the StandaloneGallery. When I tap a button I can see the ripple effect on Android, but the event isn't fired, because of this I can't play videos or download and open files.

Is this the same problem you experienced here?

Swipe up to close

Hi @terrysahaidak ! Amazing library, really smooth-working!
I have a little question: do you think it would be possible to implement a feature like swiping up to close the gallery? Kind of like what you already have with the swipe down gesture. Or perhaps give me a few tips on how I can do it myself.
Thanks a lot in advance!
And thanks again for your great work 👍

Invariant Violation: No callback found with cbID 9083 and callID 4541 for module <unknown>. Args: '[1438]'

I am not able to run example
Commands that I have ran:

yarn install
cd Example
yarn install
npx pod-install

(Also I've tried to install modules with npm)

React-native info:

System:
    OS: macOS 11.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 34.80 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.3 - /usr/local/opt/node@14/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 6.14.13 - /usr/local/opt/node@14/bin/npm
    Watchman: 2021.08.30.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /Users/istelmakh/.rvm/gems/ruby-2.6.6/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 15.0, DriverKit 20.4, macOS 11.3, tvOS 15.0, watchOS 8.0
    Android SDK:
      API Levels: 23, 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3
      System Images: android-26 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7486908
    Xcode: 13.0/13A233 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: ^0.65.1 => 0.65.1
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Screenshot 2021-10-22 at 12 21 35

Pass id an index to renderImage callback

Hey there 👋

I wanted to propose the following:

const renderImage = useCallback(
  ({source: {uri}, id, index, ...rest}) => (
    <CacheImage
      {...rest}
      uri={uri}
      // This
      testID={`image-${index}`}
      // Or 
      testID={`image-${id}`}
    />
  ),
  [],
);

It would be useful if we can get item.id in the callback and also index in case we want to use index.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.