react-native-empty-state 0.0.1

package/README.md

@@ -0,0 +1,349 @@
+# react-native-empty-state
+
+A lightweight, customizable, and TypeScript-friendly Empty State component for React Native applications.
+
+Perfect for displaying:
+
+- No Data Found
+- Empty Cart
+- No Search Results
+- No Internet Connection
+- No Notifications
+- No Orders
+- Custom Empty Screens
+
+---
+
+## Features
+
+✅ Lightweight and dependency-free
+
+✅ Fully customizable
+
+✅ TypeScript support
+
+✅ Optional image support
+
+✅ Optional action button
+
+✅ Custom styling support
+
+✅ Render custom components using children
+
+✅ React Native & Expo compatible
+
+---
+
+## Installation
+
+### npm
+
+```bash
+npm install react-native-empty-state
+```
+
+### yarn
+
+```bash
+yarn add react-native-empty-state
+```
+
+---
+
+## Peer Dependencies
+
+Make sure your project includes:
+
+```json
+{
+  "react": ">=18.0.0",
+  "react-native": ">=0.72.0"
+}
+```
+
+---
+
+## Basic Usage
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import { EmptyState } from 'react-native-empty-state';
+
+export default function App() {
+  return (
+    <View style={{ flex: 1 }}>
+      <EmptyState
+        title="No Orders"
+        description="You haven't placed any orders yet."
+      />
+    </View>
+  );
+}
+```
+
+---
+
+## With Action Button
+
+```tsx
+<EmptyState
+  title="No Internet Connection"
+  description="Please check your network and try again."
+  buttonText="Retry"
+  onPress={() => console.log('Retry')}
+/>
+```
+
+---
+
+## With Custom Image
+
+```tsx
+<EmptyState
+  image={require('./assets/empty-cart.png')}
+  title="Your Cart is Empty"
+  description="Add products to start shopping."
+/>
+```
+
+---
+
+## Complete Example
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import { EmptyState } from 'react-native-empty-state';
+
+export default function App() {
+  return (
+    <View style={{ flex: 1 }}>
+      <EmptyState
+        image={require('./assets/no-data.png')}
+        title="No Data Available"
+        description="There is currently nothing to display."
+        buttonText="Refresh"
+        onPress={() => console.log('Refresh')}
+      />
+    </View>
+  );
+}
+```
+
+---
+
+## Custom Styling
+
+All major UI elements can be customized.
+
+```tsx
+<EmptyState
+  title="No Results"
+  description="Try changing your search filters."
+  buttonText="Search Again"
+  onPress={() => {}}
+  containerStyle={{
+    padding: 40,
+  }}
+  titleStyle={{
+    fontSize: 24,
+    color: '#111',
+  }}
+  descriptionStyle={{
+    color: '#666',
+  }}
+  buttonStyle={{
+    backgroundColor: '#28a745',
+  }}
+  buttonTextStyle={{
+    color: '#fff',
+  }}
+/>
+```
+
+---
+
+## Render Custom Components
+
+Use the `children` prop to render additional content.
+
+```tsx
+<EmptyState
+  title="No Products"
+  description="Products will appear here."
+>
+  <CustomBanner />
+</EmptyState>
+```
+
+Example:
+
+```tsx
+<EmptyState
+  title="No Notifications"
+>
+  <Button
+    title="Go to Settings"
+    onPress={() => {}}
+  />
+</EmptyState>
+```
+
+---
+
+## Props
+
+| Prop | Type | Required | Default |
+|--------|--------|----------|----------|
+| title | string | No | No Data Found |
+| description | string | No | Nothing to display. |
+| image | ImageSourcePropType | No | - |
+| buttonText | string | No | - |
+| onPress | () => void | No | - |
+| containerStyle | ViewStyle | No | - |
+| titleStyle | TextStyle | No | - |
+| descriptionStyle | TextStyle | No | - |
+| buttonStyle | ViewStyle | No | - |
+| buttonTextStyle | TextStyle | No | - |
+| children | React.ReactNode | No | - |
+
+---
+
+## Conditional Rendering
+
+The component automatically handles optional content.
+
+### Image
+
+If `image` is not provided, no image will be rendered.
+
+```tsx
+<EmptyState
+  title="No Data"
+/>
+```
+
+### Button
+
+If `buttonText` is not provided, the button is hidden.
+
+```tsx
+<EmptyState
+  title="No Internet"
+/>
+```
+
+---
+
+## TypeScript Support
+
+The package is fully typed.
+
+```tsx
+import {
+  EmptyState,
+  EmptyStateProps,
+} from 'react-native-empty-state';
+```
+
+---
+
+## Expo Support
+
+Works seamlessly with Expo projects.
+
+```bash
+npx create-expo-app my-app
+```
+
+```bash
+npm install react-native-empty-state
+```
+
+No additional configuration required.
+
+---
+
+## Package Structure
+
+```text
+react-native-empty-state
+│
+├── src
+│   ├── EmptyState.tsx
+│   └── index.ts
+│
+├── dist
+│
+├── README.md
+├── package.json
+└── tsconfig.json
+```
+
+---
+
+## Development
+
+Clone the repository:
+
+```bash
+git clone <repository-url>
+```
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Build package:
+
+```bash
+npm run build
+```
+
+Generate npm package:
+
+```bash
+npm pack
+```
+
+Publish:
+
+```bash
+npm publish --access public
+```
+
+---
+
+## Compatibility
+
+| React Native | Status |
+|-------------|---------|
+| 0.72+ | ✅ Supported |
+| 0.73+ | ✅ Supported |
+| 0.74+ | ✅ Supported |
+| Expo SDK 50+ | ✅ Supported |
+
+---
+
+## License
+
+MIT
+
+---
+
+## Contributing
+
+Contributions, issues, and feature requests are welcome.
+
+Feel free to open an issue or submit a pull request.
+
+---
+
+## Author
+
+Neeraj Singh
+
+If you find this package useful, consider giving the repository a ⭐.

