brentvatne / stargrave-0 Goto Github PK

Not sure if this should be updated so the warning:

Unable to resolve module merge from /Users/grabbou/Repositories/ExplosiveTitles/este-native/node_modules/react-native-modal/Modal.ios.js

is no longer present, at least in 0.7

Would be nice to have an option to pass in a stylesheet to use, or maybe there's a better way.. Just leaving this here to think about

just a suggestion :)

I'm trying to do transition like in UIActionSheet when modal window come from bottom (i.e. height from 0 to about 200). How to achieve it? I'm trying

transition('height', {duration: 250, begin: 0, end: 200});

But it decrease height of underlying background, not modal itself.

Hi. Thanks for this module. For my use case, I am overriding styles.modal so that the modal body container is transparent and fills the view: {position:'absolute', left:0, right:0, top:0, bottom:0}. I have buttons inside the container. The problem I have is that I need pointerEvents="box-none" set on the modal body container, so that touch events pass through, to allow a backdropPress to close the modal.

The renderBody() method could use this.props.modalPointerEvents or maybe better, check for a flag like this.props.hideModalContainer.

If don't set 'customCloseButton', will don't display 'Close' button.

In our Modal we have a <ListView> inside it, with a set height. With forceToFront set to false, the list scrolls correctly. However, when we set forceToFront to true, the list no longer scrolls.

Internally, a ListView is implemented as a ScrollView containing Views, so I suspect the issue is actually with the ScrollView.

I've already PR'ed customShowHandler property - https://github.com/voronianski/react-native-modal/blob/master/Modal.ios.js#L22 though I think that we need the hide one as well.. But there is a small problem with animating absence:

Here's the code that I propose (similar to componentDidUpdate but vice versa):

  componentWillUpdate(nextProps) {
    var { isVisible, customHideHandler } = this.props;
    var willBeVisible = nextProps.isVisible;
    var nodeRef = this.refs['this'];

    if (!willBeVisible && isVisible) {
        if (customHideHandler) {
            return customHideHandler(nodeRef);
        } else {
            Animation.startAnimation(nodeRef, 300, 0, 'easeInOutQuad', {opacity: 0});
        }
    }
  }

However there's no surprise that this doesn't animate hiding cause render creates new empty view - https://github.com/brentvatne/react-native-modal/blob/master/Modal.ios.js#L46.

I would like to hear your ideas for such case.

Hi there,
I'm looking forward to using this as I want to show a DatePicker only when the user has selected that field and will launch your Modal view and put it in there.

But I can't get it to work - specially the onPress event never fires (iOS Simulator and my physical device) so the modal doesn't open using your example code. To make this as clean as possible I did the following:

• react-native init App
• npm install react-native-model --save //in the node_modules directory
• overwrote the index.ios.js code with your code from the front of your repo - README.md.
• Ran it. It starts fine, I see the Open Modal text. When I click on it (or 'press' on it on my physical device), nothing happens.

What am I missing?

Some dependencies are installed outside react-native-modal module but the RNModal.xcodeproj is looking for it inside. As a workaround, I manually entered into /node_modules/react-native-modal and did an npm install. Any solution?

Situation on iPhone 6 :

On iPhone 4 :

Instead of closing the modal absolutely, is it possible to put the modal to have a default absolute positioned bottom value?

For eg:

Here the more options may slide up the modal a little more to reveal more options between the button the the text.

Wondering if react-native-modal is the right option for something complex like this. Or is react-native-overlay a option or something else?

• should be optional
• possibility to have separate animation
• onPress handler as property

As discussed in facebook/react-native#688 there currently is no way to have a component overlay NavigatorIOS from just JavaScript - this would require dipping into Objective C. It seems like some of the options are:

• Add the view as a subview to the UINavigationController view
• Add the view as a subview of the root view

I wasn't able to get this working in my experiments - it still appeared below the navbar. Help is appreciated!

An alternative approach is to just use react-nativate-navbar

The Blur dependency needs updated to 0.5.0 so that is will work with RN 0.5.0. I would submit a PR for this, but I simply don't have the time at the moment.

123

Like the following:

Add it to your project

Run npm install react-native-modal --save
Open your project in XCode, right click on Libraries and click Add Files to "Your Project Name" (Screenshot) then choose the RNModal.xcodeproj (Screenshot) .
Add libRNModal.a to Build Phases -> Link Binary With Libraries (Screenshot).
var Modal = require('react-native-modal');
At the bottom of your app, add the element and use its isVisible prop to toggle visibility. It needs to be at the bottom so that it appears above all other components when it is visible. If you use the forceToFront prop, then the position in the component tree does not matter at all - put it wherever you like.

