v5.0.0

Highlights

• Refactor to use Flatlist as the container.
• containerStyle and containerTestID now apply to Flatlist component.
• Flatlist unlocks vertical layout (set horizontal to false).
• Fix separator sometimes going missing or not visually consistent.
• Fix container layout stretch to fill issue.
• Fix onMax and onMin not firing when wraps is enabled.
• Simplified maximum and minimum detection.
• Use clone styles before assign other property values.
• Refactor unit tests to improve detection of current state.

Breaking changes

• textStyle defaults changed to { fontSize 24 }.
• containerStyle defaults changed to { alignSelf: 'flex-start', borderWidth: 1, borderRadius: 8 }.
• separatorStyle defaults changed to { backgroundColor: 'black', width: StyleSheet.hairlineWidth }.
• incrementStepStyle and decrementStepStyle defaults changed to undefined.
• color default changed to undefined.

New

• textTestID defaults to text.
• horizontal defaults to true. Set it to false for vertical layout.
• itemStyle defaults to { padding: 10 }.
• itemTestID defaults to item. It uses Flatlist item's index internally to be unique.

Check out Stepper examples.

v4.3.1

Fix issue where yarn files where not ignored in release (.npmignore).

v4.3.0

• Upgrade project to react-native 0.79.2 and react 19.
• Fix render props' type: JSX.Element to React.JSX.Element.

4.2.0

Migrate to yarn v2 and upgrade react-native to 0.76

• Update arrow based function variables to functions and define return types
• Add optional props:

  containerTestID?: string;
  separatorTestID?: string;
  incrementImageTestID?: string;
  decrementImageTestID?: string;
  incrementButtonTestID?: string;
  decrementButtonTestID?: string;

v4.0.1

• Update npmignore to exclude RELEASE_NOTES.md and .gitattributes files.

v4.0.0

This has been refactored as a functional Typescript component. In addition, consolidated the ImageView and Step components into the parent component. Furthermore, the ability to control color easily was implemented, see new props useColor and color, as a result several styles were changed and default color scheme is black to match the default image colors.

Breaking changes

• textStyle defaults changed to {marginHorizontal: 8, fontSize 24}.
• containerStyle defaults changed to {flexDirection: 'row', borderWidth: 1, borderRadius: 8, alignItems: 'center',justifyContent: 'space-evenly'}
• separatorStyle's default backgroundColor change to black.
• Both incrementStepStyle and decrementStepStyle's padding changed to 4.
• Both incrementImageStyle and decrementImageStyle height and width changed to 30.
• renderText passed arguments changed to value number.
• renderDecrementStep passed arguments changed to value number and onDecrement function.
• renderIncrementStep passed arguments changed to value number and onIncrement function.
• renderDecrementImage passed arguments changed to opacity number.
• renderIncrementImage passed arguments changed to opacity number.

New

• disableIncrementImageTintColor as name implies, defaults to false.
• disableDecrementImageTintColor as name implies, defaults to false.
• useColor defaults to false and works in-conjunction with color to apply a color to the stepper styles.
• color defaults to blue and works in-conjunction with useColor to apply color to containerStyle's border color, separatorStyle's backgroundColor, incrementImageStyle's tintColor, decrementImageStyle's tintColor and textStyle's color if showText enabled.
• textDecimalPlaces defaults to 2 and formats the value number when showText is enabled and is not an integer.

3.0.3

Changelog

FIXES

• Add typescript definitions to get rid of warnings #31

3.0.2

Changelog

FIXES

• Fix #32 by changing oneOfType to oneOf. Thanks @jossydeleon

3.0.1

• React has deprecated componentWillRecieveProp life cycle method so I added prefix UNSAFE to adhere to warning.

3.0.0

Changelog

BREAKING CHANGES

• tintColor has been removed.
• backgroundColor has been removed.
• padding has been removed.
• tintOnIncrementImage has been removed.
• tintOnDecrementImage has been removed.
• renderIncrement has been replaced by combination of render functions.
• renderDecrement has been replaced by combination of render functions.
• imageHeight has been removed.
• imageWidth has been removed.

See props for replacements and style objects.

FEATURES

• Added text component that can be shown to display the value in the SimpleStepper. (try showText and textPosition).
• Added functions onMin and onMax to callback when value reaches min or max.
• Added functions onIncrement and onDecrement to callback when value increments or decrements.
• Added style props to help customization.
• Added render functions to help flexibility.