Comments (15)
Works great! Thanks for sharing
from react-native-stager.
you mean in the sense of skipping a stage if some condition is met? if not, you can do any logic you want inside the render props and return a null
to render nothing
from react-native-stager.
Maybe skipping can be a good solution but I don't know how to do that, there is a Stage prop for this?
from react-native-stager.
Tried to do logic inside render prop get a TypeError: Cannot read property type of null,
see: https://gist.github.com/wesleyguirra/f1cfe8ace119f04c9f6f06b5deb0ae8c
from react-native-stager.
I meant, inside the the Stage. all stages are collected at the parent rendering, you can't conditionally add them to Stager, and must be a direct child
from react-native-stager.
Understood, there's a way to know the stage index? so I can check at onPress of StageButtons
from react-native-stager.
yes, you can use <Stager onChange={(stage, direction) => {}}>
to know the current stage, and you may do some logic in there (like checking the current state and acting upon it).
you could also do something inside <Stage loaded={(cb) => { }}>
change the parent stage or skip a stage if you must, just don't forget to call the cb
from react-native-stager.
just a heads up, although late to the party, this will come as a new functionality in 2.0 as willSkip
(which defaults to false
, and supports returning a promise from it)
from react-native-stager.
Instead of returning null returning an empty string seems to work.
{this.state.showstep4 ?
<Stage key="step4">
<View>
</View>
</Stage> : ''
}
from react-native-stager.
yes, you can use
<Stager onChange={(stage, direction) => {}}>
to know the current stage, and you may do some logic in there (like checking the current state and acting upon it).
you could also do something inside<Stage loaded={(cb) => { }}>
change the parent stage or skip a stage if you must, just don't forget to call thecb
Hi @pocesar can you explain more on how do I skip a stage at "loaded"?
Thanks in advance
from react-native-stager.
@cassio-nuke get a ref from the Stager
, so you can control it from the outside, as such
<Stager ref={(_ref) => this.stagerRef=_ref} >
<Stage key="key" loaded={(cb) => { this.doSomeLogic() ? this.stagerRef.next() : cb() }}>
</Stage>
</Stager>
on newer React versions (>=16.3) it's advised to use React.createRef()
, but needs to use this.stagerRef.current
instead and <Stager ref={this.stagerRef}>
from react-native-stager.
Hi,
I have code like this in Stage:
<Button onPress={() => {
this.setState({
inte: 1000
})
}} />
<Text..>{this.state.inte.toString()}</Text..>
This doesn't update <Text..>, but if I go one step back, and then return to Step 2, text is rendered.
I also tried with code:
<Button onPress={() => {
this.setState({
inte: 113
}, () => {instance.refresh})
}} />
Can you help, what I have to do in order to setState function update Stage content
from react-native-stager.
you need to call the function, in that case
this.setState({
inte: 113
}, instance.refresh)
// or
this.setState({
inte: 113
}, () => {instance.refresh()})
from react-native-stager.
Sorry, but this doesn't work in my case. :(
Maybe I am doing something wrong, I am new with react-native.
I copy/paste your example, and just add button as you can see bellow, and it still doesn't work.
Can you check it please:
<Stager onChange={(stage, direction) => {
}}>
<Stage key="step 1" continue={() => true}>
{({ instance, context }) => (
<View>
<TouchableOpacity onPress={context.notify}>
<Text>{"Hello"}</Text>
<Button onPress={() => {this.setState({
inte: String(113)
}, () => {instance.refresh()})}} />
<Text>{this.state.inte}</Text>
</TouchableOpacity>
</View>
)}
</Stage>
<Stage key="step 2" noPrevious loaded={(cb) => this.setState({ loaded: true }, cb)}>
{() => (
<Text>{'World'}</Text>
)}
</Stage>
</Stager>
from react-native-stager.
there's two click handlers, and the first one will be the button
<Button onPress={() => {this.setState({
inte: String(113)
}, () => {instance.refresh()})}} />
this is stopping the propagation to the parent TouchableOpacity. You can either remove the TouchableOpacity and put context.notify()
inside your button, or remove the button from inside the TouchableOpacity and put it somewhere else. or you can use context.notify instead of refresh
<Button onPress={() => {
this.setState({
inte: String(113)
}, context.notify)
}} /> // re-indented for clarity
from react-native-stager.
Related Issues (10)
- How to use StageProgress and StageButtons ? HOT 2
- Consider write the documentation for instance.refresh, instances.forceUpdate& context.notify HOT 1
- Screenshots or Demo Video HOT 1
- StageButtons HOT 7
- instance.refresh && state HOT 9
- Go to specific stage HOT 2
- Unable to resolve module HOT 7
- Override stager/stage styles HOT 4
- StageButton onPress called twice then three times HOT 4
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-stager.