colbymillerdev / react-native-progress-steps Goto Github PK

Is there any way to change the steps clicking in any step?

I have used this component to only showing a few inputs on a screen at a time, now I want to send data between the step views and I don't want how to do it.

Can any one help me in this case ?

I have a button inside as a child how to persist tap even if the keyboard is open?

Hi, I call an axios request in the first step when I click next button and then the request returns a success response I change the errors props to false to pass to the next step but didn't work I need to click on it many times then it passes to the next.

How can I fix that?
thank you

I have a problem when a use a flatlist in ProgressStep. I think this problem solve, if you use SafeAreaView instead of scrollView in ProgressStep.

I am use react-native 0.61.5.

how can after onSubmit go to first step ?

I have a ScrollView inside the ProgressStep but I can't scroll to the bottom. I have tried all sorts of settings to the ScrollView. The Form has a TextInput that grows with content. The form looks fine and scrolls correctly outside of ProgressStep (Part of a Wizard and then can be modified outside wizard)

I see ScrollViewProps and wondering how to manage?

How can I determine the current active step?

It can be useful to replace the scrollView (on demand) by a simple view.

Just adding a prop to enable/disable the scrollview (+ adding a viewProps) might solve the problem.

Working on it

In this stepper, the issue I am running with is, the number of steps to be provided to the stepper is obtained at run time (dynamic). Hence, in this case, how should I progress. Can anybody help?

I want that I can press submit button and ProgressSteps component reset all steps

Hello,
I need to pass data from a screen of the steppers to another.

As in React-native is not possible to pass data from child to parents.Is it possible to link the steppers with react-navigation.

 What are the recommendation to pass data from a Progress STep screen to another.

See my code:

`export default class SinisterSteps extends React.Component{

...
render(){

    return(
        <Block safe flex style={{ backgroundColor: theme.COLORS.WHITE }}>
            <ProgressSteps>
                <ProgressStep label="Categories"  onNext={() => this.nextStep} nextBtnDisabled={false} previousBtnDisabled={true}>
                
                    <SinisterCategoriesScreen/>

                </ProgressStep>
                <ProgressStep label="Photo">
                    
                    <SinisterPhotoScreen />
                
                </ProgressStep>
                <ProgressStep label="Dernier étape">
                    
                    <SinisterInfoScreen/>

                </ProgressStep>
            </ProgressSteps>    

        </Block>
                
        );

}

}
`

"react-native-progress-steps": "^1.2.9",Implementing errorWarning:

