Making the React Native Conference App in React Native
An Adventure of Open Source for the Chain React Conference
We’ve got a design team… wait… reset. We’ve got a great design team. A few months before the Chain React Conference, we were ready to “bust out” a conference app. Rushed to start and were instantly told to stop. Our design team pulled a virtual fire alarm.
“You know you can’t half-tell a story, and expect people to be happy” — Everyone who ever watched the TV Show “Lost”
They were right. We decided to do our client process, but this time for ourselves. The conference app went from a nice-to-have, to an actual project on our work schedule.
Simply put, it was one of the best decisions we could have made.
We started the same way as when we planned the conference; with the feeling we wanted for our attendees. From there, we got a lucid roadmap of what it is were going to build.
Following the steps of our process, our design team pulled us back to square one. They asked the questions that any new mobile app should be thinking about: “Who is using this app?” “Why are they using it?” “What are they trying to achieve?”
After working through several rough sketches and concepts over the course of a week, our team delivered an experience. At the core, this app is all about an experience for our attendees.
Our new design featured:
- Talk notifications that’ll remind you when a certain talk is coming up
- Quick access to ride-sharing apps — just click the Lyft button, and we’ll take you to the app with all of the information already filled
- A mini city guide that makes recommendations for nearby food, coffee, and sight-seeing
- Full menus for what to expect at breakfast and lunch
Design in Hand — We Started To Code
First thing was first. React Native for iOS and Android. And not just any React Native, we used our popular CLI for boilerplates and plugins, Ignite.
Ignite CLI gave us a fantastic kick-off, with Reactotron, Redux, Sagas, React-Navigation, and Generators. We were basically there! Here’s what challenged us in implementing the design.
Challenges along the way:
- Push Notifications — Why are they still tricky from platform to platform?
- Blur on Android — Didn’t really work like our designers wanted.
- Scope-creep is Real — We see why it’s so easy to keep adding cool stuff! At some point we said enough!
- Various phone sizes — You test on two phones and think you’re good? You know better. Beta testing with a decent population was crucial.
- Testing the Future- Serious debugging tools/flags were key for developing things that activate on designated dates and times.
Testing the future was easy with Reactotron!
But it wasn’t all hurdles; we played in some new tech, too!
Since React Native is constantly evolving, we had a lot of cool changes to consider:
- Swapped out our ListView for FlatList which cleaned up code
- Utilized Mobile Center for our CI, Beta Distribution, Analytics, and Crash Reporting
- Swapped out our API JSON calls for CodePush, which can deliver data, images, and code updates instead
- Automated iOS and Android icons from a source 1024 x 1024 image via Fastlane plugins
- Automated uploading the
dSYM.zipto mobile center on releases - We added TypeScript (compile in place — Christian Brevik style), mixed elegantly with JavaScript so we could do a “Go your own pace trying TypeScript” adventure!
Wow, when you look at it, that’s a lot of Microsoft Love! Right?
I KNOW RIGHT!? I’m amazed at how we found ourselves here.
All our decisions just made sense! If you think someone else does these things better, I’d love to hear about it ⚡️🦄🎉
Try the app!
Especially look at the app on July 10th-11th when the conference is active!
iOS: Download
Android: Download
Here’s the code! (File bugs, add features, just peruse)
Yay open source!
Thanks to everyone who played a role in the development of the app. Here’s our git contributors list, but special mention to Justin Huskey for keeping us thinking UX, Frank von Hoven, who wasn’t even assigned to the project, but helped, and Sia Karamalegos who doesn’t even work with Infinite Red, but still helped!
Extra special mention: a conference panelist filed and fixed the bug he filed! Kudos Jani Eväkallio, you rock! 🎸🤘
To all others not mentioned, to the Founders who green-lit the project, and to the many attendees who made this all possible, thanks! We 💖 how open source brings people together, and we’ll see you at the conference!
Bonus: Expo Link
Brent Vatne ported the source over to Expo with some exciting changes! See the app on expo here, or look at the changes he made to source here.
About Gant
Gant Laborde is Chief Technology Strategist at Infinite Red, published author, adjunct professor, public speaker, and mad-scientist in training. Read the writings of Gant and his co-workers in our Red Shift publication. If you’re looking to discuss nerdy tech, he’s all ears. If you’ve got a conference, he’s happy to speak.
View half-witty, half-groan technical tweets with @GantLaborde on Twitter, and follow him on Medium and GitHub. See where he’s speaking next on http://GantLaborde.com/
