Showing preview only (327K chars total). Download the full file or copy to clipboard to get everything.
Repository: meliorence/react-native-snap-carousel
Branch: master
Commit: 9c39995f4813
Files: 79
Total size: 305.5 KB
Directory structure:
gitextract_ds1vvi6k/
├── .eslintrc
├── .gitignore
├── .npmignore
├── CHANGELOG.md
├── CONTRIBUTING.md
├── ISSUE_TEMPLATE.md
├── LICENSE
├── PULL_REQUEST_TEMPLATE.md
├── README.md
├── doc/
│ ├── CUSTOM_INTERPOLATIONS.md
│ ├── KNOWN_ISSUES.md
│ ├── PAGINATION.md
│ ├── PARALLAX_IMAGE.md
│ ├── PROPS_METHODS_AND_GETTERS.md
│ ├── TIPS_AND_TRICKS.md
│ └── VERSION_4.md
├── example/
│ ├── .buckconfig
│ ├── .flowconfig
│ ├── .gitattributes
│ ├── .gitignore
│ ├── .prettierrc.js
│ ├── .watchmanconfig
│ ├── __tests__/
│ │ └── index.js
│ ├── android/
│ │ ├── .project
│ │ ├── .settings/
│ │ │ └── org.eclipse.buildship.core.prefs
│ │ ├── app/
│ │ │ ├── _BUCK
│ │ │ ├── build.gradle
│ │ │ ├── build_defs.bzl
│ │ │ ├── debug.keystore
│ │ │ ├── proguard-rules.pro
│ │ │ └── src/
│ │ │ ├── debug/
│ │ │ │ └── AndroidManifest.xml
│ │ │ └── main/
│ │ │ ├── AndroidManifest.xml
│ │ │ ├── java/
│ │ │ │ └── com/
│ │ │ │ └── example/
│ │ │ │ ├── MainActivity.java
│ │ │ │ └── MainApplication.java
│ │ │ └── res/
│ │ │ └── values/
│ │ │ ├── strings.xml
│ │ │ └── styles.xml
│ │ ├── build.gradle
│ │ ├── gradle/
│ │ │ └── wrapper/
│ │ │ ├── gradle-wrapper.jar
│ │ │ └── gradle-wrapper.properties
│ │ ├── gradle.properties
│ │ ├── gradlew
│ │ ├── gradlew.bat
│ │ └── settings.gradle
│ ├── app.json
│ ├── babel.config.js
│ ├── index.js
│ ├── ios/
│ │ ├── Podfile
│ │ ├── example/
│ │ │ ├── AppDelegate.h
│ │ │ ├── AppDelegate.m
│ │ │ ├── Base.lproj/
│ │ │ │ └── LaunchScreen.xib
│ │ │ ├── Images.xcassets/
│ │ │ │ ├── AppIcon.appiconset/
│ │ │ │ │ └── Contents.json
│ │ │ │ └── Contents.json
│ │ │ ├── Info.plist
│ │ │ └── main.m
│ │ ├── example-tvOS/
│ │ │ └── Info.plist
│ │ ├── example-tvOSTests/
│ │ │ └── Info.plist
│ │ ├── example.xcodeproj/
│ │ │ ├── project.pbxproj
│ │ │ └── xcshareddata/
│ │ │ └── xcschemes/
│ │ │ ├── example-tvOS.xcscheme
│ │ │ └── example.xcscheme
│ │ ├── example.xcworkspace/
│ │ │ └── contents.xcworkspacedata
│ │ └── exampleTests/
│ │ ├── Info.plist
│ │ └── exampleTests.m
│ ├── metro.config.js
│ ├── package.json
│ └── src/
│ ├── components/
│ │ └── SliderEntry.js
│ ├── index.js
│ ├── static/
│ │ └── entries.js
│ ├── styles/
│ │ ├── SliderEntry.style.js
│ │ └── index.style.js
│ └── utils/
│ └── animations.js
├── package.json
└── src/
├── carousel/
│ └── Carousel.js
├── index.js
├── pagination/
│ ├── Pagination.js
│ ├── Pagination.style.js
│ └── PaginationDot.js
├── parallaximage/
│ ├── ParallaxImage.js
│ └── ParallaxImage.style.js
└── utils/
└── animations.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintrc
================================================
{
"parser" : "babel-eslint",
"extends" : [
"standard",
"standard-react"
],
"plugins": [
"react"
],
"env" : {
"browser" : true,
"es6": true
},
"globals": {
"__DEV__": false
},
"parserOptions": {
"ecmaVersion": 6,
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"generator-star-spacing": 0,
"indent": [2, 4, { "ignoredNodes": ["JSXAttribute", "JSXSpreadAttribute"], "SwitchCase": 1 }],
"no-warning-comments": [1, {
"terms": ["todo", "fixme", "xxx"],
"location": "start"
}],
"operator-linebreak": [2, "after"],
"padded-blocks": 0,
"semi": [2, "always"],
"react/jsx-indent-props": [2, 2],
"react/jsx-boolean-value": [0, "never"],
"react/jsx-curly-spacing": [0, "never"],
"react/jsx-indent": [2, 4]
}
}
================================================
FILE: .gitignore
================================================
node_modules
#LOCK
package-lock.json
yarn.lock
================================================
FILE: .npmignore
================================================
/example
/node_modules
package-lock.json
yarn.lock
================================================
FILE: CHANGELOG.md
================================================
## v3.9.1
* Fix for `getNode()` deprecation warning with RN `0.62+` (thanks [@r0b0t3d](https://github.com/r0b0t3d))
## v3.9.0
* Fix for incorrect snapToItem (thanks [@Romick2005](https://github.com/Romick2005) & [@sergeyzhukov](https://github.com/sergeyzhukov))
* Fix issue with tappable pagination dots (thanks [@Creskendoll](https://github.com/Creskendoll))
* Clear all timeouts when stopping autoplay (thanks [@adrianocola](https://github.com/adrianocola))
* Add props `animatedDuration`, `animatedFriction`, `animatedTension` and `delayPressInDot` to the `Pagination` component (thanks [@muhlenbrock](https://github.com/muhlenbrock))
## v3.8.4
* Remove TypeScript definitions since they were causing issues (thanks [@radko93](https://github.com/radko93))
* If you're using Typescript you should install the type definitions this way: `npm install --save @types/react-native-snap-carousel`
## v3.8.3
* Seems like it's time to remove the `getItemLayout` & `initialScrollIndex` override to properly display the first item when its index is a huge number (thanks [@rontalx](https://github.com/rontalx))
* :warning: Make sure to read how these props work together ([link#1](https://facebook.github.io/react-native/docs/flatlist#getitemlayout) & [link #2](https://facebook.github.io/react-native/docs/flatlist#initialscrollindex)), and to understand [why they were disabled in the first place](https://github.com/facebook/react-native/issues/15734#issuecomment-330616697)!
* Fix `snapToItem` not working when `enableMomentum` is set to `true` on Android (thanks [@daaashleywch](https://github.com/daaashleywch))
* Add basic TypeScript support (thanks [@facuacostag](https://github.com/facuacostag))
* Stack layout's peaking items will remain opaque if `inactiveSlideOpacity` is set to `1`
## v3.8.2
* Fix autoplay stop after user interaction (thanks [@HelloCore](https://github.com/HelloCore))
* Allow using a custom animated image component with `ParallaxImage` (thanks [@DanielMarkiel](https://github.com/DanielMarkiel))
## v3.8.1
* Migrate from deprecated `componentWillReceiveProps` to `componentDidUpdate` (thanks [@kiarashws](https://github.com/kiarashws))
* Use `console.error` instead of `console.warn` for critical warnings (thanks [@bardiarastin](https://github.com/bardiarastin))
* Update parallax doc (thanks [@bardiarastin](https://github.com/bardiarastin))
## v3.8.0
* Set [`removeClippedSubviews`](https://facebook.github.io/react-native/docs/scrollview#removeclippedsubviews) to `false` by default for 'tinder' and 'stack' layouts, or when `useScrollView` is set to `true`. This aims at preventing a bunch of rendering issues.
* Make sure that autoplay is properly restarted after a `touchStart` event
* Allow serialized animated event as `onScroll`. See [#439](https://github.com/meliorence/react-native-snap-carousel/pull/439) for more info (thanks [@Jberivera](https://github.com/Jberivera))
* Allow using a custom scroll component. See [#498](https://github.com/meliorence/react-native-snap-carousel/pull/498) for more info (thanks [@martinezguillaume](https://github.com/martinezguillaume))
* Prevent loop animation from being played when reaching the end of the dataset. See [#443](https://github.com/meliorence/react-native-snap-carousel/pull/443) for more info (thanks [@suhanmoon](https://github.com/suhanmoon))
* Fire the `onTouchStart` prop. See [#464](https://github.com/meliorence/react-native-snap-carousel/pull/464) for more info (thanks [@sangle7](https://github.com/sangle7))
* Add accessibilityLabel to `Pagination`. See [#438](https://github.com/meliorence/react-native-snap-carousel/pull/438) for more info (thanks [@thymikee](https://github.com/thymikee))
* Allow `contentContainerCustomStyle` to override default paddings. See [#482](https://github.com/meliorence/react-native-snap-carousel/pull/482) for more info (thanks [@yamov](https://github.com/yamov))
## v3.7.5
* Fix issue with `scrollEnabled` introduced in version `3.7.3`... again! (thanks [@ifsnow](https://github.com/ifsnow))
## v3.7.4
* Fix issue with `scrollEnabled` introduced in version `3.7.3` (thanks [@JakeRawr](https://github.com/JakeRawr))
## v3.7.3
* Fix faulty animated value and make sure to always check for `data` before checking for `data.length`
* Fix `scrollEnabled` override when it was initially set to `false` (thanks [@JakeRawr](https://github.com/JakeRawr))
## v3.7.2
* Fix `ParallaxImage` not being rendered (thanks [@louiszawadzki](https://github.com/louiszawadzki))
## v3.7.1
* Fix a potential crash in release mode (thanks [@hanpanpan200](https://github.com/hanpanpan200))
* Do not round scroll offset's number in order to prevent potential issues with scroll repositioning
## v3.7.0
### New features and enhancements
* Add a new callback method: [`onBeforeSnapToItem()`](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#methods)
* Add prop `lockScrollTimeoutDuration`
* Add the ability to enable/disable callback's execution when snaping programmatically
* Add the ability to change `scrollEnabled` to `true` from initially `false` (thanks [@tomauty](https://github.com/tomauty))
### Bugfixes
* Fix random errors when accessing wrapped component's reference
* Fix errors triggered when calling `setState()` while the component has already been unmounted
### Other
* Support `keyExtractor` on `ScrollView` (thanks [@hadimhd](https://github.com/hadimhd))
## v3.6.0
* Add a `layout` prop to let users choose between 3 different carousel layouts (see [the documentation](https://github.com/meliorence/react-native-snap-carousel#layouts-and-custom-interpolations))
* Add the ability to define dynamic styles based on scroll position with props `scrollInterpolator` and `slideInterpolatedStyle`. This allows implementing custom animations and layouts (see [the dedicated documentation](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/CUSTOM_INTERPOLATIONS.md)).
* Rename props `customAnimationType` and `customAnimationOptions` to `activeAnimationType` and `activeAnimationOptions`
## v3.5.0
* Add the ability to render either a `ScrollView` component or a `FlatList` one (default) ([see prop `useScrollView`](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#behavior))
* Add support for versions of React Native < `0.43` (see [this note](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/KNOWN_ISSUES.md#react-native-version))
* Add support for custom animations ([see props `customAnimationType` and `customAnimationOptions`](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#style-and-animation))
* Add method [`triggerRenderingHack()`](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#available-methods) to work around [a random `FlatList` bug](https://github.com/facebook/react-native/issues/1831) that keeps content hidden until the carousel is scrolled
* Hack around `ScrollView`/`FlatList` image rendering issues on Android
* Fix issue with tappable dots when loop is enabled
## v3.4.0
* Fix `snapToItem` call that results in snapping to the wrong item when `loop` is enabled
* Fix issue that, in some use cases, prevents every items but the initial ones to be rendered
* On Android, prevent loop and callback issues because scroll offset's value doesn't return an integer
* Add prop `inactiveSlideShift` (see #204)
* Expose `FlatList`'s prop `inverted` (**use at your own risk since it will mess with the current handling of RTL layouts**)
* Set `removeClippedSubviews` to `true` by default
## v3.3.4
* Fix issue with possible faulty index when `loopClonesPerSide` is greater than data length
* Guard against `setNativeProps()` being `undefined`
* On Android, make sure that the first item has the proper active style after init
* On iOS, remove the feature "snap as soon as the previous/next item becomes active when `lockScrollWhileSnapping` is enabled" since it messes with direct calls to `snapToItem()`
## v3.3.3
* Prevent issue on iOS when `enableSnap` is set to `false` while `lockScrollWhileSnapping` is set to `true`
## v3.3.2
* Fix issue with `lockScrollWhileSnapping` when no callback was provided
* `Pagination` component: add props `activeOpacity` and `dotContainerStyle`
## v3.3.1
* Fix issue when initializing the carousel with empty data
* Make tappable `PaginationDot` snaps to the right item when loop is enabled
## v3.3.0
* Bring in the most wanted 'infinite loop' feature :tada: (see [the 'Loop' section](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#loop) for more info about the new props `loop` and `loopClonesPerSide`)
* Improve Android behavior when momentum is disabled
* Guard against potential errors when component is unmounted
* Add prop `lockScrollWhileSnapping` to improve behavior when momentum is disabled
## v3.2.3
* Fix issue with callback not fired when doing a long swipe
## v3.2.2
* Fix RTL issues
* Fix issue with active item when `enableMomentum` was set to `true`
* Fix issue with overlapping items (thanks [@henninghall](https://github.com/henninghall))
* `ParallaxImage` component: allow overriding default styles
* `Pagination` component: adapt to RTL layouts
## v3.2.1
* Fix issue with active item when no callback has been specified (introduced in version `3.2.0`)
## v3.2.0
* Refactor callback handling. **Make sure to use the new prop `callbackOffsetMargin` if you experience missed callbacks.**
* Make item's scale and opacity animations follow scroll value (thanks [@hammadj](https://github.com/hammadj))
* `Pagination` component: make dots tappable with new props `tappableDots` and `carouselRef` (see the [example](https://github.com/meliorence/react-native-snap-carousel/blob/master/example/src/index.js))
* Fix issue when carousel has been unmounted but parent container requires to re-render
* Fix state and scroll issues when the currently active item is being dynamically removed
* Improve snap feeling when momentum is disabled (default)
* Add prop `callbackOffsetMargin`
* Remove props `animationFunc`, `animationOptions`, `scrollEndDragDebounceValue`, `snapOnAndroid`, and `useNativeOnScroll`
## v3.1.0
* `Pagination` component: add new props for advanced customization
## v3.0.0
### WARNING
* **Do not use this version as some temporary code was pushed to `npm` by mistake. Make sure to use version `3.1.0` instead.**
### Breaking changes
* Plugin is now built on top of `FlatList`, which allows for huge performance optimizations. From now on, items must be rendered using props `data` and `renderItem`.
### General
* Add `ParallaxImage` component (see the specific documentation [here](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PARALLAX_IMAGE.md))
* Add prop `activeSlideAlignment`
* Fix issue with autoplay when setting `scrollEnabled` to `false`
* Prevent going back to the first item when overscrolling the last one
* Prevent callback from being called at the wrong time in some specific scenarios
## v2.4.0
* Add `Pagination` component (see the specific documentation [here](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PAGINATION.md))
* Allow `firstItem` to be changed dynamically
* Allow `0` value for `carouselHorizontalPadding` and `carouselVerticalPadding` (thanks [@bonbonez](https://github.com/bonbonez))
* Keep the easing of slide's opacity animation linear
* Use native driver for slide's animation (can be overridden via `animationOptions`)
## v2.3.1
* Fix issue when snap is disabled
## v2.3.0
* Refactor callback handling to provide a more reliable solution when momentum is disabled
* Fix issue with parallel animations (thanks [@jnbt](https://github.com/jnbt))
* Prevent calls to `undefined` interpolators when working with dynamic slides (thanks [@cskaynar](https://github.com/cskaynar))
* Improve vertical mode
* Add prop `scrollEndDragDebounceValue`
* Expose current scroll position with `this.currentScrollPosition`
* Remove props `scrollEndDragThrottleValue` and `snapCallbackDebounceValue` (use `scrollEndDragDebounceValue` instead)
## v2.2.2
* Fix issue that prevented inactive styles of first and last items to be applied when using `snapToPrev` and `snapToNext` methods
## v2.2.1
* Do not mark `sliderWidth` and `sliderHeight` as required
* Add warnings when properties specific to carousel's orientation haven't been set
## v2.2.0
* Implement vertical mode (prop `vertical`)
* Make sure that current active item is properly updated when snapping
* Prevent issues when 'sliderWidth' is smaller than viewport's width
* Recalculate card positions on layout to handle rotation (thanks [@andrewpope](https://github.com/andrewpope)); make sure to read [this note](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md#handling-device-rotation)
* Refresh card positions if slider and/or item's dimensions are updated (thanks [@hoangnm](https://github.com/hoangnm))
* Add props `scrollEndDragThrottleValue` and `snapCallbackDebounceValue`
* Expose `View`'s `onLayout` prop
* Deprecate prop `onScrollViewScroll`
## v2.1.4
* Add prop `onScrollViewScroll`
## v2.1.3
* Default value for `showsHorizontalScrollIndicator` is now `false`
* Expose `ScrollView`'s `onSscroll` prop (thanks [@radko93](https://github.com/radko93))
## v2.1.2
* Do not trigger `onSnapToItem` when snapping back to the same slide (thanks [@rgabs](https://github.com/rgabs))
* Add prop `carouselHorizontalPadding` to override container's inner padding (thanks [@skeie](https://github.com/skeie))
## v2.1.1
* Ensure compatibility with RN 0.43 (previous version of plugin's dependency `react-addons-shallow-compare` was breaking with React 16)
* Fix issue with padding on iOS that could cause the carousel to snap back when its last item was clicked
## v2.1.0
* Add RTL support
* Keep current active item when adding slides dynamically
* Prevent invalid `firstItem` number
* Add prop `activeSlideOffset`
## v2.0.3
* Prevent error when carousel has only one child (thanks [@kevinvandijk](https://github.com/kevinvandijk))
* Fix issue when appending dynamic slides (the first one was ignored)
* Fix edge case that prevented the first slide from being focused when swiping back with momentum enabled
* Bump example's RN version to 0.42.3
## v2.0.2
* Make sure that scroll indicator is hidden by default
## v2.0.1
* Fix un-handled exception with interpolators (thanks [@chitezh](https://github.com/chitezh))
## v2.0.0
* Items are now direct children of the `<Carousel />` component, which makes it easier to use (thanks [@Jonarod](https://github.com/Jonarod))
* Props `items` and `renderItem` have been removed
## v1.6.1
* Due to some touch events being buggy, rework methods so the children will receive touch events on Android
## v1.6.0
* Add prop `enableMomentum`
* Fix an infinite-loop on iOS with momentum enabled
* Fix the snapping effect when releasing touch without interia on iOS with momentum enabled
* Fix autoplay on Android, it should start and stop properly and stop being triggered while swiping
* Use `View.propTypes.style` instead of `PropTypes.number` in styles validation (thanks [@pesakitan22](https://github.com/pesakitan22))
## v1.5.0
* Items length can now be changed on-the-fly (thanks [@superical](https://github.com/superical))
* Now handling momentum (thanks [@FakeYou](https://github.com/FakeYou))
## v1.4.0
* Better update strategy with shallowCompare
* Add `snapToNext()`, `snapToPrev()`, `currentIndex` methods and properties
## v1.3.1
* Properly center on first item when mounting component on Android (potentially iOS too)
## v1.3.0
* Pass the item data as the 2nd param of `onSnapToItem` callback
## v1.2.1
* Fix reference call when the component has been unmounted
## v1.2.0
* Add prop `onSnapToItem`
## v1.1.0
* Center slides properly
* Handle one slide only
* Add props `inactiveSlideScale`, `inactiveSlideOpacity`, `containerCustomStyle` and `contentContainerCustomStyle`
================================================
FILE: CONTRIBUTING.md
================================================
:warning: **From now on, users that don't adhere to the following guidelines when submitting an issue will see it closed without warning.**
> This project is the result of countless hours of work and is maintained for free on our spare time. Show some love and respect by making it easier for us to help you!
If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you are certain this is a new, unreported bug, you can submit a bug report by [opening a new issue](https://github.com/meliorence/react-native-snap-carousel/issues/new).
:warning: When doing so, you need to fill out [the issue template](https://raw.githubusercontent.com/meliorence/react-native-snap-carousel/master/ISSUE_TEMPLATE.md) completely. **This step is mandatory!** Not doing so will result in your issue getting closed. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template.
* **One issue, one bug:** Please report a single bug per issue.
* **Provide a [Snack example]((https://snack.expo.io/)):** To demonstrate the issue, you need to provide a reduced test case using [Snack](https://snack.expo.io/) and follow [the guidelines for providing a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). More often than not, providing a screencast will also be of tremendous help to understand the matter at stake (a screenshot might sometimes be enough).
* **Provide reproduction steps:** List all the steps necessary to reproduce the issue. Provide a Snack, share the relevant source code or upload a sample project to GitHub. We should be able to follow these steps to reproduce your issue with minimal effort.
* **Try out the latest version:** Verify that the issue can be reproduced locally by updating your project to use [the latest commit from `master`](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md#using-a-specific-commit). The bug may have already been fixed! Also make sure to test the latest stable release of React Native as your issue could be linked to RN's core.
================================================
FILE: ISSUE_TEMPLATE.md
================================================
<!--
MAKE SURE TO READ AND FOLLOW THIS TEMPLATE CLOSELY OR YOUR ISSUE WILL BE CLOSED WITHOUT NOTICE
-->
### Is this a bug report, a feature request, or a question?
(Write your answer here.)
<!--
If you answered "Bug report":
We expect you to produce a high-quality bug report since putting care into your report helps us fix the issue faster.
For bug reports, it is REQUIRED to fill the rest of this template, or the issue will be closed.
If you answered "Feature request" or "Question":
Make sure to describe as precisely as possible the feature you'd like to see implemented or the question you'd like to see answered.
When relevant, provide visual examples (screenshots, screencasts, diagrams...).
You can ignore the next steps as long as you've made sure that your description is as clear, thorough and illustrated as possible.
-->
### Have you followed the required steps before opening a bug report?
(Check the step you've followed - put an `x` character between the square brackets (`[]`).)
- [] I have read [the guidelines regarding bug report](https://github.com/meliorence/react-native-snap-carousel/blob/master/CONTRIBUTING.md).
- [] I have reviewed [the documentation](https://github.com/meliorence/react-native-snap-carousel/blob/master/README.md) in its entirety, including the dedicated documentations :books:.
- [] I have searched for [existing issues](https://github.com/meliorence/react-native-snap-carousel/issues) and made sure that the problem hasn't already been reported.
- [] I am using [the latest plugin version](https://github.com/meliorence/react-native-snap-carousel/releases).
- [] I am following [the issue template](https://raw.githubusercontent.com/meliorence/react-native-snap-carousel/master/ISSUE_TEMPLATE.md) closely in order to produce a useful bug report.
<!--
Please DO NOT go futher if you've not followed ALL of the above steps.
Failing to do so will result in your issue getting closed without warning.
-->
### Have you made sure that it wasn't a [React Native bug](https://github.com/meliorence/react-native-snap-carousel/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3A%22react-native+bug%22+)?
(Write your answer here.)
<!--
Steps you should take:
1. Take a look at plugin's issues that are [labelled `react-native bug`](https://github.com/meliorence/react-native-snap-carousel/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3A%22react-native+bug%22+)
2. Search [React Native issues](https://github.com/facebook/react-native/issues)
3. Read the following sections of the doc again: ["Known issues"](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/KNOWN_ISSUES.md), ["Important note regarding Android"](https://github.com/meliorence/react-native-snap-carousel#important-note-regarding-android), and ["Custom interpolations caveats"](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/CUSTOM_INTERPOLATIONS.md#caveats).
-->
### Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?
(Write your answer here and specify the iOS/Android versions on which you've been able to reproduce the issue.)
### Is the bug reproductible in a production environment (not a debug one)?
(Write your answer here.)
<!--
If you haven't been able to reproduce the bug in production mode, it probably has to do with React Native's limitations (see ["Known issues"](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/KNOWN_ISSUES.md)). Chances are we won't be able to do anything about it.
-->
### Environment
<!--
Provide information about your current environment. At the very least, it should include the following:
Environment:
React: 16.0.0-beta.5
React native: 0.49.2
react-native-snap-carousel: 3.3.4
Target Platform:
Android (6.0)
iOS (10.3)
-->
(Write your answer here.)
### Expected Behavior
<!--
How did you expect your project to behave?
It’s fine if you’re not sure your understanding is correct.
Just write down what you thought would happen.
-->
(Write what you thought would happen.)
### Actual Behavior
<!--
Did something go wrong?
Is something broken, or not behaving as you expected?
Describe this section in detail, and attach screencasts (or screenshots) if possible.
Don't just say "it doesn't work"!
-->
(Write what happened. Add screencasts/screenshots!)
### Reproducible Demo
(Paste the link to a [Snack example](https://snack.expo.io/) in which the issue can be reproduced. Please follow [the guidelines](https://stackoverflow.com/help/mcve) for providing a Minimal, Complete, and Verifiable example.)
<!--
This step is MANDATORY:
* It shows that you value and respect the time of the people that are willing to help you; no one wishes to waste his spare time trying to recreate someone else's problem.
* Issues without reproducible demos have an extremely low priority and will probably be closed without notice.
* You might figure out the issues yourself as you work on extracting it.
-->
### Steps to Reproduce
<!--
How would you describe your issue to someone who doesn’t know you or your project?
Write a sequence of steps that anybody can repeat to see the issue.
Be specific! If the bug cannot be reproduced, your issue will be closed.
-->
(Write your steps so that anyone can reproduce the issue in the Snack demo you provided.)
1.
2.
3.
<!--
Thanks for helping us help you!
-->
================================================
FILE: LICENSE
================================================
BSD 3-Clause License
Copyright (c) 2021, Meliorence
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this
list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice,
this list of conditions and the following disclaimer in the documentation
and/or other materials provided with the distribution.
* Neither the name of the copyright holder nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
================================================
FILE: PULL_REQUEST_TEMPLATE.md
================================================
### Platforms affected
### What does this PR do?
### What testing has been done on this change?
### Tested features checklist
<!--
IMPORTANT: Please make sure that none of these features have been broken by your changes.
It's easy to overlook something you didn't use yet.
-->
- [ ] Default setup ([example](https://github.com/meliorence/react-native-snap-carousel/blob/master/example/src/index.js#L46-L87))
- [ ] Carousels with and without momentum enabled ([prop `enableMomentum`](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#behavior))
- [ ] Vertical carousels ([prop `vertical`](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#behavior))
- [ ] Slide alignment ([prop `activeSlideAlignment`](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#style-and-animation))
- [ ] Autoplay ([prop `autoplay`](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#autoplay))
- [ ] Loop mode ([prop `loop`](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#loop))
- [ ] `ScrollView`/`FlatList` carousels ([prop `useScrollView`](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#behavior))
- [ ] [Callback methods](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#callbacks)
- [ ] [`ParallaxImage` component](https://github.com/meliorence/react-native-snap-carousel#parallaximage-component)
- [ ] [`Pagination` component](https://github.com/meliorence/react-native-snap-carousel#pagination-component)
- [ ] [Layouts and custom interpolations](https://github.com/meliorence/react-native-snap-carousel#layouts-and-custom-interpolations)
================================================
FILE: README.md
================================================
# react-native-snap-carousel
[](https://www.npmjs.com/package/react-native-snap-carousel)
[](https://www.npmjs.com/package/react-native-snap-carousel)
<!-- [](https://github.com/meliorence/react-native-snap-carousel/releases) -->
[](https://github.com/meliorence/react-native-snap-carousel/issues)
[](https://github.com/meliorence/react-native-snap-carousel/issues?q=is%3Aissue+is%3Aclosed)
[](http://github.com/meliorence/react-native-snap-carousel/issues)
-----
-----
## ✨ Some great news for you, fellow plugin user!
### 💡 **[Head over there now](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/VERSION_4.md)** to learn more about all the goodness that's coming your way.
-----
-----
## Table of contents
1. [Showcase](#showcase)
1. [Usage](#usage)
1. [Example](#example)
1. [Props, methods and getters](#props-methods-and-getters)
1. [Layouts and custom interpolations](#layouts-and-custom-interpolations)
1. [`ParallaxImage` component](#parallaximage-component)
1. [`Pagination` component](#pagination-component)
1. [Tips and tricks](#tips-and-tricks)
1. [Known issues](#known-issues)
1. [Important note regarding Android](#important-note-regarding-android)
1. [Important note regarding iOS](#important-note-regarding-ios)
1. [Roadmap](#roadmap)
1. [Credits](#credits)
## Showcase
### :raised_hands: New feature: layouts
[Do you want to find out more?](#layouts-and-custom-interpolations)
### Real-world examples
These are live apps we've created that make heavy use of the plugin. Don't be shy, share yours if you've done something awesome with it!
---
## :handshake: Maintainers wanted
Hey there,
Creating and maintaining this plugin has been a fun ride that started in 2016. We thank you all for your appreciation and for making the most out of it! You've motivated us to spend countless hours improving the plugin, and made us happy to give back to the Open Source community.
Put simply, we love this project. However we currently aren't able to give it the love it deserves and the care it requires. **If you have enough time and knowledge, and want to become a maintainer, please let us know**.
### 💡 **[Just head there if you're interested](https://github.com/meliorence/react-native-snap-carousel/issues/632).**
We're not abandoning the ship, but we need more people to help us keep it alive and well!
---
## Usage
```bash
$ npm install --save react-native-snap-carousel
```
If you're using Typescript you should also install type definitions:
```bash
$ npm install --save @types/react-native-snap-carousel
```
```javascript
import Carousel from 'react-native-snap-carousel';
export class MyCarousel extends Component {
_renderItem = ({item, index}) => {
return (
<View style={styles.slide}>
<Text style={styles.title}>{ item.title }</Text>
</View>
);
}
render () {
return (
<Carousel
ref={(c) => { this._carousel = c; }}
data={this.state.entries}
renderItem={this._renderItem}
sliderWidth={sliderWidth}
itemWidth={itemWidth}
/>
);
}
}
```
## Example
Here are simple examples that can be edited in real time in your browser:
- https://snack.expo.io/@vitkor/carousel-simple-example
- https://snack.expo.io/@bd-arc/react-native-snap-carousel-%7C-example-with-custom-interpolations
You can also find a more in-depth (read "complex") one in the [`/example` folder](https://github.com/meliorence/react-native-snap-carousel/tree/master/example).
## Props, methods and getters
In order to let you to create mighty carousels and to keep up with your requests, we add new features on a regular basis. Consequently, the list of available props has become really huge and deserves a documentation of its own.
### :books: [Documentation for "Props, methods and getters"](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md)
## Layouts and custom interpolations
### Built-in layouts
In version `3.6.0`, we've added two new layouts on top of the original one: the first one is called 'stack' since it mimics a stack of cards, and the other one is called 'tinder' since it provides a Tinder-like animation.
You can choose between the three of them using [the new prop `layout`](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#style-and-animation) and you can modify the default card offset in the 'stack' and 'tinder' layouts with [prop `layoutCardOffset`](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#style-and-animation).
```javascript
<Carousel layout={'default'} />
```
```javascript
<Carousel layout={'stack'} layoutCardOffset={`18`} />
```
```javascript
<Carousel layout={'tinder'} layoutCardOffset={`9`} />
```
A few things worth noting:
* As you can see, the effect had to be inverted on Android. This has to do with [a really annoying Android-specific bug](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/CUSTOM_INTERPOLATIONS.md#android).
* Even though the new layouts have been created with horizontal carousels in mind, they will also work with vertical ones \o/
* :warning: **You should NOT use `stack` or `tinder` layouts if you have a large data set to display.** In order to avoid rendering issues, the carousel will use a `ScrollView` component rather than a `FlatList` one for those layouts (see [prop `useScrollView`](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#behavior)). The tradeof is that you won't benefit from any of `FlatList`'s advanced optimizations. See [this issue](https://github.com/meliorence/react-native-snap-carousel/issues/262) for workarounds; or you may want to implement your own [custom interpolation](#custom-interpolations).
### Custom interpolations
On top of the new layouts, we've exposed the logic we used so that users can create their own awesome layouts! If you're interested, take a deep breath and dive into the dedicated documentation.
### :books: [Documentation for "Custom interpolations"](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/CUSTOM_INTERPOLATIONS.md)
Here are a few examples of what can easily be achieved (you can explore [the source code](https://github.com/meliorence/react-native-snap-carousel/blob/master/example/src/utils/animations.js) and try it live in [the provided example](https://github.com/meliorence/react-native-snap-carousel/tree/master/example)):
## `ParallaxImage` component
Version `3.0.0` introduced a `<ParallaxImage />` component, an image component aware of carousel's current scroll position and therefore able to display a nice parallax effect (powered by the native driver to ensure top-notch performance).
### :books: [Documentation for "`ParallaxImage` component"](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PARALLAX_IMAGE.md)
## `Pagination` component
Starting with version `2.4.0`, a customizable `<Pagination />` component has been added. You can see below how it looks like with its default configuration.
### :books: [Documentation for "`Pagination` component"](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PAGINATION.md)
## Tips and tricks
We've gathered together all the useful tips and tricks. There is a bunch of them, which makes **this section a must-read!**
### :books: [Documentation for "Tips and tricks"](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md)
## Known issues
**Make sure to read about the known issues before opening a new one**; you may find something useful.
### :books: [Documentation for "Known issues"](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/KNOWN_ISSUES.md)
## Important note regarding Android
Android's debug mode is a mess: timeouts regularly desynchronize and scroll events are fired with some lag, which completely alters the inner logic of the carousel. **On Android, you *will* experience issues with carousel's behavior when JS Dev Mode is enabled, and you *might* have trouble with unreliable callbacks and loop mode when it isn't**. This is unfortunate, but it's rooted in various flaws of `ScrollView`/`FlatList`'s implementation and the miscellaneous workarounds we had to implement to compensate for it.
:warning: **Therefore you should always check if the issue you experience also happens in a production environment. This is, sadly, the only way to test the real performance and behavior of the carousel.**
> For more information, you can read the following notes: ["Android performance"](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/KNOWN_ISSUES.md#android-performance) and ["Unreliable callbacks"](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/KNOWN_ISSUES.md#unreliable-callbacks).
## Important note regarding iOS
:warning: When debugging with the iOS simulator, **you're only one "Cmd + T" away from toggling "Slow Animations"**. If carousel's animations seem painfully slow, make sure that you haven't enabled this setting by mistake.
## Roadmap
- [ ] Add [more examples](https://github.com/meliorence/react-native-snap-carousel/issues/257)
- [ ] Base the plugin on a component less buggy than `FlatList`
- [X] Implement different layouts and allow using custom interpolations
- [X] Implement both `FlatList` and `ScrollView` handling
- [X] Add the ability to provide custom items animation
- [X] Implement 'loop' mode
- [X] Improve Android's behavior
- [x] Add parallax image component
- [x] Base the plugin on `FlatList` instead of `ScrollView`
- [x] Add alignment option
- [x] Add pagination component
- [x] Add vertical implementation
- [x] Handle device orientation event (see [this note](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md#handling-device-rotation))
- [x] Add RTL support
- [x] Improve momemtum handling
- [x] Improve snap on Android
- [x] Handle passing 1 item only
- [x] Fix centering
## Credits
Written by [Benoît Delmaire](https://fr.linkedin.com/in/benoitdelmaire) ([bd-arc](https://github.com/bd-arc)) and [Maxime Bertonnier](https://fr.linkedin.com/in/maxime-bertonnier-744351aa) ([Exilz](https://github.com/Exilz)) at
[Meliorence](https://www.meliorence.com/).
================================================
FILE: doc/CUSTOM_INTERPOLATIONS.md
================================================
# Implementing custom interpolations
> :warning: **This guide describes an advanced feature that is not intended for the faint-hearted**. Your sanity will be seriously challenged by the two most-feared enemies of this plugin: Android and React Native's `FlatList`. You **will** discover bugs that will drive you mad and, as a result, your aging process will accelerate drastically. Consider yourself warned and make sure to read [the caveats](#caveats) first and foremost!
## Table of contents
1. [Preview](#preview)
1. [Usage](#usage)
1. [Step-by-step example](#step-by-step-example)
1. [Caveats](#caveats)
## Preview
Version `3.6.0` introduced a new cool feature: layouts. On top of the default one, we've implemented two other ways of stacking and animating items in the carousel. You can choose between these with [prop `layout`](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#style-and-animation). Here how each one looks like (the reason why iOS and Android are differents [will be explained later](#caveats)):
```javascript
<Carousel layout={'default'} />
```
```javascript
<Carousel layout={'stack'} />
```
```javascript
<Carousel layout={'tinder'} />
```
We are able to do all this thanks to React Native's great [Animated API](https://facebook.github.io/react-native/docs/animations.html). Basically, we interpolate the current scroll position and provide to each item a set of animations based on this value. But those new layouts are just the tip of the iceberg. You can easily create others like these ones:
We've decided to expose a way for users to provide their own interpolators, customize their carousels and create awesome animations! Note that you can find the source code of the built-in layouts [here](https://github.com/meliorence/react-native-snap-carousel/blob/master/src/utils/animations.js) and the source code of the custom examples [here](https://github.com/meliorence/react-native-snap-carousel/blob/master/example/src/utils/animations.js). Taking a look at these is a very good way to understand how it works.
## Usage
### Prerequisites
- You have some experience with React Native's [Animated API](https://facebook.github.io/react-native/docs/animations.html).
- You have a good understanding of [Animated's interpolations](https://github.com/browniefed/react-native-animation-book/blob/master/INTERPOLATION.md).
- You've read and understood [the caveats](#caveats).
- You are known for both your mental toughness and the peace of your mind.
### Summary
Adding a custom interpolation is done by providing either one of these props (but most likely both): `scrollInterpolator` and `slideInterpolatedStyle`.
:bulb: You cannot use prop `activeAnimationOptions` in conjunction with custom interpolations. Make sure it isn't set since the scroll position will simply not be interpolated otherwise.
### Prop `scrollInterpolator`
This prop will be used to interpolate the scroll position. Particularly, this means associating a specific scroll position to a specific value that is going to be used in `slideInterpolatedStyle` in order to animate styles.
`scrollInterpolator` **has to be a function**. It will be called for every item in the data set on carousel's initialization and **it will receive two arguments: `index` and `carouselProps`**. The first one is the item index and the second one contains every carousel props since you might need them to define your interpolation. **The function must return an object of the following shape:**
```javascript
{
inputRange: [scroll value 1, scroll value 2, ...],
outputRange: [value associated with 1, value associated with 2, ...],
}
```
> :warning: **Both arrays must have the same length**, otherwise you'll get an error.
Since it can be pretty difficult to determine the adequate `inputRange` we've created a helper for you: [`getInputRangeFromIndexes(range, index, carouselProps)`](https://github.com/meliorence/react-native-snap-carousel/blob/master/src/utils/animations.js#L5:L24). You only need to determine the range of items **relative to the active one** you'd like to animate at the same time. The current item will be zero-indexed in this function. For example, using a range of `[1, 0, -1]` means that you will be able to animate the current active item (`0`), the previous one (`-1)` and the next one (`1`).
> :warning: As you might have noticed, **when using `getInputRangeFromIndexes()` you need to declare your range in a reverse order**. While this is pretty counter-intuitive, you'll otherwise get an error because `"inputRange must be monotonically increasing"`.
### Prop `slideInterpolatedStyle`
This prop is where the magic happens and where you're finally able to bend item's animation to your will. **`slideInterpolatedStyle` must be a function that returns a style object. It will receive three arguments: `index`, `animatedValue` and `carouselProps`.** The first and the last one are the same as the ones passed in `scrollInterpolator`, while `animatedValue` correspond with the animated value of carousel's scroll position.
Based on the range you declared in `scrollInterpolator`, you can now interpolate values and do whatever you want.
> :bulb: Unlike what you need to do in `scrollInterpolator`, the `inputRange` you declare in `slideInterpolatedStyle` has to be in a regular order.
Consider the following:
```javascript
function animatedStyle = (index, animatedValue, carouselProps) => {
return {
opacity: animatedValue.interpolate({
inputRange: [-1, 0, 1],
outputRange: [0, 1, 0.5],
extrapolate: 'clamp'
})
}
}
```
It will translate into:
- item `-1` (the previous one) will have an opacity of `0`
- item `0` (the active one) will have an opacity of `1`
- item `1` (the next one) will have an opacity of `0.5`.
When you scroll, items' opacity will progressively animate from one value to the next, following the scroll position.
: bulb: Using `extrapolate: 'clamp'` will prevent your interpolation to exceed `outputRange`'s values, the "clamping" being desirable with most use cases. From [the RN doc](https://facebook.github.io/react-native/docs/animations.html#interpolation): *"By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value."*
## Step-by-step example
It is recommended to take a look at [the source code of the built-in layouts](https://github.com/meliorence/react-native-snap-carousel/blob/master/src/utils/animations.js) and at [the source code the custom examples](https://github.com/meliorence/react-native-snap-carousel/blob/master/example/src/utils/animations.js); you'll learn a lot!
For those who want to follow through a step-by-step tutorial, the following is for you.
### Defining the scroll interpolator
Let's say we want to create a photo album effect: when swiping, the active item will move away and the next ones will appear from underneath. Of course, these items are going to be slightly rotated.
First things first: for which items do we need to create a custom animation?
- Item `-1`: the item that has been moved away.
- Item `0`: the active item.
- Items `1` and `2`: underneath rotated items.
- Item `3`: invisible item that will make item `2` appear with an opacity transition.
With this clarified, declaring the scroll interpolator is as simple as :
```javascript
import { getInputRangeFromIndexes } from 'react-native-snap-carousel';
function scrollInterpolator (index, carouselProps) {
const range = [3, 2, 1, 0, -1]; // <- Remember that this has to be declared in a reverse order
const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
const outputRange = range;
return { inputRange, outputRange };
}
```
### Creating the animations
This is where the fun begins!
The first trick is **to ensure that the active item will always sit on top of the next ones**. By default, an item with a higher index will also have a higher `zIndex`. To counteract this, you can use the following. :warning: **Currently, this can lead to swipe/click events being missed!** See [this issue](https://github.com/meliorence/react-native-snap-carousel/issues/262) for more info.
```javascript
{
zIndex: carouselProps.data.length - index
}
```
Then we can define the `opacity` animation. Since we only need a transition between the second and third items, declaring it is pretty straightforward:
```javascript
opacity: animatedValue.interpolate({
inputRange: [2, 3],
outputRange: [1, 0]
})
```
Now for the `rotate` animation. The active item and the third one won't be rotated at all, while the previous one will be in order to add a nice visual effect when swiping. Read [this](https://facebook.github.io/react-native/docs/animations.html#interpolation) if you need an explanation of the `extrapolate` property.
```javascript
transform: [{
rotate: animatedValue.interpolate({
inputRange: [-1, 0, 1, 2, 3], // <- Unlike with `scrollInterpolator()`, this is declared in a regular order
outputRange: ['-25deg', '0deg', '-3deg', '1.8deg', '0deg'],
extrapolate: 'clamp'
})
}]
```
The tricky part is the `transform` animation. First, we need to ensure that our animated items are all centered in the carousel. To do that, we need to apply a translation equals to: **`-itemWidth` (or `-itemHeight` for vertical sliders) * relative index**. Then, we want item `-1` to move a bit more quickly than the others, which means negatively translating it. Finally, it's a good idea to make our animations compatible with both horizontal and vertical carousels. Hence the following:
```javascript
const sizeRef = carouselProps.vertical ? carouselProps.itemHeight : carouselProps.itemWidth;
const translateProp = carouselProps.vertical ? 'translateY' : 'translateX';
return {
transform: [{
[translateProp]: animatedValue.interpolate({
inputRange: [-1, 0, 1, 2, 3],
outputRange: [
-sizeRef * 0.5,
0,
-sizeRef, // centered
-sizeRef * 2, // centered
-sizeRef * 3 // centered
],
extrapolate: 'clamp'
})
}]
};
```
Let's put it all together:
```javascript
import React, { PureComponent } from 'react';
import Carousel, { getInputRangeFromIndexes } from 'react-native-snap-carousel';
export default class MyCustomCarousel extends PureComponent {
_scrollInterpolator (index, carouselProps) {
const range = [3, 2, 1, 0, -1];
const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
const outputRange = range;
return { inputRange, outputRange };
}
_animatedStyles (index, animatedValue, carouselProps) {
const sizeRef = carouselProps.vertical ? carouselProps.itemHeight : carouselProps.itemWidth;
const translateProp = carouselProps.vertical ? 'translateY' : 'translateX';
return {
zIndex: carouselProps.data.length - index,
opacity: animatedValue.interpolate({
inputRange: [2, 3],
outputRange: [1, 0]
}),
transform: [{
rotate: animatedValue.interpolate({
inputRange: [-1, 0, 1, 2, 3],
outputRange: ['-25deg', '0deg', '-3deg', '1.8deg', '0deg'],
extrapolate: 'clamp'
})
}, {
[translateProp]: animatedValue.interpolate({
inputRange: [-1, 0, 1, 2, 3],
outputRange: [
-sizeRef * 0.5,
0,
-sizeRef, // centered
-sizeRef * 2, // centered
-sizeRef * 3 // centered
],
extrapolate: 'clamp'
})
}]
};
}
render () {
return (
<Carousel
// other props
scrollInterpolator={this._scrollInterpolator}
slideInterpolatedStyle={this._animatedStyles}
useScrollView={true}
/>
);
}
}
```
Here is the result, which you can try live in [the provided example](https://github.com/meliorence/react-native-snap-carousel/tree/master/example):
:pill: Now for the bad news: **as is, this example won't be properly rendered on Android**. Continue reading to find out why and to discover ways to make it work.
## Caveats
### Android
If you have any kind of experience with React Native, you already know that Android is always there to punch you in the face when you make the mistake of thinking that everything is fine.
The issue here is pretty simple but very sad: [Android doesn't honor the `zIndex` property for `ScrollView`'s items](https://github.com/facebook/react-native/issues/16878). In concrete terms, this means that all items **after** the current active one will visually sit on top of it. Usually, you won't want that to happen.
For most layouts, you will probably use the following trick to render the active item on top of the next ones (as seen in the 'stack' layout, the 'tinder' layout, the step-by-step example, and more):
```javascript
{ zIndex: carouselProps.data.length - index }
```
Well, do not bother doing so on Android since it just won't work... As far as we know, you have three ways of dealing with this matter:
- **Use Android-specific prop `elevation`** -> `{ elevation: carouselProps.data.length - index }`. While this will work from a visual point of view, it has two major drawbacks: you will generate shadows (which you can "cut" with a container) and, more importantly, it has no effect over the rendering hierarchy. This means that **the item receving the tap event is not going to be the active one**. Pretty bothersome, right? Still, if you don't provide user interaction, this solution can be enough.
- **Invert the effect**. This is what has been done for the built-in layouts. Since the active item will always sits on top of the previous one on Android, background cards are made of the previous items instead of the next ones.
- **Use `FlatList`'s prop `inverted` with a reverse data set**. This provides the perfect transition to our second main problem...
### The `FlatList` component
`FlatList` is buggy as hell, period.
With custom interpolations, what you're most likely to experience is... nothing! Your incredible animations are not going to be played because the next and previous items are going to show up too late to the party.
Two solutions:
- **Play with the following `FlatList` props** until you find something that suits your needs (or not): `initialNumToRender`, `maxToRenderPerBatch`, `windowSize` and `updateCellsBatchingPeriod`.
- **Set `useScrollView` to `true` and/or `removeClippedSubviews` to `false`**. End of the bugs. :warning: This is a trade-off: you will have to forget about the performance optimizations that *are supposed* to come with `FlatList`, but your sanity will be preserved. We've chosen this solution for the 'stack' and 'tinder' layouts. **Bear in mind that this solution is not suited for large data sets.**
### Others
We use the native driver to ensure smooth animations and prevent performance issues. As stated [in RN doc](https://facebook.github.io/react-native/docs/animations.html#caveats): *"Not everything you can do with Animated is currently supported by the native driver. The main limitation is that **you can only animate non-layout properties: things like `transform` and `opacity` will work, but flexbox and position properties will not**."*.
## What's next?
We hope that you find this feature as awesome and useful as we are. Now go create awesome animations!
We only ask for one thing in return: **please share with us your most interesting interpolations!**
================================================
FILE: doc/KNOWN_ISSUES.md
================================================
# Known issues
## Table of contents
1. [`FlatList` and `ScrollView`'s limitations](#flatlist-and-scrollviews-limitations)
1. [React Native version](#react-native-version)
1. [Android performance](#android-performance)
1. [Unreliable callbacks](#unreliable-callbacks)
1. [Unreliable first item](#unreliable-first-item)
1. [Error with Jest](#error-with-jest)
1. [RTL support (experimental)](#rtl-support-experimental)
1. [Carousel is not visible until you start swiping](#carousel-initially-not-visible)
## `FlatList` and `ScrollView`'s limitations
Note that this plugin is built on top of React Native's `FlatList` which, in turn, is based on `VirtualizedList` and `ScrollView`. Unfortunately, their implementations have flaws that affect the plugin, the most problematic ones being the following:
- there is no `scrollEnd` event
- `scrollTo` method doesn't accept any callback
- Android's `scrollTo` animation is quite brutal
- it is not possible to specify a scroll duration
- there are rendering and performance issues with the `FlatList` component.
On top of that, `FlatList` has [its own set of bugs and buggy behaviors](https://github.com/facebook/react-native/issues?utf8=%E2%9C%93&q=flatlist).
We're trying to work around these issues, but the result is not always as smooth as we'd want it to be. **You can help by letting the React Native team know how badly we need those features!** React Native has [a dedicated canny](https://react-native.canny.io/feature-requests) for feature requests; here are the ones that need your vote the most:
- [[ScrollView] Add completion callback to scrollTo](https://react-native.canny.io/feature-requests/p/scrollview-add-completion-callback-to-scrollto)
- [snapToInterval for Android](https://react-native.canny.io/feature-requests/p/snaptointerval-for-android)
- [Add speed attribute to scrollTo](https://react-native.canny.io/feature-requests/p/add-speed-attribute-to-scrollto)
- [Bring ios only methods to Android ScrollView](https://react-native.canny.io/feature-requests/p/bring-ios-only-methods-to-android-scrollview)
- [ScrollView Animation Events (e.g. onScrollAnimationEnd)](https://react-native.canny.io/feature-requests/p/scrollview-animation-events-eg-onscrollanimationend)
Remember that every vote counts and take a look at [#203](https://github.com/meliorence/react-native-snap-carousel/issues/203) for more info!
## React Native version
:warning: **RN 0.43.x is the minimum recommended version for plugin releases `>= 3.0.0` since it was the first version to introduce the `FlatList` component.** Since version `3.5.0`, the component will fall back to rendering a `ScrollView` if you're using an older version of React Native (mirroring the effect of setting prop `useScrollView` to `true`). **But keep in mind that the `ScrollView` component is not suited to render a huge number of items.** If you experience performance issues, consider updating your React Native version and using the default `FlatList` version.
Bear in mind that we follow RN evolutions closely, which means newer versions of the plugin might break when used in conjunction with a version of RN that is not the latest stable one.
## Android performance
:warning: **Make sure to test carousel's performance and behavior without JS Dev Mode enabled, ideally with a production build.**.
It can take user experience from "crappy and sluggish" to "pretty good" - it's Android though, so nothing like "perfect" or "incredibly smooth"...
Also, make sure to implement all the recommendations listed [here](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md#optimizing-performance).
## Unreliable callbacks
When `enableMomentum` is disabled (default behavior), providing a reliable callback is really tricky since no `scrollEnd` event has been exposed yet for the `ScrollView` component. We can only rely on the `scrollEndDrag` event, which comes with a huge bunch of issues. See [#34](https://github.com/meliorence/react-native-snap-carousel/issues/34) for more information.
Version 2.3.0 tackled these issues with all sorts of flags and hacks. But you could still be facing the following one: **when you build a debug version of your app without enabling JS remote debugging, timers may desynchronize and cause a complete callback mess**. Try to either enable remote debugging or build a production version of your app, and everything should get back to normal.
Callback handling has been completely revamped in version 3.2.0, in a less hacky and more reliable way. There is one issue though: callbacks now rely on scroll events. Usually, this is not a problem since the plugin features a native-powered scroll. **But there has been [a regression in React Native 0.46.x](https://github.com/facebook/react-native/issues/15769), that has been fixed in version 0.48.2.**
If you're using an in-between version, you're in for some trouble since events won't be fired frequently enough (particularly on Android). **We've added a prop `callbackOffsetMargin` to help with this situation.**
## Unreliable first item
By design, **the `FlatList` component only renders a small chunk if items initially**.
This means **you may need to rely on inherited props [`getItemLayout`](https://facebook.github.io/react-native/docs/flatlist#getitemlayout) & [`initialScrollIndex`](https://facebook.github.io/react-native/docs/flatlist#initialscrollindex) to get the `firstItem` prop to work properly** (usable from version `3.8.3` on).
## Error with Jest
You might encounter the following error when using the plugin in conjonction with Jest: `TypeError: Cannot read property 'style' of undefined at Object.<anonymous>`.
As you can see [here](https://github.com/facebook/react-native/blob/master/jest/setup.js), this is because React Native mocks `ScrollView` for you when you write unit tests with Jest.
The easiest workaround is to add `jest.unmock('ScrollView')` before importing the component in your test file (thanks [@hoangnm](https://github.com/hoangnm) for the tip!).
## RTL support (experimental)
Since version 2.1.0, the plugin is compatible with RTL layouts. Our implementation relies on miscellaneous hacks that work around a [React Native bug](https://github.com/facebook/react-native/issues/11960) with horizontal `ScrollView`. As such, this feature should be considered experimental since it might break with newer versions of React Native.
Note that you may want to reverse the order of your data array for your items to be displayed in the proper RTL order. We've tried implementing it internally, but this led to numerous and unnecessary issues. You'll just have to do something as simple as `myCustomData.reverse()`.
## Carousel is not visible until you start swiping
There's a known issue where the Carousel will not be visible on the screen and will only show up after you start swiping. [This issue has been reported a few times](https://github.com/meliorence/react-native-snap-carousel/issues/238#issuecomment-354536859) and is caused by a [known React Native bug in the FlatList component](https://github.com/facebook/react-native/issues/1831).
It may be solved using one these three possible workarounds:
- [Adding removeClippedSubviews={false} to the Carousel element](https://github.com/meliorence/react-native-snap-carousel/issues/238#issuecomment-354528113): Note that this will disable all optimizations from the FlatList Component.
- [Adding useScrollView to the Carousel element](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md): Similar solution to the one provided above. Replaces FlatList component with ScrollView, only recommended for small sets of data.
- [As of version 3.5.0, you may use the triggerRenderingHack() method](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#available-methods): This hacky solution was specifically implemented for this bug, allowing you to keep the FlatList component). [Note: This is recommended if you need the performance optimizations that FlatList provides).
================================================
FILE: doc/PAGINATION.md
================================================
# `<Pagination />` component
Starting with version `2.4.0`, a customizable `<Pagination />` component has been added. This is how it looks like with its default configuration:
## Table of contents
1. [Props](#props)
1. [Note on dots' colors](#note-on-dots-colors)
1. [Usage](#usage)
## Props
Prop | Description | Type | Default
------ | ------ | ------ | ------
**`activeDotIndex`** | Index of the currently active dot | Number | **Required**
**`dotsLength`** | Number of dots to display | Number | **Required**
`activeOpacity` | Opacity of the dot when tapped. The prop has no effect if `tappableDots` hasn't been set to `true`. | Number | 1
`carouselRef` | Reference to the `Carousel` component to which pagination is linked. Needed only when setting `tappableDots` to `true`. | Object | `undefined`
`containerStyle` | Style for dots' container that will be merged with the default one | View Style Object | `{}`
`dotColor` | Background color of the active dot. **Use this if you want to animate the change between active and inactive colors**, and always in conjunction with `inactiveDotColor` (see [notes](#dots-colors)). | String | `undefined`
`dotContainerStyle` | Style of each dot's container. Use this if you need to specify styles that wouldn't have any effect when defined with `dotStyle` (such as `flex`). | View Style Object | `{}`
`dotElement` | Optional custom active dot element that will replace the default one. The element will receive a prop `active` set to `true` as well as a prop `index`. | React element | `undefined`
`dotStyle` | Dots' style that will be merged with the default one | View Style Object | `{}`
`inactiveDotColor` | Background color of the inactive dots. **Use this if you want to animate the change between active and inactive colors**, and always in conjunction with `dotColor` (see [notes](#dots-colors)). | String | `undefined`
`inactiveDotElement` | Optional custom inactive dot element that will replace the default one. The element will receive a prop `active` set to `false` as well as a prop `index` | React element | `undefined`
`inactiveDotOpacity` | Value of the opacity effect applied to inactive dots | Number | `0.5`
`inactiveDotScale` | Value of the 'scale' transform applied to inactive dots | Number | `0.5`
`inactiveDotStyle` | Dots' style that will be applied to inactive elements | View Style Object | `{}`
`renderDots` | Function that gives you complete control over pagination's rendering. It will receive three parameters : `(activeIndex, total, context)`. This can be especially useful in order to replace dots with numbers. **:warning: You will need to provide your own logic to handle taps. See [this comment](https://github.com/meliorence/react-native-snap-carousel/issues/273#issuecomment-368295203) for more info.** | Function | `undefined`
`tappableDots` | Make default dots tappable, e.g. your carousel will slide to the corresponding item. Note that `carouselRef` must be specified for this to work. | Boolean | `false`
`vertical` | Whether to layout dots vertically or horizontally | Boolean | `false`
`animatedDuration` | Length of dot animation (milliseconds) | Number | `250`
`animatedFriction` | Controls "bounciness"/overshoot on dot animation | Number | `4`
`animatedTension` | Controls speed dot animation | Number | `50`
`delayPressInDot` | Delay in ms, from the start of the touch, before onPressIn is called on dot | Number | `0`
## Note on dots' colors
If your active and inactive dots aren't of the same color, you have a choice to make:
1. either animate the color transition by specifying both `dotColor` and `inactiveDotColor`
1. or setting `{ backgroundColor }` in both `dotStyle` and `inactiveDotStyle`.
**When animating the color transition, the dot component will no longer be able to use the native driver for scale and opacity transitions.** As stated in [React Native's doc](https://facebook.github.io/react-native/docs/animations.html#caveats), color animations aren't supported by the native driver. And, unfortunately, it doesn't seem currently possible to run native-powered and js-powered animations at the same time on the same element.
Basically, this is a tradeoff between color transition and optimal smoothness. We recommended you to try the first version and, if you experiment performance drops, to settle for the second one.
## Usage
Since `<Pagination />` is, purposely, a separated component, you need to connect it to your `<Carousel />` component manually. This is pretty straightforward, but here is an example to get you started.
```javascript
import Carousel, { Pagination } from 'react-native-snap-carousel';
export default class MyCarousel extends Component {
_renderItem ({item, index}) {
return <MySlideComponent data={item} />
}
get pagination () {
const { entries, activeSlide } = this.state;
return (
<Pagination
dotsLength={entries.length}
activeDotIndex={activeSlide}
containerStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.75)' }}
dotStyle={{
width: 10,
height: 10,
borderRadius: 5,
marginHorizontal: 8,
backgroundColor: 'rgba(255, 255, 255, 0.92)'
}}
inactiveDotStyle={{
// Define styles for inactive dots here
}}
inactiveDotOpacity={0.4}
inactiveDotScale={0.6}
/>
);
}
render () {
return (
<View>
<Carousel
data={this.state.entries}
renderItem={this._renderItem}
onSnapToItem={(index) => this.setState({ activeSlide: index }) }
/>
{ this.pagination }
</View>
);
}
```
================================================
FILE: doc/PARALLAX_IMAGE.md
================================================
# `<ParallaxImage />` component
Version `3.0.0` introduced a `<ParallaxImage />` component, an image component aware of carousel's current scroll position and therefore able to display a nice parallax effect (powered by the native driver to ensure top-notch performance).
## Props
Prop | Description | Type | Default
------ | ------ | ------ | ------
`containerStyle` | Optional style for image's container | View Style Object | `{}`
`dimensions` | Optional on-screen dimensions of the image, as measured with [native methods](https://facebook.github.io/react-native/docs/direct-manipulation.html#other-native-methods). This allows for a bit of optimization, but it's sometimes tricky to get these in responsive layouts. | `{ width: number, height: number }` | `undefined`
`fadeDuration` | Duration of the fade-in effect when image is loaded | Number | `500`
`parallaxFactor` | Speed of the parallax effect. Be aware that the bigger the value, the more image will appear "zoomed in". | Number | `0.3`
`showSpinner` | Whether to display a spinner while image is loading or not | Boolean | `true`
`spinnerColor` | Color of the spinner | String | 'rgba(0, 0, 0, 0.4)'
`AnimatedImageComponent` | Custom animated image component | Function Object | `Animated.Image`
All [`<Image />` props](https://facebook.github.io/react-native/docs/image.html#props) are also inherited, **particularly `source` which is required**.
## Usage
The first thing you need to do is to **set `hasParallaxImages` to `true` for your `<Carousel />`**. This will make a new argument available in your `renderItem()` function, which must then be passed to the `<ParallaxImage />`.
Here is an example that shows how to connect images to your carousel (note the `parallaxProps` argument).
```javascript
import Carousel, { ParallaxImage } from 'react-native-snap-carousel';
import { Dimensions, StyleSheet } from 'react-native';
const { width: screenWidth } = Dimensions.get('window')
export default class MyCarousel extends Component {
_renderItem ({item, index}, parallaxProps) {
return (
<View style={styles.item}>
<ParallaxImage
source={{ uri: item.thumbnail }}
containerStyle={styles.imageContainer}
style={styles.image}
parallaxFactor={0.4}
{...parallaxProps}
/>
<Text style={styles.title} numberOfLines={2}>
{ item.title }
</Text>
</View>
);
}
render () {
return (
<Carousel
sliderWidth={screenWidth}
sliderHeight={screenWidth}
itemWidth={screenWidth - 60}
data={this.state.entries}
renderItem={this._renderItem}
hasParallaxImages={true}
/>
);
}
}
const styles = StyleSheet.create({
item: {
width: screenWidth - 60,
height: screenWidth - 60,
},
imageContainer: {
flex: 1,
marginBottom: Platform.select({ ios: 0, android: 1 }), // Prevent a random Android rendering issue
backgroundColor: 'white',
borderRadius: 8,
},
image: {
...StyleSheet.absoluteFillObject,
resizeMode: 'cover',
},
})
```
## Example to use with React Hooks
```javascript
import React, {useRef, useState, useEffect} from 'react';
import Carousel, {ParallaxImage} from 'react-native-snap-carousel';
import {
View,
Text,
Dimensions,
StyleSheet,
TouchableOpacity,
Platform,
} from 'react-native';
const ENTRIES1 = [
{
title: 'Beautiful and dramatic Antelope Canyon',
subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur',
illustration: 'https://i.imgur.com/UYiroysl.jpg',
},
{
title: 'Earlier this morning, NYC',
subtitle: 'Lorem ipsum dolor sit amet',
illustration: 'https://i.imgur.com/UPrs1EWl.jpg',
},
{
title: 'White Pocket Sunset',
subtitle: 'Lorem ipsum dolor sit amet et nuncat ',
illustration: 'https://i.imgur.com/MABUbpDl.jpg',
},
{
title: 'Acrocorinth, Greece',
subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur',
illustration: 'https://i.imgur.com/KZsmUi2l.jpg',
},
{
title: 'The lone tree, majestic landscape of New Zealand',
subtitle: 'Lorem ipsum dolor sit amet',
illustration: 'https://i.imgur.com/2nCt3Sbl.jpg',
},
];
const {width: screenWidth} = Dimensions.get('window');
const MyCarousel = props => {
const [entries, setEntries] = useState([]);
const carouselRef = useRef(null);
const goForward = () => {
carouselRef.current.snapToNext();
};
useEffect(() => {
setEntries(ENTRIES1);
}, []);
const renderItem = ({item, index}, parallaxProps) => {
return (
<View style={styles.item}>
<ParallaxImage
source={{uri: item.illustration}}
containerStyle={styles.imageContainer}
style={styles.image}
parallaxFactor={0.4}
{...parallaxProps}
/>
<Text style={styles.title} numberOfLines={2}>
{item.title}
</Text>
</View>
);
};
return (
<View style={styles.container}>
<TouchableOpacity onPress={goForward}>
<Text>go to next slide</Text>
</TouchableOpacity>
<Carousel
ref={carouselRef}
sliderWidth={screenWidth}
sliderHeight={screenWidth}
itemWidth={screenWidth - 60}
data={entries}
renderItem={renderItem}
hasParallaxImages={true}
/>
</View>
);
};
export default MyCarousel;
const styles = StyleSheet.create({
container: {
flex: 1,
},
item: {
width: screenWidth - 60,
height: screenWidth - 60,
},
imageContainer: {
flex: 1,
marginBottom: Platform.select({ios: 0, android: 1}), // Prevent a random Android rendering issue
backgroundColor: 'white',
borderRadius: 8,
},
image: {
...StyleSheet.absoluteFillObject,
resizeMode: 'cover',
},
});
```
================================================
FILE: doc/PROPS_METHODS_AND_GETTERS.md
================================================
# Props, methods and getters
## Table of contents
1. [Props](#props)
* [Required](#required)
* [Behavior](#behavior)
* [Loop](#loop)
* [Autoplay](#autoplay)
* [Style and animation](#style-and-animation)
* [Callbacks](#callbacks)
* [Inherited props](#inherited-props)
1. [Methods](#methods)
1. [Getters](#getters)
## Props
### Required
Prop | Description | Type | Default
------ | ------ | ------ | ------
**`data`** | Array of items to loop on | Array | **Required**
**`renderItem`** | Takes an item from data and renders it into the list. The function receives one argument `{item, index}` (see [Usage](https://github.com/meliorence/react-native-snap-carousel#usage)) and must return a React element. | Function | **Required**
**`itemWidth`** | Width in pixels of carousel's items, **must be the same for all of them** | Number | **Required for __horizontal__ carousel**
**`sliderWidth`** | Width in pixels of the carousel itself | Number | **Required for __horizontal__ carousel**
**`itemHeight`** | Height in pixels of carousel's items, **must be the same for all of them** | Number | **Required for __vertical__ carousel**
**`sliderHeight`** | Height in pixels of the carousel itself | Number | **Required for __vertical__ carousel**
### Behavior
Prop | Description | Type | Default
------ | ------ | ------ | ------
`activeSlideOffset` | From slider's center, minimum slide distance to be scrolled before being set to active. | Number | `20`
`apparitionDelay` | `FlatList`'s init is a real mess, with lots of unneeded flickers and slides movement. This prop controls the delay during which the carousel will be hidden when mounted. **WARNING: on Android, using it may lead to [rendering issues](https://github.com/meliorence/react-native-snap-carousel/issues/236) (i.e. images not showing up)**. Make sure to test thoroughly if you decide on using it. | Number | `0`
`callbackOffsetMargin` | Scroll events might not be triggered often enough to get a precise measure and, therefore, to provide a reliable callback. This usually is an Android issue, which might be linked to the version of React Native you're using (see ["Unreliable callbacks"](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/KNOWN_ISSUES.md#unreliable-callbacks)). To work around this, you can define a small margin that will increase the "sweet spot"'s width. The default value should cover most cases, but **you will want to increase it if you experience missed callbacks**. | Number | `5`
`enableMomentum` | See [momentum](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md#momentum) | Boolean | `false`
`enableSnap` | If enabled, releasing the touch will scroll to the center of the nearest/active item | Boolean | `true`
`firstItem` | Index of the first item to display. :warning: **Make sure to use inherited props [`getItemLayout`](https://facebook.github.io/react-native/docs/flatlist#getitemlayout) & [`initialScrollIndex`](https://facebook.github.io/react-native/docs/flatlist#initialscrollindex) if the prop doesn't seem to work**. | Number | `0`
`hasParallaxImages` | Whether the carousel contains `<ParallaxImage />` components or not. Required for specific data to be passed to children. | Boolean | `false`
`lockScrollTimeoutDuration` | This prop works in conjunction with `lockScrollWhileSnapping`. When scroll is locked, a timer is created in order to release the scroll if something goes wrong with the regular callback handling. **Normally, you shouldn't have to use this prop.** | Number | `1000`
`lockScrollWhileSnapping` | Prevent the user from swiping again while the carousel is snapping to a position. This prevents miscellaneous minor issues (inadvertently tapping an item while scrolling, stopping the scrolling animation if the carousel is tapped in the middle of a snap, clunky behavior on Android when short snapping quickly in opposite directions). The only drawback is that enabling the prop hinders the ability to swipe quickly between items as a little pause between swipes is needed. **Note that the prop won't have any effect if `enableMomentum` is set to `true`, since it would otherwise impede the natural and expected behavior.** | Boolean | `false`
`scrollEnabled` | When `false`, the view cannot be scrolled via touch interaction ([inherited prop](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#inherited-props)) | Boolean | `true`
`shouldOptimizeUpdates` | Whether to implement a `shouldComponentUpdate` strategy to minimize updates | Boolean | `true`
`swipeThreshold` | Delta x when swiping to trigger the snap | Number | `20`
`useScrollView` | Whether to use a `ScrollView` component instead of the default `FlatList` one. The advantages are to avoid rendering issues that can arise with `FlatList` and to provide compatibility with React Native pre- `0.43`. The major drawbacks are that you won't benefit from any of `FlatList`'s advanced optimizations and that you won't be able to use either `VirtualizedList` or `FlatList`'s specific props. **We recommend activating it only with a small set of slides and to test performance thoroughly in production mode.** Since version `3.7.6`, this prop also accepts a custom scroll component (see #498 for more info). | Boolean | `false` for `default` layout, `true` for `stack` and `tinder` layouts
`vertical` | Layout slides vertically instead of horizontally | Boolean | `false`
### Loop
Prop | Description | Type | Default
------ | ------ | ------ | ------
`loop` | Enable infinite loop mode. **:warning: It won't work if `enableSnap` has been set to `false`.** | Boolean | `false`
`loopClonesPerSide` | Number of clones to append to each side of the original items. **When swiping very quickly**, the user will eventually need to pause for a quick second before the scroll is repositioned (this occurs when the end of the set is reached). By increasing this number, the user will be able to scroll more slides before having to stop; but you'll also load more items in memory. This is a trade-off between optimal user experience and performance. | Number | `3`
### Autoplay
Prop | Description | Type | Default
------ | ------ | ------ | ------
`autoplay` | Trigger autoplay on mount. If you enable autoplay, we recommend you to set `enableMomentum` to `false` (default) and `lockScrollWhileSnapping` to `true`; this will enhance user experience a bit. | Boolean | `false`
`autoplayDelay` | Delay before enabling autoplay on startup & after releasing the touch | Number | `1000`
`autoplayInterval` | Delay in ms until navigating to the next item | Number | `3000`
### Style and animation
Prop | Description | Type | Default
------ | ------ | ------ | ------
`activeAnimationOptions` | Custom animation options. Note that `useNativeDriver` will be enabled by default and that opacity's easing will always be kept linear. **Setting this prop to something other than `null` will trigger custom animations and will completely change the way items are animated**: rather than having their opacity and scale interpolated based the scroll value (default behavior), they will now play the custom animation you provide as soon as they become active. **This means you cannot use props `layout`, `scrollInterpolator` or `slideInterpolatedStyle` in conjunction with `activeAnimationOptions`.** | Object | `null`
`activeAnimationType` | Custom [animation type](https://facebook.github.io/react-native/docs/animated.html#configuring-animations): either `'decay`, `'spring'` or `'timing'`. Note that it will only be applied to the scale animation since opacity's animation type will always be set to `timing` (no one wants the opacity to 'bounce' around). | String | `'timing'`
`activeSlideAlignment` | Determine active slide's alignment relative to the carousel. Possible values are: `'start'`, `'center'` and `'end'`. **It is not recommended to use this prop in conjunction with the `layout` one.** | String | `'center'`
`containerCustomStyle` | Optional styles for Scrollview's global wrapper | View Style Object | `{}`
`contentContainerCustomStyle` | Optional styles for Scrollview's items container | View Style Object | `{}`
`inactiveSlideOpacity` | Value of the opacity effect applied to inactive slides | Number | `0.7`
`inactiveSlideScale` | Value of the 'scale' transform applied to inactive slides | Number | `0.9`
`inactiveSlideShift` | Value of the 'translate' transform applied to inactive slides (see [#204](https://github.com/meliorence/react-native-snap-carousel/issues/204) or [the "custom interpolations" doc](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/CUSTOM_INTERPOLATIONS.md) for an example usage). This prop will have no effect with layouts others than the default one. | Number | `0`
`layout` | Define the way items are rendered and animated. Possible values are `'default'`, `'stack'` and `'tinder'`. See [this](https://github.com/meliorence/react-native-snap-carousel#layouts-and-custom-interpolations) for more info and visual examples. :warning: **Setting this prop to either `'stack'` or `'tinder'` will activate `useScrollView` [to prevent rendering bugs with `FlatList`](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/CUSTOM_INTERPOLATIONS.md#caveats). Therefore, those layouts won't be suited if you have a large data set since all items are going to be rendered upfront.** | String | `'default'`
`layoutCardOffset` | Use to increase or decrease the default card offset in both 'stack' and 'tinder' layouts. | Number | `18` for the 'stack' layout, `9` for the 'tinder' one
`scrollInterpolator` | Used to define custom interpolations. See [the dedicated doc](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/CUSTOM_INTERPOLATIONS.md#summary). | Function | `undefined`
`slideInterpolatedStyle` | Used to define custom interpolations. See [the dedicated doc](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/CUSTOM_INTERPOLATIONS.md#summary). | Function | `undefined`
`slideStyle` | Optional style for each item's container (the one whose scale and opacity are animated) | Animated View Style Object | `{}`
### Callbacks
Prop | Description | Type | Default
------ | ------ | ------ | ------
`onLayout(event)` | Exposed `View` callback; invoked on mount and layout changes | Function | `undefined`
`onScroll(event)` | Exposed `ScrollView` callback; fired while scrolling | Function | `undefined`
`onBeforeSnapToItem(slideIndex)` | Callback fired when the new active item has been determined, before snapping to it | Function | `undefined`
`onSnapToItem(slideIndex)` | Callback fired after snapping to an item | Function | `undefined`
### Inherited props
The component is built on top of the `FlatList` component, meaning it inherits from [`FlatList`](https://facebook.github.io/react-native/docs/flatlist.html), [`VirtualizedList`](https://facebook.github.io/react-native/docs/virtualizedlist.html), and [`ScrollView`](https://facebook.github.io/react-native/docs/scrollview.html).
You can use almost all props from this three components, but some of them can't be overriden because it would mess with our implementation's logic.
Here are a few useful props regarding carousel's **style and "feeling"**: `scrollEnabled` (if you want to disable user scrolling while still being able to use `Carousel`'s methods), `showsHorizontalScrollIndicator`, `overScrollMode` (android), `bounces` (ios), `decelerationRate` (ios), `scrollEventThrottle` (ios).
And here are some useful ones for **performance optimizations and rendering**: `initialNumToRender`, `maxToRenderPerBatch`, `windowSize`, `updateCellsBatchingPeriod`, `extraData`, `removeClippedSubviews` (the latter may have bugs, as stated in [RN's doc](https://facebook.github.io/react-native/docs/flatlist.html#removeclippedsubviews)). The first three are already implemented with default parameters, but you can override them if they don't suit your needs.
## Methods
### Reference to the component
In order to use the following methods, you need to create a reference to the carousel's instance. There are two ways of doing it.
#### ref as a callback attribute (**recommended**)
```javascript
<Carousel
// other props
ref={(c) => { this._carousel = c; }}
/>
// methods can then be called this way
onPress={() => { this._carousel.snapToNext(); }}
```
#### ref as a string attribute ([legacy](http://stackoverflow.com/questions/37468913/why-ref-string-is-legacy))
```javascript
<Carousel
// other props
ref={'carousel'}
/>
// methods can then be called this way
onPress={() => { this.refs.carousel.snapToNext(); }}
```
### Available methods
Method | Description
------ | ------
`startAutoplay (instantly = false)` | Start the autoplay programmatically
`stopAutoplay ()` | Stop the autoplay programmatically
`snapToItem (index, animated = true, fireCallback = true)` | Snap to an item programmatically
`snapToNext (animated = true, fireCallback = true)` | Snap to next item programmatically
`snapToPrev (animated = true, fireCallback = true)` | Snap to previous item programmatically
`triggerRenderingHack (offset)` | Call this when needed to work around [a random `FlatList` bug](https://github.com/facebook/react-native/issues/1831) that keeps content hidden until the carousel is scrolled (see [#238](https://github.com/meliorence/react-native-snap-carousel/issues/238)). Note that the `offset` parameter is not required and will default to either `1` or `-1` depending on the current scroll position.
## Getters
> You need a reference to the carousel's instance (see [above](#reference-to-the-component) if needed).
Property | Description
------ | ------
`currentIndex` | Current active item (`int`, starts at 0)
`currentScrollPosition` | Underlying `ScrollView`'s current content offset (`int`, starts at `0` if `activeSlideAlignment` is set to `start`, negative value otherwise)
================================================
FILE: doc/TIPS_AND_TRICKS.md
================================================
# Tips and tricks
## Table of contents
1. [Optimizing performance](#optimizing-performance)
1. [Momentum](#momentum)
1. [Margin between slides](#margin-between-slides)
1. [Carousel's stretched height](#carousels-stretched-height)
1. [Items' dynamic height](#items-dynamic-height)
1. [Fullscreen slides](#fullscreen-slides)
1. [Viewport wide slides / no preview effect](#viewport-wide-slides--no-preview-effect)
1. [Handling device rotation](#handling-device-rotation)
1. [Native-powered animations](#native-powered-animations)
1. [Implementing navigation](#implementing-navigation)
1. [Implementing zooming feature](#implementing-zooming-feature)
1. [Using a specific commit](#using-a-specific-commit)
1. [Useful threads](#useful-threads)
1. [Understanding styles](#understanding-styles)
1. [Migration from version 2.x](#migration-from-version-2x)
## Optimizing performance
Here are a few good practices to keep in mind when dealing with the component (or any React Native list for that matter):
* **Implement `shouldComponentUpdate`** (see [the `shallowCompare` addon](https://www.npmjs.com/package/react-addons-shallow-compare`)) for every carousel children (in `renderItem()`) or **make it a `PureComponent`** (some users report that `shouldComponentUpdate` is faster, but you should try both and decide for yourself).
* Make sure the carousel **isn't a child of a `ScrollView`** (this includes `FlatList`, `VirtualizedList` and many plugins). Apparently, it would render all child components, even those currently off-screen.
* If your data set is huge, **consider loading additional chunks of data only when the user has reached the end of the current set**. In order to do this, you'll have to play with `VirtualizedList`'s props `onEndReached` and `onEndReachedThreshold`
* **Add [prop `removeClippedSubviews`](https://facebook.github.io/react-native/docs/scrollview.html#removeclippedsubviews)** and set it to `true` so that out-of-view items are removed from memory.
Here are a few other tips given by [@pcooney10](https://github.com/pcooney10) in [this thread](https://github.com/meliorence/react-native-snap-carousel/issues/247#issuecomment-360276562):
- Make sure there aren't any excessive calls to `this.setState` in the component that renders the carousels and their parents.
- Properly leverage the `initialNumToRender` and `maxToRenderPerBatch` props inherited from `FlatList`, and `windowSize` inherited from `VirtualizedList`.
- Utilize [`InteractionManager`](https://facebook.github.io/react-native/docs/interactionmanager.html) to render the Carousels that are "below the fold".
- Avoid using functions and object literals for props declared on components - this apparently results in "new props" during a re-render.
Lastly, make sure to read [this note](https://github.com/meliorence/react-native-snap-carousel#important-note-regarding-android) regarding Android and [this one](https://github.com/meliorence/react-native-snap-carousel#important-note-regarding-ios) regarding iOS.
## Momentum
Since version `1.5.0`, the snapping effect can be based on momentum (by setting `enableMomentum` to `true`) instead of when you're releasing your finger. It means that the component will wait until the `ScrollView` isn't moving anymore to snap.
By default, the inertia isn't too high on Android. However, we had to tweak the default iOS value a bit to make sure the snapping isn't delayed for too long. You can adjust this value to your needs thanks to [this prop](https://facebook.github.io/react-native/docs/scrollview.html#decelerationrate).
If momentum is disabled (default behavior), make sure to play with prop `scrollEndDragDebounceValue` since it can help achieving a better snap feeling.
> **We recommend setting `enableMomentum` to `false` (default) and `decelerationRate` to `'fast'` when you are displaying only one main slide** (as in the showcase above), and to use `true` and `0.9` otherwise.
## Margin between slides
If you need some **extra horizontal margin** between slides (besides the one resulting from the scale effect), you should add it as `paddingHorizontal` on slide's container.
:warning: **The value of `itemWidth` must include this extra margin.**
```javascript
const horizontalMargin = 20;
const slideWidth = 280;
const sliderWidth = Dimensions.get('window').width;
const itemWidth = slideWidth + horizontalMargin * 2;
const itemHeight = 200;
const styles = StyleSheet.create({
slide: {
width: itemWidth,
height: itemHeight,
paddingHorizontal: horizontalMargin
// other styles for the item container
},
slideInnerContainer: {
width: slideWidth,
flex: 1
// other styles for the inner container
}
};
```
```javascript
_renderItem ({item, index}) {
return (
<View style={styles.slide}>
<View style={styles.slideInnerContainer} />
</View>
);
}
render () {
return (
<Carousel
renderItem={this._renderItem}
sliderWidth={sliderWidth}
itemWidth={itemWidth}
/>
);
}
```
## Carousel's stretched height
Since `<Carousel />` is, ultimately, based on `<ScrollView />`, it inherits [its default styles](https://github.com/facebook/react-native/blob/c38f167019a3c481847d4abc80a458f7784f1336/Libraries/Components/ScrollView/ScrollView.js#L1153-L1169) and particularly `{ flexGrow: 1 }`. This means that, by default, **the carousel container will stretch to fill up all available space**.
If this is not what you're after, you can prevent this behavior by passing `{ flexGrow: 0 }` to prop `containerCustomStyle`.
Alternatively, you can either use this prop to pass a custom height to the container, or wrap the carousel in a `<View />` with a fixed height.
## Items' dynamic height
If you want your slides to have dynamic height (e.g. to fill up the entirety of the available space), you need to transfer `{ flex: 1 }` to all the relevant wrappers. Here is a minimal example:
```javascript
_renderItem ({item, index}) {
return (
<View style={{ flex: 1 }} />
);
}
render () {
return (
<Carousel
data={this.state.data}
renderItem={this._renderItem}
containerCustomStyle={{ flex: 1 }}
slideStyle={{ flex: 1 }}
/>
);
}
```
## Fullscreen slides
While the plugin hasn't been designed with this use case in mind, you can easily implement fullscreen slides. The following code can serve as a good starting point.
```javascript
const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
export class MyCarousel extends Component {
_renderItem ({item, index}) {
return (
<View style={{ height: viewportHeight }} /> // or { flex: 1 } for responsive height
);
}
render () {
return (
<Carousel
data={this.state.entries}
renderItem={this._renderItem}
sliderWidth={viewportWidth}
itemWidth={viewportWidth}
slideStyle={{ width: viewportWidth }}
inactiveSlideOpacity={1}
inactiveSlideScale={1}
/>
);
}
}
```
[This plugin](https://github.com/shichongrui/react-native-on-layout) can also prove useful.
## Viewport wide slides / no preview effect
**If you are using the plugin without the preview effect (meaning that your slides, as well as your slider, are viewport wide), we do not recommend using this plugin.**
You'll be better off with [`react-native-swiper`](https://github.com/leecade/react-native-swiper) for the simple reason that it implements the `ViewPagerAndroid` component, which provides a way better overall feeling on Android, whereas we must hack our way around [the frustrating limitations of the `ScrollView` component](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/KNOWN_ISSUES.md#flatlist-and-scrollviews-limitations).
## Handling device rotation
Since version 2.2.0, slides will re-center properly if you update slider and/or items' dimensions when `onLayout` is fired.
Here is an example of a working implementation (thanks [@andrewpope](https://github.com/meliorence/react-native-snap-carousel/pull/76#issuecomment-306187425)):
```
constructor(props) {
super(props);
this.state = {
viewport: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
}
};
}
render() {
return (
<View
onLayout={() => {
this.setState({
viewport: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
}
});
}}
>
<Carousel
ref={c => { this.carousel = c; } }
sliderWidth={this.state.viewport.width}
itemWidth={this.state.viewport.width}
...
/>
</View>
);
}
```
## Native-powered animations
Slides' animations are based on scroll events and have been moved to the native thread in order to prevent the tiny lag associated with React Native's JavaScript bridge. This is really useful when displaying a `transform` and/or `opacity` animation that needs to follow carousel's scroll position closely. You can find more info in [this post from Facebook](https://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html) or in [this one on Medium](https://medium.com/xebia/linking-animations-to-scroll-position-in-react-native-5c55995f5a6e).
## Implementing navigation
Some users had trouble implementing navigation with the carousel (see [#83](https://github.com/meliorence/react-native-snap-carousel/issues/83), [#146](https://github.com/meliorence/react-native-snap-carousel/issues/146) and [#212](https://github.com/meliorence/react-native-snap-carousel/issues/212)) because they weren't aware of methods' context.
[jordangrant](https://github.com/jordangrant) was kind enough to share [a comprehensive walkthrough](https://github.com/meliorence/react-native-snap-carousel/issues/146#issuecomment-343933652) which is reproduced below. Kuddos to him!
In your Carousel:
```
<Carousel
data={image1}
renderItem={this._renderItem.bind(this)} //<------
sliderWidth={equalWidth2}
itemWidth={equalWidth5}
/>
```
Adding the bind allows the `_renderItem` function to understand what `this` is (in `this.props.navigation`).
In `_renderItem()`:
```
_renderItem ({item, index}) {
return (
<SliderEntry
data={item}
navigation={this.props.navigation} //<-------
/>
);
}
```
And inside `SliderEntry.js`:
```
export default class SliderEntry extends Component {
static propTypes = {
data: PropTypes.object.isRequired,
};
render () {
const { data: { title, subtitle, illustration}, navigation } = this.props; //<------
return (
<TouchableOpacity
activeOpacity={1}
style={styles.slideInnerContainer}
onPress={() => navigation.navigate('Feed')} //<------- now you can use navigation
>
}
}
```
## Implementing zooming feature
See https://github.com/meliorence/react-native-snap-carousel/issues/264#issuecomment-366473756
## Using a specific commit
This plugin is regularly updated, and new versions are frequently pushed to `npm`. But you may want to use a specific commit, not yet merged or published.
This is pretty easy: in your `package.json` file, use the GitHub link instead of a version number, and point to the specific commit using `#`. For example, if the commit reference is `fbdb671`, you would write:
```javascript
"react-native-snap-carousel": "https://github.com/meliorence/react-native-snap-carousel#fbdb671"
```
## Useful threads
Some issues stand above the others because a lot of useful information has been shared.
In order to make it easier for everyone to find them, they are [tagged with an asterisk](https://github.com/meliorence/react-native-snap-carousel/issues?q=is%3Aissue+label%3A%2A).
## Understanding styles
Here is a screenshot that should help you understand how each of the required variables is used.
## Migration from version 2.x
Slides are no longer appended as direct children of the component since the plugin is now based on `FlatList` instead of `ScrollView`. There are two new props that takes care of their rendering: `data` and `renderItem` (both are inherited from `FlatList`).
> :warning: **Make sure to read about [the recommended React Native version](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/KNOWN_ISSUES.md#react-native-version) before migrating.**
If you were already looping throught an array of data to populate the carousel, the migration is pretty straightforward. Just pass your slides' data to the `data` prop, convert your slides' getter to a function and pass it to the `renderItem` prop: you're good to go!
**From**
```javascript
get slides () {
return this.state.entries.map((entry, index) => {
return (
<View key={`entry-${index}`} style={styles.slide}>
<Text style={styles.title}>{ entry.title }</Text>
</View>
);
});
}
render () {
return (
<Carousel
sliderWidth={sliderWidth}
itemWidth={itemWidth}
>
{ this.slides }
</Carousel>
);
}
```
**To**
```javascript
_renderItem ({item, index}) {
return (
<View style={styles.slide}>
<Text style={styles.title}>{ item.title }</Text>
</View>
);
}
render () {
return (
<Carousel
data={this.state.entries}
renderItem={this._renderItem}
sliderWidth={sliderWidth}
itemWidth={itemWidth}
/>
);
}
```
> Note that the `key` prop is no longer needed for carousel's items. If you want to provide a custom key, you should pass your own [`keyExtractor`](https://facebook.github.io/react-native/docs/flatlist.html#keyextractor) to the `<Carousel />`.
If you were previously appending random types of children, you will need to rely on a specific bit of data to return the proper element from your `renderItem` function.
**Example**
```javascript
_renderItem ({item, index}) {
if (item.type === 'text') {
return <Text style={styles.textSlide} />;
} else if (item.type === 'image') {
return <Image style={styles.imageSlide} />;
} else {
return <View style={styles.viewSlide} />;
}
}
```
================================================
FILE: doc/VERSION_4.md
================================================
# A shiny new version is on its way!
## 💡 Why?
So far, and because of [numerous React Native limitations](https://github.com/meliorence/react-native-snap-carousel/issues/203), the entire plugin has basically been based on a pile of hacks and workarounds...
With the most recent versions of React Native, a few interesting props have appeared and made me consider the possibility of finally rewriting the inner logic of the carousel.
Don't get me wrong: we'll still have to rely on a few hacks to account for, well, Android particularly. But it was possible to get rid of most of them, and that is for the best!
## ✨ Wonderful benefits
Most of the heavy work is done, and here's what you can enjoy out-of-the-box:
- **(Very) Smooth scrolling.** Put simply, this is night and day. Just try it for yourself and you'll see that there's just no going back!
- **Reliable callback logic.**
- **Optimized custom interpolations ('stack' and 'tinder' layouts for example) that can be used with a huge number of items.** Previously, you couldn't use those with a big data set as this would create performance issues. :warning: **This one is iOS-only for now** (but, given a few recent tests, we might find a way to make it work on Android).
- **An experimental snap feature** that is promising but not yet complete (see below).
## 📍 Next steps
Before making it widely available, **I now need your help** 🙌
The first thing you can do is test this new version and let me know how it works for you and you particular setup. For example, vertical carousels, pagination and parallax images haven't been tested yet — they are expected to work properly though.
### How to test?
- You can find the already published beta versions by running: `npm view react-native-snap-carousel versions --json`
- [Follow this PR closely](https://github.com/meliorence/react-native-snap-carousel/pull/678). **This is where the discussion will take place.**
- And if you like to live on the edge, [try the latest commits](https://stackoverflow.com/a/27630247/) of that same PR ;-)
### 🦸♀️🦸♂️ Get your hands dirty!
Then, **if you want to jump in**, I'd be glad if you could help me with the following:
1. **Reducing the number of rerenders** (see [#478](https://github.com/meliorence/react-native-snap-carousel/issues/478)). [`why-did-you-render`](https://github.com/welldone-software/why-did-you-render) is going to prove really helpful for that.
2. **Finding a way to make the experimental snap feature work even with the last items** (see "New props" below for more details on this feature).
Let's finish that together and make sure this plugin remains absolutely awesome!
Cheers,
[bd-arc](https://github.com/bd-arc)
---
## 📚 New, updated and removed props
### New props
Prop | Description | Type | Default
------ | ------ | ------ | ------
✅ **`useExperimentalSnap`** | By default, items will always be centered according to the `activeSlideAlignment` prop. A sometimes unwanted result of this is the addition of empty spaces at the end/beginning of the carousel. Since version 4, it is possible to use another centering option that will avoid white spaces. :warning: **If you set it to `true`, some items might not be "reachable" — i.e. for the last item(s), the snap callbacks won't be triggered and the animations won't be complete.** We recommend activate it only if you don't rely on `onSnapToItem` and if both `inactiveSlideScale` and `inactiveSlideOpacity` are set to `1`. A side benefit of activating it is **the ability to slide only one item at a time** when setting the inherited prop `disableIntervalMomentum` to `true`. | Boolean | `false`
✅ **`onScrollIndexChanged(slideIndex)`** | Executed as soon as the active index changes during scroll (whereas `onSnapToItem` is executed only for the last active item). :warning: **Avoid doing heavy calculations or rendering here!** | Function | `undefined`
### Updated props
Prop | Description | Type | Default
------ | ------ | ------ | ------
✅ **`renderItem({ item, index, dataIndex })`** | `renderItem()` now receives a **`dataIndex` param** that will represent the index based on your data set and not on the actual number of items — the two numbers won't match for looped carousels. This is useful if you need to pass to the item something based on your data rather than on the inner index. | Function | **Required**
### Removed props
- ❌ `activeAnimationOptions`
- ❌ `activeAnimationType`
- ❌ `enableMomentum`
- ❌ `lockScrollTimeoutDuration`
- ❌ `lockScrollWhileSnapping`
- ❌ `onBeforeSnapToItem`
- ❌ `swipeThreshold`
================================================
FILE: example/.buckconfig
================================================
[android]
target = Google Inc.:Google APIs:23
[maven_repositories]
central = https://repo1.maven.org/maven2
================================================
FILE: example/.flowconfig
================================================
[ignore]
; We fork some components by platform
.*/*[.]android.js
; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/\.buckd/
; Ignore polyfills
node_modules/react-native/Libraries/polyfills/.*
; These should not be required directly
; require from fbjs/lib instead: require('fbjs/lib/warning')
node_modules/warning/.*
; Flow doesn't support platforms
.*/Libraries/Utilities/LoadingView.js
[untyped]
.*/node_modules/@react-native-community/cli/.*/.*
[include]
[libs]
node_modules/react-native/Libraries/react-native/react-native-interface.js
node_modules/react-native/flow/
[options]
emoji=true
esproposal.optional_chaining=enable
esproposal.nullish_coalescing=enable
module.file_ext=.js
module.file_ext=.json
module.file_ext=.ios.js
munge_underscores=true
module.name_mapper='^react-native$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/react-native/react-native-implementation'
module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FlowFixMeProps
suppress_type=$FlowFixMeState
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
[lints]
sketchy-null-number=warn
sketchy-null-mixed=warn
sketchy-number=warn
untyped-type-import=warn
nonstrict-import=warn
deprecated-type=warn
unsafe-getters-setters=warn
inexact-spread=warn
unnecessary-invariant=warn
signature-verification-failure=warn
deprecated-utility=error
[strict]
deprecated-type
nonstrict-import
sketchy-null
unclear-type
unsafe-getters-setters
untyped-import
untyped-type-import
[version]
^0.105.0
================================================
FILE: example/.gitattributes
================================================
*.pbxproj -text
================================================
FILE: example/.gitignore
================================================
# OSX
#
.DS_Store
# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
# Android/IntelliJ
#
build/
.idea
.gradle
local.properties
*.iml
# node.js
#
node_modules/
npm-debug.log
yarn-error.log
# BUCK
buck-out/
\.buckd/
*.keystore
!debug.keystore
# fastlane
#
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
# screenshots whenever they are needed.
# For more information about the recommended setup visit:
# https://docs.fastlane.tools/best-practices/source-control/
*/fastlane/report.xml
*/fastlane/Preview.html
*/fastlane/screenshots
# Bundle artifact
*.jsbundle
# CocoaPods
/ios/Pods/
================================================
FILE: example/.prettierrc.js
================================================
module.exports = {
bracketSpacing: false,
jsxBracketSameLine: true,
singleQuote: true,
trailingComma: 'all',
};
================================================
FILE: example/.watchmanconfig
================================================
{}
================================================
FILE: example/__tests__/index.js
================================================
/**
* @format
*/
import 'react-native';
import React from 'react';
import Root from '../src/index';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
it('renders correctly', () => {
renderer.create(<Root />);
});
================================================
FILE: example/android/.project
================================================
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>android</name>
<comment>Project android created by Buildship.</comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
</natures>
</projectDescription>
================================================
FILE: example/android/.settings/org.eclipse.buildship.core.prefs
================================================
connection.project.dir=
eclipse.preferences.version=1
================================================
FILE: example/android/app/_BUCK
================================================
# To learn about Buck see [Docs](https://buckbuild.com/).
# To run your application with Buck:
# - install Buck
# - `npm start` - to start the packager
# - `cd android`
# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
# - `buck install -r android/app` - compile, install and run application
#
load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
lib_deps = []
create_aar_targets(glob(["libs/*.aar"]))
create_jar_targets(glob(["libs/*.jar"]))
android_library(
name = "all-libs",
exported_deps = lib_deps,
)
android_library(
name = "app-code",
srcs = glob([
"src/main/java/**/*.java",
]),
deps = [
":all-libs",
":build_config",
":res",
],
)
android_build_config(
name = "build_config",
package = "com.example",
)
android_resource(
name = "res",
package = "com.example",
res = "src/main/res",
)
android_binary(
name = "app",
keystore = "//android/keystores:debug",
manifest = "src/main/AndroidManifest.xml",
package_type = "debug",
deps = [
":app-code",
],
)
================================================
FILE: example/android/app/build.gradle
================================================
apply plugin: "com.android.application"
import com.android.build.OutputFile
/**
* The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
* and bundleReleaseJsAndAssets).
* These basically call `react-native bundle` with the correct arguments during the Android build
* cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
* bundle directly from the development server. Below you can see all the possible configurations
* and their defaults. If you decide to add a configuration block, make sure to add it before the
* `apply from: "../../node_modules/react-native/react.gradle"` line.
*
* project.ext.react = [
* // the name of the generated asset file containing your JS bundle
* bundleAssetName: "index.android.bundle",
*
* // the entry file for bundle generation
* entryFile: "index.android.js",
*
* // https://facebook.github.io/react-native/docs/performance#enable-the-ram-format
* bundleCommand: "ram-bundle",
*
* // whether to bundle JS and assets in debug mode
* bundleInDebug: false,
*
* // whether to bundle JS and assets in release mode
* bundleInRelease: true,
*
* // whether to bundle JS and assets in another build variant (if configured).
* // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
* // The configuration property can be in the following formats
* // 'bundleIn${productFlavor}${buildType}'
* // 'bundleIn${buildType}'
* // bundleInFreeDebug: true,
* // bundleInPaidRelease: true,
* // bundleInBeta: true,
*
* // whether to disable dev mode in custom build variants (by default only disabled in release)
* // for example: to disable dev mode in the staging build type (if configured)
* devDisabledInStaging: true,
* // The configuration property can be in the following formats
* // 'devDisabledIn${productFlavor}${buildType}'
* // 'devDisabledIn${buildType}'
*
* // the root of your project, i.e. where "package.json" lives
* root: "../../",
*
* // where to put the JS bundle asset in debug mode
* jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
*
* // where to put the JS bundle asset in release mode
* jsBundleDirRelease: "$buildDir/intermediates/assets/release",
*
* // where to put drawable resources / React Native assets, e.g. the ones you use via
* // require('./image.png')), in debug mode
* resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
*
* // where to put drawable resources / React Native assets, e.g. the ones you use via
* // require('./image.png')), in release mode
* resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
*
* // by default the gradle tasks are skipped if none of the JS files or assets change; this means
* // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
* // date; if you have any other folders that you want to ignore for performance reasons (gradle
* // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
* // for example, you might want to remove it from here.
* inputExcludes: ["android/**", "ios/**"],
*
* // override which node gets called and with what additional arguments
* nodeExecutableAndArgs: ["node"],
*
* // supply additional arguments to the packager
* extraPackagerArgs: []
* ]
*/
project.ext.react = [
entryFile: "index.js",
enableHermes: false, // clean and rebuild if changing
]
apply from: "../../node_modules/react-native/react.gradle"
/**
* Set this to true to create two separate APKs instead of one:
* - An APK that only works on ARM devices
* - An APK that only works on x86 devices
* The advantage is the size of the APK is reduced by about 4MB.
* Upload all the APKs to the Play Store and people will download
* the correct one based on the CPU architecture of their device.
*/
def enableSeparateBuildPerCPUArchitecture = false
/**
* Run Proguard to shrink the Java bytecode in release builds.
*/
def enableProguardInReleaseBuilds = false
/**
* The preferred build flavor of JavaScriptCore.
*
* For example, to use the international variant, you can use:
* `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
*
* The international variant includes ICU i18n library and necessary data
* allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
* give correct results when using with locales other than en-US. Note that
* this variant is about 6MiB larger per architecture than default.
*/
def jscFlavor = 'org.webkit:android-jsc:+'
/**
* Whether to enable the Hermes VM.
*
* This should be set on project.ext.react and mirrored here. If it is not set
* on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
* and the benefits of using Hermes will therefore be sharply reduced.
*/
def enableHermes = project.ext.react.get("enableHermes", false);
android {
compileSdkVersion rootProject.ext.compileSdkVersion
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
defaultConfig {
applicationId "com.example"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"
}
splits {
abi {
reset()
enable enableSeparateBuildPerCPUArchitecture
universalApk false // If true, also generate a universal APK
include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
}
}
signingConfigs {
debug {
storeFile file('debug.keystore')
storePassword 'android'
keyAlias 'androiddebugkey'
keyPassword 'android'
}
}
buildTypes {
debug {
signingConfig signingConfigs.debug
}
release {
// Caution! In production, you need to generate your own keystore file.
// see https://facebook.github.io/react-native/docs/signed-apk-android.
signingConfig signingConfigs.debug
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
}
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
variant.outputs.each { output ->
// For each separate APK per architecture, set a unique version code as described here:
// https://developer.android.com/studio/build/configure-apk-splits.html
def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
def abi = output.getFilter(OutputFile.ABI)
if (abi != null) { // null for the universal-debug, universal-release variants
output.versionCodeOverride =
versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
}
}
}
}
dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.facebook.react:react-native:+" // From node_modules
if (enableHermes) {
def hermesPath = "../../node_modules/hermes-engine/android/";
debugImplementation files(hermesPath + "hermes-debug.aar")
releaseImplementation files(hermesPath + "hermes-release.aar")
} else {
implementation jscFlavor
}
}
// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
from configurations.compile
into 'libs'
}
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
================================================
FILE: example/android/app/build_defs.bzl
================================================
"""Helper definitions to glob .aar and .jar targets"""
def create_aar_targets(aarfiles):
for aarfile in aarfiles:
name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")]
lib_deps.append(":" + name)
android_prebuilt_aar(
name = name,
aar = aarfile,
)
def create_jar_targets(jarfiles):
for jarfile in jarfiles:
name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")]
lib_deps.append(":" + name)
prebuilt_jar(
name = name,
binary_jar = jarfile,
)
================================================
FILE: example/android/app/proguard-rules.pro
================================================
# Add project specific ProGuard rules here.
# By default, the flags in this file are appended to flags specified
# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
# You can edit the include path and order by changing the proguardFiles
# directive in build.gradle.
#
# For more details, see
# http://developer.android.com/guide/developing/tools/proguard.html
# Add any project specific keep options here:
================================================
FILE: example/android/app/src/debug/AndroidManifest.xml
================================================
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
</manifest>
================================================
FILE: example/android/app/src/main/AndroidManifest.xml
================================================
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
</manifest>
================================================
FILE: example/android/app/src/main/java/com/example/MainActivity.java
================================================
package com.example;
import com.facebook.react.ReactActivity;
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript. This is used to schedule
* rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "example";
}
}
================================================
FILE: example/android/app/src/main/java/com/example/MainApplication.java
================================================
package com.example;
import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
import java.lang.reflect.InvocationTargetException;
import java.util.List;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost =
new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
return packages;
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
initializeFlipper(this); // Remove this line if you don't want Flipper enabled
}
/**
* Loads Flipper in React Native templates.
*
* @param context
*/
private static void initializeFlipper(Context context) {
if (BuildConfig.DEBUG) {
try {
/*
We use reflection here to pick up the class that initializes Flipper,
since Flipper library is not available in release mode
*/
Class<?> aClass = Class.forName("com.facebook.flipper.ReactNativeFlipper");
aClass.getMethod("initializeFlipper", Context.class).invoke(null, context);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
}
}
}
================================================
FILE: example/android/app/src/main/res/values/strings.xml
================================================
<resources>
<string name="app_name">example</string>
</resources>
================================================
FILE: example/android/app/src/main/res/values/styles.xml
================================================
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:textColor">#000000</item>
</style>
</resources>
================================================
FILE: example/android/build.gradle
================================================
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
ext {
buildToolsVersion = "28.0.3"
minSdkVersion = 16
compileSdkVersion = 28
targetSdkVersion = 28
}
repositories {
google()
jcenter()
}
dependencies {
classpath("com.android.tools.build:gradle:3.4.2")
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
mavenLocal()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url("$rootDir/../node_modules/react-native/android")
}
maven {
// Android JSC is installed from npm
url("$rootDir/../node_modules/jsc-android/dist")
}
google()
jcenter()
maven { url 'https://jitpack.io' }
}
}
================================================
FILE: example/android/gradle/wrapper/gradle-wrapper.properties
================================================
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-5.5-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
================================================
FILE: example/android/gradle.properties
================================================
# Project-wide Gradle settings.
# IDE (e.g. Android Studio) users:
# Gradle settings configured through the IDE *will override*
# any settings specified in this file.
# For more details on how to configure your build environment visit
# http://www.gradle.org/docs/current/userguide/build_environment.html
# Specifies the JVM arguments used for the daemon process.
# The setting is particularly useful for tweaking memory settings.
# Default value: -Xmx10248m -XX:MaxPermSize=256m
# org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
# When configured, Gradle will run in incubating parallel mode.
# This option should only be used with decoupled projects. More details, visit
# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
# org.gradle.parallel=true
android.useAndroidX=true
android.enableJetifier=true
================================================
FILE: example/android/gradlew
================================================
#!/usr/bin/env sh
#
# Copyright 2015 the original author or authors.
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#
##############################################################################
##
## Gradle start up script for UN*X
##
##############################################################################
# Attempt to set APP_HOME
# Resolve links: $0 may be a link
PRG="$0"
# Need this for relative symlinks.
while [ -h "$PRG" ] ; do
ls=`ls -ld "$PRG"`
link=`expr "$ls" : '.*-> \(.*\)$'`
if expr "$link" : '/.*' > /dev/null; then
PRG="$link"
else
PRG=`dirname "$PRG"`"/$link"
fi
done
SAVED="`pwd`"
cd "`dirname \"$PRG\"`/" >/dev/null
APP_HOME="`pwd -P`"
cd "$SAVED" >/dev/null
APP_NAME="Gradle"
APP_BASE_NAME=`basename "$0"`
# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
# Use the maximum available, or set MAX_FD != -1 to use that value.
MAX_FD="maximum"
warn () {
echo "$*"
}
die () {
echo
echo "$*"
echo
exit 1
}
# OS specific support (must be 'true' or 'false').
cygwin=false
msys=false
darwin=false
nonstop=false
case "`uname`" in
CYGWIN* )
cygwin=true
;;
Darwin* )
darwin=true
;;
MINGW* )
msys=true
;;
NONSTOP* )
nonstop=true
;;
esac
CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
# Determine the Java command to use to start the JVM.
if [ -n "$JAVA_HOME" ] ; then
if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
# IBM's JDK on AIX uses strange locations for the executables
JAVACMD="$JAVA_HOME/jre/sh/java"
else
JAVACMD="$JAVA_HOME/bin/java"
fi
if [ ! -x "$JAVACMD" ] ; then
die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
else
JAVACMD="java"
which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
# Increase the maximum file descriptors if we can.
if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
MAX_FD_LIMIT=`ulimit -H -n`
if [ $? -eq 0 ] ; then
if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
MAX_FD="$MAX_FD_LIMIT"
fi
ulimit -n $MAX_FD
if [ $? -ne 0 ] ; then
warn "Could not set maximum file descriptor limit: $MAX_FD"
fi
else
warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
fi
fi
# For Darwin, add options to specify how the application appears in the dock
if $darwin; then
GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
fi
# For Cygwin, switch paths to Windows format before running java
if $cygwin ; then
APP_HOME=`cygpath --path --mixed "$APP_HOME"`
CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
JAVACMD=`cygpath --unix "$JAVACMD"`
# We build the pattern for arguments to be converted via cygpath
ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
SEP=""
for dir in $ROOTDIRSRAW ; do
ROOTDIRS="$ROOTDIRS$SEP$dir"
SEP="|"
done
OURCYGPATTERN="(^($ROOTDIRS))"
# Add a user-defined pattern to the cygpath arguments
if [ "$GRADLE_CYGPATTERN" != "" ] ; then
OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
fi
# Now convert the arguments - kludge to limit ourselves to /bin/sh
i=0
for arg in "$@" ; do
CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option
if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition
eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
else
eval `echo args$i`="\"$arg\""
fi
i=$((i+1))
done
case $i in
(0) set -- ;;
(1) set -- "$args0" ;;
(2) set -- "$args0" "$args1" ;;
(3) set -- "$args0" "$args1" "$args2" ;;
(4) set -- "$args0" "$args1" "$args2" "$args3" ;;
(5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
(6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
(7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
(8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
(9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
esac
fi
# Escape application args
save () {
for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
echo " "
}
APP_ARGS=$(save "$@")
# Collect all arguments for the java command, following the shell quoting and substitution rules
eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
cd "$(dirname "$0")"
fi
exec "$JAVACMD" "$@"
================================================
FILE: example/android/gradlew.bat
================================================
@rem
@rem Copyright 2015 the original author or authors.
@rem
@rem Licensed under the Apache License, Version 2.0 (the "License");
@rem you may not use this file except in compliance with the License.
@rem You may obtain a copy of the License at
@rem
@rem http://www.apache.org/licenses/LICENSE-2.0
@rem
@rem Unless required by applicable law or agreed to in writing, software
@rem distributed under the License is distributed on an "AS IS" BASIS,
@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@rem See the License for the specific language governing permissions and
@rem limitations under the License.
@rem
@if "%DEBUG%" == "" @echo off
@rem ##########################################################################
@rem
@rem Gradle startup script for Windows
@rem
@rem ##########################################################################
@rem Set local scope for the variables with windows NT shell
if "%OS%"=="Windows_NT" setlocal
set DIRNAME=%~dp0
if "%DIRNAME%" == "" set DIRNAME=.
set APP_BASE_NAME=%~n0
set APP_HOME=%DIRNAME%
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
@rem Find java.exe
if defined JAVA_HOME goto findJavaFromJavaHome
set JAVA_EXE=java.exe
%JAVA_EXE% -version >NUL 2>&1
if "%ERRORLEVEL%" == "0" goto init
echo.
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
echo.
echo Please set the JAVA_HOME variable in your environment to match the
echo location of your Java installation.
goto fail
:findJavaFromJavaHome
set JAVA_HOME=%JAVA_HOME:"=%
set JAVA_EXE=%JAVA_HOME%/bin/java.exe
if exist "%JAVA_EXE%" goto init
echo.
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
echo.
echo Please set the JAVA_HOME variable in your environment to match the
echo location of your Java installation.
goto fail
:init
@rem Get command-line arguments, handling Windows variants
if not "%OS%" == "Windows_NT" goto win9xME_args
:win9xME_args
@rem Slurp the command line arguments.
set CMD_LINE_ARGS=
set _SKIP=2
:win9xME_args_slurp
if "x%~1" == "x" goto execute
set CMD_LINE_ARGS=%*
:execute
@rem Setup the command line
set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
@rem Execute Gradle
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
:end
@rem End local scope for the variables with windows NT shell
if "%ERRORLEVEL%"=="0" goto mainEnd
:fail
rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
rem the _cmd.exe /c_ return code!
if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
exit /b 1
:mainEnd
if "%OS%"=="Windows_NT" endlocal
:omega
================================================
FILE: example/android/settings.gradle
================================================
rootProject.name = 'example'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'
================================================
FILE: example/app.json
================================================
{
"name": "example",
"displayName": "example"
}
================================================
FILE: example/babel.config.js
================================================
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
================================================
FILE: example/index.js
================================================
/**
* @format
*/
import {AppRegistry} from 'react-native';
import App from './src';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
================================================
FILE: example/ios/Podfile
================================================
platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
target 'example' do
# Pods for example
pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
pod 'React', :path => '../node_modules/react-native/'
pod 'React-Core', :path => '../node_modules/react-native/'
pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'
pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon"
pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
target 'exampleTests' do
inherit! :search_paths
# Pods for testing
end
use_native_modules!
end
target 'example-tvOS' do
# Pods for example-tvOS
target 'example-tvOSTests' do
inherit! :search_paths
# Pods for testing
end
end
================================================
FILE: example/ios/example/AppDelegate.h
================================================
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#import <React/RCTBridgeDelegate.h>
#import <UIKit/UIKit.h>
@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
@property (nonatomic, strong) UIWindow *window;
@end
================================================
FILE: example/ios/example/AppDelegate.m
================================================
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#import "AppDelegate.h"
#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
moduleName:@"example"
initialProperties:nil];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;
}
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}
@end
================================================
FILE: example/ios/example/Base.lproj/LaunchScreen.xib
================================================
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="7702" systemVersion="14D136" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7701"/>
<capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
</dependencies>
<objects>
<placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
<placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
<view contentMode="scaleToFill" id="iN0-l3-epB">
<rect key="frame" x="0.0" y="0.0" width="480" height="480"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Powered by React Native" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
<rect key="frame" x="20" y="439" width="441" height="21"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="example" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
<rect key="frame" x="20" y="140" width="441" height="43"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
<constraints>
<constraint firstItem="kId-c2-rCX" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="bottom" multiplier="1/3" constant="1" id="5cJ-9S-tgC"/>
<constraint firstAttribute="centerX" secondItem="kId-c2-rCX" secondAttribute="centerX" id="Koa-jz-hwk"/>
<constraint firstAttribute="bottom" secondItem="8ie-xW-0ye" secondAttribute="bottom" constant="20" id="Kzo-t9-V3l"/>
<constraint firstItem="8ie-xW-0ye" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="MfP-vx-nX0"/>
<constraint firstAttribute="centerX" secondItem="8ie-xW-0ye" secondAttribute="centerX" id="ZEH-qu-HZ9"/>
<constraint firstItem="kId-c2-rCX" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="fvb-Df-36g"/>
</constraints>
<nil key="simulatedStatusBarMetrics"/>
<freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
<point key="canvasLocation" x="548" y="455"/>
</view>
</objects>
</document>
================================================
FILE: example/ios/example/Images.xcassets/AppIcon.appiconset/Contents.json
================================================
{
"images" : [
{
"idiom" : "iphone",
"size" : "29x29",
"scale" : "2x"
},
{
"idiom" : "iphone",
"size" : "29x29",
"scale" : "3x"
},
{
"idiom" : "iphone",
"size" : "40x40",
"scale" : "2x"
},
{
"idiom" : "iphone",
"size" : "40x40",
"scale" : "3x"
},
{
"idiom" : "iphone",
"size" : "60x60",
"scale" : "2x"
},
{
"idiom" : "iphone",
"size" : "60x60",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
================================================
FILE: example/ios/example/Images.xcassets/Contents.json
================================================
{
"info" : {
"version" : 1,
"author" : "xcode"
}
}
================================================
FILE: example/ios/example/Info.plist
================================================
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleDisplayName</key>
<string>Snap carousel</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>1</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
<key>NSLocationWhenInUseUsageDescription</key>
<string></string>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>
<array>
<string>armv7</string>
</array>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
</dict>
</plist>
================================================
FILE: example/ios/example/main.m
================================================
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#import <UIKit/UIKit.h>
#import "AppDelegate.h"
int main(int argc, char * argv[]) {
@autoreleasepool {
return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
}
}
================================================
FILE: example/ios/example-tvOS/Info.plist
================================================
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>1</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
<key>NSLocationWhenInUseUsageDescription</key>
<string></string>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>
<array>
<string>armv7</string>
</array>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
</dict>
</plist>
================================================
FILE: example/ios/example-tvOSTests/Info.plist
================================================
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>
<key>CFBundlePackageType</key>
<string>BNDL</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>1</string>
</dict>
</plist>
================================================
FILE: example/ios/example.xcodeproj/project.pbxproj
================================================
// !$*UTF8*$!
{
archiveVersion = 1;
classes = {
};
objectVersion = 46;
objects = {
/* Begin PBXBuildFile section */
00E356F31AD99517003FC87E /* exampleTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* exampleTests.m */; };
13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; };
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
29C871C0741732DA80D4A28B /* libPods-exampleTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 4E829CA22C7590836F0BDC89 /* libPods-exampleTests.a */; };
2D02E4BC1E0B4A80006451C7 /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
2D02E4BD1E0B4A84006451C7 /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
2D02E4BF1E0B4AB3006451C7 /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
2DCD954D1E0B4F2C00145EB5 /* exampleTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* exampleTests.m */; };
871938999323E775E1A601AA /* libPods-example-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = D7EE427033EF6DE8A18138AF /* libPods-example-tvOS.a */; };
B4AC6785CB63F44B1476B739 /* libPods-example-tvOSTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = D322FB106C50427D6E424A6B /* libPods-example-tvOSTests.a */; };
F272BF3BCAF6E9F45485CA12 /* libPods-example.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 2A1084C799FFD8DE81B1B05A /* libPods-example.a */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = {
isa = PBXContainerItemProxy;
containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */;
proxyType = 1;
remoteGlobalIDString = 13B07F861A680F5B00A75B9A;
remoteInfo = example;
};
2D02E4911E0B4A5D006451C7 /* PBXContainerItemProxy */ = {
isa = PBXContainerItemProxy;
containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */;
proxyType = 1;
remoteGlobalIDString = 2D02E47A1E0B4A5D006451C7;
remoteInfo = "example-tvOS";
};
/* End PBXContainerItemProxy section */
/* Begin PBXFileReference section */
008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = main.jsbundle; sourceTree = "<group>"; };
00E356EE1AD99517003FC87E /* exampleTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = exampleTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
00E356F21AD99517003FC87E /* exampleTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = exampleTests.m; sourceTree = "<group>"; };
0685F86383145C5CB4CDA68E /* Pods-exampleTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-exampleTests.release.xcconfig"; path = "Target Support Files/Pods-exampleTests/Pods-exampleTests.release.xcconfig"; sourceTree = "<group>"; };
11B0F93180450FD943C626DD /* Pods-example.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example.release.xcconfig"; path = "Target Support Files/Pods-example/Pods-example.release.xcconfig"; sourceTree = "<group>"; };
13B07F961A680F5B00A75B9A /* example.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = example.app; sourceTree = BUILT_PRODUCTS_DIR; };
13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = example/AppDelegate.h; sourceTree = "<group>"; };
13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = example/AppDelegate.m; sourceTree = "<group>"; };
13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = "<group>"; };
13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = example/Images.xcassets; sourceTree = "<group>"; };
13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = example/Info.plist; sourceTree = "<group>"; };
13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = example/main.m; sourceTree = "<group>"; };
2848D7646158208FFC51959F /* Pods-example-tvOS.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example-tvOS.release.xcconfig"; path = "Target Support Files/Pods-example-tvOS/Pods-example-tvOS.release.xcconfig"; sourceTree = "<group>"; };
2A1084C799FFD8DE81B1B05A /* libPods-example.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-example.a"; sourceTree = BUILT_PRODUCTS_DIR; };
2D02E47B1E0B4A5D006451C7 /* example-tvOS.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "example-tvOS.app"; sourceTree = BUILT_PRODUCTS_DIR; };
2D02E4901E0B4A5D006451C7 /* example-tvOSTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = "example-tvOSTests.xctest"; sourceTree = BUILT_PRODUCTS_DIR; };
4E829CA22C7590836F0BDC89 /* libPods-exampleTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-exampleTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
641D414720AFDDEC3EA337EC /* Pods-example-tvOSTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example-tvOSTests.debug.xcconfig"; path = "Target Support Files/Pods-example-tvOSTests/Pods-example-tvOSTests.debug.xcconfig"; sourceTree = "<group>"; };
66247520A490D5DB33BCE5DA /* Pods-example.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example.debug.xcconfig"; path = "Target Support Files/Pods-example/Pods-example.debug.xcconfig"; sourceTree = "<group>"; };
81EBEEC75A4C26459B97B278 /* Pods-example-tvOS.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example-tvOS.debug.xcconfig"; path = "Target Support Files/Pods-example-tvOS/Pods-example-tvOS.debug.xcconfig"; sourceTree = "<group>"; };
C67ED4B3CF798134625BA09B /* Pods-example-tvOSTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example-tvOSTests.release.xcconfig"; path = "Target Support Files/Pods-example-tvOSTests/Pods-example-tvOSTests.release.xcconfig"; sourceTree = "<group>"; };
C903D82C7E072C46D3D68139 /* Pods-exampleTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-exampleTests.debug.xcconfig"; path = "Target Support Files/Pods-exampleTests/Pods-exampleTests.debug.xcconfig"; sourceTree = "<group>"; };
D322FB106C50427D6E424A6B /* libPods-example-tvOSTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-example-tvOSTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
D7EE427033EF6DE8A18138AF /* libPods-example-tvOS.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-example-tvOS.a"; sourceTree = BUILT_PRODUCTS_DIR; };
ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
ED2971642150620600B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = Platforms/AppleTVOS.platform/Developer/SDKs/AppleTVOS12.0.sdk/System/Library/Frameworks/JavaScriptCore.framework; sourceTree = DEVELOPER_DIR; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
00E356EB1AD99517003FC87E /* Frameworks */ = {
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
29C871C0741732DA80D4A28B /* libPods-exampleTests.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
13B07F8C1A680F5B00A75B9A /* Frameworks */ = {
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
F272BF3BCAF6E9F45485CA12 /* libPods-example.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
2D02E4781E0B4A5D006451C7 /* Frameworks */ = {
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
871938999323E775E1A601AA /* libPods-example-tvOS.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
2D02E48D1E0B4A5D006451C7 /* Frameworks */ = {
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
B4AC6785CB63F44B1476B739 /* libPods-example-tvOSTests.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXFrameworksBuildPhase section */
/* Begin PBXGroup section */
00E356EF1AD99517003FC87E /* exampleTests */ = {
isa = PBXGroup;
children = (
00E356F21AD99517003FC87E /* exampleTests.m */,
00E356F01AD99517003FC87E /* Supporting Files */,
);
path = exampleTests;
sourceTree = "<group>";
};
00E356F01AD99517003FC87E /* Supporting Files */ = {
isa = PBXGroup;
children = (
00E356F11AD99517003FC87E /* Info.plist */,
);
name = "Supporting Files";
sourceTree = "<group>";
};
13B07FAE1A68108700A75B9A /* example */ = {
isa = PBXGroup;
children = (
008F07F21AC5B25A0029DE68 /* main.jsbundle */,
13B07FAF1A68108700A75B9A /* AppDelegate.h */,
13B07FB01A68108700A75B9A /* AppDelegate.m */,
13B07FB51A68108700A75B9A /* Images.xcassets */,
13B07FB61A68108700A75B9A /* Info.plist */,
13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
13B07FB71A68108700A75B9A /* main.m */,
);
name = example;
sourceTree = "<group>";
};
13F9C63D4CAF75CDA2D4380F /* Pods */ = {
isa = PBXGroup;
children = (
66247520A490D5DB33BCE5DA /* Pods-example.debug.xcconfig */,
11B0F93180450FD943C626DD /* Pods-example.release.xcconfig */,
81EBEEC75A4C26459B97B278 /* Pods-example-tvOS.debug.xcconfig */,
2848D7646158208FFC51959F /* Pods-example-tvOS.release.xcconfig */,
641D414720AFDDEC3EA337EC /* Pods-example-tvOSTests.debug.xcconfig */,
C67ED4B3CF798134625BA09B /* Pods-example-tvOSTests.release.xcconfig */,
C903D82C7E072C46D3D68139 /* Pods-exampleTests.debug.xcconfig */,
0685F86383145C5CB4CDA68E /* Pods-exampleTests.release.xcconfig */,
);
name = Pods;
path = Pods;
sourceTree = "<group>";
};
2D16E6871FA4F8E400B85C8A /* Frameworks */ = {
isa = PBXGroup;
children = (
ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
ED2971642150620600B7C4FE /* JavaScriptCore.framework */,
2A1084C799FFD8DE81B1B05A /* libPods-example.a */,
D7EE427033EF6DE8A18138AF /* libPods-example-tvOS.a */,
D322FB106C50427D6E424A6B /* libPods-example-tvOSTests.a */,
4E829CA22C7590836F0BDC89 /* libPods-exampleTests.a */,
);
name = Frameworks;
sourceTree = "<group>";
};
832341AE1AAA6A7D00B99B32 /* Libraries */ = {
isa = PBXGroup;
children = (
);
name = Libraries;
sourceTree = "<group>";
};
83CBB9F61A601CBA00E9B192 = {
isa = PBXGroup;
children = (
13B07FAE1A68108700A75B9A /* example */,
832341AE1AAA6A7D00B99B32 /* Libraries */,
00E356EF1AD99517003FC87E /* exampleTests */,
83CBBA001A601CBA00E9B192 /* Products */,
2D16E6871FA4F8E400B85C8A /* Frameworks */,
13F9C63D4CAF75CDA2D4380F /* Pods */,
);
indentWidth = 2;
sourceTree = "<group>";
tabWidth = 2;
usesTabs = 0;
};
83CBBA001A601CBA00E9B192 /* Products */ = {
isa = PBXGroup;
children = (
13B07F961A680F5B00A75B9A /* example.app */,
00E356EE1AD99517003FC87E /* exampleTests.xctest */,
2D02E47B1E0B4A5D006451C7 /* example-tvOS.app */,
2D02E4901E0B4A5D006451C7 /* example-tvOSTests.xctest */,
);
name = Products;
sourceTree = "<group>";
};
/* End PBXGroup section */
/* Begin PBXNativeTarget section */
00E356ED1AD99517003FC87E /* exampleTests */ = {
isa = PBXNativeTarget;
buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "exampleTests" */;
buildPhases = (
21B1CB7811DC630A464E9976 /* [CP] Check Pods Manifest.lock */,
00E356EA1AD99517003FC87E /* Sources */,
00E356EB1AD99517003FC87E /* Frameworks */,
00E356EC1AD99517003FC87E /* Resources */,
);
buildRules = (
);
dependencies = (
00E356F51AD99517003FC87E /* PBXTargetDependency */,
);
name = exampleTests;
productName = exampleTests;
productReference = 00E356EE1AD99517003FC87E /* exampleTests.xctest */;
productType = "com.apple.product-type.bundle.unit-test";
};
13B07F861A680F5B00A75B9A /* example */ = {
isa = PBXNativeTarget;
buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "example" */;
buildPhases = (
7B3F63962D923B5AC2EBFF6A /* [CP] Check Pods Manifest.lock */,
FD10A7F022414F080027D42C /* Start Packager */,
13B07F871A680F5B00A75B9A /* Sources */,
13B07F8C1A680F5B00A75B9A /* Frameworks */,
13B07F8E1A680F5B00A75B9A /* Resources */,
00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
);
buildRules = (
);
dependencies = (
);
name = example;
productName = example;
productReference = 13B07F961A680F5B00A75B9A /* example.app */;
productType = "com.apple.product-type.application";
};
2D02E47A1E0B4A5D006451C7 /* example-tvOS */ = {
isa = PBXNativeTarget;
buildConfigurationList = 2D02E4BA1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget "example-tvOS" */;
buildPhases = (
71AFCCE0B3908DB29062379D /* [CP] Check Pods Manifest.lock */,
FD10A7F122414F3F0027D42C /* Start Packager */,
2D02E4771E0B4A5D006451C7 /* Sources */,
2D02E4781E0B4A5D006451C7 /* Frameworks */,
2D02E4791E0B4A5D006451C7 /* Resources */,
2D02E4CB1E0B4B27006451C7 /* Bundle React Native Code And Images */,
);
buildRules = (
);
dependencies = (
);
name = "example-tvOS";
productName = "example-tvOS";
productReference = 2D02E47B1E0B4A5D006451C7 /* example-tvOS.app */;
productType = "com.apple.product-type.application";
};
2D02E48F1E0B4A5D006451C7 /* example-tvOSTests */ = {
isa = PBXNativeTarget;
buildConfigurationList = 2D02E4BB1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget "example-tvOSTests" */;
buildPhases = (
6C1FB4F89E984853D9133472 /* [CP] Check Pods Manifest.lock */,
2D02E48C1E0B4A5D006451C7 /* Sources */,
2D02E48D1E0B4A5D006451C7 /* Frameworks */,
2D02E48E1E0B4A5D006451C7 /* Resources */,
);
buildRules = (
);
dependencies = (
2D02E4921E0B4A5D006451C7 /* PBXTargetDependency */,
);
name = "example-tvOSTests";
productName = "example-tvOSTests";
productReference = 2D02E4901E0B4A5D006451C7 /* example-tvOSTests.xctest */;
productType = "com.apple.product-type.bundle.unit-test";
};
/* End PBXNativeTarget section */
/* Begin PBXProject section */
83CBB9F71A601CBA00E9B192 /* Project object */ = {
isa = PBXProject;
attributes = {
LastUpgradeCheck = 0940;
ORGANIZATIONNAME = Facebook;
TargetAttributes = {
00E356ED1AD99517003FC87E = {
CreatedOnToolsVersion = 6.2;
TestTargetID = 13B07F861A680F5B00A75B9A;
};
2D02E47A1E0B4A5D006451C7 = {
CreatedOnToolsVersion = 8.2.1;
ProvisioningStyle = Automatic;
};
2D02E48F1E0B4A5D006451C7 = {
CreatedOnToolsVersion = 8.2.1;
ProvisioningStyle = Automatic;
TestTargetID = 2D02E47A1E0B4A5D006451C7;
};
};
};
buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "example" */;
compatibilityVersion = "Xcode 3.2";
developmentRegion = English;
hasScannedForEncodings = 0;
knownRegions = (
en,
Base,
);
mainGroup = 83CBB9F61A601CBA00E9B192;
productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
projectDirPath = "";
projectRoot = "";
targets = (
13B07F861A680F5B00A75B9A /* example */,
00E356ED1AD99517003FC87E /* exampleTests */,
2D02E47A1E0B4A5D006451C7 /* example-tvOS */,
2D02E48F1E0B4A5D006451C7 /* example-tvOSTests */,
);
};
/* End PBXProject section */
/* Begin PBXResourcesBuildPhase section */
00E356EC1AD99517003FC87E /* Resources */ = {
isa = PBXResourcesBuildPhase;
buildActionMask = 2147483647;
files = (
);
runOnlyForDeploymentPostprocessing = 0;
};
13B07F8E1A680F5B00A75B9A /* Resources */ = {
isa = PBXResourcesBuildPhase;
buildActionMask = 2147483647;
files = (
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
2D02E4791E0B4A5D006451C7 /* Resources */ = {
isa = PBXResourcesBuildPhase;
buildActionMask = 2147483647;
files = (
2D02E4BD1E0B4A84006451C7 /* Images.xcassets in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
2D02E48E1E0B4A5D006451C7 /* Resources */ = {
isa = PBXResourcesBuildPhase;
buildActionMask = 2147483647;
files = (
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXResourcesBuildPhase section */
/* Begin PBXShellScriptBuildPhase section */
00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputPaths = (
);
name = "Bundle React Native code and images";
outputPaths = (
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
};
21B1CB7811DC630A464E9976 /* [CP] Check Pods Manifest.lock */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputFileListPaths = (
);
inputPaths = (
"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
"${PODS_ROOT}/Manifest.lock",
);
name = "[CP] Check Pods Manifest.lock";
outputFileListPaths = (
);
outputPaths = (
"$(DERIVED_FILE_DIR)/Pods-exampleTests-checkManifestLockResult.txt",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
showEnvVarsInLog = 0;
};
2D02E4CB1E0B4B27006451C7 /* Bundle React Native Code And Images */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputPaths = (
);
name = "Bundle React Native Code And Images";
outputPaths = (
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
};
6C1FB4F89E984853D9133472 /* [CP] Check Pods Manifest.lock */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputFileListPaths = (
);
inputPaths = (
"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
"${PODS_ROOT}/Manifest.lock",
);
name = "[CP] Check Pods Manifest.lock";
outputFileListPaths = (
);
outputPaths = (
"$(DERIVED_FILE_DIR)/Pods-example-tvOSTests-checkManifestLockResult.txt",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
showEnvVarsInLog = 0;
};
71AFCCE0B3908DB29062379D /* [CP] Check Pods Manifest.lock */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputFileListPaths = (
);
inputPaths = (
"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
"${PODS_ROOT}/Manifest.lock",
);
name = "[CP] Check Pods Manifest.lock";
outputFileListPaths = (
);
outputPaths = (
"$(DERIVED_FILE_DIR)/Pods-example-tvOS-checkManifestLockResult.txt",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
showEnvVarsInLog = 0;
};
7B3F63962D923B5AC2EBFF6A /* [CP] Check Pods Manifest.lock */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputFileListPaths = (
);
inputPaths = (
"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
"${PODS_ROOT}/Manifest.lock",
);
name = "[CP] Check Pods Manifest.lock";
outputFileListPaths = (
);
outputPaths = (
"$(DERIVED_FILE_DIR)/Pods-example-checkManifestLockResult.txt",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
showEnvVarsInLog = 0;
};
FD10A7F022414F080027D42C /* Start Packager */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputFileListPaths = (
);
inputPaths = (
);
name = "Start Packager";
outputFileListPaths = (
);
outputPaths = (
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n exit 2\n fi\n else\n open \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n fi\nfi\n";
showEnvVarsInLog = 0;
};
FD10A7F122414F3F0027D42C /* Start Packager */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputFileListPaths = (
);
inputPaths = (
);
name = "Start Packager";
outputFileListPaths = (
);
outputPaths = (
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n exit 2\n fi\n else\n open \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n fi\nfi\n";
showEnvVarsInLog = 0;
};
/* End PBXShellScriptBuildPhase section */
/* Begin PBXSourcesBuildPhase section */
00E356EA1AD99517003FC87E /* Sources */ = {
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
00E356F31AD99517003FC87E /* exampleTests.m in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
13B07F871A680F5B00A75B9A /* Sources */ = {
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
13B07FC11A68108700A75B9A /* main.m in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
2D02E4771E0B4A5D006451C7 /* Sources */ = {
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
2D02E4BF1E0B4AB3006451C7 /* main.m in Sources */,
2D02E4BC1E0B4A80006451C7 /* AppDelegate.m in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
2D02E48C1E0B4A5D006451C7 /* Sources */ = {
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
2DCD954D1E0B4F2C00145EB5 /* exampleTests.m in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXSourcesBuildPhase section */
/* Begin PBXTargetDependency section */
00E356F51AD99517003FC87E /* PBXTargetDependency */ = {
isa = PBXTargetDependency;
target = 13B07F861A680F5B00A75B9A /* example */;
targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */;
};
2D02E4921E0B4A5D006451C7 /* PBXTargetDependency */ = {
isa = PBXTargetDependency;
target = 2D02E47A1E0B4A5D006451C7 /* example-tvOS */;
targetProxy = 2D02E4911E0B4A5D006451C7 /* PBXContainerItemProxy */;
};
/* End PBXTargetDependency section */
/* Begin PBXVariantGroup section */
13B07FB11A68108700A75B9A /* LaunchScreen.xib */ = {
isa = PBXVariantGroup;
children = (
13B07FB21A68108700A75B9A /* Base */,
);
name = LaunchScreen.xib;
path = example;
sourceTree = "<group>";
};
/* End PBXVariantGroup section */
/* Begin XCBuildConfiguration section */
00E356F61AD99517003FC87E /* Debug */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = C903D82C7E072C46D3D68139 /* Pods-exampleTests.debug.xcconfig */;
buildSettings = {
BUNDLE_LOADER = "$(TEST_HOST)";
GCC_PREPROCESSOR_DEFINITIONS = (
"DEBUG=1",
"$(inherited)",
);
INFOPLIST_FILE = exampleTests/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 9.0;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
OTHER_LDFLAGS = (
"-ObjC",
"-lc++",
"$(inherited)",
);
PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
PRODUCT_NAME = "$(TARGET_NAME)";
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/example.app/example";
};
name = Debug;
};
00E356F71AD99517003FC87E /* Release */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = 0685F86383145C5CB4CDA68E /* Pods-exampleTests.release.xcconfig */;
buildSettings = {
BUNDLE_LOADER = "$(TEST_HOST)";
COPY_PHASE_STRIP = NO;
INFOPLIST_FILE = exampleTests/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 9.0;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
OTHER_LDFLAGS = (
"-ObjC",
"-lc++",
"$(inherited)",
);
PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
PRODUCT_NAME = "$(TARGET_NAME)";
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/example.app/example";
};
name = Release;
};
13B07F941A680F5B00A75B9A /* Debug */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = 66247520A490D5DB33BCE5DA /* Pods-example.debug.xcconfig */;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CURRENT_PROJECT_VERSION = 1;
DEAD_CODE_STRIPPING = NO;
INFOPLIST_FILE = example/Info.plist;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
OTHER_LDFLAGS = (
"$(inherited)",
"-ObjC",
"-lc++",
);
PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
PRODUCT_NAME = example;
VERSIONING_SYSTEM = "apple-generic";
};
name = Debug;
};
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = 11B0F93180450FD943C626DD /* Pods-example.release.xcconfig */;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CURRENT_PROJECT_VERSION = 1;
INFOPLIST_FILE = example/Info.plist;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
OTHER_LDFLAGS = (
"$(inherited)",
"-ObjC",
"-lc++",
);
PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
PRODUCT_NAME = example;
VERSIONING_SYSTEM = "apple-generic";
};
name = Release;
};
2D02E4971E0B4A5E006451C7 /* Debug */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = 81EBEEC75A4C26459B97B278 /* Pods-example-tvOS.debug.xcconfig */;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = "App Icon & Top Shelf Image";
ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;
CLANG_ANALYZER_NONNULL = YES;
CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
CLANG_WARN_INFINITE_RECURSION = YES;
CLANG_WARN_SUSPICIOUS_MOVE = YES;
DEBUG_INFORMATION_FORMAT = dwarf;
ENABLE_TESTABILITY = YES;
GCC_NO_COMMON_BLOCKS = YES;
INFOPLIST_FILE = "example-tvOS/Info.plist";
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
OTHER_LDFLAGS = (
"$(inherited)",
"-ObjC",
"-lc++",
);
PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.REACT.example-tvOS";
PRODUCT_NAME = "$(TARGET_NAME)";
SDKROOT = appletvos;
TARGETED_DEVICE_FAMILY = 3;
TVOS_DEPLOYMENT_TARGET = 9.2;
};
name = Debug;
};
2D02E4981E0B4A5E006451C7 /* Release */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = 2848D7646158208FFC51959F /* Pods-example-tvOS.release.xcconfig */;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = "App Icon & Top Shelf Image";
ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;
CLANG_ANALYZER_NONNULL = YES;
CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
CLANG_WARN_INFINITE_RECURSION = YES;
CLANG_WARN_SUSPICIOUS_MOVE = YES;
COPY_PHASE_STRIP = NO;
DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
GCC_NO_COMMON_BLOCKS = YES;
INFOPLIST_FILE = "example-tvOS/Info.plist";
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
OTHER_LDFLAGS = (
"$(inherited)",
"-ObjC",
"-lc++",
);
PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.REACT.example-tvOS";
PRODUCT_NAME = "$(TARGET_NAME)";
SDKROOT = appletvos;
TARGETED_DEVICE_FAMILY = 3;
TVOS_DEPLOYMENT_TARGET = 9.2;
};
name = Release;
};
2D02E4991E0B4A5E006451C7 /* Debug */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = 641D414720AFDDEC3EA337EC /* Pods-example-tvOSTests.debug.xcconfig */;
buildSettings = {
BUNDLE_LOADER = "$(TEST_HOST)";
CLANG_ANALYZER_NONNULL = YES;
CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
CLANG_WARN_INFINITE_RECURSION = YES;
CLANG_WARN_SUSPICIOUS_MOVE = YES;
DEBUG_INFORMATION_FORMAT = dwarf;
ENABLE_TESTABILITY = YES;
GCC_NO_COMMON_BLOCKS = YES;
INFOPLIST_FILE = "example-tvOSTests/Info.plist";
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
OTHER_LDFLAGS = (
"$(inherited)",
"-ObjC",
"-lc++",
);
PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.REACT.example-tvOSTests";
PRODUCT_NAME = "$(TARGET_NAME)";
SDKROOT = appletvos;
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/example-tvOS.app/example-tvOS";
TVOS_DEPLOYMENT_TARGET = 10.1;
};
name = Debug;
};
2D02E49A1E0B4A5E006451C7 /* Release */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = C67ED4B3CF798134625BA09B /* Pods-example-tvOSTests.release.xcconfig */;
buildSettings = {
BUNDLE_LOADER = "$(TEST_HOST)";
CLANG_ANALYZER_NONNULL = YES;
CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
CLANG_WARN_INFINITE_RECURSION = YES;
CLANG_WARN_SUSPICIOUS_MOVE = YES;
COPY_PHASE_STRIP = NO;
DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
GCC_NO_COMMON_BLOCKS = YES;
INFOPLIST_FILE = "example-tvOSTests/Info.plist";
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
OTHER_LDFLAGS = (
"$(inherited)",
"-ObjC",
"-lc++",
);
PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.REACT.example-tvOSTests";
PRODUCT_NAME = "$(TARGET_NAME)";
SDKROOT = appletvos;
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/example-tvOS.app/example-tvOS";
TVOS_DEPLOYMENT_TARGET = 10.1;
};
name = Release;
};
83CBBA201A601CBA00E9B192 /* Debug */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_COMMA = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INFINITE_RECURSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
CLANG_WARN_STRICT_PROTOTYPES = YES;
CLANG_WARN_SUSPICIOUS_MOVE = YES;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
COPY_PHASE_STRIP = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
ENABLE_TESTABILITY = YES;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_DYNAMIC_NO_PIC = NO;
GCC_NO_COMMON_BLOCKS = YES;
GCC_OPTIMIZATION_LEVEL = 0;
GCC_PREPROCESSOR_DEFINITIONS = (
"DEBUG=1",
"$(inherited)",
);
GCC_SYMBOLS_PRIVATE_EXTERN = NO;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
IPHONEOS_DEPLOYMENT_TARGET = 9.0;
MTL_ENABLE_DEBUG_INFO = YES;
ONLY_ACTIVE_ARCH = YES;
SDKROOT = iphoneos;
};
name = Debug;
};
83CBBA211A601CBA00E9B192 /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_COMMA = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INFINITE_RECURSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
CLANG_WARN_STRICT_PR
gitextract_ds1vvi6k/
├── .eslintrc
├── .gitignore
├── .npmignore
├── CHANGELOG.md
├── CONTRIBUTING.md
├── ISSUE_TEMPLATE.md
├── LICENSE
├── PULL_REQUEST_TEMPLATE.md
├── README.md
├── doc/
│ ├── CUSTOM_INTERPOLATIONS.md
│ ├── KNOWN_ISSUES.md
│ ├── PAGINATION.md
│ ├── PARALLAX_IMAGE.md
│ ├── PROPS_METHODS_AND_GETTERS.md
│ ├── TIPS_AND_TRICKS.md
│ └── VERSION_4.md
├── example/
│ ├── .buckconfig
│ ├── .flowconfig
│ ├── .gitattributes
│ ├── .gitignore
│ ├── .prettierrc.js
│ ├── .watchmanconfig
│ ├── __tests__/
│ │ └── index.js
│ ├── android/
│ │ ├── .project
│ │ ├── .settings/
│ │ │ └── org.eclipse.buildship.core.prefs
│ │ ├── app/
│ │ │ ├── _BUCK
│ │ │ ├── build.gradle
│ │ │ ├── build_defs.bzl
│ │ │ ├── debug.keystore
│ │ │ ├── proguard-rules.pro
│ │ │ └── src/
│ │ │ ├── debug/
│ │ │ │ └── AndroidManifest.xml
│ │ │ └── main/
│ │ │ ├── AndroidManifest.xml
│ │ │ ├── java/
│ │ │ │ └── com/
│ │ │ │ └── example/
│ │ │ │ ├── MainActivity.java
│ │ │ │ └── MainApplication.java
│ │ │ └── res/
│ │ │ └── values/
│ │ │ ├── strings.xml
│ │ │ └── styles.xml
│ │ ├── build.gradle
│ │ ├── gradle/
│ │ │ └── wrapper/
│ │ │ ├── gradle-wrapper.jar
│ │ │ └── gradle-wrapper.properties
│ │ ├── gradle.properties
│ │ ├── gradlew
│ │ ├── gradlew.bat
│ │ └── settings.gradle
│ ├── app.json
│ ├── babel.config.js
│ ├── index.js
│ ├── ios/
│ │ ├── Podfile
│ │ ├── example/
│ │ │ ├── AppDelegate.h
│ │ │ ├── AppDelegate.m
│ │ │ ├── Base.lproj/
│ │ │ │ └── LaunchScreen.xib
│ │ │ ├── Images.xcassets/
│ │ │ │ ├── AppIcon.appiconset/
│ │ │ │ │ └── Contents.json
│ │ │ │ └── Contents.json
│ │ │ ├── Info.plist
│ │ │ └── main.m
│ │ ├── example-tvOS/
│ │ │ └── Info.plist
│ │ ├── example-tvOSTests/
│ │ │ └── Info.plist
│ │ ├── example.xcodeproj/
│ │ │ ├── project.pbxproj
│ │ │ └── xcshareddata/
│ │ │ └── xcschemes/
│ │ │ ├── example-tvOS.xcscheme
│ │ │ └── example.xcscheme
│ │ ├── example.xcworkspace/
│ │ │ └── contents.xcworkspacedata
│ │ └── exampleTests/
│ │ ├── Info.plist
│ │ └── exampleTests.m
│ ├── metro.config.js
│ ├── package.json
│ └── src/
│ ├── components/
│ │ └── SliderEntry.js
│ ├── index.js
│ ├── static/
│ │ └── entries.js
│ ├── styles/
│ │ ├── SliderEntry.style.js
│ │ └── index.style.js
│ └── utils/
│ └── animations.js
├── package.json
└── src/
├── carousel/
│ └── Carousel.js
├── index.js
├── pagination/
│ ├── Pagination.js
│ ├── Pagination.style.js
│ └── PaginationDot.js
├── parallaximage/
│ ├── ParallaxImage.js
│ └── ParallaxImage.style.js
└── utils/
└── animations.js
SYMBOL INDEX (145 symbols across 13 files)
FILE: example/android/app/src/main/java/com/example/MainActivity.java
class MainActivity (line 5) | public class MainActivity extends ReactActivity {
method getMainComponentName (line 11) | @Override
FILE: example/android/app/src/main/java/com/example/MainApplication.java
class MainApplication (line 13) | public class MainApplication extends Application implements ReactApplica...
method getUseDeveloperSupport (line 17) | @Override
method getPackages (line 22) | @Override
method getJSMainModuleName (line 31) | @Override
method getReactNativeHost (line 37) | @Override
method onCreate (line 42) | @Override
method initializeFlipper (line 54) | private static void initializeFlipper(Context context) {
FILE: example/src/components/SliderEntry.js
class SliderEntry (line 7) | class SliderEntry extends Component {
method image (line 16) | get image () {
method render (line 37) | render () {
FILE: example/src/index.js
constant IS_ANDROID (line 11) | const IS_ANDROID = Platform.OS === 'android';
constant SLIDER_1_FIRST_ITEM (line 12) | const SLIDER_1_FIRST_ITEM = 1;
class example (line 14) | class example extends Component {
method constructor (line 16) | constructor (props) {
method _renderItem (line 23) | _renderItem ({item, index}) {
method _renderItemWithParallax (line 27) | _renderItemWithParallax ({item, index}, parallaxProps) {
method _renderLightItem (line 38) | _renderLightItem ({item, index}) {
method _renderDarkItem (line 42) | _renderDarkItem ({item, index}) {
method mainExample (line 46) | mainExample (number, title) {
method momentumExample (line 89) | momentumExample (number, title) {
method layoutExample (line 115) | layoutExample (number, title, type) {
method customExample (line 135) | customExample (number, title, refNumber, renderItemFunc) {
method gradient (line 158) | get gradient () {
method render (line 169) | render () {
FILE: example/src/static/entries.js
constant ENTRIES1 (line 1) | const ENTRIES1 = [
constant ENTRIES2 (line 34) | const ENTRIES2 = [
FILE: example/src/styles/SliderEntry.style.js
constant IS_IOS (line 4) | const IS_IOS = Platform.OS === 'ios';
function wp (line 7) | function wp (percentage) {
FILE: example/src/utils/animations.js
function scrollInterpolator1 (line 4) | function scrollInterpolator1 (index, carouselProps) {
function animatedStyles1 (line 11) | function animatedStyles1 (index, animatedValue, carouselProps) {
function scrollInterpolator2 (line 45) | function scrollInterpolator2 (index, carouselProps) {
function animatedStyles2 (line 52) | function animatedStyles2 (index, animatedValue, carouselProps) {
function scrollInterpolator3 (line 89) | function scrollInterpolator3 (index, carouselProps) {
function animatedStyles3 (line 96) | function animatedStyles3 (index, animatedValue, carouselProps) {
function scrollInterpolator4 (line 123) | function scrollInterpolator4 (index, carouselProps) {
function animatedStyles4 (line 130) | function animatedStyles4 (index, animatedValue, carouselProps) {
FILE: src/carousel/Carousel.js
constant IS_IOS (line 15) | const IS_IOS = Platform.OS === 'ios';
constant IS_RTL (line 26) | const IS_RTL = I18nManager.isRTL;
class Carousel (line 28) | class Carousel extends Component {
method constructor (line 105) | constructor (props) {
method componentDidMount (line 174) | componentDidMount () {
method shouldComponentUpdate (line 206) | shouldComponentUpdate (nextProps, nextState) {
method componentDidUpdate (line 214) | componentDidUpdate (prevProps) {
method componentWillUnmount (line 270) | componentWillUnmount () {
method realIndex (line 282) | get realIndex () {
method currentIndex (line 286) | get currentIndex () {
method currentScrollPosition (line 290) | get currentScrollPosition () {
method _setScrollHandler (line 294) | _setScrollHandler(props) {
method _needsScrollView (line 324) | _needsScrollView () {
method _needsRTLAdaptations (line 329) | _needsRTLAdaptations () {
method _canLockScroll (line 334) | _canLockScroll () {
method _enableLoop (line 339) | _enableLoop () {
method _shouldAnimateSlides (line 344) | _shouldAnimateSlides (props = this.props) {
method _shouldUseCustomAnimation (line 355) | _shouldUseCustomAnimation () {
method _shouldUseShiftLayout (line 360) | _shouldUseShiftLayout () {
method _shouldUseStackLayout (line 365) | _shouldUseStackLayout () {
method _shouldUseTinderLayout (line 369) | _shouldUseTinderLayout () {
method _getCustomData (line 373) | _getCustomData (props = this.props) {
method _getCustomDataLength (line 407) | _getCustomDataLength (props = this.props) {
method _getCustomIndex (line 418) | _getCustomIndex (index, props = this.props) {
method _getDataIndex (line 428) | _getDataIndex (index) {
method _getPositionIndex (line 467) | _getPositionIndex (index) {
method _getFirstItem (line 472) | _getFirstItem (index, props = this.props) {
method _getWrappedRef (line 483) | _getWrappedRef () {
method _getScrollEnabled (line 495) | _getScrollEnabled () {
method _setScrollEnabled (line 499) | _setScrollEnabled (scrollEnabled = true) {
method _getKeyExtractor (line 512) | _getKeyExtractor (item, index) {
method _getScrollOffset (line 516) | _getScrollOffset (event) {
method _getContainerInnerMargin (line 522) | _getContainerInnerMargin (opposite = false) {
method _getViewportOffset (line 536) | _getViewportOffset () {
method _getCenter (line 550) | _getCenter (offset) {
method _getActiveItem (line 554) | _getActiveItem (offset) {
method _initPositionsAndInterpolators (line 574) | _initPositionsAndInterpolators (props = this.props) {
method _getSlideAnimation (line 625) | _getSlideAnimation (index, toValue) {
method _playCustomSlideAnimation (line 654) | _playCustomSlideAnimation (current, next) {
method _hackActiveSlideAnimation (line 684) | _hackActiveSlideAnimation (index, goTo, force = false) {
method _lockScroll (line 708) | _lockScroll () {
method _releaseScroll (line 717) | _releaseScroll () {
method _repositionScroll (line 722) | _repositionScroll (index) {
method _scrollTo (line 742) | _scrollTo (offset, animated = true) {
method _onScroll (line 768) | _onScroll (event) {
method _onStartShouldSetResponderCapture (line 830) | _onStartShouldSetResponderCapture (event) {
method _onTouchStart (line 840) | _onTouchStart () {
method _onTouchEnd (line 853) | _onTouchEnd () {
method _onScrollBeginDrag (line 867) | _onScrollBeginDrag (event) {
method _onScrollEndDrag (line 885) | _onScrollEndDrag (event) {
method _onMomentumScrollEnd (line 898) | _onMomentumScrollEnd (event) {
method _onScrollEnd (line 910) | _onScrollEnd (event) {
method _onTouchRelease (line 943) | _onTouchRelease (event) {
method _onLayout (line 954) | _onLayout (event) {
method _snapScroll (line 970) | _snapScroll (delta) {
method _snapToItem (line 1003) | _snapToItem (index, animated = true, fireCallback = true, initial = fa...
method _onBeforeSnap (line 1072) | _onBeforeSnap (index) {
method _onSnap (line 1083) | _onSnap (index) {
method startAutoplay (line 1094) | startAutoplay () {
method pauseAutoPlay (line 1113) | pauseAutoPlay () {
method stopAutoplay (line 1120) | stopAutoplay () {
method snapToItem (line 1125) | snapToItem (index, animated = true, fireCallback = true) {
method snapToNext (line 1139) | snapToNext (animated = true, fireCallback = true) {
method snapToPrev (line 1152) | snapToPrev (animated = true, fireCallback = true) {
method triggerRenderingHack (line 1166) | triggerRenderingHack (offset) {
method _getSlideInterpolatedStyle (line 1181) | _getSlideInterpolatedStyle (index, animatedValue) {
method _renderItem (line 1197) | _renderItem ({ item, index }) {
method _getComponentOverridableProps (line 1243) | _getComponentOverridableProps () {
method _getComponentStaticProps (line 1285) | _getComponentStaticProps () {
method render (line 1344) | render () {
FILE: src/pagination/Pagination.js
constant IS_IOS (line 7) | const IS_IOS = Platform.OS === 'ios';
constant IS_RTL (line 8) | const IS_RTL = I18nManager.isRTL;
class Pagination (line 10) | class Pagination extends PureComponent {
method constructor (line 48) | constructor (props) {
method _needsRTLAdaptations (line 72) | _needsRTLAdaptations () {
method _activeDotIndex (line 77) | get _activeDotIndex () {
method dots (line 82) | get dots () {
method render (line 140) | render () {
FILE: src/pagination/Pagination.style.js
constant DEFAULT_DOT_SIZE (line 3) | const DEFAULT_DOT_SIZE = 7;
constant DEFAULT_DOT_COLOR (line 4) | const DEFAULT_DOT_COLOR = 'rgba(0, 0, 0, 0.75)';
FILE: src/pagination/PaginationDot.js
class PaginationDot (line 6) | class PaginationDot extends PureComponent {
method constructor (line 23) | constructor (props) {
method componentDidMount (line 32) | componentDidMount () {
method componentDidUpdate (line 38) | componentDidUpdate (prevProps) {
method _animate (line 44) | _animate (toValue = 0) {
method _shouldAnimateColor (line 77) | get _shouldAnimateColor () {
method render (line 82) | render () {
FILE: src/parallaximage/ParallaxImage.js
class ParallaxImage (line 8) | class ParallaxImage extends Component {
method constructor (line 43) | constructor (props) {
method setNativeProps (line 57) | setNativeProps (nativeProps) {
method componentDidMount (line 61) | componentDidMount () {
method componentWillUnmount (line 69) | componentWillUnmount () {
method _measureLayout (line 73) | _measureLayout () {
method _onLoad (line 108) | _onLoad (event) {
method _onError (line 134) | _onError (event) {
method image (line 144) | get image () {
method spinner (line 192) | get spinner () {
method render (line 207) | render () {
FILE: src/utils/animations.js
constant IS_ANDROID (line 3) | const IS_ANDROID = Platform.OS === 'android';
function getInputRangeFromIndexes (line 15) | function getInputRangeFromIndexes (range, index, carouselProps) {
function defaultScrollInterpolator (line 29) | function defaultScrollInterpolator (index, carouselProps) {
function defaultAnimatedStyles (line 36) | function defaultAnimatedStyles (index, animatedValue, carouselProps) {
function shiftAnimatedStyles (line 69) | function shiftAnimatedStyles (index, animatedValue, carouselProps) {
function stackScrollInterpolator (line 116) | function stackScrollInterpolator (index, carouselProps) {
function stackAnimatedStyles (line 125) | function stackAnimatedStyles (index, animatedValue, carouselProps, cardO...
function tinderScrollInterpolator (line 207) | function tinderScrollInterpolator (index, carouselProps) {
function tinderAnimatedStyles (line 216) | function tinderAnimatedStyles (index, animatedValue, carouselProps, card...
Condensed preview — 79 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (331K chars).
[
{
"path": ".eslintrc",
"chars": 949,
"preview": "{\n \"parser\" : \"babel-eslint\",\n \"extends\" : [\n \"standard\",\n \"standard-react\"\n ],\n \"plugins\":"
},
{
"path": ".gitignore",
"chars": 47,
"preview": "node_modules\n\n#LOCK\npackage-lock.json\nyarn.lock"
},
{
"path": ".npmignore",
"chars": 51,
"preview": "/example\n/node_modules\npackage-lock.json\nyarn.lock\n"
},
{
"path": "CHANGELOG.md",
"chars": 16401,
"preview": "## v3.9.1\n\n* Fix for `getNode()` deprecation warning with RN `0.62+` (thanks [@r0b0t3d](https://github.com/r0b0t3d))\n\n##"
},
{
"path": "CONTRIBUTING.md",
"chars": 2174,
"preview": ":warning: **From now on, users that don't adhere to the following guidelines when submitting an issue will see it closed"
},
{
"path": "ISSUE_TEMPLATE.md",
"chars": 5470,
"preview": "<!--\n MAKE SURE TO READ AND FOLLOW THIS TEMPLATE CLOSELY OR YOUR ISSUE WILL BE CLOSED WITHOUT NOTICE\n-->\n\n### Is this a"
},
{
"path": "LICENSE",
"chars": 1510,
"preview": "BSD 3-Clause License\n\nCopyright (c) 2021, Meliorence\nAll rights reserved.\n\nRedistribution and use in source and binary f"
},
{
"path": "PULL_REQUEST_TEMPLATE.md",
"chars": 1898,
"preview": "### Platforms affected\n\n\n### What does this PR do?\n\n\n### What testing has been done on this change?\n\n\n### Tested feature"
},
{
"path": "README.md",
"chars": 12883,
"preview": "# react-native-snap-carousel\n\n![platforms](https://img.shields.io/badge/platforms-Android%20%7C%20iOS-brightgreen.svg?st"
},
{
"path": "doc/CUSTOM_INTERPOLATIONS.md",
"chars": 16746,
"preview": "# Implementing custom interpolations\n\n> :warning: **This guide describes an advanced feature that is not intended for th"
},
{
"path": "doc/KNOWN_ISSUES.md",
"chars": 8124,
"preview": "# Known issues\n\n## Table of contents\n\n1. [`FlatList` and `ScrollView`'s limitations](#flatlist-and-scrollviews-limitatio"
},
{
"path": "doc/PAGINATION.md",
"chars": 5938,
"preview": "# `<Pagination />` component\n\nStarting with version `2.4.0`, a customizable `<Pagination />` component has been added. T"
},
{
"path": "doc/PARALLAX_IMAGE.md",
"chars": 6100,
"preview": "# `<ParallaxImage />` component\n\nVersion `3.0.0` introduced a `<ParallaxImage />` component, an image component aware of"
},
{
"path": "doc/PROPS_METHODS_AND_GETTERS.md",
"chars": 14003,
"preview": "# Props, methods and getters\n\n## Table of contents\n\n1. [Props](#props)\n * [Required](#required)\n * [Behavior](#beh"
},
{
"path": "doc/TIPS_AND_TRICKS.md",
"chars": 15020,
"preview": "# Tips and tricks\n\n## Table of contents\n\n1. [Optimizing performance](#optimizing-performance)\n1. [Momentum](#momentum)\n1"
},
{
"path": "doc/VERSION_4.md",
"chars": 4648,
"preview": "# A shiny new version is on its way!\n\n\n\n## 💡 Wh"
},
{
"path": "example/.buckconfig",
"chars": 114,
"preview": "\n[android]\n target = Google Inc.:Google APIs:23\n\n[maven_repositories]\n central = https://repo1.maven.org/maven2\n"
},
{
"path": "example/.flowconfig",
"chars": 2113,
"preview": "[ignore]\n; We fork some components by platform\n.*/*[.]android.js\n\n; Ignore \"BUCK\" generated dirs\n<PROJECT_ROOT>/\\.buckd/"
},
{
"path": "example/.gitattributes",
"chars": 16,
"preview": "*.pbxproj -text\n"
},
{
"path": "example/.gitignore",
"chars": 813,
"preview": "# OSX\n#\n.DS_Store\n\n# Xcode\n#\nbuild/\n*.pbxuser\n!default.pbxuser\n*.mode1v3\n!default.mode1v3\n*.mode2v3\n!default.mode2v3\n*.p"
},
{
"path": "example/.prettierrc.js",
"chars": 120,
"preview": "module.exports = {\n bracketSpacing: false,\n jsxBracketSameLine: true,\n singleQuote: true,\n trailingComma: 'all',\n};\n"
},
{
"path": "example/.watchmanconfig",
"chars": 2,
"preview": "{}"
},
{
"path": "example/__tests__/index.js",
"chars": 274,
"preview": "/**\n * @format\n */\n\nimport 'react-native';\nimport React from 'react';\nimport Root from '../src/index';\n\n// Note: test re"
},
{
"path": "example/android/.project",
"chars": 433,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<projectDescription>\n\t<name>android</name>\n\t<comment>Project android created by B"
},
{
"path": "example/android/.settings/org.eclipse.buildship.core.prefs",
"chars": 54,
"preview": "connection.project.dir=\neclipse.preferences.version=1\n"
},
{
"path": "example/android/app/_BUCK",
"chars": 1308,
"preview": "# To learn about Buck see [Docs](https://buckbuild.com/).\n# To run your application with Buck:\n# - install Buck\n# - `npm"
},
{
"path": "example/android/app/build.gradle",
"chars": 7952,
"preview": "apply plugin: \"com.android.application\"\n\nimport com.android.build.OutputFile\n\n/**\n * The react.gradle file registers a t"
},
{
"path": "example/android/app/build_defs.bzl",
"chars": 602,
"preview": "\"\"\"Helper definitions to glob .aar and .jar targets\"\"\"\n\ndef create_aar_targets(aarfiles):\n for aarfile in aarfiles:\n "
},
{
"path": "example/android/app/proguard-rules.pro",
"chars": 435,
"preview": "# Add project specific ProGuard rules here.\n# By default, the flags in this file are appended to flags specified\n# in /u"
},
{
"path": "example/android/app/src/debug/AndroidManifest.xml",
"chars": 368,
"preview": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\"\n xmlns:to"
},
{
"path": "example/android/app/src/main/AndroidManifest.xml",
"chars": 969,
"preview": "<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\"\n package=\"com.example\">\n\n <uses-permission andr"
},
{
"path": "example/android/app/src/main/java/com/example/MainActivity.java",
"chars": 341,
"preview": "package com.example;\n\nimport com.facebook.react.ReactActivity;\n\npublic class MainActivity extends ReactActivity {\n\n /**"
},
{
"path": "example/android/app/src/main/java/com/example/MainApplication.java",
"chars": 2274,
"preview": "package com.example;\n\nimport android.app.Application;\nimport android.content.Context;\nimport com.facebook.react.PackageL"
},
{
"path": "example/android/app/src/main/res/values/strings.xml",
"chars": 70,
"preview": "<resources>\n <string name=\"app_name\">example</string>\n</resources>\n"
},
{
"path": "example/android/app/src/main/res/values/styles.xml",
"chars": 246,
"preview": "<resources>\n\n <!-- Base application theme. -->\n <style name=\"AppTheme\" parent=\"Theme.AppCompat.Light.NoActionBar\">"
},
{
"path": "example/android/build.gradle",
"chars": 999,
"preview": "// Top-level build file where you can add configuration options common to all sub-projects/modules.\n\nbuildscript {\n e"
},
{
"path": "example/android/gradle/wrapper/gradle-wrapper.properties",
"chars": 200,
"preview": "distributionBase=GRADLE_USER_HOME\ndistributionPath=wrapper/dists\ndistributionUrl=https\\://services.gradle.org/distributi"
},
{
"path": "example/android/gradle.properties",
"chars": 910,
"preview": "# Project-wide Gradle settings.\n\n# IDE (e.g. Android Studio) users:\n# Gradle settings configured through the IDE *will o"
},
{
"path": "example/android/gradlew",
"chars": 5916,
"preview": "#!/usr/bin/env sh\n\n#\n# Copyright 2015 the original author or authors.\n#\n# Licensed under the Apache License, Version 2.0"
},
{
"path": "example/android/gradlew.bat",
"chars": 2941,
"preview": "@rem\r\n@rem Copyright 2015 the original author or authors.\r\n@rem\r\n@rem Licensed under the Apache License, Version 2.0 (th"
},
{
"path": "example/android/settings.gradle",
"chars": 191,
"preview": "rootProject.name = 'example'\napply from: file(\"../node_modules/@react-native-community/cli-platform-android/native_modul"
},
{
"path": "example/app.json",
"chars": 51,
"preview": "{\n \"name\": \"example\",\n \"displayName\": \"example\"\n}"
},
{
"path": "example/babel.config.js",
"chars": 77,
"preview": "module.exports = {\n presets: ['module:metro-react-native-babel-preset'],\n};\n"
},
{
"path": "example/index.js",
"chars": 183,
"preview": "/**\n * @format\n */\n\nimport {AppRegistry} from 'react-native';\nimport App from './src';\nimport {name as appName} from './"
},
{
"path": "example/ios/Podfile",
"chars": 2767,
"preview": "platform :ios, '9.0'\nrequire_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'\n\ntarget "
},
{
"path": "example/ios/example/AppDelegate.h",
"chars": 386,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "example/ios/example/AppDelegate.m",
"chars": 1412,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "example/ios/example/Base.lproj/LaunchScreen.xib",
"chars": 3710,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<document type=\"com.apple.InterfaceBuilder3.CocoaTouch.XIB\" versi"
},
{
"path": "example/ios/example/Images.xcassets/AppIcon.appiconset/Contents.json",
"chars": 585,
"preview": "{\n \"images\" : [\n {\n \"idiom\" : \"iphone\",\n \"size\" : \"29x29\",\n \"scale\" : \"2x\"\n },\n {\n \"idiom\""
},
{
"path": "example/ios/example/Images.xcassets/Contents.json",
"chars": 63,
"preview": "{\n \"info\" : {\n \"version\" : 1,\n \"author\" : \"xcode\"\n }\n}\n"
},
{
"path": "example/ios/example/Info.plist",
"chars": 1599,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/P"
},
{
"path": "example/ios/example/main.m",
"chars": 390,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "example/ios/example-tvOS/Info.plist",
"chars": 1489,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/P"
},
{
"path": "example/ios/example-tvOSTests/Info.plist",
"chars": 765,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/P"
},
{
"path": "example/ios/example.xcodeproj/project.pbxproj",
"chars": 39969,
"preview": "// !$*UTF8*$!\n{\n\tarchiveVersion = 1;\n\tclasses = {\n\t};\n\tobjectVersion = 46;\n\tobjects = {\n\n/* Begin PBXBuildFile section *"
},
{
"path": "example/ios/example.xcodeproj/xcshareddata/xcschemes/example-tvOS.xcscheme",
"chars": 4986,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<Scheme\n LastUpgradeVersion = \"0940\"\n version = \"1.3\">\n <BuildAction\n "
},
{
"path": "example/ios/example.xcodeproj/xcshareddata/xcschemes/example.xcscheme",
"chars": 4921,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<Scheme\n LastUpgradeVersion = \"0940\"\n version = \"1.3\">\n <BuildAction\n "
},
{
"path": "example/ios/example.xcworkspace/contents.xcworkspacedata",
"chars": 225,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<Workspace\n version = \"1.0\">\n <FileRef\n location = \"group:example.xcodep"
},
{
"path": "example/ios/exampleTests/Info.plist",
"chars": 733,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/P"
},
{
"path": "example/ios/exampleTests/exampleTests.m",
"chars": 1975,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "example/metro.config.js",
"chars": 300,
"preview": "/**\n * Metro configuration for React Native\n * https://github.com/facebook/react-native\n *\n * @format\n */\n\nmodule.export"
},
{
"path": "example/package.json",
"chars": 659,
"preview": "{\n \"name\": \"example\",\n \"version\": \"0.61.5\",\n \"private\": true,\n \"scripts\": {\n \"android\": \"react-native run-android"
},
{
"path": "example/src/components/SliderEntry.js",
"chars": 2455,
"preview": "import React, { Component } from 'react';\nimport { View, Text, Image, TouchableOpacity } from 'react-native';\nimport Pro"
},
{
"path": "example/src/index.js",
"chars": 8372,
"preview": "import React, { Component } from 'react';\nimport { Platform, View, ScrollView, Text, StatusBar, SafeAreaView } from 'rea"
},
{
"path": "example/src/static/entries.js",
"chars": 2116,
"preview": "export const ENTRIES1 = [\n {\n title: 'Beautiful and dramatic Antelope Canyon',\n subtitle: 'Lorem ipsum "
},
{
"path": "example/src/styles/SliderEntry.style.js",
"chars": 2758,
"preview": "import { StyleSheet, Dimensions, Platform } from 'react-native';\nimport { colors } from './index.style';\n\nconst IS_IOS ="
},
{
"path": "example/src/styles/index.style.js",
"chars": 1545,
"preview": "import { StyleSheet } from 'react-native';\n\nexport const colors = {\n black: '#1a1917',\n gray: '#888888',\n backg"
},
{
"path": "example/src/utils/animations.js",
"chars": 5758,
"preview": "import { getInputRangeFromIndexes } from 'react-native-snap-carousel';\n\n// Photo album effect\nfunction scrollInterpolato"
},
{
"path": "package.json",
"chars": 1821,
"preview": "{\n \"name\": \"react-native-snap-carousel\",\n \"version\": \"3.9.1\",\n \"description\": \"Swiper/carousel component for Re"
},
{
"path": "src/carousel/Carousel.js",
"chars": 48503,
"preview": "import React, { Component } from 'react';\nimport { Animated, Easing, FlatList, I18nManager, Platform, ScrollView, View, "
},
{
"path": "src/index.js",
"chars": 302,
"preview": "import Carousel from './carousel/Carousel';\nimport Pagination from './pagination/Pagination';\nimport ParallaxImage from "
},
{
"path": "src/pagination/Pagination.js",
"chars": 5545,
"preview": "import React, { PureComponent } from 'react';\nimport { I18nManager, Platform, View, ViewPropTypes } from 'react-native';"
},
{
"path": "src/pagination/Pagination.style.js",
"chars": 637,
"preview": "import { StyleSheet } from 'react-native';\n\nconst DEFAULT_DOT_SIZE = 7;\nconst DEFAULT_DOT_COLOR = 'rgba(0, 0, 0, 0.75)';"
},
{
"path": "src/pagination/PaginationDot.js",
"chars": 4767,
"preview": "import React, { PureComponent } from 'react';\nimport { View, Animated, Easing, TouchableOpacity, ViewPropTypes } from 'r"
},
{
"path": "src/parallaximage/ParallaxImage.js",
"chars": 7001,
"preview": "// Parallax effect inspired by https://github.com/oblador/react-native-parallax/\n\nimport React, { Component } from 'reac"
},
{
"path": "src/parallaximage/ParallaxImage.style.js",
"chars": 453,
"preview": "import { StyleSheet } from 'react-native';\n\nexport default StyleSheet.create({\n container: {\n overflow: 'hidde"
},
{
"path": "src/utils/animations.js",
"chars": 11915,
"preview": "import { Platform } from 'react-native';\n\nconst IS_ANDROID = Platform.OS === 'android';\n\n// Get scroll interpolator's in"
}
]
// ... and 2 more files (download for full content)
About this extraction
This page contains the full source code of the meliorence/react-native-snap-carousel GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 79 files (305.5 KB), approximately 79.9k tokens, and a symbol index with 145 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.