Comments (4)
@iiqmohamad - Was this the behaviour you were requesting?
There will be a value
prop added to the UIStepper. The initialValue
property will be used when the component is instantiated. The value prop will be used thereafter.
If you are to use it, you are responsible for ensuring ensuring that you use a correct value.
Here's something that might be trivial, but I will document it anyway.
class Foo extends React.Component {
constructor() {
super();
this.state = { value: 0 }
}
componentDidMount() {
setInterval(() => {
this.setState({ value: this.state.value + 1 });
}, 1500);
}
render() {
const { value } = this.state;
return (
<UIStepper
displayValue
initialValue={0}
value={this.state.value}
/>
)
}
}
Whilst this will work and update the value every 1.5 seconds, when you press the Increment (+) and Decrement buttons (-), you must make sure you modify the state variable.
If you don't, you will have some unwanted problems:
class Foo extends React.Component {
constructor() {
super();
this.state = { value: 0 }
}
componentDidMount() {
setInterval(() => {
this.setState({ value: this.state.value + 1 });
}, 1500);
}
increment = () => {
this.setState({ value: this.state.value + 1 });
}
decrement = () => {
this.setState({ value: this.state.value - 1 });
}
render() {
const { value } = this.state;
return (
<UIStepper
displayValue
initialValue={0}
value={this.state.value}
onIncrement={this.increment}
onDecrement={this.decrement}
/>
)
}
}
This will be shipped in 1.2.4 along with the ability to setValue via a ref
.
<UIStepper innerRef={ stepper = { this.stepper = stepper } } />
<Button
title="Set value to 50"
onPress={() => { this.stepper.setValue(50) }}
/>
from react-native-ui-stepper.
I suppose that you could use the initialValue
prop, but as naming conventions go, that's a little confusing.
I will add a value
property to achieve this. I need to fix a couple of UI issues too and will release this as 1.2.4
in the up coming days/weeks.
from react-native-ui-stepper.
@hannigand perfect,That's exactly what I mean.
Thanks a lot, waiting for this realease 👍
from react-native-ui-stepper.
@iiqmohamad - 1.2.4 now is available 🎉
from react-native-ui-stepper.
Related Issues (14)
- Add wraps to UI Stepper
- How to change fontFamily? HOT 4
- How can I reset the UI Stepper Value HOT 4
- When setting borderWidth to 0, the + icon still has a borderLeft HOT 2
- onMinimumReached and onMaximumReached events are always fired HOT 4
- Should react-native-ui-stepper move to Render Props? HOT 1
- Should ui stepper allows typing ? HOT 3
- Repeat onPress action when holding button HOT 1
- ui-stepper in a flat list counter value doesnt change in case of updating the list HOT 1
- How to get round stepper?
- Disable (+ , -) buttons
- componentWillReceiveProps has been renamed
- Component props height and width not working HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-ui-stepper.