# Notes on React Native ## Architecture Overview The greatest injustice I've seen in software development is the unnecessary complexity around project structure. Organizing your files by domain (or feature), instead of by function, allows your code to mirror the UI/UX and act as a virtual map of features ``` ── app (or src) ├── assets ├── global ├── libs ├── store ├── views └── index.js ``` For example, it's your first day at a new startup. Imagine you knew next to nothing about the project you're working on other than that you have users and they manage cooking recipes in the project. A manager asks you to "change the profile section to look like facebook". Which file structure would help you get started the fastest? ### By Domain ``` ── app (or src) ├── assets ├── global ├── libs ├── store │ ├── auth │ ├── recipes │ ├── settings │ └── user │ ├── actions.js │ ├── reducer.js │ └── state.js ├── views │ ├── recipes │ └── user │ ├── profile │ │ └── index.js (*) │ └── index.js └── index.js ``` ### By Function (Type) ``` ── app (or src) ├── assets ├── styles ├── utils ├── components │ └── user │ ├── UserComponent.js │ └── profile │ └── UserProfileComponent.js ├── pages │ └── user │ └── profile │ └── ProfilePage.js ├── routes │ └── user │ └── profile │ └── UserRoute.js ├── redux ├── index.android.js ├── index.ios.js ... ``` While preference is subjective, I've onboarded new team members on projects with both, but I've had them deploying faster when structuring 'by domain'. Offloading the cognitive map of the project to the file structure prevents developers from relying solely on UML or diagrams that structure the flow of the project. The file structure acts as a map to the UI and even the domain logic contained within. You may have observed that the ```by domain``` example seemingly has a top layer of ```by function``` structure. Viewing the project with higher architectural scope allows you to view the 'store' and 'views' as feature sets. Many projects do not have explicit UI/UX (CLI tools or API's) or use a 'store' for handling immutable state (potentially API's). Instead, they may be labeled as 'output' but still contain a 'store' to manage state. --- ## UI Libraries ### [react-native-paper](https://callstack.github.io/react-native-paper/getting-started.html) - Minimally styled components - Easy to override styling ### [native-base]() (not recommended) - Heavily opinionated styling - Absolute positioning on elements makes it hard to layout - Overriding styling is sometimes not possible - Bloated theming --- ## Domain Logic ### Helpful Commands ```bash # android emulator -list-avds emulator -avd # ios xcrun simctl delete unavailable xcrun simctl list devices xcrun simctl boot ## record xcrun simctl io booted recordVideo . ``` --- ### Other - [dealing with fonts](https://github.com/react-native-training/react-native-fonts) - [using proportions and ratios](https://facebook.github.io/react-native/docs/pixelratio.html) instead of static px values ### Tips

Absolute Import Paths

``` module.exports = { presets: ['module:metro-react-native-babel-preset', 'module:react-native-dotenv'], plugins: [ ['module-resolver', { alias: { app: './app', } }] ] }; ```

### Tricks

Custom iOS Back

```jsx Back ```

Hidden UI Blocking Layer

```jsx ```

Diagonal Cut Linear Gradient

```javascript const colorStart = '#FEFEFE' const colorMiddle = '#909090' const colorEnd = '#000000' ```

Smooth iOS Status Bar Transitions

```javascript // iOS Only - will switch back to light status bar on transition // Allows setting the status bar to the previous pages status bar color until // the end of the transition animation between screens blurListener = this.props.navigation.addListener( 'willBlur', () => { setNavigatingHome(false); } ); focusListener = this.props.navigation.addListener( 'willFocus', () => { setNavigatingHome(true); } ); ```

alpine

armored-core

cheese

linux

cross-platform

css

dart-flutter

diy-laptop

free-data

green-bunker

media-server

memories

convergence

networking

open-drone

open-hardware

router

printing

psychology

punk

react-native

react

rotation

rust

uarch

Free Data

Company icon/logo by name