CODEWITHSUNDEEP
javascriptandroidiosreactjsreact-native
Deven Nazare
Deven Nazare

Reputation: 518

How to add custom icons in React Native stepper

I had implemented the React Native stepper with the numbers. As below:

Screenshot for default

I want to add some custom icons to the stepper instead of the numbers.

I want add custom icons such as Order Confirmed, Shipped, Delivered icons etc. Is there any way?

Below is the code for the stepper as follows:

import StepIndicator from 'react-native-step-indicator';

const labels = ["Cart","Delivery Address","Order Summary","Payment Method","Track"];
const customStyles = {
  stepIndicatorSize: 25,
  currentStepIndicatorSize:30,
  separatorStrokeWidth: 2,
  currentStepStrokeWidth: 3,
  stepStrokeCurrentColor: '#fe7013',
  stepStrokeWidth: 3,
  stepStrokeFinishedColor: '#fe7013',
  stepStrokeUnFinishedColor: '#aaaaaa',
  separatorFinishedColor: '#fe7013',
  separatorUnFinishedColor: '#aaaaaa',
  stepIndicatorFinishedColor: '#fe7013',
  stepIndicatorUnFinishedColor: '#ffffff',
  stepIndicatorCurrentColor: '#ffffff',
  stepIndicatorLabelFontSize: 13,
  currentStepIndicatorLabelFontSize: 13,
  stepIndicatorLabelCurrentColor: '#fe7013',
  stepIndicatorLabelFinishedColor: '#ffffff',
  stepIndicatorLabelUnFinishedColor: '#aaaaaa',
  labelColor: '#999999',
  labelSize: 13,
  currentStepLabelColor: '#fe7013'
}


constructor() {
    this.state = {
        currentPosition: 0
    }
}

render() {
  return (
    <StepIndicator
         customStyles={customStyles}
         currentPosition={this.state.currentPosition}
         labels={labels}
    />
  )
}

Upvotes: 0

Views: 2807

Answers (2)

Mydhe
Mydhe

Reputation: 351

In the example shared below, I am using react-native-step-indicator-v2 but the properties are somehow similar to StepIndicator-v1.

import { Entypo } from "@expo/vector-icons";
import StepIndicator from "react-native-step-indicator-v2";

const labels = [
  "1. Cart Selection",
  "2. Processing",
  "3. Order dispatched",
  "4. Order Delivered",
  "5. Order Paid",
];

const customStyles = {
  stepIndicatorSize: 25,
  currentStepIndicatorSize: 30,
  separatorStrokeWidth: 2,
  currentStepStrokeWidth: 3,
  stepStrokeCurrentColor: "#fe7013",
  stepStrokeWidth: 3,
  stepStrokeFinishedColor: "#fe7013",
  stepStrokeUnFinishedColor: "#aaaaaa",
  separatorFinishedColor: "#fe7013",
  separatorUnFinishedColor: "#aaaaaa",
  stepIndicatorFinishedColor: "#fe7013",
  stepIndicatorUnFinishedColor: "#ffffff",
  stepIndicatorCurrentColor: "#ffffff",
  stepIndicatorLabelFontSize: 13,
  currentStepIndicatorLabelFontSize: 13,
  stepIndicatorLabelCurrentColor: "#fe7013",
  stepIndicatorLabelFinishedColor: "#ffffff",
  stepIndicatorLabelUnFinishedColor: "#aaaaaa",
  labelColor: "#999999",
  labelSize: 13,
  currentStepLabelColor: "#fe7013",
};

const icons = ["shopping-cart", "cycle", "thumbs-up", "pin", "wallet"];
const [currentPosition, setCurrentPosition] = useState(0);

return (
<>
....
<StepIndicator
          customStyles={customStyles}
          currentPosition={currentPosition}
          labels={labels}
          direction="vertical"
          renderStepIndicator={({ position, stepStatus }) => (
            <Entypo name={icons[position]} size={16} color="#fff" />
          )}
        />
...
</>
)

Upvotes: 0

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

You will have to pass a function for 'renderStepIndicator' prop.

import Icon from 'react-native-vector-icons/FontAwesome';

const icons=["rocket","star"];

 <StepIndicator
         customStyles={customStyles}
         currentPosition={this.state.currentPosition}
         labels={labels}
         renderStepIndicator={({position,stepstatus})=>(<Icon name={icons[position]} size={30} color="#900" />)}
    />

Icon can be your custom component or an icon from a library like react native vector icons

Upvotes: 6

Related Questions