CODEWITHSUNDEEP
react-nativemodal-dialogtouchableopacity
Boss Nass
Boss Nass

Reputation: 3522

react native modal not opening

I am trying to launch a modal on a simple click of a button, but for whatever reason the modal doesn't appear to be launching

import React, { PropTypes } from 'react'
import { View, Alert, ScrollView, Text, Modal, TouchableHighlight } from 'react-native'
import { connect } from 'react-redux'
import Actions from '../Actions/Creators'
import { Actions as NavigationActions } from 'react-native-router-flux'
import CartRow from '../Components/CartRow'
import CartTotal from '../Components/CartTotal'
import RoundedButton from '../Components/RoundedButton'

// Styles
import styles from './Styles/CartAndCheckoutStyle'

class CartAndCheckout extends React.Component {

   constructor (props) {
     super(props)
     this.state = {
       modalVisible: false
     }
   }

   setModalVisible(visible) {
     this.setState({modalVisible: visible});
     console.log(visible)
   }

   static propTypes = {
     items: PropTypes.array,
   }

  render () {
    return (
      <View style={styles.container}>
        <View style={styles.currentBalance}>
          <Text style={styles.currentBalanceTitle}>CURRENT BALANCE</Text>
          <Text style={styles.currentBalanceAmount}>$0.00</Text>
        </View>
        <ScrollView>
          <Modal
            animationType={"slide"}
            transparent={false}
            visible={this.state.modalVisible}
            onRequestClose={() => {Alert.alert("Modal has been closed.")}}
            >
           <View style={{marginTop: 22}}>
            <View>
              <Text>Hello World!</Text>
            </View>
           </View>
          </Modal>
          <View style={styles.cartItems}>
            {(this.props.items||[]).map((section,i) => (
              <CartRow key={i} action={this.setQty} index={i} element={section} />
            ))}
          </View>
          <CartTotal items={this.props.items||[]} />
        </ScrollView>
        <RoundedButton onPress={()=>{this.setModalVisible(true)}} text='Place Order' />
      </View>
    )
  }
}

CartAndCheckout.propTypes = {
  updateCart: PropTypes.func,
}

const mapStateToProps = (state) => {
  return {
    // items: state.cart.items,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    updateCart: (index,qty) => dispatch(Actions.updateCart(index,qty)),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(CartAndCheckout)

Upvotes: 2

Views: 9263

Answers (2)

Travis White
Travis White

Reputation: 1977

You are using react-native-router-flux but you don't show us the Scene setup. If you look at the (https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md#modals) documentation you will see that

'To display a modal use Modal as root renderer, so it will render the first element as normal scene and all others as popups (when they are pushed). For example:'

import StatusModal from './components/StatusModal'

<Router>
  <Scene key="modal" component={Modal} >
    <Scene key="root">
      <Scene key="screen1" initial={true} component={Screen1} />
      <Scene key="screen2" component={Screen2} />
    </Scene>
    <Scene key="statusModal" component={StatusModal} />
  </Scene>
</Router>

You should not be rendering a modal deep in your components. You need a modal Scene wrapper around root in which you can embed any modal scenes as siblings to root.

Upvotes: 1

A. Goodale
A. Goodale

Reputation: 1348

I think the problem is the <Modal> is inside a <ScrollView>. It should be placed as a sibling to the ScrollView. Try putting the Modal after the <RoundedButton> in your JSX. Since the Modal creates a full-screen view, there's no need to place it inside a ScrollView.

Upvotes: 1

Related Questions