Repository files navigation

The goal of this build is to create a react web and native app using a shared codebase while keeping the integrity of thecreate-react-app andreact-native build structure...because, who want's to waste time creating the build process or updating custom functionality each version. 🤔

git clone git@github.com:ReyHaynes/react-redux-web-native.gitcd react-redux-web-nativeyarn installyarn app:eject

# Run Web Appyarn web:start# Run iOS Appyarn ios:start# Run Android Appyarn android:start

1. Clone this repo:
   git clone git@github.com:ReyHaynes/react-redux-web-native.git <AppNameHere>

2. cd into project and remove the.git folder and create your own repo withgit init.

cd <AppNameHee>rm -rf .gitgit init

3. Rename your app in theapp.json file.

4. Install dependencies withyarn install ornpm install.

5. Build the/ios and/android native files withyarn app:eject

6. Run web and native apps.

yarn web:startyarn ios:startyarn android:start

7. Code the greatest app of all time. 🤔

This is anode based build app so having node installed is an obvious requirement!

node version 8+ highly recommended.

react-native requires you to have the proper emulators installed for your targeted operating system. Check out theReact Native docs at Facebook to get the install instructions. Make sure to use the instructions under the "Building Projects with Native Code" tab.

(Optional)npm is installed with node but I recommendyarn package management. Instruction to install Yarncan be found here.

Index (entry files)    -> App <- (Storage & Routing)          -> Screens -> Components          -> Actions -> Reducers

index.js (entry files): The index entry files shouldn't need editing.

App.js: The highest level component. Should be clean and contain the main routes for the app.

storage/ & routing/: Manages the storage and routing for web and native. Shouldn't need editing unless necessary.

screens/<ScreenName>.js: The highest level component for each screen in your app. Should contain all of the pure logic to be passed down to components. Screens should also contain connection to the redux store throughconnect().

components/<ComponentName>/: Pure, stacked or presentational components that will be used inScreens. Presentational components should include.js,.ios.js &.android.js files to work across native and web builds.

Unfortunately, since the testing environments are different for native and web, and there's no real way for jest to interpret the difference from web and native renders. Any testing you would like to do must be done within__tests__/<native/web> directories.

You will want to separate presentational containers (anything withrender() for the most part). Since there is no graceful way to determine native and web platform and there is no.web.js file extension without hacking into react itself, presentational containers for the Web should be under the main.js file while Native should be under.ios.js and.android.js.

Please note, that if you are targeting both platforms, you will berequired to use both file name extensions since it will default to the main file if the extension does not exist.

In the case of having React-Native code that work on both platforms, if you don't want to duplicate the code in 2 files, just import the code from the main targeted platform file.

// src/App.android.js imports the iOS version so there is no need to duplicate code.importAppfrom'./App.ios'export{Appasdefault}

If you already have the/ios &/android directories installed, in order to rename the app, delete these directories and runreact-native eject.

To do this in one command, useyarn app:eject ornpm run app:eject.

Linking code is similar to doing it with thereact-native. You can runyarn app:link,npm run app:link orreact-native link.

If youeject your app, please remember to re-link your native code again.

You absolutely should. It's a good idea to remove the.gitignore for

Expo is a great tool and I highly suggest you take a look at it, or evenintegrate if it suits your project, but...unfortunately some of Expo's deficiencies were deal breakers (https://docs.expo.io/versions/latest/introduction/why-not-expo.html).

Commands can be executed withyarn <options> ornpm run <options>

• Mergecreate-react-app &react-native
• Create Sample App (Web & Native)
• Implement Redux sample Action and Reducer
• Data Storage viaredux-persist
• Add Electron (Desktop App Build)
• Create sample testing suite
• Create web/native compatible components
• Themify web/native components
• Better clone process

Please...if you find any issues or improvements needed, feel free to submit your improvements!

Sharing is caring! 😇