Building a React Native App Without Tears - Part 2
Sep 17, 2019 18:08

In part one of this series we built a React Native app from scratch and got the built-in demo page to show up properly on both iOS and Android. Next up we'll do some important updates and changes to the project to get it ready for actually coding.

Getting the App Identifier Right

Mobile apps have a unique identifier - often inspired by the package naming tradition in Java of "reverse-domain" naming. Just like how a domain name for an app might be "picselect.shindigital.com", a comparable app id might be "com.shindigital.picselect". This id is used in various places in the iOS and Android versions of the app, and it needs to be set up before we do too much else.

In XCode, click on the project name in the left sidebar (with the blue icon) and you should see a form for your ".xcodeproj" with at the top "Display Name" and "Bundle Identifier", which React Native has pre-filled to: "org.reactjs.native.example.picselect". You'll want to change this to a unique identifier, such as "com.[yourorganization].picselect". Feel free to give it a nicer display name as well.

The Android version has a trickier situation. The default name given to the Android project is "com.picselect", and not only is that in several different configuration files, but it's also been baked into the folders hierarchy. If you look in your app's "android" folder and then dig down into "app/src/main/java", you'll see a "com" folder, and if you open that you'll see a "picselect" one too. You'll want to change all the references to "com.picselect" to "com.[yourorganization].picselect" and also put another folder level in between "com" and "picselect" with the matching new name.

Here's where you'll probably want to fire up a decent text editor like VIM, EMACS, Sublime Text, Atom, or Visual Studio Code. Yes we already have not one but two full IDEs up and running, but they're both set up for their specific environments and languages, and don't handle raw JavaScript super well. A dedicated text editor will often make things easier to work with anyhow.

So open the root level of the project in your editor of choice and do a search for "com.picselect". You'll see references to a BUCK file, build.gradle, AndroidManifext.xml, and two Java files. Make sure all those files have had their references to "com.picselect" changed to "com.[yourorganization].picselect"

searching and replacing in VS Code

THEN go down to android/app/src/main/java/com and make a new folder called "[yourorganization]", and move the "picselect" folder into that folder.

Now you want to try running your application again in both XCode and Android Studio. In both cases, it will likely make new versions of the apps in your simulators, since you've now changed the unique app identifier. You can delete the ones you're not using. I find it useful to occasionally just delete all versions of the app every so often, to ensure things stay fresh.

Once you've ascertained that everything is still working commit the latest changes to Git so you can go back to this working state. Likewise, if you had trouble getting this set of changes working properly, you can revert back to the previous Git commit where you knew that things were already working. Git turns out to be essential for this kind of work - and we haven't even written any code yet!

