FoldingCell impl in JavaScript.
This project was inspired by the FoldingCell animation seen on Dribbble. To learn more, check out the article on Medium: Implementing FoldView in React Native.
Feel free to reach out to me on Twitter @jmurzy.
The example app from the GIF in the README can be found at examples/Simple. You can also view it with Exponent.
$ npm install --save react-native-foldview$ yarn add react-native-foldview| Prop | Type | Description |
|---|---|---|
children |
ReactElement<any> |
React Element(s) to render. |
flipDuration |
?number |
Length of flip animation in milliseconds. Default 280. |
renderBackface |
() => ReactElement<any> |
Callback that renders a backface. |
renderFrontface |
() => ReactElement<any> |
Callback that renders a frontface. |
renderLoading |
?() => ReactElement<any> |
Callback that renders a temporary view to display before base layout occurs. If not provided, renderFrontface is used instead. |
The following props can only be set on the root FoldView.
| Prop | Type | Description |
|---|---|---|
collapse |
?(foldviews: Array<FoldView>) => Promise |
Called when FoldView should collapse allowing you to have control over which FoldViews(s) to collapse. Default behavior is to wait until a FoldView is collapsed before collapsing the next one. |
expand |
?(foldviews: Array<FoldView>) => Promise |
Called when FoldView should expand allowing you to have control over which FoldView(s) to expand. Default behavior is to wait until a FoldView is expanded before expanding the next one. |
expanded |
boolean |
Allows you to expand and collapse the FoldView content. |
onAnimatationEnd |
?() => void |
Called when a collapse animation ends. |
onAnimatationStart |
?() => void |
Called before an expand animation starts. |
perspective |
?number |
Defines the space within which the 3D animation occurs. |
This library heavily depends on the overflow style property. Unfortunately, overflow defaults to hidden on Android and cannot be changed. Although it looks like a possible fix is in the making, currently, FoldingView is only supported on iOS.
Contributions are very welcome: bug fixes, features, documentation, tests. Just make sure the CI is 👌.
#### HackingUnfortunately, React Native packager does not support symlinking so you cannot use npm link when hacking on this library. You can learn more about that, here.
The library code is specified as a [local dependency](local dependency) in the example's package.json. In order to hack on the library code, you need to sync it into examples/Simple/node_modules. To do so, run:
npm run watchThis will automatically watch the src directory and sync your changes into examples/Simple/node_modules every time something changes.