package/dist/EmptyState.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ImageSourcePropType, ViewStyle, TextStyle } from 'react-native';
+export interface EmptyStateProps {
+    title?: string;
+    description?: string;
+    image?: ImageSourcePropType;
+    buttonText?: string;
+    onPress?: () => void;
+    containerStyle?: ViewStyle;
+    titleStyle?: TextStyle;
+    descriptionStyle?: TextStyle;
+    buttonStyle?: ViewStyle;
+    buttonTextStyle?: TextStyle;
+    children?: React.ReactNode;
+}
+declare const EmptyState: React.FC<EmptyStateProps>;
+export default EmptyState;
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../src/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAMH,mBAAmB,EACnB,SAAS,EACT,SAAS,EACZ,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,eAAe;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAE5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuDzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/EmptyState.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const EmptyState = ({ title = 'No Data Found', description = 'Nothing to display.', image, buttonText, onPress, containerStyle, titleStyle, descriptionStyle, buttonStyle, buttonTextStyle, children, }) => {
+    return (<react_native_1.View style={[styles.container, containerStyle]}>
+            {image && (<react_native_1.Image source={image} style={styles.image} resizeMode="contain"/>)}
+
+            {!!title && (<react_native_1.Text style={[styles.title, titleStyle]}>
+                    {title}
+                </react_native_1.Text>)}
+
+            {!!description && (<react_native_1.Text style={[styles.description, descriptionStyle]}>
+                    {description}
+                </react_native_1.Text>)}
+
+            {!!buttonText && (<react_native_1.TouchableOpacity style={[styles.button, buttonStyle]} onPress={onPress} disabled={!onPress}>
+                    <react_native_1.Text style={[
+                styles.buttonText,
+                buttonTextStyle,
+            ]}>
+                        {buttonText}
+                    </react_native_1.Text>
+                </react_native_1.TouchableOpacity>)}
+
+            {children}
+        </react_native_1.View>);
+};
+exports.default = EmptyState;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+    },
+    image: {
+        width: 180,
+        height: 180,
+        marginBottom: 20,
+    },
+    title: {
+        fontSize: 22,
+        fontWeight: '700',
+        marginBottom: 8,
+    },
+    description: {
+        fontSize: 15,
+        textAlign: 'center',
+        marginBottom: 16,
+    },
+    button: {
+        backgroundColor: '#007AFF',
+        paddingHorizontal: 20,
+        paddingVertical: 12,
+        borderRadius: 8,
+    },
+    buttonText: {
+        color: '#fff',
+        fontWeight: '600',
+    },
+});

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as EmptyState } from './EmptyState';
+export type { EmptyStateProps } from './EmptyState';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyState = void 0;
+var EmptyState_1 = require("./EmptyState");
+Object.defineProperty(exports, "EmptyState", { enumerable: true, get: function () { return __importDefault(EmptyState_1).default; } });

