Component

EmptyContent

Empty state layout with icon, title, description, and action.

React Native

Empty content

Reusable empty state with icon and explanatory copy.

Nothing matched

Try a broader search term.

import { useState } from 'react';
import { View } from 'react-native';
import { Button, EmptyContent, useTheme } from '@sohantalukder/rn-kit';

export function EmptyResults() {
  const [hasResetFilters, setHasResetFilters] = useState(false);
  const { gutters, layout } = useTheme();

  return (
    <View style={[layout.itemsCenter, gutters.gap_16, gutters.padding_24]}>
      <EmptyContent
        title="No results"
        description="Try changing your filters or search term."
        icon="emptyContent"
      />
      <Button
        text={hasResetFilters ? 'Filters reset' : 'Reset filters'}
        variant="outline"
        disabled={hasResetFilters}
        onPress={() => setHasResetFilters(true)}
      />
    </View>
  );
}

Live component

defaultwith actioncustom icon

Explain what happened and what to do next.
Use one clear recovery action.

Usage

import { EmptyContent } from '@sohantalukder/rn-kit';

import { useState } from 'react';
import { View } from 'react-native';
import { Button, EmptyContent, useTheme } from '@sohantalukder/rn-kit';

export function EmptyResults() {
  const [hasResetFilters, setHasResetFilters] = useState(false);
  const { gutters, layout } = useTheme();

  return (
    <View style={[layout.itemsCenter, gutters.gap_16, gutters.padding_24]}>
      <EmptyContent
        title="No results"
        description="Try changing your filters or search term."
        icon="emptyContent"
      />
      <Button
        text={hasResetFilters ? 'Filters reset' : 'Reset filters'}
        variant="outline"
        disabled={hasResetFilters}
        onPress={() => setHasResetFilters(true)}
      />
    </View>
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

titlestring-Short heading rendered at the top of the component.

descriptionstring-Supporting copy shown below the title or primary message.

iconIconKey | ReactNode-Icon rendered before content or as the primary visual affordance.

isLoadingbooleanfalseShows a loading indicator and prevents duplicate submissions.

Theme

EmptyContent reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

default
with action
custom icon

Best Practices

Explain what happened and what to do next.
Use one clear recovery action.