Warning: Each child in a list should have a unique "key" prop

[amanrajtoppoart007]

11:25
Warning: Each child in a list should have a unique "key" prop.

Check the render method of HorizondalStepProgressBar. See https://fb.me/react-warning-keys for more information.
in View (at HorizondalStepProgressBar.tsx:124)
in HorizondalStepProgressBar (at StepProgressBar.tsx:10)
in StepProgressBar (at OrderStatus.js:9)
in RCTView (at View.js:34)
in View (at OrderStatus.js:8)
in OrderStatus (at OrderDetailScreen.js:127)
in RCTView (at View.js:34)
in View (at OrderDetailScreen.js:126)
in RCTView (at View.js:34)
in View (at ScrollView.js:1124)
in RCTScrollView (at ScrollView.js:1260)
in ScrollView (at ScrollView.js:1286)
in ScrollView (at OrderDetailScreen.js:79)
in RCTView (at View.js:34)
in View (at OrderDetailScreen.js:77)
in RCTView (at View.js:34)
in View (at OrderDetailScreen.js:73)
in OrderDetailScreen (at SceneView.tsx:122)
in StaticContainer
in StaticContainer (at SceneView.tsx:115)
in EnsureSingleNavigator (at SceneView.tsx:114)
in SceneView (at useDescriptors.tsx:150)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:221)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:220)
in RCTView (at View.js:34)
in View (at CardSheet.tsx:33)
in ForwardRef(CardSheet) (at Card.tsx:563)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:545)
in PanGestureHandler (at GestureHandlerNative.tsx:13)
in PanGestureHandler (at Card.tsx:539)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:535)
in RCTView (at View.js:34)
in View (at Card.tsx:529)
in Card (at CardContainer.tsx:189)
in CardContainer (at CardStack.tsx:558)
in RCTView (at View.js:34)
in View (at Screens.tsx:69)
in MaybeScreen (at CardStack.tsx:551)
in RCTView (at View.js:34)
in View (at Screens.tsx:48)
in MaybeScreenContainer (at CardStack.tsx:461)
in CardStack (at StackView.tsx:458)
in KeyboardManager (at StackView.tsx:456)
in SafeAreaProviderCompat (at StackView.tsx:453)
in RCTView (at View.js:34)
in View (at StackView.tsx:452)
in StackView (at createStackNavigator.tsx:84)
in StackNavigator (at OrderHistoryNavigator.js:8)
in OrderHistoryNavigator (at SceneView.tsx:122)
in StaticContainer
in StaticContainer (at SceneView.tsx:115)
in EnsureSingleNavigator (at SceneView.tsx:114)
in SceneView (at useDescriptors.tsx:150)
in RCTView (at View.js:34)
in View (at BottomTabView.tsx:41)
in SceneContent (at BottomTabView.tsx:117)
in RCTView (at View.js:34)
in View (at ResourceSavingScene.tsx:43)
in RCTView (at View.js:34)
in View (at ResourceSavingScene.tsx:26)
in ResourceSavingScene (at BottomTabView.tsx:112)
in RCTView (at View.js:34)
in View (at src/index.native.js:134)
in ScreenContainer (at BottomTabView.tsx:96)
in RCTView (at View.js:34)
in View (at BottomTabView.tsx:95)
in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
in SafeAreaProviderCompat (at BottomTabView.tsx:94)
in BottomTabView (at createBottomTabNavigator.tsx:41)
in BottomTabNavigator (at AppNavigator.js:19)
in AppNavigator (at App.js:45)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:390)
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
in ThemeProvider (at NavigationContainer.tsx:90)
in ForwardRef(NavigationContainer) (at App.js:44)
in App (created by ExpoRoot)
in RootErrorBoundary (created by ExpoRoot)
in ExpoRoot (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)

Stack trace:
node_modules\react-native\Libraries\LogBox\LogBox.js:173:8 in registerError
node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
node_modules\react\cjs\react.development.js:315:4 in printWarning
node_modules\react\cjs\react.development.js:287:16 in error
node_modules\react\cjs\react.development.js:1630:9 in validateExplicitKey
node_modules\react\cjs\react.development.js:1656:27 in validateChildKeys
node_modules\react\cjs\react.development.js:1806:23 in createElementWithValidation
node_modules\react-native-step-progress-bar\src\HorizondalStepProgressBar.tsx:14:34 in HorizondalStepProgressBar
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:10073:26 in renderWithHooks
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:12882:27 in mountIndeterminateComponent
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19181:22 in beginWork$1
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18085:22 in performUnitOfWork
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18013:38 in workLoopSync
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17977:18 in renderRootSync
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17674:33 in performSyncWorkOnRoot
[native code]:null in performSyncWorkOnRoot
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17718:28 in batchedUpdates$1
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2492:29 in batchedUpdates
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2638:16 in _receiveRootNodeIDEvent
node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2767:27 in receiveTouches
node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
[native code]:null in callFunctionReturnFlushedQueue

[amanrajtoppoart007]

Here is a sample code used to get this problem

<StepProgressBar
orientation={'horizondal'}
stepColor="lightgreen"
activeStep={1}
completedBarColor={'#63F6F7'}
stepWidth={60}
stepHeight={80}
showLabel={true}
barLength={70}
barThickeness={8}
data={[
{label: 'Order Received'},
{label: 'On the Way'},
{label: 'Order Completed'},
]}
barColor={'lightgrey'}
labelTextStyle={{fontSize:16, color: 'black'}}
renderStep={({index}) => {
if (index === 0) {
return (
<View
style={{
width: 80,
height: 80,
borderRadius: 25,
backgroundColor: '#63F6F7',
}}>
<Image
style={{width: '70%', height: '70%',alignSelf:"center",marginTop:5}}
source={require('../assets/images/pickup.png')}
/>

);
} else if (index === 1) {
return (
<View
style={{
width: 80,
height: 80,
borderRadius: 25,
backgroundColor: '#63F6F7',
}}>
<Image
style={{width: '70%', height: '70%',alignSelf:"center",marginTop:5}}
source={require('../assets/images/shopping.png')}
/>

);
} else if (index === 2) {
return (
<View
style={{
width: 80,
height: 80,
borderRadius: 25,
backgroundColor: 'lightgrey',
}}>
<Image
style={{width: '70%', height: '70%',alignSelf:"center",marginTop:10}}
source={require('../assets/images/circle-right.png')}
/>

);
}
}}
/>

[WhiteRose7-pretty]

did you solve? @amanrajtoppoart007

[amanrajtoppoart007]

I will do so