hannigand / react-native-ui-stepper Goto Github PK

I try to get rounded stepper but it shows only curved type.

Hi @hannigand , thanks for this component.

Sometime, we need to update the value based on state / redux. is there a way to make it happend?
I only see the initialValue props

Hi, I am trying to implement this component in my screen but it doesn't apply the height and width I'm passing, so the component takes a large portion of the screen....

Even when I put ridiculous small values, it shows a pretty big stepper.
Here's my code:

<UIStepper
              imageWidth={20}
              imageHeight={10}
              width={94}
              height={29}
              displayValue={true}
              initialValue={0}
              steps={1}
              borderColor={'transparent'}
              tintColor={'#444'}
              minimumValue={0}
              textColor={'#38B4B7'}
              incrementImage={require('../../utils/images/common/stepper_plus.png')}
              decrementImage={require('../../utils/images/common/stepper_minus.png')}
              onValueChange={(value) => {this._onStepperValueChanged(value)}}
            />

I am using three ui-stepper in flatlist.
When I change the value from dropdown I want to reset the values of the list
other values are reset but
the stepper value takes the previous and increment the value in that
E.g Suppose I have two stepper inside a FlatList

1. Ten_Counter (step value 10)
2. Twenty_Counter(step value 20)

I have a dropbox outside the list, When I select VALUE1 from dropbox
and increment Ten_Counter It works fine

but when I select VALUE2 from dropbox the list refreshed(not UI)
again when I clicked the Ten_Counter It increments with the previous value and give 20

Please help me finding a solution for
Resetting the value of a counter

say if I click the middle number instead of + , -

can I create a pop up to let user input desired value ?

Quoted from Apple's UI Stepper docs:

If true, incrementing beyond maximumValue sets value to minimumValue; likewise, decrementing below minimumValue sets value to maximumValue. If false, the stepper does not increment beyond maximumValue nor does it decrement below minimumValue but rather holds at those values. The default value for this property is false.

It would be a great UX improvement if this component would let users hold the increment/decrement button. Something like this :

Cf. https://medium.com/@pavolfulop/repeat-onpress-action-when-holding-button-react-native-2c697cf28032

👍 ? 👎 ?

Hey 👋

I wasn't quite sure where to put this but it's the only place I know where to reach out to Users.

I am thinking of rewriting the react-native-ui-stepper library so that it utilises the concepts of Render Props.

Please 👍 or 👎 to let me know if you're for or against this change.

What does this mean?

• A newly written API that will deprecate previous versions.
• (More importantly) You will have complete control of what components you render to display the stepper value. You will be responsible for providing styles.
• There will be an out-of-the-box component that'll

How might the new API look?

import UIStepper from 'react-native-ui-stepper';

const App = () => (
  <UIStepper
    render={(value, onIncrement, onDecrement) => {
      <MyCustomStepper 
        value={value} 
        onIncrement={onIncrement}
        onDecrement={onDecrement}
       />
    }}
  />
)

// Your Custom Component
const MyCustomStepper = ({ value, onIncrement, onDecrement }) => (
  <Text>{value}</Text>
)

I'll leave this open as I would like to gather a general consensus before committing to a rewrite. It will automatically be closed off on 7th May 2018

Thanks.

<UIStepper displayValue={true} initialValue={item.qty} minimumValue={1} maximumValue={10} value={item.qty} onMinimumReached={console.warn(' min reached')} onMaximumReached={console.warn(' max reached')} onIncrement={() => this.increment(item.id)} onDecrement={() => this.decrement(item.id)} />

The onMinimumReached and onMaximumReached events are always triggered upon render even when the value is 3.

By the way, my UIStepper is inside a FlatList (loop).

Am I lacking a setting?

<Item>
    <Text style={{ marginTop: 10, marginBottom: 10 , fontSize: 12}}>
          Choose Distance
     </Text>
     <UIStepper
          borderWidth={0}
           tintColor={'#4C9DD0'}
           textColor={'#4C9DD0'}
           displayValue
           initialValue={this.state.range}
           maximumValue={1000}
           value={this.state.value}
           onIncrement={this.increment}
           onDecrement={this.decrement}
     />
</Item>

results to:

This line (319) causes the border to appear in UIStepper.js
borderLeftWidth: vertical ? 0 : displayValue ? 1 : 0

if i set displayValue ? 0 : 0 then border disappears as expected.

Hi,
I want to disable (+) and (-) buttons.I had try to write custom style but that was not working.

customStyle={{readonly : true}}

componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: UIStepper

i'm using a ui-stepper in a flat list when i chaned the list with setState ui-stepper counter value didn't change

Thanks for providing this. Is there any way to set the fontFamily for the number?