Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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 this issue Feb 3, 2021 · 1 comment

Comments

@teowks000
Copy link

No description provided.

@naveed1239
Copy link

naveed1239 commented May 25, 2021

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}
/>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants