Code Monkey home page Code Monkey logo

react-native-root-modal's Introduction

react-native-root-modal npm version


Features

  1. Pure javascript solution, easy to install.
  2. Support both React element way and javascript class way to invoke, easy to use.
  3. Inherited from <View /> you can set your own style or animation or anything you can do with View.
  4. redux support.

Breaking changes

5.x

From 5.x redux support is not enabled by default. The redux support can be enabled by setting a redux context wrapper.

import { setSiblingWrapper } from 'react-native-root-siblings';
import { Provider } from 'react-redux';

// const store = ... get store;

// Call this before using redux context inside RootSiblings.
setSiblingWrapper((sibling) => <Provider store={store}>{sibling}</Provider>);

Install

npm install react-native-root-modal

Usage

Import library any where inside your code before AppRegistry.registerComponent is called.

import Modal, { AnimatedModal, ModalManager } from 'react-native-root-modal';

Invoked by React element way.

....other elements before
<Modal
    style={{
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.2)',
        transform: [{scale: this.state.scaleAnimation}]
    }}

    visible={this.state.modalVisible}
>
    ... You can add anything inside
</Modal>
....other elements after

Just put <Modal /> element anywhere, And it will be front of other elements. And you can set <Modal /> element`s style or other properties inherited from <View /> element

Or you can invoke it by JavaScript class way

Import modal Manager class.

import { ModalManager } from 'react-native-root-modal';

Invoke it.

// Create a Modal element on screen.
let modal = new ModalManager(<View style={modal container style}>
    ...modal contents here.
</View>);

// Update (replace) the modal element which is already existed.
modal.update(<View style={modal container style}>
    ...other modal contents here.
</View>);

// Destroy it
modal.destroy();

Example

IOS


Example

Android


Example

Notice

Modal element created by this library can`t cover other native Modal elements,like: Official Modal Element

react-native-root-modal's People

Contributors

friederbluemle avatar haozhang-grabtaxi avatar jigfox avatar magicismight avatar sunnylqm avatar

Stargazers

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

Watchers

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

react-native-root-modal's Issues

How to get auto focused element (TouchableHighlight) inside the opened modal?

Hi

I have two questions?

  1. How to get focus on the Touchable component when the modal is opened.
    or example:
    Let's create a modal from a TouchableHighlight
<TouchableHighlight onPress={()=>{
  let modal = new ModalManager(<View style={modal container style}>
    <TouchableHighlight><Text>Button 1</Text></TouchableHighlight>
    <TouchableHighlight><Text>Button 2</Text></TouchableHighlight>
  </View>);
}}>
  <Text>Open Modal</Text>
</TouchableHighlight>

If there is no a touch screen, but the user has a physical keyboard, d-pad or TV Remote,
How Can we make the Button 1 to get auto focussed when the modal is opened?

  1. How can we force the focus to stay inside the modal?
    React-native have an excellent ability to move the focus between touchable components with
    D-pad, TV Remote or physical Keyboard (arrows), but the opened modal behaves like a part of the parent. It should be like a trully modal

best regards

can't find the modal

npm install成功之后,确定node_modals目录中有该模块
运行报错
Unable to resolve module react-native/Libraries/EventEmitter/EventEmitter from /Users/weiyang/Documents/guahao/react-native-app/reactNativeApp/node_modules/react-native-root-siblings/lib/AppRegistryInjection.js: Module does not exist in the module map

react-native 版本 0.49.3

How to get focus on the Touchable component when the modal is opened?

Hi
Exscuse me for the duplicate post, I made a mistake

I have two questions?

  1. How to get focus on the Touchable component when the modal is opened.
    for example:
    Let's create a modal from a TouchableHighlight
<TouchableHighlight onPress={()=>{
  let modal = new ModalManager(<View style={modal container style}>
    <TouchableHighlight><Text>Button 1</Text></TouchableHighlight>
    <TouchableHighlight><Text>Button 2</Text></TouchableHighlight>
  </View>);
}}>
  <Text>Open Modal</Text>
</TouchableHighlight>

If there is no a touch screen, but the user has a physical keyboard, d-pad or TV Remote,
How Can we make the Button 1 to get auto focussed when the modal is opened?

  1. How can we force the focus to stay inside the modal?
    React-native have an excellent ability to move the focus between touchable components with
    D-pad, TV Remote or physical Keyboard (arrows), but the opened modal behaves like a part of the parent. It should be like a trully modal

best regards

Better name would be "region-modal"

The reason I needed this module is becasue the native <Modal> covers the entire screen and does not allow "click through" via "pointerEvents". So your module is excellent, because i can create a modal in just a section/region of the screen. I am trying to create an autocomplete dialog, and it is important to keep everything else around it interactable:

So maybe we should mention somewhere in docs this is not a "full screen modal" but it can be, depending on the styling. Maybe even call this module "react-native-region-modal". I spent a long time searching, but the solution was this module which I had come across first, but did not realize it did what I needed. I thought it was fullscreen just like native <Modal>

Breaking changes in v 1.4.0

My version of RN is 0.44.1 and have dependency to "react-native-root-modal": "^1.4.0", -> install 1.6.0 now and I have remove ^

