Modal component preview not properly shown in Bit.dev

I build a component using bit, and exported it to the localhost, and below is how the preview was shown.

Button component in bit

Below is the image how it should appear enter image description here

The expected behavior was showing the component under the Compositions.

I have used Modal in this component I think that's what is causing this issue.

Below is the code using which this component was built

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=>
      <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,
  },
});

I was to know if this issue is from my side or if its a bug from the bit.dev's side



Comments

Popular posts from this blog

Spring Elasticsearch Operations

Network Error and Timeout on Authorize.net JS

Object oriented programming concepts (OOPs)