Contained button in modal causing border around button after closing the modal(for some millisecond)

import React, {useState} from ‘react’; import { Modal, Portal, Text, Colors, Button, Menu, Divider, Subheading, Paragraph, TouchableRipple, } from ‘react-native-paper’;

import {View, StyleSheet, Dimensions, ScrollView} from ‘react-native’; import Icon from ‘react-native-vector-icons/MaterialCommunityIcons’;

const windowSize = Dimensions.get(‘window’);

function BookingModal(props) { const [visibleMenu, setVisibleMenu] = useState(false); const [selectedMenuItem, setSelectedMenuItem] = useState(‘01.00-02.00’);

const toggleMenu = () => setVisibleMenu(!visibleMenu);

const handleConfirm = () => { props.navigation.navigate(‘Payment’); props.toggleModal(); };

const formatHourString = (str) => ${('0' + str).slice(-2)}.00-${ str != 23 ? ('0' + (str + 1)).slice(-2) : '00' }.00;

const handleMenuItemPress = (index) => { setSelectedMenuItem(formatHourString(index)); toggleMenu(); };

return ( <Portal> <Modal visible={props.visible} onDismiss={props.toggleModal} contentContainerStyle={styles.modalContainer}> <View> <View style={styles.modalHeader}> <Text style={styles.modalHeaderText}>BOOK AVAILABLE SLOT</Text> </View> <Divider /> <View style={styles.modalBody}> <TouchableRipple onPress={toggleMenu} rippleColor="rgba(0, 0, 0, .32)" style={styles.dropDownContainer}> <View style={styles.flexDirectionRow}> <Subheading style={{fontWeight: ‘bold’}}> Select Slot : </Subheading> <View style={{flex: 1}}></View> <View style={styles.flexDirectionRow}> <Paragraph>{selectedMenuItem}</Paragraph> <Icon name="menu-down" color={Colors.black} size={20} /> </View> </View> </TouchableRipple>

        <View style={styles.buttonContainer}>
          <Button
            mode="contained"
            uppercase={false}
            color={Colors.grey300}
            onPress={props.toggleModal}>
            Cancle
          </Button>
          <Button
            mode="contained"
            uppercase={false}
            color={Colors.green400}
            dark={true}
            onPress={handleConfirm}>
            Confirm Booking
          </Button>
        </View>
      </View>
    </View>
    <Menu
      visible={visibleMenu}
      onDismiss={toggleMenu}
      anchor={{
        x: windowSize.width - 50,
        y: windowSize.height / 2 + 30,
      }}>
      <ScrollView style={{height: windowSize.height / 4}}>
        {Array(24)
          .fill(0)
          .map((item, index) => (
            <Menu.Item
              key={index}
              onPress={handleMenuItemPress.bind(this, index)}
              title={formatHourString(index)}
            />
          ))}
      </ScrollView>
    </Menu>
  </Modal>
</Portal>

); } export default BookingModal;

const styles = StyleSheet.create({ modalContainer: {backgroundColor: ‘white’, margin: 30, borderRadius: 10}, modalHeader: { paddingTop: 30, paddingBottom: 20, paddingLeft: 15, }, modalHeaderText: { fontSize: 17, color: Colors.red400, }, modalBody: { paddingVertical: 20, }, flexDirectionRow: { flexDirection: ‘row’, }, dropDownContainer: { marginBottom: 20, padding: 15, }, buttonContainer: { flexDirection: ‘row’, justifyContent: ‘space-between’, paddingHorizontal: 15, }, });

“react-native-paper”: “^4.3.1”, “react-native”: “0.63.3”, “react-native-vector-icons”: “^7.1.0”

[nits-pritampodder]

YES. still exists

[risafj]

I was having this exact issue, and then wrapping the parent view in renderToHardwareTextureAndroid fixed it!

<View renderToHardwareTextureAndroid>
  <Button mode="contained">This is a button</Button>
</View>