What is it?

react-native-counters is a component that allows you to quickly implement counter operations in your React Native applications. It can be easily used in scenarios such as product quantity selection in e-commerce apps, number of guests in reservation systems, and more.

Features

• Simple and fast integration
• Fully customizable appearance
• Min/Max value boundaries
• Custom icon support (with react-native-vector-icons)
• Configurable increment step size
• onChangeBefore support for async operations
• TypeScript support

Installation

npm

npm install react-native-counters --save

yarn

yarn add react-native-counters

Quick Start

Basic Usage

import Counter from "react-native-counters";

function App() {
  const handleChange = (number, type) => {
    // number: current count value
    // type: '+' or '-' (which button was pressed)
    console.log(`New value: ${number}, Action: ${type}`);
  };

  return (
    <Counter
      start={1}
      onChange={handleChange}
    />
  );
}

Usage with Class Components

import Counter from "react-native-counters";

class ShoppingCart extends React.Component {
  handleChange(number, type) {
    console.log(number, type); // 1, '+' or '-'
  }

  render() {
    return (
      <Counter
        start={1}
        onChange={this.handleChange.bind(this)}
      />
    );
  }
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | start | number | 0 | Initial count value | | min | number | 0 | Minimum selectable value | | max | number | 10 | Maximum selectable value | | increment | number | 1 | Increment/decrement amount per click | | minus | string | '-' | Minus button text (when icon is not used) | | plus | string | '+' | Plus button text (when icon is not used) | | minusIcon | function | null | Custom minus button icon | | plusIcon | function | null | Custom plus button icon | | buttonStyle | object | {} | Style object for buttons | | buttonTextStyle | object | {} | Style object for button text | | countTextStyle | object | {} | Style object for counter text | | formatFn | function | (count) => \${count}`| Function to format the displayed count | |onChange|function| - | Callback function called when value changes | |onChangeBefore|function|null` | Async function called before value changes |

Examples

1. Custom Styling

<Counter
  start={1}
  min={0}
  max={100}
  buttonStyle={{
    borderColor: '#3498db',
    borderWidth: 2,
    borderRadius: 25,
    width: 50,
    height: 50,
  }}
  buttonTextStyle={{
    color: '#3498db',
    fontSize: 20,
    fontWeight: 'bold',
  }}
  countTextStyle={{
    color: '#2c3e50',
    fontSize: 24,
    fontWeight: 'bold',
  }}
  onChange={(number, type) => console.log(number, type)}
/>

2. Text Buttons

<Counter
  start={1}
  plus="Add"
  minus="Remove"
  buttonStyle={{
    width: 80,
    backgroundColor: '#27ae60',
  }}
  buttonTextStyle={{
    color: '#fff',
  }}
/>

3. Custom Icons (react-native-vector-icons)

import Counter from "react-native-counters";
import Icon from 'react-native-vector-icons/MaterialIcons';

const MinusIcon = (isDisabled) => (
  <Icon
    name="remove-circle-outline"
    size={24}
    color={isDisabled ? '#ccc' : '#e74c3c'}
  />
);

const PlusIcon = (isDisabled) => (
  <Icon
    name="add-circle-outline"
    size={24}
    color={isDisabled ? '#ccc' : '#27ae60'}
  />
);

function ProductCounter() {
  return (
    <Counter
      start={1}
      min={1}
      max={99}
      minusIcon={MinusIcon}
      plusIcon={PlusIcon}
      onChange={(num) => console.log('Selected quantity:', num)}
    />
  );
}

4. Async Operations (onChangeBefore)

Use onChangeBefore for API calls, validation, or other async operations:

function AsyncCounter() {
  const handleBeforeChange = (next) => {
    // API call, validation, etc.
    fetch('/api/check-stock')
      .then(() => next()) // Apply change if successful
      .catch(() => alert('Insufficient stock!'));
  };

  return (
    <Counter
      start={1}
      onChangeBefore={handleBeforeChange}
      onChange={(num) => console.log('Updated:', num)}
    />
  );
}

5. Custom Increment Step

// Increment/decrement by 5 on each click
<Counter
  start={0}
  min={0}
  max={100}
  increment={5}
  onChange={(num) => console.log(num)}
/>

6. Formatted Count Display

Use formatFn to customize how the count is displayed:

// Display as percentage
<Counter
  start={0}
  max={100}
  formatFn={(count) => `${count}%`}
/>

// Display with currency
<Counter
  start={1}
  min={1}
  formatFn={(count) => `$${count}`}
/>

// Display with units
<Counter
  start={0}
  max={1000}
  formatFn={(count) => `${count} kg`}
/>

Documentation

• All Usage Examples
• Custom Icon Usage

Contributing

Contributions are welcome! To contribute:

1. Fork this repository
2. Create a new branch (git checkout -b feature/new-feature)
3. Commit your changes (git commit -am 'Added new feature')
4. Push to the branch (git push origin feature/new-feature)
5. Open a Pull Request

License

MIT License - see LICENSE file for details.

Author

Yasar ICLI

• Email: [email protected]
• GitHub: @yasaricli

Support

If you find a bug or have suggestions, please report them on the Issues page.