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

npm install react-native-empty-state

yarn

yarn add react-native-empty-state

Peer Dependencies

Make sure your project includes:

{
  "react": ">=18.0.0",
  "react-native": ">=0.72.0"
}

Basic Usage

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

<EmptyState
  title="No Internet Connection"
  description="Please check your network and try again."
  buttonText="Retry"
  onPress={() => console.log('Retry')}
/>

With Custom Image

<EmptyState
  image={require('./assets/empty-cart.png')}
  title="Your Cart is Empty"
  description="Add products to start shopping."
/>

Complete Example

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.

<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.

<EmptyState
  title="No Products"
  description="Products will appear here."
>
  <CustomBanner />
</EmptyState>

Example:

<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.

<EmptyState
  title="No Data"
/>

Button

If buttonText is not provided, the button is hidden.

<EmptyState
  title="No Internet"
/>

TypeScript Support

The package is fully typed.

import {
  EmptyState,
  EmptyStateProps,
} from 'react-native-empty-state';

Expo Support

Works seamlessly with Expo projects.

npx create-expo-app my-app

npm install react-native-empty-state

No additional configuration required.

Package Structure

react-native-empty-state
│
├── src
│   ├── EmptyState.tsx
│   └── index.ts
│
├── dist
│
├── README.md
├── package.json
└── tsconfig.json

Development

Clone the repository:

git clone <repository-url>

Install dependencies:

npm install

Build package:

npm run build

Generate npm package:

npm pack

Publish:

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 ⭐.