but dependency to react-native-root-siblings v.1.3.0 is broken (don't have this patch magicismight/react-native-root-siblings@91f7e85)

this library react-native-root-modal v.1.4.0 include it in node_modules folder (wrong again) and have dependency to react-native-root-siblings v.1.2.1 (this version include the fix for RN EventEmitter)

UnableToResolveError: Unable to resolve module `react-native/Libraries/vendor/emitter/EventEmitter` from `/home/stanimir/structmedia/app-develop/node_modules/react-native-root-modal/node_modules/react-native-root-siblings/lib/AppRegistryInjection.js`: Module does not exist in the module map or in these directories:
  /home/stanimir/structmedia/app-develop/node_modules/react-native-root-modal/node_modules/react-native/Libraries/vendor/emitter

npm install react-native-root-modal

npm install the react-native-root-modal !!!
This command cannot be used to package.json add the react-native-root-modal, should use npm install react-native-root-modal --save.
不能使用npm install the react-native-root-modal 因为这个指令不能添加到package.json中,多人开发会有问题! 应该使用npm install the react-native-root-modal --save

Possibility to have a default setup of the overlay (floating modal?)

Is it possible to put the modal to have a default absolute positioned bottom value?

For eg:
Alt text

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-root-modal is the right option for something complex like this. Or something else?

the modal doesn't appear

I use it as this:

<Modal visible={this.state.modalVisible} style={{

                           top: 0,
                           right: 0,
                           bottom: 0,
                           left: 0,
                           justifyContent: 'center',
                           alignItems: 'center',
                           backgroundColor: 'rgba(0, 0, 0, 0)'}}>
         
           <View  style={{
                   borderRadius: 5,
                   alignItems: 'center',
                   padding:15,
                   backgroundColor: 'rgba(0, 0, 0, 0.5)'}}  >

                         <ActivityIndicator
                              color="#fff"
                              animating={true}
                              size="small"
                           />
               </View>

the visible has changed from false to true,but the modal cann't appear;but I change the this.state.modalVisible to true,it can appear...

can anyone help me ??
thx.

android:Emulator API 23,
react-native:0.43

报错 这个东西 用不了

Detected a division by zero in Animated.divide node

-[RCTDivisionAnimatedNode performUpdate]
RCTDivisionAnimatedNode.m:25
-[RCTAnimatedNode updateNodeIfNecessary]
-[RCTAnimatedNode updateNodeIfNecessary]
-[RCTAnimatedNode updateNodeIfNecessary]
-[RCTAnimatedNode updateNodeIfNecessary]
__49-[RCTNativeAnimatedNodesManager updateAnimations]_block_invoke
-[__NSDictionaryM enumerateKeysAndObjectsWithOptions:usingBlock:]
-[RCTNativeAnimatedNodesManager updateAnimations]
__56-[RCTNativeAnimatedModule uiManagerWillPerformMounting:]_block_invoke.93
__44-[RCTUIManager flushUIBlocksWithCompletion:]_block_invoke
__44-[RCTUIManager flushUIBlocksWithCompletion:]_block_invoke.461
__RCTExecuteOnMainQueue_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
main
start

"Import before AppRegistry.registerComponent"

Does this still hold true? I tested it by importing it in a place before AppRegistery.registerComponent and it seems to work fine.

But if we do have to import it, as I dont use Modal in that file, is it ok we import it like this:

import { AppRegistry } from 'react-native'
import 'react-native-root-modal' // i added this, is this ok, instead of `import Modal from 'react-native-root-modal'`
import App from './App'

AppRegistry.registerComponent('trustedfamily', () => App)

Watchman breaks

After installing this module, when I executed react-native start, I got watchman error: poison-inotify-add-watch.

If I remove this module, if works fine.
Do I need additional setup?

React native : 0.40.0

Parent state change not affect modal props.

Hi, I have used your modal and it is a very nice component. I am very glad to your work.

I find one issue when my component state changes it not change my modal props.

Simply I need this functionality.

  1. Display all countries list.
  2. On click, the country needs to show town list.
  3. I have made my logic done but when I use that in modal it not working as aspected.

The town is not expanding on click country, but after close and open modal that country town displays, same for hiding also.

I hope you get my point. If you have any query ask me.

Thank you.

PropTypes deprecated

Since proptypes are now moved to separate package, maybe it is a good idea to reflect changes in this package?

Problem using Redux with the modal

Thank you for your library. It's very useful. I am having a problem when I try to use the connect method of React-redux like this:

import { connect } from 'react-redux';

class SignModal extends Component {
   ...
}

export default connect()(SignModal);

The SignModal is shown by Login Screen which is part of :

const App = () => (
    <Provider store={store}>
        <StackNav />
    </Provider>
);

AppRegistry.registerComponent('MyApp', () => App);

but I have the following error:

screen shot 2017-05-10 at 8 39 47 am

Any clue why this is happening? I have this error only when I use the react-native-root-modal

modal don't dismiss

when press hardware back on android, trigger an event to hide modal, first time it's ok, then reopen the modal, then hide modal fail!

How do I use animation and custom style

It doesn't seem like there is any props for me to choose between different styles. The only thing I can use right now is the simple one.
Can you please tell me what I need to do to use other styles?

Recommend Projects

  • React photo React

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

  • Vue.js photo Vue.js

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

  • Typescript photo Typescript

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

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

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

Recommend Topics

  • javascript

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

  • web

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

  • server

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

  • Machine learning

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

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

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

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.