[React-Native-Modal]: onBackButtonPress prop returns nothing

Question

I was trying to customize my Modal with onBackButtonPress prop. To check if it worked or not, I passed a console.log to it like this:

<Modal onBackButtonPress={() => console.log('Something')}>
    <NewRidesModal
      //...
    />
</Modal>

But in fact, it doesn't even return anything whenever I press the Android back button. Why is he prop not returning any value at all? Is it deprecated?

Answer 1

I use this library too react-native-modal and onBackButtonPress is working fine. I face another issue, in my case onBackdropPress is not working, but after I fix my styling modal, everything working fine.

This is my example, Modal js

import React, { Component } from 'react'
import { View, Text, Image, TouchableOpacity } from 'react-native'
import styles from '../styles/StyleComponentModalProduct'
import { withNavigation } from 'react-navigation'
import Price from '../../../assets/components/price/Price'
import Modal from 'react-native-modal'
class ComponentModalProduct extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    return (
      <Modal
        useNativeDriver={true}
        animationIn={'fadeIn'}
        animationOut={'fadeOut'}
        backdropColor={'rgba(0, 0, 0, 0.7)'}
        backdropOpacity={0.5}
        isVisible={this.props.showProduct}
        onSwipeComplete={() => this.props.close()}
        swipeDirection={['down']}
        style={{ justifyContent: 'flex-end', margin: 0 }}
        onBackButtonPress={() => this.props.close()}
        onBackdropPress={() => this.props.close()}>
        <View style={styles.container}>
          <View style={styles.subContainer}>
            <View style={styles.headerContainer}>
              <TouchableOpacity
                onPress={() => this.props.close()}
                style={styles.closButton}
              />
              <View style={styles.containerImageProfile}>
                <Image
                  resizeMode={'contain'}
                  style={styles.imageProfile}
                  source={{ uri: this.props.selectedProduct.foto }}
                />
              </View>
              <View style={styles.containerProfile}>
                <View style={styles.containerTextName}>
                  <Text style={styles.textName}>
                    {this.props.selectedProduct.nama_produk}
                  </Text>
                </View>
                <Price
                  value={this.props.selectedProduct.harga_beli}
                  style={styles.textProfesi}
                />
              </View>
            </View>
          </View>
        </View>
      </Modal>
    )
  }
}

export default withNavigation(ComponentModalProduct)

Style Modal js

import { StyleSheet, Dimensions } from 'react-native'
import { color } from '../../../assets/styles/ColorList'
import {
  responsiveHeight,
  responsiveFontSize,
  responsiveWidth
} from 'react-native-responsive-dimensions'
const windowHeight = Dimensions.get('window').height
const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  subContainer: {
    height: windowHeight / 2,
    backgroundColor: color.whiteColor,
    width: '100%',
    borderTopRightRadius: 20,
    borderTopLeftRadius: 20,
    paddingHorizontal: responsiveWidth(5),
    paddingVertical: responsiveHeight(3)
  },
  headerContainer: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  closButton: {
    backgroundColor: '#E7E7E7',
    height: 8,
    width: 100,
    marginVertical: 10
  },
  containerImageProfile: {
    marginVertical: 10,
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center'
  },
  imageProfile: {
    height: windowHeight / 3.5,
    width: '90%',
    borderRadius: 20
  },
  containerProfile: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  containerTextName: {
    marginHorizontal: responsiveWidth(10),
    justifyContent: 'center'
  },
  textName: {
    fontSize: responsiveFontSize(2.5),
    color: color.fontColor,
    textAlign: 'center'
  },
  textProfesi: {
    fontSize: responsiveFontSize(2.5),
    color: color.fontColor,
    fontWeight: 'bold'
  }
})

export default styles

Answer 2

I found out that onBackButtonPress is deprecated or it was actually removed. There should some more information about this on the documentation.