24ark / react-native-step-indicator

A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView.
Apache License 2.0
1.42k stars 312 forks source link

Hello, May I know how can I put icon to the steps instead of numbers, I tried to use renderStepIndicator but the function is red line #114

Open teowks000 opened 3 years ago

naveed1239 commented 3 years ago

Use renderStepIndicator method to define your custom design.

<StepIndicator customStyles={stepIndicatorCustomStyles} **renderStepIndicator={({ position, stepStatus, }: { position: number; stepStatus: string; }) => { //console.log("stepStatus:", stepStatus) let imagePath = [ require("../../assets/signup.png"), require("../../assets/otp.png"), require("../../assets/profile.png"), require("../../assets/Intrest.png"), ]; let selectedImagePath = [ require("../../assets/signupS.png"), require("../../assets/otpS.png"), require("../../assets/profileS.png"), require("../../assets/IntrestS.png"), ]; return ( <Image style={{ resizeMode: "contain", width: 60, height: 60 }} source={ currentStep == position ? selectedImagePath[position] : imagePath[position] }

); }}** currentPosition={currentStep} stepCount={labels.length} labels={labels} />