I'm working on a mobile application using react native where there's multiple users type or role, (10 user type/role). and let's say there's a base screen or component, and each user role has slightly different design in this component/screen. I don't want to create multiple component with the same functionalities, and change just the code to adapt it to the user role. I believe there's a better solution.

For example the architecture we're having now is like this:

userType1/index.js
userType2/index.js
userType3/index.js
....
userType10/index.js

and all the files has the same functionalities and same design, but the only different thing is each folder and file has some different design and sometimes new feature related to that user role.

I want to have something like this:

user/index.js

where this index.js change depending on the user role, but without having a lot of conditions. is there a suggestion to fix this design pattern problem ?

Thank you in advance.