ggomaeng / react-native-card-modal

A pure javascript card modal for React Native framework.

react-native-card-modal

A pure javascript card modal for React Native framework.

Sponsored by Spurwing

This repo is sponsored by Spurwing, where their API Makes Adding Scheduling Quick, Reliable and Scalable.

• Scheduling API
• Enterprise Scheduling API
• Scheduling API for Business
• Scheduling and Calendar Management API
• Booking API

Check them out here!

Disclaimer

Thank you guys for all the love! Just pointing out--this was my first animation project, and it's probably not most suitable for production. Once I get more comfortable with Animated library and understand how to optimize the code better, I will refactor the code and publish a library for use ...or maybe somebody can contribute and actually create this into a library.

[BUG] This is not suitable for use on Android, since there seems to be a bug on react-native's Android layout. Not recommended for production!

inspiration

Demo

Try it out

Try it with Exponent: https://getexponent.com/@sungwoopark95/react-native-card-modal

Run it locally

To install, there are two steps:

1. Install Exponent XDE following this guide. Also install the Exponent app on your phone if you want to test it on your device, otherwise you don't need to do anything for the simulator.
2. Clone this repo and run npm install

git clone https://github.com/ggomaeng/react-native-card-modal.git cardmodal

cd cardmodal
npm install

3. Open the project with Exponent XDE and run it.

The MIT License (MIT)

Copyright © 2016 Sung Woo Park

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

react-native-card-modal's Issues

sdf

Navigation back button doesn't work

Hi!
Cool stuff. Just FYI on my iOS OS version 10.1.1 the back button does not work. You can get back to the main list after activating a card.

expo code

Im new to expo!So can you share the expo intergation on this app and you expo code doesnt work online in there app!
Please update the code.

Animation onPress

I need to find a way to capture the onPress event when opening the modal ( for exemple, hide the menu ). I try to use TouchableWithoutFeedback but it's not working.

help me I not run project !!! because error

Unable to scroll after expanding the card

I am trying this on my mobile phone.

Please check out the video

Issues found

• After expanding the card, I am unable to scroll
• The description in the card is half-cut and I'm unable to scroll with-in the expanded card
• No way to come out of the expanded card, only way is to exit the app

I actually saw a warning which I don't see it anymore. I am really sorry, I couldn't capture it at that point of time. The warning was like - The top-most component should be...

Can you put apk file please

Cannot push to remote branch

It seems to create remote branch is not allowed now.
Could you change the setting so that people can contribute this repo?

Can't run the project.

Hey man! awesome stuff but I cant run the project even after i npm install everything.

It gives me this error (node:2424) DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead. (node:2424) DeprecationWarning: Using Buffer without newwill soon stop working. Usenew Buffer(), or preferably Buffer.from(), Buffer.allocUnsafe()orBuffer.alloc()` instead.

ENOENT: no such file or directory, uv_chdir`

Does not work on React Native 0.50

I am now using React Native 0.50, and the Image can not contain any children components anymore. How do we fix this issue?

The <Image> component cannot contain children. If you want to render content on top of the image, consider using absolute positioning.

I can see on the card-modal.js file, we have an Animated.Image and there is an inside component

{back}

How do we solve this? Thank you.

Possibility of this actually becoming a Lib?

Really love this idea, you mentioned that you are planning to turn this into a lib - is that and android support still in the pipelines?

Back button an Android doesn't appear