Failed prop type: Invalid props.style key textAlign supplied to View.Bad object: { "transitionProperty": "opacity", "transitionDuration": "0.15s", "userSelect": "none", "cursor": "pointer", "touchAction": "manipulation", "textAlign": "center", "padding": 8}Valid keys: [ "animationDelay", "animationDirection", "animationDuration", "animationFillMode", "animationIterationCount", "animationKeyframes", "animationPlayState", "animationTimingFunction", "transitionDelay", "transitionDuration", "transitionProperty", "transitionTimingFunction", "borderColor", "borderBottomColor", "borderEndColor", "borderLeftColor", "borderRightColor", "borderStartColor", "borderTopColor", "borderRadius", "borderBottomEndRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStartRadius", "borderTopEndRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStartRadius", "borderStyle", "borderBottomStyle", "borderEndStyle", "borderLeftStyle", "borderRightStyle", "borderStartStyle", "borderTopStyle", "cursor", "touchAction", "userSelect", "willChange", "alignContent", "alignItems", "alignSelf", "backfaceVisibility", "borderWidth", "borderBottomWidth", "borderEndWidth", "borderLeftWidth", "borderRightWidth", "borderStartWidth", "borderTopWidth", "bottom", "boxSizing", "direction", "display", "end", "flex", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "height", "justifyContent", "left", "margin", "marginBottom", "marginHorizontal", "marginEnd", "marginLeft", "marginRight", "marginStart", "marginTop", "marginVertical", "maxHeight", "maxWidth", "minHeight", "minWidth", "order", "overflow", "overflowX", "overflowY", "padding", "paddingBottom", "paddingHorizontal", "paddingEnd", "paddingLeft", "paddingRight", "paddingStart", "paddingTop", "paddingVertical", "position", "right", "start", "top", "visibility", "width", "zIndex", "aspectRatio", "gridAutoColumns", "gridAutoFlow", "gridAutoRows", "gridColumnEnd", "gridColumnGap", "gridColumnStart", "gridRowEnd", "gridRowGap", "gridRowStart", "gridTemplateColumns", "gridTemplateRows", "gridTemplateAreas", "shadowColor", "shadowOffset", "shadowOpacity", "shadowRadius", "shadowSpread", "perspective", "perspectiveOrigin", "transform", "transformOrigin", "transformStyle", "backgroundColor", "opacity", "elevation", "backdropFilter", "backgroundAttachment", "backgroundBlendMode", "backgroundClip", "backgroundImage", "backgroundOrigin", "backgroundPosition", "backgroundRepeat", "backgroundSize", "boxShadow", "clip", "filter", "outlineColor", "outlineOffset", "outlineStyle", "outlineWidth", "overscrollBehavior", "overscrollBehaviorX", "overscrollBehaviorY", "scrollbarWidth", "scrollSnapAlign", "scrollSnapType", "WebkitMaskImage", "WebkitOverflowScrolling"] in View (created by TouchableOpacity) in TouchableOpacity (at ProgressStep.js:83) in div (created by View) in View (at ProgressButtons.js:6) in div (created by View) in View (at ProgressButtons.js:5) in ProgressButtons (at ProgressStep.js:96) in div (created by View) in View (at ProgressStep.js:93) in ProgressStep (at register_buyer/index.tsx:68) in div (created by View) in View (at ProgressSteps.js:67) in div (created by View) in View (at ProgressSteps.js:65) in ProgressSteps (at register_buyer/index.tsx:60) in div (created by View) in View (at register_buyer/index.tsx:58) in RegisterBuyerScreen (created by SceneView) in SceneView (created by CardContainer) in div (created by View) in View (created by CardContainer) in div (created by View) in View (created by CardContainer) in div (created by View) in View (created by Card) in div (created by View) in View (created by AnimatedComponent) in AnimatedComponent (created by PanGestureHandler) in PanGestureHandler (created by Card) in div (created by View) in View (created by AnimatedComponent) in AnimatedComponent (created by Card) in div (created by View) in View (created by Card) in Card (created by CardContainer) in CardContainer (created by CardStack) in div (created by View) in View (created by AnimatedComponent) in AnimatedComponent (at screens.web.js:105) in Screen (created by MaybeScreen) in MaybeScreen (created by CardStack) in div (created by View) in View (created by MaybeScreenContainer) in MaybeScreenContainer (created by CardStack) in CardStack (created by KeyboardManager) in KeyboardManager (created by Context.Consumer) in SafeAreaProviderCompat (created by StackView) in div (created by View) in View (created by StackView) in StackView (created by StackView) in StackView in Unknown (created by Navigator) in Navigator (created by SceneView) in SceneView (created by SwitchView) in SwitchView (created by Navigator) in Navigator (created by NavigationContainer) in NavigationContainer (at App.tsx:9) in div (created by View) in View (at NativeSafeAreaView.web.tsx:58) in NativeSafeAreaView (at src/index.tsx:26) in SafeAreaProvider (at App.tsx:8) in App (at withExpoRoot.web.js:13) in RootErrorBoundary (at withExpoRoot.web.js:12) in ExpoRootComponent (at registerRootComponent.web.js:6) in RootComponent in div (created by View) in View (created by AppContainer) in div (created by View) in View (created by AppContainer) in AppContainer
-- | --

Is it possible to reduce the StepIcon size and text?

I've tried adding Formik third library for forms, and it is not working for me. How can I implement this with Formik?

Help is appreciated, thanks.

This is my attempt:

