A Working Example of React Native Navigation External Components

Today I happen to be taking another stab at experimenting with External Component’s for my organization’s React Native Navigation app, and I found myself digging through my GitHub repos for the working example app I created demonstrating how to add External Component’s to a React Native Navigation app. So I thought maybe I should write up a quick blog post on the topic for my own personal reference or to possibly help someone else out there trying to figure this out.

First, I must say that I didn’t actually write this example app! For the most part, the code all comes from Wix’s “playground” app contained in the main React Native Navigation GitHub repo. However, I found that Wix’s documentation for how to add External Component’s wasn’t really all that helpful, and I couldn’t get the actual “playground” app to compile on my machine. Thus the need for this blog post and my example app.

So pretty much what I have is a fairly bare React-Native app that I created using react-native init. Then, I referenced Wix’s “playground” app’s source code and added the logic to my example app. This was how I was able to get all of this to work. So if you also are having a hard time getting External Component’s to work by referencing the docs, and also can’t get the playground app to compile, check out my example app on GitHub: RNNExternalComponentApp

UPDATE (Friday August 5th, 2022): I had to do this again today for work, but this time I needed to be able to register the external component using Swift. If you need to do this using Swift, you can create an Objective-C function and then export it back to Swift if you need to register an external component from Swift. Here is my HOW TO on doing this:

I figured out how to do this. Instead of converting the code snippet from Objective-C to Swift, you can wrap the code snippet in your own Objective-C function, then export that function back to Swift. In case anyone else runs into this issue, here is my code:

In your bridging header (yourapp-Bridging-Header):

#import "RNNUtility.h"

RNNUtility.h

//
// RNNUtility.h
// yourapp
//
// Created by Christopher Pedersen on 8/5/22.
// Copyright © 2022 Super Sweet Co. All rights reserved.
//
#ifndef RNNUtility_h
#define RNNUtility_h
void registerExternalComponent(NSString *componentName, UIViewController *viewController);
#endif /* RNNUtility_h */
view raw RNNUtility.h hosted with ❤ by GitHub

RNNUtility.m

//
// RNNUtility.m
// yourapp
//
// Created by Christopher Pedersen on 8/5/22.
// Copyright © 2022 Super Sweet Co. All rights reserved.
//
#import <Foundation/Foundation.h>
#import <ReactNativeNavigation/ReactNativeNavigation.h>
void registerExternalComponent(NSString *componentName, UIViewController *viewController) {
[ReactNativeNavigation
registerExternalComponent:componentName
callback:^UIViewController *(NSDictionary *props, RCTBridge *bridge) {
return viewController;
}];
}
view raw RNNUtility.m hosted with ❤ by GitHub

YourCode.swift

let externalComponentName = "YourComponentName"
let viewController = YourViewController()
registerExternalComponent(externalComponentName, viewController)
view raw YourCode.swift hosted with ❤ by GitHub
 

Running React Native Apps in Release Mode on iOS with Xcode

Today, my boss asked me to try running our organization’s React Native app in release mode, something I had never done before. In all of my personal projects I would always run my React Native apps in debug mode, never actually testing a release version exactly. I would just follow the steps to create a release build and publish, never actually testing the release build until it appeared on the App Store.

So if you find yourself in a similar situation, here are some quick and easy steps to running a React Native app in release mode. Assuming you have Xcode configured to run the app on your personal iPhone:

  1. Plug your iPhone into your Mac
  2. Select your iPhone as the device run target
  3. With Xcode open, press/hold: COMMAND > SHIFT > COMMA on your keyboard
  4. A window should appear where you can select RUN > INFO > BUILD CONFIGURATION … and change DEBUG to RELEASE in the dropdown window (see screenshot below)
  5. Last, close the window and run your app

Note: If you are working on a large enterprise grade application, you may also need to change a config setting to point at your companies development servers if you want to test the release version of your app using development servers on the back-end with fake users and test data. Here’s a screenshot (mostly for my own personal reference) on how we do that at my organization:

 

zsh: permission denied: ./gradlew

Having trouble running $ ./gradlew clean on your Mac with the new zsh terminal? Here’s what you need to do to fix this issue; simply run:

$ chmod +x gradlew

Then try and run ./gradlew clean again:

$ ./gradlew clean
And you should be back in business!

 

CyberSurf Privacy Policy

Your privacy is important to me. It is my (Christopher Pedersen) policy to respect your privacy regarding any information I may collect from you on my app, CyberSurf.


I only ask for personal information when we truly need it to provide a service to you. I collect it by fair and lawful means, with your knowledge and consent. I also let you know why I am collecting it and how it will be used.


I only retain collected information for as long as necessary to provide you with your requested service. What data I store, I will protect within commercially acceptable means to prevent loss and theft, as well as unauthorized access, disclosure, copying, use or modification.
I don’t share any personally identifying information publicly or with third-parties, except when required to by law.


My app may link to external sites that I do not operate. Please be aware that I have no control over the content and practices of these sites, and cannot accept responsibility or liability for their respective privacy policies.


You are free to refuse our request for your personal information, with the understanding that I may be unable to provide you with some of your desired services.


Your continued use of my app will be regarded as acceptance of our practices around privacy and personal information. If you have any questions about how I handle user data and personal information, feel free to contact me (chris@topherpedersen.com).


This policy is effective as of 2 May 2021.

 

How to Upload Your App to Apple’s App Store Connect

Welcome back internet friend, it’s been awhile…

Okay enough kidding around, if you are trying to figure out how to upload your app to Apple’s App Store Connect you are in the right place. In fact, I’m currently writing this blog post while I do the same thing.

