StageButtons

[pocesar]

StageButtons

[pocesar]

you have a couple of options. I usually prefer to delegate the current control to an outside state, in the parent of Stager and check from there. you can use the functions in context like context.has('prev') or context.has('next') to determinate if you can show / hide the control buttons. the default implementation can show you how to do it (in https://github.com/pocesar/react-native-stager/blob/master/src/index.tsx#L445-L457) just change this.state to context.state
the docs are lackluster regarding the API, but I'll complement it soon. eventually I'll add public getters from the state, because context.state seems hacky

[appjitsu]

OK I’ll give that a shot. Thanks.

…

On Sep 11, 2017, at 8:45 PM, Paulo Cesar ***@***.***> wrote: you have a couple of options. I usually prefer to delegate the current control to an outside state, in the parent of Stager and check from there. you can use the functions in context like context.has('prev') or context.has('next') to determinate if you can show / hide the control buttons. the docs are lackluster regarding the API, but I'll complement it soon — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AKZgMHNLWaoYlRojMsjQNBzh4YuhRwyzks5sheJUgaJpZM4PT2_h>.

[appjitsu]

Ok that works. Thanks! <StageButtons> {({ context }) => ( <View style={{ flexDirection: 'row' }}> {context.has('prev') && <Button transparent large onPress={context.prev}> <Icon name="ios-arrow-dropleft-circle" /> </Button> } {context.has('next') && <Button transparent rounded large onPress={context.next}> <Icon name="ios-arrow-dropright-circle" /> </Button> } </View> )} </StageButtons>

[appjitsu]

How would you go about conditionally showing the next only on some stages?

There are some situations where the next button should be disabled until the user enters the correct information.

Example: next buttons should be disabled until the pin has 4 digits...

[appjitsu]

Nvm. I just saw this.

<Button title="can continue" onPress={() => {
          this.setState({
            canContinue: true
          }, instance.refresh)
        }} />

[appjitsu]

Next question is, in the above example the step progress bar does not stretch across the view. How do that?

[pocesar]

the

<View style={styles.progressPad} />

in https://github.com/pocesar/react-native-stager/blob/master/src/index.tsx#L436 is to force using 30% of the available screen width with an empty element. you can remove that and set the flex of the styles.progressFlex with a flex: 1 to use all available space