STEP :1

This code defines a simple React Native app using a custom card component called CustomCard. The app renders a single CustomCard with customized styles and content, such as background color, border color, and labels for the header, body, and footer. The CustomCard component is likely defined in a separate file and receives these customization details through props. The app can be expanded by adding more instances of the CustomCard component inside the main <View>. Each card can have its own unique styles and content, making it a flexible and reusable component for displaying information in a mobile app.

// App.js

import React from 'react';
import { View } from 'react-native';
import CustomCard from './CustomCard';

const App = () => {
  return (
    <View>
      <CustomCard
        style={{ marginBottom: 20 }}
        borderColor="blue"
        bgColor="lightblue"
        color="black"
        borderRadius={12}
        height={150}
        width={300}
        showHeader={true}
        headerLabel="Custom Card Header"
        showBody={true}
        bodyLabel="This is the body of the card."
        showFooter={true}
        footerLabel="Custom Card Footer"
      />

      {/* Add more CustomCard components as needed */}
    </View>
  );
};

export default App;

STEP :2

This code defines a reusable CustomCard component in React Native. The component takes various props to customize its appearance, including border color, background color, text color, border radius, dimensions, and content visibility. The card is structured with optional header, body, and footer sections, each displaying text content. The styles are defined using the StyleSheet module to ensure consistent and easily maintainable styling. The default values for props are set to create a clean and simple card if no customization is provided. This CustomCard component serves as a modular and flexible way to display information in a styled card format, and it can be easily integrated and customized within a React Native application.

// CustomCard.js

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

const CustomCard = ({
  style,
  borderColor = 'black',
  bgColor = 'white',
  color = 'black',
  borderRadius = 8,
  height,
  width,
  showHeader = true,
  headerLabel = 'Header',
  showBody = true,
  bodyLabel = 'Body',
  showFooter = true,
  footerLabel = 'Footer',
}) => {
  return (
    <View style={[styles.card, { borderColor, backgroundColor: bgColor, color, borderRadius, height, width }, style]}>
      {showHeader && (
        <View style={styles.header}>
          <Text style={styles.headerText}>{headerLabel}</Text>
        </View>
      )}

      {showBody && (
        <View style={styles.body}>
          <Text style={styles.bodyText}>{bodyLabel}</Text>
        </View>
      )}

      {showFooter && (
        <View style={styles.footer}>
          <Text style={styles.footerText}>{footerLabel}</Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    borderWidth: 1,
    padding: 10,
    marginBottom: 10,
  },
  header: {
    borderBottomWidth: 1,
    paddingBottom: 5,
    marginBottom: 5,
  },
  headerText: {
    fontWeight: 'bold',
  },
  body: {
    marginBottom: 5,
  },
  bodyText: {},
  footer: {
    borderTopWidth: 1,
    paddingTop: 5,
    marginTop: 5,
  },
  footerText: {
    fontStyle: 'italic',
  },
});

export default CustomCard;