(Note: this is the point during my live presentation that the Android version of the app stopped working. Some part of Android Studio somewhere couldn't find one of the renamed components. We tried all sorts of things but eventually just reverted to the last git commit and moved on to actual coding. Everyone at least learned a valuable lesson about using git regularly!)

Install Some Modules

React Native comes with a lot of functionality built in, but there are many tools, libraries, layout frameworks, adaptors, and more available for it. Thankfully, these are generally all available with the NPM or Yarn package managers that you've already been working with. This makes them relatively easy to install. For example, we're going to be using React-Redux for our app, which we can install like this:

> npm install redux
> npm install react-redux

These install libraries into your already massive "node_modules" folder. I've found it often helps keep things clean to every so often reset your node_modules. In my first round of React Native development last year, resetting node_modules seemed to magically solve about half the problems I was having. This can be done easily any time with these commands:

> rm -rf node_modules/
> npm install

If you're using libraries that interact with lower-level systems in the host mobile systems, like react-native-sound, you will need to "link" them, which updates the android and ios projects and points them to appropriate files inside these module directories. For example, to install react-native-sound, you'd need to do both of these:

> npm install react-native-sound
> react-native link react-native-sound

(Note: we're not using this library for this project so you don't need to install it - this is just an example)

You might get a message saying that you don't need to do this because React Native now supports "auto-linking" but that depends on the library, and I've found it usually isn't implemented yet. It doesn't hurt to do it anyhow.

Once you get all your libraries installed, try running the project in iOS and Android again. You might get errors at this point. Here are a few things that can help:

  • go to the terminal that's runnign the react-native server and CTRL-C to kill it and then start it again.
  • reset your node_modules/ folder (see above)
  • in Android Studio, under the "Build" menu, chose "Clean Project" and "Rebuild Project"
  • in XCode, under the "Product" menu, chose "Clean Build Folder" and then "Build"
  • Restart the simulators.
  • Delete the app in the simulators and re-run it from scratch
  • go into the ios/ folder update your CocoaPods with: > pod install

You should still be getting the welcome screen in both the iOS and Android simulators. If so, pat yourself on the back and commit all your changes to git.

Expo

Almost all of this messy stuff might have been avoided if you decided to use Expo, since it has wrappers around a lot of this troublesome fiddly stuff. However, I found that if you start in the Expo ecosystem and then try to get out of it, things fall apart quickly and you can get stuck for days hunting down obscure error messages which have no answers on StackOverflow. Your mileage may vary, though.

Next Up

Now that things are set up, we'll be ready to start writing some code! Stay tuned.

Other Blog Posts
Building a React Native App Without Tears - Part 3 Building a React Native App Without Tears - Part 2 Building a React Native App Without Tears (Mostly) This Is Nowhere: The Memento Edition This Is Nowhere: Aspects of Accessibility Presentations About NowHere This Is Nowhere: Head-First Into React Native This Is Nowhere: Bloomsday Halifax This Is Nowhere: Why an HTML/JavaScript Single-Page App With GPS Is A Bad Idea This Is Nowhere: GPS and Wayfinding and More UX This Is Nowhere: The Single-Button UX This Is Nowhere: Don’t Just Stand There! This Is Nowhere: Finding My Duck Finding Burgers Fast: My DIY Halifax Burger Week Site "This is Nowhere" at PodCamp Halifax 2018 The Diary Diaries: Fixing Remembary's Facebook Connection Special Leap Day Edition of "Some Weird Things About Time" What's Up With Remembary Can't get pg_dump To Work Now That Heroku Has Upgraded Postgresql to 9.4? The Best Thing I Ever Did To Promote My App If You Build It, They WON'T Come #deployaday, My Big Hairy Plan for 2015 Extracting Plain Text from an NSAttributedString My Year of "Hits" Part 2: Remembary Rolling My Year of "Hits" Part 1: Remembary Rises (and Stumbles) Handy Little Test Method to Check for Translations in Rails Apps My Suddenly Slow-Waking MacBook Air Indie App PR: Keeping Control of Your Tone A Quick Note on 'clone' in Rails 3.2 My eBook Apps 2: iOS, JavaScript, and Ruby My eBook Apps 1: Introduction Quick Tip: No Sound on Mountain Lion My Upcoming Talk at PodcampHFX 2012: My Year of "Hits" starshipsstarthere.ca: Building at the Speed of Funny Screencast Tips Remembary's Cool New Picture Support Indie App PR 2: Keeping On Top Of User Feedback Indie App PR 1: How to Handle an App Disaster Giles Bowkett Diary Project 2 Remembary Video Congratulations! Welcome to Your Nightmare! How My iPad App Remembary Took Off Why You Should Have an App in the App Store (Even If You Probably Won't Make Any Money) PodCampHFX Remembary Presentation - Part 3 How I Used MailChimp Autoresponders to Promote Remembary PodCampHFX Remembary Presentation Part 2 PodCampHFX Remembary Presentation Part 1 Why AdWords Ads Don't Work for iPad Apps Remembary is Sponsoring PodcampHFX Why Can't I Resize my Views in Interface Builder? Momento and Remembary Concerning Remembary iPad-Friendly eBooks of Gracian's Art of Worldly Wisdom Project Report: PTOS2 A Quick Note on Encryption We're all LUsers Thoughts on HAML Friday Afternoon Hack - Getting Beyond the Basics Halifax Friday Hack and Back to Basics Quote from Wil Shipley FutureRuby Make Web Not War Busy Week I: Toronto Ruby Job Fair Employment.nil - the Toronto Ruby Job Fair Code Count: Ruby on Rails vs. C#/ASP.NET A Brief Note on Twitter The Hub Halifax and Mobile Tech for Social Change Deep Thoughts on Microsoft From The Accordion Guy The Two Kinds of Defensive Programming Presentation - Fixing Careerious: From C#/.NET to Ruby on Rails Enterprise! Presenting at Ruby on Rails Project Night - May 7th New Name and New Look for Careerious/Clearfit FutureRuby and More From Unspace Health Tips for Programmers This tables meme won't die Careerious - Ruby and Rails vs. C#/.NET Yeah I Use Tables For Layout, So Sue Me The Different Kinds of Done Giles Bowkett's RubyFringe presentation OfficeTime: Great Time-Tracking App for OS X Back With A New Look Non-DRY Feed torontorb Keeping Your Sanity With The Command Design Pattern shindigital Is All Grown Up! (according to the spambots) Startup Stars? I'm so bored! The Magic Words for RMagick Jennifer from Operations You see? Naming is HARD Business Software as Process Documentation Deployment note: 'execve failed' Steve Jobs on Market Research Why Canada Is Better for Entrepreneurs "Program first and blog second" Toronto Tech Collage The MacBook Air Is A Roadster RubyFringe! Quote of the Week: Steve Yegge Starting Up: Cards Great design tool: browsershots.org Starting Up: The Logo Quotes Of The Day: Hedge Fund Interview TSOT Ruby / Rails Presentation Night - Part 1 Moneyworks: Accounting Software for Canadians on OS X Starting Up: The Name Nice logo, but why is your site so bland? Welcome to shindigital.com