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.44k stars 312 forks source link

Custom Image for Finished #64

Open rahiljain09 opened 5 years ago

rahiljain09 commented 5 years ago

screen shot 2019-03-07 at 4 30 01 pm I want to render Custom Image for finished and numbers for current and not finished.

24ark commented 5 years ago

@rahiljain09 You can use the renderStepIndicator prop to render a custom component for each step. One of the examples uses react-native-vector-icons to render icons inside each step.

ahtisham09 commented 4 years ago

@24ark can we add image at the last of step like this

Screen Shot 2020-09-06 at 6 58 17 PM
OrLevy23 commented 3 years ago

any option to just override one specific step? i'm facing similar issue when trying to add failed step with X

KiratiBhuva commented 3 years ago

For the above issue, you can leverage position and stepStatus property of the renderStepIndicator.

const renderStepIndicator = ({ position, stepStatus }) => { if (stepStatus === 'finished') { return (<Icon name="checkmark" />); } return <Text style={{ color: '#ffffff' }}>{position + 1}</Text>; };

image