index.js

/**
 * @flow
 */

import type {
    BubblingEventHandler,
    Double,
    WithDefault,
} from 'react-native/Libraries/Types/CodegenTypes';

import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import {type NativeComponentType} from 'react-native/Libraries/Utilities/codegenNativeComponent';

import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';


type Event = $ReadOnly<{|
    value: Double,
|}>;

type NativeProps = $ReadOnly<{|
    ...ViewProps,
  
    // Props
    autorepeat?: WithDefault<boolean, true>,
    continuous?: WithDefault<boolean, true>,
    wraps?: WithDefault<boolean, false>,

    maximumValue?: WithDefault<Double, 100>,
    minimumValue?: WithDefault<Double, 0>,
    stepValue?: WithDefault<Double, 1>,
    value?: WithDefault<Double, 0>,
  
    // Events
    onValueChange?: ?BubblingEventHandler<Event, 'paperValueChange'>,
  |}>;

export default (codegenNativeComponent<NativeProps>('Stepper', {
    interfaceOnly: true,
    paperComponentName: 'RCTStepper',
}): NativeComponentType<NativeProps>);

RCTStepper.h

#import <UIKit/UIKit.h>

#import <React/RCTComponent.h>

@interface RCTStepper : UIStepper

@property (nonatomic, copy) RCTBubblingEventBlock onValueChange;

@end

RCTStepper.m

#import "RCTStepper.h"

@implementation RCTStepper

@end

RCTStepperManager.h

#import <React/RCTViewManager.h>

@interface RCTStepperManager : RCTViewManager

@end

RCTStepperManager.m

#import "RCTStepperManager.h"
#import "RCTStepper.h"

@implementation RCTStepperManager

RCT_EXPORT_MODULE()

RCT_EXPORT_VIEW_PROPERTY(autorepeat, BOOL);
RCT_EXPORT_VIEW_PROPERTY(continuous, BOOL);
RCT_EXPORT_VIEW_PROPERTY(wraps, BOOL);

RCT_EXPORT_VIEW_PROPERTY(value, double);
RCT_EXPORT_VIEW_PROPERTY(minimumValue, double);
RCT_EXPORT_VIEW_PROPERTY(maximumValue, double);
RCT_EXPORT_VIEW_PROPERTY(stepValue, double);

- (UIView *)view
{
    RCTStepper *stepper = [RCTStepper new];
    [stepper addTarget:self action:@selector(valueChanged:) forControlEvents:UIControlEventValueChanged];
    return stepper;
}

- (void)valueChanged:(RCTStepper *)sender
{
    double value = sender.value;
    sender.onValueChange(@{
        @"value": @(value),
    });
}

@end