# A Year of React Native
Over the last year I've been learning and developing mobile apps using React Native. Now it's 2018 and I'd like to reflect on my experience and give my opinion on some of the best and worst bits.

## Introduction
DISCLAIMER: Take my opinion with a pinch of salt because I'm still learning and there's a lot that I don't know. I have no formal education in Computer Science and have self-taught over the last couple of years. I've focused more on building products than refining my programming knowledge.

The slogan is "Learn once, write everywhere" - though you can't quite write **everywhere** you can write Android and iOS apps. It has a declarative and functional style which is completely new to me but it seemed to make sense in my mind.

## The Good

### Platform Code Sharing
This is often used as one of the main selling point of React Native. You can share the majority of your code across both platforms which is great for business logic but not necessarily for UI. You can of course using conditionals to render different components for each platform. This means that you don't have developers that can only work on the Android or iOS app and should lead to time being saved and less developers required (though for us, that might be a bad thing...)

### Hot Reloading & Speed of Development
My favourite feature. I can build a UI really quickly using flexbox and see the changes in real time as I save files. Compare that to Xcode where you have to rebuild the app each time and then have to navigate to the screen you were working on (though it does have Interface Builder...).

### Performance
No obvious issues. Haven't tested it but seems to hold up well with our use case - not a lot of data or high performance requirements. Animations are usually super smooth and even allow you to hand them off to the native side of the bridge for even better performance. You can't always drive animations natively though and some interactions can be a bit jittery but that usually comes down to poor implementation rather than a performance bottleneck by React Native.

### Project setup
Setting up a new project is fairly straightforward especially if you use Expo and/or create-react-native-app. It gets messy once you start having to fiddle with native project configuration. `react-link` does a good job most of the time when adding new packages but doesn't always work meaning you'll have to dive into native projects from time to time.

### Community & Ecosystem
The community is huge and there is a lot of support for React Native. That means there's a lot of open source components and libraries to use.

### Testing
Honestly I haven't gotten into testing nearly as much as I should have but the little I've done has been fairly straightforward. I've used Jest and Enzyme that have decent documentation and guides to get started. Jest's snapshot feature is awesome and only takes a couple of lines of code.

## The Bad

### Language
I prefer Swift to Javascript. Javascript is great but requires everything to be bolted on - build tools, testing frameworks, linting, etc. It's a dynamic language so there's no strict type checking out of the box. You'll have to choose between Flow or TypeScript if you want it (you should). There has been movement recently towards Reason but I haven't looked into it yet.

Don't even bother getting into build tools or using fancy features that require you to start messing around with babel plugins. If you're fairly experienced then sure go ahead but if you're still learning React and ES6 then it's just another thing to worry about that just isn't worth it.

### Platform Abstraction
React Native doesn't give you everything out of the box so if there's a feature you want to use that isn't supported then you'll either need to use a third-party library or build it yourself.

Because we're abstracting other platforms any new features that are added need to be implemented in React Native. A perfect example is the new iOS 11 large nav bar titles. That feature is 1 line of code in Swift:

`self.navigationController.navigationBar.prefersLargeTitles = true`

At the time of writing it's been 4 months since iOS 11 was released and none of the main React Native navigation libraries support large titles. I bet it requires a lot of boilerplate to access that property in React Native, and because some of the libraries are Javascript implementations of native controllers (looking at you `react-navigation`) then it's definitely not a trivial addition.

Sure you can implement it yourself and contribute back to the community, thats the great part of open source. But if it's been built once by Apple I just want to use it and get on with making  great apps, not reimplementing functionality.

If a third-party library doesn't exist you can implement it yourself and contribute back to the community. Tif it already exists natively why do I have to add boilerplate to expose it? I know, that comes with abstracting platforms and being in an open source community where you pay back what you receive but from a business perspective it's time wasted that was suppose to be saved by using React Native in the first place.

Many people may disagree with my opinion on this one and I may change my mind in the future but that's something that bothers me at the moment.

## The Ugly

### Navigation
This is my #1 biggest issue with React Native at the moment. Navigation is a fucking disaster. There are too many competing solutions and the suggested library `react-navigation` isn't even production ready. There is no perfect solution so it's always a compromise which to choose:

* `react-navigation` is community developed and 100% Javascript which means it reimplements platform navigation controllers and animations which are not 100% accurate. It has been promoted as the preferred navigation library since early last year but still hasn't reached v1.0.
* `react-native-navigation` by Wix is 100% native so you get all of the platform controllers and animations for free. The way it integrates with native projects though means there are some things you can't do - e.g. you can't create iOS share extensions. It also has a weird API and doesn't handle deep links very nicely.
* `native-navigation` by AirBnB is also 100% native and probably has the nicest API of them all. However, it seems like the team at AirBnB aren't actively maintaining it and there's some planning going on about migrating it to become a community lead library. Either way it's future is uncertain so not production ready.

There are other libraries that I haven't really used - `react-router-native`, `react-native-router-flux` and probably more. That's part of the problem.

### Errors
Errors are hit and miss which is seriously frustrating. Sometimes they point you directly to the issue, otherwise it's a fucking minefield and they make no sense. I've lost half (sometimes entire) days tracking down issues, upgrading the React Native version, finding bugs in third-party libraries, etc.

## Conclusion

There are a lot more pros than cons to React Native. It's the best solution yet for achieving a truly cross-platform development experience. That's great for startups because you're moving quickly, don't have a lot of resources and can share developers across platforms saving time and money. It's got some great features that I've mentioned above which I'd love to see make their way into Xcode (doubtful..).

That said there are still some serious compromises that need to be made which you may not always be aware of until further down the line. You can argue about whether or not it can truly replace native development. Recently the iPhone X was released. Apps built natively that supported Auto Layout automatically adapted to accommodate the new screen layout. The React Native community had to spend more time adding support for those new accommodations.

It comes down to your business needs and whether you want to be ready for new products and platform features.