`# my-react-native-library my-react-native-library is a simple React Native library that provides reusable components for mobile applications. ## Installation To install the library, run:

bash npm install my-react-native-library

Components

*   [Avatar](#avatar)
*   [Badge](#badge)
*   [Switch](#switch)
*   [Spinner](#spinner)
*   [Button](#button)
*   [Card](#card)
*   [Input](#input)
*   [Modal](#modal)

Usage

import React from 'react';
import { MyComponent } from 'my-react-native-library';

const App = () => {
  return <MyComponent label="Hello World!" />;
};

export default App;

import React from 'react';
import { MyComponent } from 'my-react-native-library';

const App = () => {
  return <MyComponent label="Hello from My Library!" />;
};

export default App;

Avatar

A component for displaying profile pictures or icons.

Usage:

import { Avatar } from 'my-react-native-library';

<Avatar size={80} source={{ uri: 'https://example.com/user.jpg' }} />;

Badge

A badge for displaying small counters or indicators.

Usage:

import { Badge } from 'my-react-native-library';

<Badge count={5} />;

Switch

A toggle switch component for switching between two states.

Usage:

import React, { useState } from 'react';
import { Switch } from 'my-react-native-library';

const App = () => {
const [isEnabled, setIsEnabled] = useState(false);
return <Switch value={isEnabled} onValueChange={setIsEnabled} />;
};

Spinner

A loading spinner to indicate activity.

Usage:

import { Spinner } from 'my-react-native-library';

<Spinner />;

Card

The Card component displays a title, content, and an action button.

Usage

import Card from "./Card";

<Card
  title="My Card"
  content="This is some content inside the card."
  onPress={() => console.log("Card pressed")}
/>;

Input

The Input component is a labeled text input field.

Usage

import Input from "./Input";

<Input
  label="Input Label"
  value={inputValue}
  onChangeText={setInputValue}
  placeholder="Enter text here"
/>;

Modal

The Modal component displays a modal dialog with a title and body content.

Usage

// Inside your component
import ModalComponent from "./ModalComponent";

// Inside your component
<ModalComponent
  visible={modalVisible}
  onClose={() => setModalVisible(false)}
  title="Modal Title"
  body="This is the modal body content."
/>;