Building with custom file extensions in react native

Question

I am developing an app which targets different kinds of users.I want to build different UIs, different Testcases for each variant with same logic in the same repo. Lets say If I have 3 kinds of users(X,Y,Z) So I wanted to achieve like this , index.X.js, index.Y.js ,index.Z.js . If there is no variant file it should fallback to default index.js . So When I want to build app for X type of users I can build app with all .X.js files.

I have gone through below two packages https://github.com/wix/react-native-repackager and https://github.com/elsassph/webpack-require-variant. First package is supported for only specific versions of react-native and I am not sure that I don't run into any issues because of using these(Running in CI,Running Testcases , Hot reloading etc).

Is there any standard solution for this problem ?

Answer 1

You can achieve the same by conditional rendering instead of an extension. Just render respective component matching your condition. Here User1, User2, User3 are components.

file extensions are used for platform-specific code. ios and android like index.ios.js and index.andoid.js

https://facebook.github.io/react-native/docs/platform-specific-code.html

class Demo extends Component {
    render() {
        const users = ["user1","user2","user3"];
        let dynamicComponent;
        switch(users[1]) {
            case "user1":
                dynamicComponent = <User1/>;
            break;
            case "user2":
                dynamicComponent = <User1/>;
            break;
            case "user3":
                dynamicComponent = <User1/>;
            break;
        }
        return (
            <View>
                {dynamicComponent}
            </View>
        );
    }
}

These components can be you whole APP with the user the respective design.