`

  <Formik
    initialValues={{ email: "" }}
    onSubmit={(values) => {
      console.log(values);
    }}
  >
    {(props) => (
      <View>
        <ProgressSteps>
          <ProgressStep
            label="Info"
            nextBtnStyle={buttonTextStyle}
            nextBtnTextStyle={buttonTextStyle}
            //   onPrevious={this.onPrevStep}
            onNext={() => console.log("Next Step")}
            // errors={errors}
          >
            <TextInput
              style={{ borderWidth: "2px" }}
              onChangeText={props.handleChange("email")}
              value={props.values.email}
            />
            <Button onPress={props.handleSubmit} title="Submit" />
          </ProgressStep>
        </ProgressSteps>
      </View>
    )}
  </Formik>
</Fragment>`

hey,

I'd like to use your "Next" and "Previous" buttons' logic in my inner child of "Progress Step" but I couldn't figure out how to do that..

I'd like for your help.
Thanks

Is it possible to change the bottom padding? This looks kinda strange.

Hello, is there any prop to change the font size of the ProgressStep label? I don't see it on the documentation. thank you

Hi there.
I have a slightly different use case in mind: I need the progress steps to indicate progress and stages made externally, not by the user - for example when a person orders something for delivery, the progress steps would indicate what the order status is.

(1) Order Received -> (2) Preparing order -> (3) Ready For Delivery -> (4) En Route ...

Is there a way to programatically change the steps? Should i think about this in a different perspective? Or is this not a proper use case and I should look for alternatives?
BTW, thanks for putting this our here.

Hi,

I have a ajax call with axios, when return complete i need to change current step, But in changing the state nothing happens. How can I do this?

How to go to the next/previous step upon pressing our own custom button?

I tried using refs, but It ain't working.

I want to customize the line length between two progress circles. Its current behaviour is as follows.

I want to increase the length between 1 and 2 so that select vegetables spreads over the display well, however, I didn't find anything in the docs for that

I'd like to know if there's a way to trigger onNextStep method with a custom View element that's inside a step

Example:

