Issue in preview of Modal component from React Native

[the-mysterious-kid]

I created a Modal component in React Native and exported it to the local host and below shown is how I got the preview.

Steps to Reproduce

1. Integrate Bit into your project
2. Create a component that uses Modal or react-native-modal
3. Add and export that component into the bit local host

Expected Behavior

This is how it should usually show

Code of the Component

import React from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  TouchableOpacityProps,
  View,
} from 'react-native';
import Modal from 'react-native-modal';

interface forceupdateProps extends TouchableOpacityProps {
  visible: boolean;
  btnColor?: string;
  onPress: () => void;
}

const forceupdate = ({visible, onPress, btnColor}: forceupdateProps) => {
  return (
    <View style={{flex: 1}}>
      <Modal backdropOpacity={0.3} isVisible={visible}>
        <View style={styles.modalContainer}>
          <View style={styles.container}>
            <Text style={styles.headerText}>Update Available!</Text>
            <Text style={styles.contentText}>
              A new version of the app is available. Please update the app
            </Text>
            <TouchableOpacity
              style={[
                styles.btnContainer,
                btnColor ? {backgroundColor: btnColor} : null,
              ]}
              onPress={onPress}>
              <Text style={styles.btnText}>Update</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </View>
  );
};

export default forceupdate;

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    backgroundColor: '#fff',
    marginHorizontal: 20,
    padding: 10,
    paddingHorizontal: 20,
    borderRadius: 10,
    alignItems: 'center',
  },
  headerText: {
    fontWeight: 'bold',
    fontSize: 22,
    marginBottom: 10,
  },
  contentText: {
    textAlign: 'center',
    fontSize: 14,
    marginBottom: 20,
  },
  btnContainer: {
    backgroundColor: '#555555',
    paddingVertical: 10,
    paddingHorizontal: 30,
    borderRadius: 10,
  },
  btnText: {
    color: '#fff',
    fontWeight: 'bold',
    fontSize: 16,
  },
});

Specifications

• Bvm version: 0.3.1
• Bit version: 0.1.27 (stable)
• Workspace type: harmony
• React Native: 0.71.7
• Node: 19.6.0