package/dist/src/EmptyState.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ImageSourcePropType, ViewStyle, TextStyle } from 'react-native';
+export interface EmptyStateProps {
+    title?: string;
+    description?: string;
+    image?: ImageSourcePropType;
+    buttonText?: string;
+    onPress?: () => void;
+    containerStyle?: ViewStyle;
+    titleStyle?: TextStyle;
+    descriptionStyle?: TextStyle;
+    buttonStyle?: ViewStyle;
+    buttonTextStyle?: TextStyle;
+    children?: React.ReactNode;
+}
+declare const EmptyState: React.FC<EmptyStateProps>;
+export default EmptyState;

package/dist/src/EmptyState.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const EmptyState = ({ title = 'No Data Found', description = 'Nothing to display.', image, buttonText, onPress, containerStyle, titleStyle, descriptionStyle, buttonStyle, buttonTextStyle, children, }) => {
+    return (<react_native_1.View style={[styles.container, containerStyle]}>
+            {image && (<react_native_1.Image source={image} style={styles.image} resizeMode="contain"/>)}
+
+            {!!title && (<react_native_1.Text style={[styles.title, titleStyle]}>
+                    {title}
+                </react_native_1.Text>)}
+
+            {!!description && (<react_native_1.Text style={[styles.description, descriptionStyle]}>
+                    {description}
+                </react_native_1.Text>)}
+
+            {!!buttonText && (<react_native_1.TouchableOpacity style={[styles.button, buttonStyle]} onPress={onPress} disabled={!onPress}>
+                    <react_native_1.Text style={[
+                styles.buttonText,
+                buttonTextStyle,
+            ]}>
+                        {buttonText}
+                    </react_native_1.Text>
+                </react_native_1.TouchableOpacity>)}
+
+            {children}
+        </react_native_1.View>);
+};
+exports.default = EmptyState;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+    },
+    image: {
+        width: 180,
+        height: 180,
+        marginBottom: 20,
+    },
+    title: {
+        fontSize: 22,
+        fontWeight: '700',
+        marginBottom: 8,
+    },
+    description: {
+        fontSize: 15,
+        textAlign: 'center',
+        marginBottom: 16,
+    },
+    button: {
+        backgroundColor: '#007AFF',
+        paddingHorizontal: 20,
+        paddingVertical: 12,
+        borderRadius: 8,
+    },
+    buttonText: {
+        color: '#fff',
+        fontWeight: '600',
+    },
+});

package/dist/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EmptyState } from './EmptyState';
+export type { EmptyStateProps } from './EmptyState';

package/dist/src/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyState = void 0;
+var EmptyState_1 = require("./EmptyState");
+Object.defineProperty(exports, "EmptyState", { enumerable: true, get: function () { return __importDefault(EmptyState_1).default; } });

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "react-native-empty-state",
+  "version": "0.0.1",
+  "description": "Customizable empty state component for React Native",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "react-native",
+    "empty-state",
+    "placeholder",
+    "no-data",
+    "ui"
+  ],
+  "author": "Neeraj Singh",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-native": "^0.73.0",
+    "typescript": "^5.5.4"
+  }
+}