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 ?

Do you want different UI for different users in diff scenario right ? Then is there any need to create different files of different extension. Instead you can just create different UI component and render them as per your condition — Revansiddh, Mar 09 '18 at 13:28
@DineshChitta I have a similar use case as you. I have 2 variants of my app. In some cases, I use the same screens and in some others, I have my own logic. Did you happen to find a solution to this? Using an if/else condition based rendering is going to be a pain for me. — Hannan Shaik, Sep 29 '20 at 05:54

Revansiddh · Answer 1 · 2018-07-06T09:08:34.510

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.

Building with custom file extensions in react native

1 Answers1