Thanks!

123

Makes it quite tricky to inspect views in a modal. I am not using forceToFront.

If you look at native apps, the transparent background of a modal never slides in, like with this component, but it fades in. The modal itself does slide in.

With this component a black background slides in from the bottom, which feels very broken from a UI point of view.

Went through the steps described. The files are written to the correct location, but I'm getting this message.

flow: Error running command cd "/Users/chris/myapp/src/react-ios/myapp" && flow --json --timeout 20:

{"status":500,"message":"Flow found type errors. If you think these are wrong, make sure your flow bin and .flowconfig are up to date, or disable with --skipflow.","type":"FlowError","errors":[{"description":"E1: \nFailure("internal error: package /Users/chris/myapp/src/react-ios/myapp/node_modules/react-native-modal/node_modules/react-native-overlay/package.json not found")","filename":"/Users/chris/myapp/src/react-ios/myapp/node_modules/react-native-modal/Modal.ios.js","lineNumber":0,"column":0}]}

What's strange is that there is a file at this path: /Users/chris/myapp/src/react-ios/myapp/node_modules/react-native-modal/node_modules/react-native-overlay/package.json

backdrop doesn't work now, content is not shown...

It would be great to have this component available for Android

When installed as a dependency of another project, dependencies may not be within a node_modules subdirectory. This causes problems for the build phase steps that expect the overlay and blur modules to be in subdirectories.

Sadly I don't know enough about Xcode to figure out how to get it to look in multiple places for those files.

I'm trying to use the modal and have it go full screen. Unfortunately, I have a UINavigationBar outside of the ReactView which is causing problems. It seems as though it is taking the size of the ReactView rather than the main view.

Any ideas on how to approach this issue?

Hi, I tried installing and afterwards my app just went white. I even tried removing the files and rolling back my app's local git and it's still just white.. Something to do with NPM? / versioning?

For example for adding new items and similar.
I was actually able to display buttons (TouchableHighlight), text inputs, text components. But have problem when I want to do something on button press. function is executed immediately when app starts and not when i press button. Any ideas?
Thank you!

Hello,

I was using your plugin and this is very good plugin. I am facing one problem while using webView into Modal popup.

Text Field in webView need double tap to open keyboard when we use webView into Modal popup. This works fine when we use same webView in simple view.

Thanks in advance...

I was trying to do

import Modal from 'react-native-modal' or simply var Modal = require('react-native-modal')

and I got the following error messages

Wondering what might be the problem? My RN is 0.31.0. RN-modal version is 0.4.0

I'm getting errors when I try to install this module using npm 4.0. Anyone know how to fix it? Here are the errors:

npm ERR! Darwin 14.5.0
npm ERR! argv "/usr/local/Cellar/node/0.12.7_1/bin/node" "/usr/local/bin/npm" "install" "react-native-modal" "--save"
npm ERR! node v4.0.0
npm ERR! npm v2.14.2
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react-native@>=0.4.3
npm ERR! peerinvalid Peer [email protected] wants react-native@^0.11.4

Just thought you should know that the screenshot links on the readme aren't working.

I put together http://reactnativemodules.com last night and added your module. It's a community run list of react native modules. Hopefully it will make finding projects like these easier. Am I missing any that you know of?

For example, we have some input field in Modal, when we focus on this field, a keyboard will popup and overlay the Modal. We can't see input field and this is bad.

Is it possible for Modal automatically scroll up to show the input field currently focused?

If, by any chance (in my case it was a mistake), two the same Views are in the routes stack and one of them is inactive, when the modal is activated, it appears as many times as number of scenes that contain it in the stack. Not something I'd expected to happen imo. All works well tough, the only drawback is the semi-transparent background gets darker and darker with the number of modals activated.

I'm trying to use a number of components inside a Modal. Components such as react-native-share, react-native-menu. They fail because their respective UI popups show up behind the Modal.

I wonder if there's a good way to deal with this, both inside react-native as a UI developer and for the guys creating these components.

Pulled the code out of here for a more generic use case (https://github.com/brentvatne/react-native-overlay), might as well just use that here.

Sorry, wrong repo. Too many conflicts, I am getting confused 💃

due to breaking changes in https://github.com/facebook/react-native/releases/tag/v0.4.3