For starters, the thing I always forget, which is extremely user friendly is: You have to set the device target in Xcode to “Any iOS Device”.

Yes, that’s right! If you have one of the iOS simulators or your personal iPhone selected in Xcode as the device which you want to run your app when you hit the “run” button all of the options to upload your app to App Store Connect will be hidden!

So boom! Now you are halfway there. I am assuming that since you are specifically reading a blog post about App Store Connect, that you have registered a developer account with Apple. If not, register a developer account with Apple, then go and create a listing for your app on appstoreconnect.apple.com. THEN, you can go ahead and upload your actual app using Xcode to App Store Connect for distribution.

Then, in Xcode simply click Product > Archive … and after Xcode finishes doing it’s thing the following popup will appear with the option to “Distribute App”:

Last, click the blue button to distribute your app. I know this feature of Xcode is sort-of hidden, and not intuitive to find at all, so hopefully someone finds this post helpful. And congrats on publishing your new app!

 

How to Make App Store Screenshots with a Fake iPhone for Your App

I could have sworn I wrote a blog post about this before, but I couldn’t seem to find it? So I just wanted to make sure to jot this information down for my own personal reference, or maybe to help someone else out there on the internet. So without further ado: How to Make App Store Screenshots for Your React-Native App

Okay, so here’s the deal. For all of the other non-screenshot related graphics you need for your App Store or Play Store listing, just use Canva.com. But for the actual fake phone app screenshots, use Previewed.app. With Previewed, they give you a really nice template to start with, you can select the fake phone you want, then add your screenshots and put them in your fake phone. Add heading text, etc. etc.

Oh but wait! So how do you get the screenshots of your app into Previewed? I know it’s 2021 and there should be a better way of doing this, but here’s what I do… I simply run the app on my iPhone or Android phone, then take a screenshot of the app like I would take any other screenshot. And last, I email the screenshot to myself. Then I open my email on my laptop, download the screenshot, then upload the screenshot to Previewed.

Seriously? Yes seriously. I’m still using email to send files from my phone to computer and you should too!

 

What the flip? How to fix FlipperRSocketResponder.cpp normal x86_64 c++ com.apple.compilers.llvm.clang.1_0.compiler error in your React-Native App

Did the following error message bring your React-Native app to a complete hault?

** BUILD FAILED **

The following build commands failed:

CompileC /Users/christopherpedersen/Library/Developer/Xcode/DerivedData/CyberSurf-aujprbefnxzgrxbvhimyskblikpe/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/Flipper.build/Objects-normal/x86_64/FlipperRSocketResponder.o /Users/christopherpedersen/Desktop/CyberSurfApp/ios/Pods/Flipper/xplat/Flipper/FlipperRSocketResponder.cpp normal x86_64 c++ com.apple.compilers.llvm.clang.1_0.compiler (1 failure)

Fret not dear internet friend, I have your fix right here! Apparently React-Native’s new debugging tool “Flipper” is the source of your woes. To solve this problem, all you need to do is simply delete Flipper from your iOS podfile. So go ahead and open up the file in your project called “Podfile” (no extension) and delete the following lines:

     
use_flipper!   
post_install do |installer|     
  flipper_post_install(installer)   
end 

Then run you can “$ pod install” again, run your app, and you’re back in business.

 

[SOLVED] How the Hell to Install psycopg2 on Mac?

Woah ho ho! Welcome back dear internet friend. This blog is sure to be short, but will pack a punch! If you are having a hard time installing psycopg2 on your Mac using pip and are a bit intimidated by all the talk about PATHs and requisite dependencies et cetera et cetera… fret not! All you need is this little one liner:

$ pip3 install psycopg2-binary

That’s right, all you need to do is install psycopg2-binary INSTEAD of psycopg2 and everything will be easy peasy.

 

Painfully Slow UPDATEs and DELETEs when using Python, MySQL, and Oracle’s mysql.connector Library

For the past week I’ve been banging my head against the wall trying to figure out why my MySQL database is so slow performing UPDATEs and DELETEs. Single UPDATE or DELETE statements aren’t so bad, but whenever I try to delete many entries, say 30,000 or so rows, things just grind to a halt!

Well this is what I’ve figured out: Oracle’s mysql.connector library for Python is extremely slow at doing UPDATEs and DELETES. While mysql.connector handles SELECT statements just fine, and can perform INSERTs blazing fast as well when using the executemany() method, the library is just awful at doing bulk UPDATEs and DELETEs.

It kind of makes sense that this might be the case, as MySQL has long been associated with PHP. PHP and MySQL are like peanut butter and jelly. Likewise, when you think about Node.js, MongoDB seems to be the preferred database of choice for backend JavaScript programming. Python and MySQL? That combo just doesn’t seem to go well together from what I have found.

Personally, I’ve decided that the best solution for my needs is to simply move my data from MySQL over to a new PostgreSQL database, not because MySQL is slow, but because I know that PostgreSQL has an excellent Python library: psycopg2

If you happen to find yourself in a similar situation, struggling to get MySQL to play nicely with Python, I suggest you dump the dolphin and unleash the Psycho Pig!

UPDATE (January 3rd, 2020… 1 Day Later): After finishing moving all of my data over from MySQL to PostgreSQL, I found that using Python + PostgreSQL + psycopg2 has completely eliminated my problem with painfully slow UPDATEs and DELETEs. If you find yourself running into a similar problem with Python, MySQL, and mysql.connector, I highly recommend switching over to Python/PostgreSQL/psycopg2. However, you need to make sure that you are using psychopg2’s execute_batch() method in order to see these performance gains. Again, make sure to use psycopg2’s execute_batch() method when doing BULK UPDATEs, DELETEs, or INSERTs.