<View onPress={ //onNextStep() call goes here }>
//Element

Thanks!

Specifically, I'm using react-navigation, but perhaps issue exists anyway, even without it.

Add a prop so that you can render custom icons for each step

If there are more than 5 steps, the step bar is not rendered correctly and the two outer circles are cut off.

Hello!,

I am very new at React native, so I am not sure if this is an issue or if I am doing something wrong but I am getting an error when loading my expo app in web and it's coming from this line here

This is the error

I believe it happens because of this line here

Any suggestions on how I might get rid of it ?

Thank you!

Change of control step by parent component. In my ProgressStep, there is a button that calls a route from my API, if it works, the Steps will need to call the next step.

Is it possible to add TypeScript support to this package?

Hi there,
Thanks for publicly sharing this repo! ❤️

I am needing the following updates:

• Prop to set the completed labels font color (separate to the disabled label color)
• Prop to completely hide the ProgressStep buttons
• activeStep updated so that it supports changing values
• A prop so that all Steps can be set to complete stage (all showing the completed tick).
• A prop so that all Steps can be set to failure stage (all showing the failure cross).

Is there any way to specify the current step, I have read the documentation and I do not locate it

Prevent Moving to Next Step when Cancel Button is Pressed

confirmNameOfField = () => {
    Alert.alert(
      'Confirm',
      'Confirm the Name of Field',
      [
        {
          text: 'Cancel',
          onPress: () => this.onPrevStep, //Prevent moving to next step and remain on the same activeStep
          style: 'cancel',
        },
        {
          text: 'OK',
          onPress: () => console.log('OK Pressed'),
        },
      ],
      {cancelable: false},
    );
  };
render() {
return(
<ProgressSteps activeStep={0}>
          <ProgressStep
            label="Enter name of field"
            onNext={this.confirmNameOfField}
            onPrevious={this.onPrevStep} 
            scrollViewProps={this.defaultScrollViewProps}>
            <TextInput placeholder="Name of Field" />
          </ProgressStep>
         ...
<ProgressSteps/>
)

Can we Hide footer section it's tacking much space.

does it support vertical / horizontal directionÏ

wrapping progress step with formik is impossible.

hello, I have quizz array and i want to show the steps depending on the length and content of the array.
So what I did is:

<ProgressSteps
       ref={ref => { this.progressSteps = ref }}
       activeStep={this.state.activeStep}>
       { this.state.quizz.map((quiz, i) => {
                return  (
                    <ProgressStep label={quiz.name}
                         nextBtnStyle={styles.nextBtn} nextBtnTextStyle={styles.btnText}
                         scrollViewProps={this.defaultScrollViewProps}>
                    // some other elements
                  </ProgressStep>
                )
         }
 </ProgressSteps>

but I get this error :

Unhandled JS Exception: Invariant Violation: Invariant Violation: React.cloneElement(...): The argument must be a React element, but you passed undefined.

can anyone help me?!

it's posibble to intercept onNext button for validation before it's going to next step ?

Looking for a way to dynamically add a new ProgressStep. I have a use case with a step that is only required based on some logic in a previous step. I've tried conditionally rendering the new ProgressStep child within the ProgressSteps, but the new step does not show.

I was looking to your code and i was hoping if some modifications can be done on steps items behavior on the top, regarding to:

• Change default text or icon (maybe integrate it with react-native-vector-icons) in both completed step or current step and not just the current label below it.
• I was looking on the documentation and couldn't find any topic on how to set a custom step as active manually
• Is there a way to make the steps items touchables and delegate onpress listeners to them?

How can I change the width of entire ProgressSteps container? Is it possible?

Is it possible to add icons to the progress bar buttons?

fontFamily "rockwell" is not a system font and has not been loaded through Font.loadAsync

i want to steps move from right to left

how to change icon on complete step and how to change border style on progress line...

I need to achieve something like that...

prop 'borderStyle' is not working for < ProgressSteps props... />

When using TextInput component ,The Previous And Next Button will show upon the keyboard

Hi! I just updated expo from sdk 35 to 37. Since that I'm getting this error:

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

My code looks like this:

<SafeAreaView style={{flex:1}}> <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "position"} enabled > <ScrollView> <Appbar.Header> <Appbar.Action icon="menu" onPress={() => this.props.navigation.toggleDrawer()} /> <Appbar.Content title="Mi Bascula GaMa" subtitle="Registro De Trabajo" /> <Appbar.Action icon="dots-vertical" onPress={this._onMore} /> </Appbar.Header> <ProgressSteps> <ProgressStep label="Registros De Trabajo" onNext={ () => console.log("Funciona!!")} errors={this.state.errors} previousBtnText = {Anterior} nextBtnText = {Siguiente`} >

<FlatList
keyExtractor={this.keyExtractor}
data={ showingBasculas }
renderItem={this.renderItem}
ListEmptyComponent = { <Paragraph style={{ alignSelf : 'center', paddingTop: 50 }}>No hay registros de trabajo disponibles }
/>

						</ProgressStep>
						<ProgressStep 
							label="Reportes Generados"
							onNext={ () => console.log("Funciona!!")}
							errors={this.state.errors} 
							previousBtnText = {`Anterior`}
							finishBtnText = {`Salir`}
							onSubmit={()=>{this.props.navigation.goBack()}} >
							<Divider />
							<FlatList
							keyExtractor={this.keyExtractorInformeTecnicoCab}
							data={ showingInformeTecnicoCab }
							renderItem={this.renderItemInformeTecnicoCab}
							ListEmptyComponent = { <Paragraph style={{ alignSelf : 'center', paddingTop: 50 }}>No data available</Paragraph> }
							/>
							
						</ProgressStep>
					</ProgressSteps> 
					
				</ScrollView>
            </KeyboardAvoidingView>
      	</SafeAreaView>`

I've trie removing the main ScrollView, but I think the ProgressStep component is a ScrollView. Can you help me with this?