react-nativestepperreact-native-progress-steps

Can we add icons instead of text in react-native-progress-steps buttons

I am using react-native-progress-steps to create a stepper implementation in react-native. It's quite customisable but I could not find a way to put arrow icons instead of nextBtnText and previousBtnText.

I have tried using text symbols for arrow icons but they never fit the buttons. Is there any way to use icons and not text?

Solution

  • The react-native-progress-steps library does not directly support using icons instead of text for the "Next" and "Previous" buttons because its type is String. But, you can customize the nextBtnText and previousBtnText properties to use icons by rendering an icon component like from react-native-vector-icons instead of plain text.

    Something like this:

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

 <ProgressSteps
    nextBtnText={<Icon name="arrow-right" size={20} color="#007bff" />}
    previousBtnText={<Icon name="arrow-left" size={20} color="#007bff" />}
  >