Search code examples
react-nativefrontenduser-experience

Can I have separate front-end layers for iOS and Android using React Native


Is it possible to develop an app using React Native that have a very distinct UI/UX in iOS vs Android while at the same time achieving a common business layer to manage API's, local data, etc.? The goal would be to provide a look & feel that maximizes the design guidelines from Apple and Google so users get the most native experience from each ecosystem. I know it is possible to write code that is specific to each platform (https://facebook.github.io/react-native/releases/next/docs/platform-specific-code.html) but all the example apps that I've seen have the same look and feel so it's hard to know if this approach is really feasible or if for major differences it doesn't make sense because it ends up in too much duplicate code.


Solution

  • Things to note

    • Business logic will be on containers.
    • Components/Views will be have props and callbacks to process data from containers.
    • Use a feature based architecture.
    • Avoid using life cycle methods in classes where it's not needed.

    You can follow the smart /dumb component architecture where the smart containers deals with the business logic while the dumb ones takes care of presentation.

    Follow : http://redux.js.org/docs/basics/UsageWithReact.html

    You can separate the containers as container.js and containerview.js for better separation.

    Follow Dan's Presentational Components

    For iOS and Android separation u can use index.ios.js and index.android.js in each folder where each one is a view component.

    Additional info on smart/dumb Components