Could you introduce your app in a few sentences?
Sh**t! I Smoke is an app that helps people realize how much they are ‘smoking’ by breathing urban air. The beauty of this app is how it takes very abstract, scientific measurements - the air quality index - and transforms the data into something that is very tangible for the general public.
The conversion from air quality to daily cigarettes is based on a study by Berkeley Earth. Sh**t! I Smoke is simply connecting to open databases of air monitoring stations around the world, converting the data using this study’s formulas, and presenting the result to the user in a very simple way.
With $0 marketing budget, we managed to reach 100k downloads, and we are featured in media all around the world, including BBC, Huffington Post and the Atlantic.
Marcelo (the designer) and I (the developer) are the two only people working on this project. It all started as a weekend project, we actually released the 1st time version only 1 week after its conception, about 1 year ago. Today, we’re still working on it in our free time. The app is - and will always be - 100% free and open-source, it’s available for iOS and Android.
What made you decide to use/switch to React Native?
I chose React Native for 3 reasons.
First, I come from a background of full-stack web developer, and I don’t have much experience writing apps in Java, Kotlin, Objective-C or Swift. However, I am familiar with React, so React Native seemed like the intuitive choice for me to try writing mobile apps.
Second, we’re only 2 in the team: Marcelo, and myself. Maintaining two separate codebases for this app would require way too much work.
Third, I considered using a hybrid framework like PhoneGap. But reading some articles on the internet convinced me that a native UI was a better idea than a WebView UI. User experience is one of the strong points of Sh**t! I Smoke.
How did you transition to React Native?
I write TypeScript professionally, so I know the JS ecosystem pretty well. Whenever I need to create some UI, React is the framework I choose, and I’ve been doing so for the past 3 years.
The transition from React to React Native went overall quite smoothly. I caught up really quickly the small automatisms to have, like replacing <div> with <View>, the StyleSheet syntax is similar to CSS, and I could use most the of JS libraries I was used to. In Sh**t! I Smoke, state management is done with MobX, and I was glad that MobX on web is exactly the same as MobX with React Native.
Some stuff was completely new to me. I’ve only done minor animations on web, mostly by using JS libraries, or CSS animations. But I discovered that these don’t work well with React Native, which instead has the Animated API. The learning curve is not that high though, so it was definitely not an obstacle.
Have your tried other cross platform technologies before using React Native?
No.
What has your experience been working with React Native in terms of app performance, have you noticed any impacts?
Sh**t! I Smoke is a very simple app, with only 4 screens, and a couple of network calls. Performance has not been an issue in our case.
How has adopting React Native affected developer productivity?
We are using Expo for Sh**t! I Smoke, which among other things focuses on developer experience. I think Expo makes the DX really smooth: hot reloading on save, local network tunnel to test on real device, building native packages on their build servers are features that I love.
I tried once ejecting from Expo, because I wanted to link a native module that Expo didn’t support out-of-the-box, and I found the process quite tedious. It was for iOS, and I suppose that it was mainly due to my lack of experience with Xcode, CocoaPods and the whole environment. I went from bug to bug, so decided to let go after some time. I’m sticking with Expo’s modules right now (or pure JS alternatives), for now it has proven sufficient for the needs of Sh**t! I Smoke.
So with Expo, overall I am quite happy with the developer experience. Compared to web development, I still find it a bit more cumbersome. A yarn start and visiting localhost:3000 would suffice for web, but with React Native, I either need to have my mobile phone next to me and scan the QR code, or run a resource-consuming simulator on my laptop.
Which tools, libraries and frameworks are part of your development process with React Native?
As I mentioned above, the main framework I’m using is Expo, which manages compiling, hot reloading and publishing. For me, it’s the equivalent of create-react-app for React Native.
I use VIsual Studio, because it has first-class support for TypeScript, which I use by default. Interestingly enough, Sh**t! I Smoke doesn’t use TypeScript, just ES6, though we are considering to convert the codebase to TypeScript.
I do not use any special tool for debugging, just plain old console.logs in the codebase to know what’s happening. I do use Sentry for error logging in production environment, which turned out to be a good idea because it caught one or two edge cases that were very hard to reproduce.
Concerning libraries in Sh**t! I Smoke, I use MobX for state management, and React Navigation for navigation.
What resources have you used to learn React Native? Books, tutorials, courses etc. Anything you can recommend?
Since I’m using Expo, the main resource I’m using is Expo’s documentation: https://docs.expo.io/versions/latest/. I also use Facebook’s official React Native guide https://facebook.github.io/react-native/docs/getting-started.html. As I said previously, I have found the transition from React to React Native pretty smooth, so these 2 resources were enough for me.
What are some things that you don’t like about React Native or that need to be improved?
I will talk about 2 things that I disliked about React Native.
The first one is E2E testing. I have not found an easy-to-use E2E testing framework for React Native. I tried Appmium and Detox, and both were very hard to get started with. Looking for help online with Appmium returned results mostly in Java, and I also don’t like that it’s black box testing. Detox seems like an immature project still, the tests are flaky, and third-party services like BrowserStack don’t support this new framework - which was a no-go for us since we wanted to test the UI correctness of the app across multiple devices.
The second one is that React Native is still young itself. It’is a third environment, after Node.js and web, that external libraries need to support, but often don’t. For example, we’re using MobX v4, because Mobx v5 uses JavaScript proxies which are not working on React Native. Another example is WebAssembly, which runs smoothly on web (fortunately), but also on Node.js. However, I encountered multiple troubles running it on React Native, where polyfills and ugly patches are often needed.
Anything else you would like to mention?
Sh**t! I Smoke is a 100% free and open-source project, whose goal is to raise awareness for air pollution. If anyone wants to help the project, we’re taking contributions! Just visit our Github page, and we appreciate contributions ranging from translations, code development to potential ideas for the app.
If you have any questions, we’re also available at shootismoke@gmail.com.