worklet not preventing crash

[mckenytech]

Hello everyone,

I've been encountering a crash issue when calling the update method on my processor within the ECS hook, and I need some help debugging it.

Here's the scenario:

• When I use useAnimationFrame from react-native-reanimated to call the ECS hook's update method, it causes the app to crash.
• However, if I comment out the processor's update call, there are no crashes.
• Interestingly, running the update inside a regular setInterval loop works just fine without any crashes.
• I've ensured that the 'worklet' directive is used correctly and that all functions are declared before they are used.

This leads me to believe that the issue could be related to how useAnimationFrame interacts with the processor's update method.

I have triple-checked to make sure that there are no violations of the Rules of Hooks, and that the worklet is being used correctly according to the documentation.

Could there be something specific about useAnimationFrame that I might be missing, or is there a known issue with react-native-reanimated that could be causing this?

I would appreciate any insights or suggestions on what could be going wrong and how to fix it. Here is a snippet of the code for reference:
`import { useState } from "react";
import { SharedValue, useSharedValue } from "react-native-reanimated";

// Define specific state types for each component
type PositionState = {
x: SharedValue;
y: SharedValue;
};

type AreaState = {
width: SharedValue;
height: SharedValue;
};

type SpriteState = {
sprite: SharedValue;
};

type MassState = {
mass: SharedValue;
vX: SharedValue;
vY: SharedValue;
};
///components enum
export enum CompName {
POSITION = "position",
AREA = "area",
SPRITE = "sprite",
MASS = "mass",
}
////first lets define the Types
export type Component<T = {
[key: string]: SharedValue;

}> = {
name: string;
state: T;
onAttach?: Function;
};

///processors for components that are required
export type Processors = {
name: string;
required: string[];
update: (
entity: Entity,
components: Component[],
processor: Processors
) => void;
};
//Entity properties that are required
export type Entity = {
name: string;
components: Component[];
processors: Processors[];
};
///MASS types
export type MassComponentType = {
mass: number;
vX: number;
vY: number;
};
///interface for the useEntityComponentSystems
interface useEntityComponentSystems {
fetchEntityByName: (name: string) => Entity | undefined;
fetchEntities: () => Entity[];
fetchProcessorByName: (name: string) => Processors | undefined;
fetchProcessors: () => Processors[];
fetchComponentByName: (name: string) => Component | undefined;
fetchComponents: () => Component[];
createEntity: (
name: string,
components: string[],
processors: string[]
) => Entity;
addComponent: (name: Component) => void;
addProcessor: (name: Processors) => void;
addEntity: (name: Entity) => Entity;
update: () => void;
components: Component[];
entities: Entity[]
//loadSprite: (sprite: string, src: string) => void;
///sprite bucket

}

const useEntityComponentSystems = (): useEntityComponentSystems => {
const [components, setComponents] = useState<Component[]>([
{
name: CompName.POSITION,
state:{
x: useSharedValue(0),
y: useSharedValue(0),
isGrounded: useSharedValue(false),
},
},
{
name: CompName.AREA,
state: {
width: useSharedValue(50),
height: useSharedValue(50),
},
},
{
name: CompName.SPRITE,
state: {
sprite: useSharedValue(""),
},
},
{
name: CompName.MASS,
state: {
mass: useSharedValue(0),
vX: useSharedValue(0),
vY: useSharedValue(0),
} ,

} ,

]);
const [entities, setEntities] = useState<Entity[]>([]);
const removeComponent = (entity: Entity, component: Component): void => {
"worklet";
const newComponents = entity.components.filter(
(comp) => comp.name !== component.name
);
entity.components = newComponents;
};
const [processors, setProcessors] = useState<Processors[]>([{
name: "gravityProcessor",
required: [CompName.POSITION, CompName.MASS],
update(entity: Entity, components: Component[], ) {
"worklet";
try {

            const pos = components.find(c => c.name === CompName.POSITION);
            const mass = components.find(c => c.name === CompName.MASS);
            if (!pos || !mass) {
                console.log("Position or mass component not found");
                return;
            }
        

          pos.state.y.value += mass.state.vY.value;

          mass.state.vY.value += 0.5;
       // console.log("Position updated" +pos.state.y.value + "MASS" + mass.state.vY.value);
        
        
     
            //console.log("Position updated" +pos.state.x.value + "MASS" + mass.state.vY.value);
        
        } catch (error) {
            console.error("Error during processor update:", error);
        }
    }

  
}
  /////////// Collision Processor

    ,{
      name: "collisionProcessor",
      required: [CompName.POSITION, CompName.AREA, CompName.MASS],
      update(entity: Entity, components: Component[], processor: Processors) {
         "worklet";
          try {
              const pos = components.find(c => c.name === CompName.POSITION);
              const area = components.find(c => c.name === CompName.AREA);
              const mass = components.find(c => c.name === CompName.MASS);
              if (!pos || !area || !mass) {
                  console.log("Position or area component not found");
                  return;
              }
            
              
      // ...within your collision processor update function...

if (pos.state.y.value + area.state.height.value >= 300) {
pos.state.isGrounded.value = true; // The player is grounded
pos.state.y.value = 300 - area.state.height.value-0.; // Adjust to ground level
mass.state.vY.value = 0; // Stop falling

} else {
pos.state.isGrounded.value = false; // The player is not grounded
}

            } catch (error) {
                console.error("Error during processor update:", error);
            }
        }
    }
    
]);
////load sprite
const loadSprite = (sprite: string): SpriteState => {
    return {
        sprite: useSharedValue(sprite),
    };
};

///fetch all entities
const fetchEntities = (): Entity[] => entities;
///fetch all processors
const fetchProcessors = (): Processors[] => processors;
//fetch all components
const fetchComponents = (): Component[] => {
return components;
};

///fetch entity by name
const fetchEntityByName = (name: string): Entity | undefined => {
const result = entities.find((entity) => entity.name === name);
if (result) {
return result;
}
throw new Error(Entity ${name} not found));
};

///fetch processor by name
const fetchProcessorByName = (name: string): Processors | undefined => {
const result = processors.find((processor) => processor.name === name);
if (result) {
return result;
}
throw new Error(Processor ${name} not found));
};
///fetch component by name
const fetchComponentByName = (name: string): Component | undefined => {
// const result = components.find((component) => component.name === name);
// if (result) {
// return result;
// }
// throw new Error(Component ${name} not found));
let found = false;
for (let i = 0; i < components.length; i++) {

        if (components[i].name === name) {
            found = true;
            return components[i];
          
            
        }
        if (found) {
            break;
        }

    }
    throw new Error(`Component ${name} not found! ${components.length})`);
    
};

///check if processor exists within entity
const doesEntityHaveProcessor = (
entity: Entity,
processor: string
): boolean => {
"worklet";

for (let i = 0; i < entity.processors.length; i++) {
  return true;
}
return false;

};
///fetch all components by entity
const fetchAllComponentsFromEntity = (entity: Entity): Component[] => {
"worklet"
const result: Component[] = [];
for (let i = 0; i < entity.components.length; i++) {
const curCpmp = entity.components[i];
// console.log(curCpmp.name);
result.push(curCpmp);
}
return result;
};

////addComponent
const addComponent = (name: Component): void => {
const componentToAdd = name;
if (componentToAdd.onAttach) {
}

  setComponents([...components, componentToAdd]);

};
///onst add processor
const addProcessor = (name: Processors): void => {
setProcessors([...processors, name]);
};

///add entity
const addEntity = (entity: Entity): Entity => {
console.log("entity added" + JSON.stringify(entity.processors));

    setEntities([...entities, entity]);
    ///return entity for reference
    return entity;
};

///remove component from entity

////create entity
const createEntity = (
name: string,
components: string[],
processorNeeded: string[]
): Entity => {
let enitytName = name;
const allComps: Component[] = [];
const allPros: Processors[] = [];
components.forEach((component) => {
const comp = fetchComponentByName(component);
if (comp) {
allComps.push(comp);
}
});

  for(let i = 0; i < processors.length; i++){
      if (processorNeeded[i] === processors[i].name) {
            allPros.push(processors[i]);
  }
  }


return {
  name: enitytName,
  components: allComps,
  processors: allPros,
};

};
///check if component exists within entity
const doesEntityHaveComponent = (entity: Entity, comp: string): boolean => {
"worklet";
//console.log(entity.components,comp);

for (let i = 0; i < entity.components.length; i++) {
  if (entity.components[i].name != comp) {
    return true;
  }
}
return false;

};

////get Entities by required components
const getEntitiesByRequiredComponents = (
requiredComponents: string[]
): Entity[] => {
"worklet";
const foundedEntities: Entity[] = [];

for (let i = 0; i < entities.length; i++) {
  let matchAll = true;
  // console.log(entities[i].components);
  const currentEnt = entities[i];
  for (let j = 0; j < currentEnt.components.length; j++) {
    //console.log(currentEnt.name + " " + requiredComponents[j]);
    if (!doesEntityHaveComponent(currentEnt, requiredComponents[j])) {
      matchAll = false;
      break;
    }
  }

  if (matchAll) {
    foundedEntities.push(currentEnt);
  }
}

return foundedEntities;

};
const update = () => {
"worklet";

processors.forEach((processor) => {
    const entity = getEntitiesByRequiredComponents(processor.required);

    
  //
  //console.log(processor);
  for (let i = 0; i < entity.length; i++) {
    const curEnt = entity[i];
      const gotProcessor = doesEntityHaveProcessor(curEnt, processor.name);
      const comp =fetchAllComponentsFromEntity(curEnt)
      if (gotProcessor) {

       //console.log(curEnt.processors);
        
        processor.update(curEnt,comp, processor);
        

    }
  }
});
}

return {
fetchEntityByName,
fetchEntities,
fetchProcessorByName,
fetchProcessors,
fetchComponentByName,
fetchComponents,
createEntity,
addComponent,
addProcessor,
addEntity,
update,
components,
entities
};
};

export default useEntityComponentSystems;
`

[mckenytech]

Hello everyone,

I wanted to update you on the issue I was experiencing with the syntax error in my processor update method within my custom React Native Entity Component System. After digging deeper, I realized that the problem was actually due to a missing colon (:) after the update property in my processors' object definitions.