Transparent background in react native

Question

How can I create a modal with transparent background like google assistant?

Thanks in advance for your answers.

Answer 1

You need to set a height to the modal e put it in the bottom. Here an example:

import React from 'react';
import { View, Modal, StyleSheet, Dimensions } from 'react-native';

const windowHeight = Dimensions.get('window').height;

const ModalComponent = ({ isVisible, children }) => {
  return (
    <Modal
      visible={isVisible}
      transparent={true}
      animationType="slide"
    >
      <View style={styles.container}>
        <View style={styles.modal}>
          {children}
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)', // Change the transparency here
  },
  modal: {
    height: windowHeight * 0.3,
    width: '100%',
    backgroundColor: 'white',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    padding: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default ModalComponent;