If i have a list view in react native and all the list items have a icon situated inside the list items, so if i click on for example the icon in the second list item how would i change the color of the icon. Im asking this as the icon works as a like button and multiple users can click the like icon but the current user needs to display the like as red when liked or grey color when disliked:
I have this so far has im trying to get the control id and set the color but cant find much resources on how to do this, this is what i have so far:
const heartRef = useRef(null);
<TouchableOpacity ref={heartRef} onPress={() => onMessageLike(e["message"]["mess"].id)} style={{textAlign:'right',flex:1,flexDirection:'row',}}>
<MaterialCommunityIcons style={{flex:1, textAlign:'right',paddingRight:5,}} name="heart" color={"#bdbdbd"} size={30} />
<Text style={{color:'#bdbdbd', fontSize:8,paddingRight:15,marginTop:5,}}>{e["likes"] > 0 ? e["likes"] : null}</Text>
</TouchableOpacity>
As you can see im using useRef to get the component for its ref property, but not sure where to go with this using this property, when i do this:
console.log(heartRef.current);
I get this information:
{"_children": [{"_children": [Array], "_internalFiberInstanceHandleDEV": [FiberNode], "_nativeTag": 975, "viewConfig": [Object]}, {"_children": [Array], "_internalFiberInstanceHandleDEV": [FiberNode], "_nativeTag": 977, "viewConfig": [Object]}], "_internalFiberInstanceHandleDEV": {"_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": {"_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": undefined, "actualDuration": 4.869157135486603, "actualStartTime": 280624822.19455, "alternate": [FiberNode], "child": [FiberNode], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": [Object], "flags": 1, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": null, "mode": 2, "pendingProps": [Object], "ref": [Function forwardRef], "return": [FiberNode], "selfBaseDuration": 0.6608079671859741, "sibling": null, "stateNode": null, "subtreeFlags": 8389125, "tag": 11, "treeBaseDuration": 4.709810137748718, "type": [Object], "updateQueue": null}, "_debugSource": undefined, "actualDuration": 4.128849148750305, "actualStartTime": 280624822.930473, "alternate": {"_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": undefined, "actualDuration": 5.503075122833252, "actualStartTime": 280627030.731702, "alternate": [Circular], "child": [FiberNode], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": "RCTView", "flags": 4, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": null, "mode": 2, "pendingProps": [Object], "ref": [Function forwardRef], "return": [FiberNode], "selfBaseDuration": 0.08257699012756348, "sibling": null, "stateNode": [Circular], "subtreeFlags": 8389127, "tag": 5, "treeBaseDuration": 3.8761910796165466, "type": "RCTView", "updateQueue": null}, "child": {"_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": null, "actualDuration": 3.962618052959442, "actualStartTime": 280624823.027819, "alternate": [FiberNode], "child": [FiberNode], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": null, "flags": 0, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Array], "memoizedState": null, "mode": 2, "pendingProps": [Array], "ref": null, "return": [Circular], "selfBaseDuration": 0.07165396213531494, "sibling": [FiberNode], "stateNode": null, "subtreeFlags": 8389125, "tag": 7, "treeBaseDuration": 3.8528480529785156, "type": null, "updateQueue": null}, "childLanes": 0, "deletions": null, "dependencies": null, "elementType": "RCTView", "flags": 4, "index": 0, "key": null, "lanes": 0, "memoizedProps": {"accessibilityActions": undefined, "accessibilityElementsHidden": undefined, "accessibilityHint": undefined, "accessibilityLabel": undefined, "accessibilityLabelledBy": undefined, "accessibilityLanguage": undefined, "accessibilityLiveRegion": undefined, "accessibilityRole": undefined, "accessibilityState": [Object], "accessibilityValue": [Object], "accessibilityViewIsModal": undefined, "accessible": true, "children": [Array], "collapsable": false, "focusable": true, "forwardedRef": [Object], "hasTVPreferredFocus": undefined, "hitSlop": undefined, "importantForAccessibility": undefined, "nativeID": undefined, "nextFocusDown": undefined, "nextFocusForward": undefined, "nextFocusLeft": undefined, "nextFocusRight": undefined, "nextFocusUp": undefined, "onAccessibilityAction": undefined, "onClick": [Function onClick], "onLayout": undefined, "onResponderGrant": [Function onResponderGrant], "onResponderMove": [Function onResponderMove], "onResponderRelease": [Function onResponderRelease], "onResponderTerminate": [Function onResponderTerminate], "onResponderTerminationRequest": [Function onResponderTerminationRequest], "onStartShouldSetResponder": [Function onStartShouldSetResponder], "pointerEvents": undefined, "style": [Object], "testID": undefined}, "memoizedState": null, "mode": 2, "pendingProps": {"accessibilityActions": undefined, "accessibilityElementsHidden": undefined, "accessibilityHint": undefined, "accessibilityLabel": undefined, "accessibilityLabelledBy": undefined, "accessibilityLanguage": undefined, "accessibilityLiveRegion": undefined, "accessibilityRole": undefined, "accessibilityState": [Object], "accessibilityValue": [Object], "accessibilityViewIsModal": undefined, "accessible": true, "children": [Array], "collapsable": false, "focusable": true, "forwardedRef": [Object], "hasTVPreferredFocus": undefined, "hitSlop": undefined, "importantForAccessibility": undefined, "nativeID": undefined, "nextFocusDown": undefined, "nextFocusForward": undefined, "nextFocusLeft": undefined, "nextFocusRight": undefined, "nextFocusUp": undefined, "onAccessibilityAction": undefined, "onClick": [Function onClick], "onLayout": undefined, "onResponderGrant": [Function onResponderGrant], "onResponderMove": [Function onResponderMove], "onResponderRelease": [Function onResponderRelease], "onResponderTerminate": [Function onResponderTerminate], "onResponderTerminationRequest": [Function onResponderTerminationRequest], "onStartShouldSetResponder": [Function onStartShouldSetResponder], "pointerEvents": undefined, "style": [Object], "testID": undefined}, "ref": [Function forwardRef], "return": {"_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": undefined, "actualDuration": 4.198580205440521, "actualStartTime": 280624822.866203, "alternate": [FiberNode], "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": [Object], "flags": 0, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": null, "mode": 2, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0.05673104524612427, "sibling": null, "stateNode": null, "subtreeFlags": 8389125, "tag": 10, "treeBaseDuration": 4.049002170562744, "type": [Object], "updateQueue": null}, "selfBaseDuration": 0.08892303705215454, "sibling": null, "stateNode": [Circular], "subtreeFlags": 8389125, "tag": 5, "treeBaseDuration": 3.99227112531662, "type": "RCTView", "updateQueue": null}, "_nativeTag": 979, "viewConfig": {"Commands": {"hotspotUpdate": 1, "setPressed": 2}, "NativeProps": {"accessibilityActions": "Array", "accessibilityCollection": "Map", "accessibilityCollectionItem": "Map", "accessibilityHint": "String", "accessibilityLabel": "String", "accessibilityLabelledBy": "mixed", "accessibilityLiveRegion": "String", "accessibilityRole": "String", "accessibilityState": "Map", "accessibilityValue": "Map", "accessible": "boolean", "alignContent": "String", "alignItems": "String", "alignSelf": "String", "aspectRatio": "number", "backfaceVisibility": "String", "backgroundColor": "Color", "borderBottomColor": "Color", "borderBottomEndRadius": "number", "borderBottomLeftRadius": "number", "borderBottomRightRadius": "number", "borderBottomStartRadius": "number", "borderBottomWidth": "number", "borderColor": "Color", "borderEndColor": "Color", "borderEndWidth": "number", "borderLeftColor": "Color", "borderLeftWidth": "number", "borderRadius": "number", "borderRightColor": "Color", "borderRightWidth": "number", "borderStartColor": "Color", "borderStartWidth": "number", "borderStyle": "String", "borderTopColor": "Color", "borderTopEndRadius": "number", "borderTopLeftRadius": "number", "borderTopRightRadius": "number", "borderTopStartRadius": "number", "borderTopWidth": "number", "borderWidth":
"number", "bottom": "mixed", "collapsable": "boolean", "columnGap": "number", "display": "String", "elevation": "number", "end": "mixed", "flex": "number", "flexBasis": "mixed", "flexDirection": "String", "flexGrow": "number", "flexShrink": "number", "flexWrap": "String", "focusable": "boolean", "gap": "number", "hasTVPreferredFocus": "boolean", "height": "mixed", "hitSlop": "mixed", "importantForAccessibility": "String", "justifyContent": "String", "left": "mixed", "margin": "mixed", "marginBottom": "mixed", "marginEnd": "mixed", "marginHorizontal": "mixed", "marginLeft": "mixed", "marginRight": "mixed", "marginStart": "mixed", "marginTop": "mixed", "marginVertical": "mixed", "maxHeight": "mixed", "maxWidth": "mixed", "minHeight": "mixed", "minWidth": "mixed", "nativeBackgroundAndroid": "Map", "nativeForegroundAndroid": "Map", "nativeID": "String", "needsOffscreenAlphaCompositing": "boolean", "nextFocusDown": "number", "nextFocusForward": "number", "nextFocusLeft": "number", "nextFocusRight": "number", "nextFocusUp": "number", "onLayout": "boolean", "onMoveShouldSetResponder": "boolean", "onMoveShouldSetResponderCapture": "boolean", "onPointerEnter": "boolean", "onPointerEnterCapture": "boolean", "onPointerLeave": "boolean", "onPointerLeaveCapture": "boolean", "onPointerMove": "boolean", "onPointerMoveCapture": "boolean", "onPointerOut": "boolean", "onPointerOutCapture": "boolean", "onPointerOver": "boolean", "onPointerOverCapture": "boolean", "onResponderEnd": "boolean", "onResponderGrant": "boolean", "onResponderMove": "boolean", "onResponderReject": "boolean", "onResponderRelease": "boolean", "onResponderStart": "boolean", "onResponderTerminate": "boolean", "onResponderTerminationRequest": "boolean", "onShouldBlockNativeResponder": "boolean", "onStartShouldSetResponder": "boolean", "onStartShouldSetResponderCapture": "boolean", "onTouchCancel": "boolean", "onTouchEnd": "boolean", "onTouchMove": "boolean", "onTouchStart": "boolean", "opacity": "number", "overflow": "String", "padding": "mixed", "paddingBottom": "mixed", "paddingEnd": "mixed", "paddingHorizontal": "mixed", "paddingLeft": "mixed", "paddingRight": "mixed", "paddingStart": "mixed", "paddingTop": "mixed", "paddingVertical": "mixed", "pointerEvents": "String", "position": "String", "removeClippedSubviews": "boolean", "renderToHardwareTextureAndroid": "boolean", "right": "mixed", "rotation": "number", "rowGap": "number", "scaleX": "number", "scaleY": "number", "shadowColor": "Color", "start": "mixed", "testID": "String", "top": "mixed", "transform": "Array", "translateX": "number", "translateY": "number", "width": "mixed", "zIndex": "number"}, "bubblingEventTypes": {"topChange": [Object], "topPointerCancel": [Object], "topPointerDown": [Object], "topPointerEnter": [Object], "topPointerLeave": [Object], "topPointerMove": [Object], "topPointerOut": [Object], "topPointerOver": [Object], "topPointerUp": [Object], "topSelect": [Object], "topTouchCancel": [Object], "topTouchEnd": [Object], "topTouchMove": [Object], "topTouchStart": [Object]}, "directEventTypes": {"onGestureHandlerEvent": [Object], "onGestureHandlerStateChange": [Object], "topAccessibilityAction": [Object], "topClick": [Object], "topContentSizeChange": [Object], "topLayout": [Object], "topLoadingError": [Object], "topLoadingFinish": [Object], "topLoadingStart": [Object], "topMessage": [Object], "topMomentumScrollBegin": [Object], "topMomentumScrollEnd": [Object], "topScroll": [Object], "topScrollBeginDrag": [Object], "topScrollEndDrag": [Object], "topSelectionChange": [Object]}, "uiViewClassName": "RCTView", "validAttributes": {"accessibilityActions": true, "accessibilityCollection":
true, "accessibilityCollectionItem": true, "accessibilityHint": true, "accessibilityLabel": true, "accessibilityLabelledBy": true, "accessibilityLiveRegion": true, "accessibilityRole": true, "accessibilityState": true, "accessibilityValue": true, "accessible": true, "alignContent": true, "alignItems": true, "alignSelf": true, "aspectRatio": true, "backfaceVisibility": true, "backgroundColor": [Object], "borderBottomColor": [Object], "borderBottomEndRadius": true, "borderBottomLeftRadius": true, "borderBottomRightRadius": true, "borderBottomStartRadius": true, "borderBottomWidth": true, "borderColor": [Object], "borderEndColor": [Object], "borderEndWidth": true, "borderLeftColor": [Object], "borderLeftWidth": true, "borderRadius": true, "borderRightColor": [Object], "borderRightWidth": true, "borderStartColor": [Object], "borderStartWidth": true, "borderStyle": true, "borderTopColor": [Object], "borderTopEndRadius": true, "borderTopLeftRadius": true, "borderTopRightRadius": true, "borderTopStartRadius": true, "borderTopWidth": true, "borderWidth": true, "bottom": true, "collapsable": true, "columnGap": true, "display": true, "elevation": true, "end": true, "flex": true, "flexBasis": true, "flexDirection": true, "flexGrow": true, "flexShrink": true, "flexWrap": true, "focusable": true, "gap": true, "hasTVPreferredFocus": true, "height": true, "hitSlop": true, "importantForAccessibility": true, "justifyContent": true, "left": true, "margin": true, "marginBottom": true, "marginEnd": true, "marginHorizontal": true, "marginLeft": true, "marginRight": true, "marginStart": true, "marginTop": true, "marginVertical": true, "maxHeight": true, "maxWidth": true, "minHeight": true, "minWidth": true, "nativeBackgroundAndroid": true, "nativeForegroundAndroid": true, "nativeID": true, "needsOffscreenAlphaCompositing": true, "nextFocusDown": true, "nextFocusForward": true, "nextFocusLeft": true, "nextFocusRight": true, "nextFocusUp": true, "onLayout": true, "onMoveShouldSetResponder": true, "onMoveShouldSetResponderCapture": true, "onPointerEnter": true, "onPointerEnterCapture": true, "onPointerLeave": true, "onPointerLeaveCapture": true, "onPointerMove": true, "onPointerMoveCapture": true, "onPointerOut": true, "onPointerOutCapture": true, "onPointerOver": true, "onPointerOverCapture": true, "onResponderEnd": true, "onResponderGrant": true, "onResponderMove": true, "onResponderReject": true, "onResponderRelease": true, "onResponderStart": true, "onResponderTerminate": true, "onResponderTerminationRequest": true, "onShouldBlockNativeResponder": true, "onStartShouldSetResponder": true, "onStartShouldSetResponderCapture": true, "onTouchCancel": true, "onTouchEnd": true, "onTouchMove": true, "onTouchStart": true, "opacity": true, "overflow": true, "padding": true, "paddingBottom": true, "paddingEnd": true, "paddingHorizontal": true, "paddingLeft": true, "paddingRight": true, "paddingStart": true, "paddingTop": true, "paddingVertical": true, "pointerEvents": true, "position": true, "removeClippedSubviews": true, "renderToHardwareTextureAndroid": true, "right": true, "rotation": true, "rowGap": true, "scaleX": true, "scaleY": true, "shadowColor": [Object], "start": true, "style": [Object], "testID": true, "top": true, "transform": true, "translateX": true, "translateY": true, "width": true, "zIndex": true}}}
But cant seem to understand how to change the color from retrieving the component information.
Does anyone now how this can be achieved?
