Nested Enums in TypeScript

Today at work I was asked to re-factor some code in our organization’s app that involved replacing a bunch of strings with nested enums. For example, we have a bunch of strings that look something like “ActivityCode.Foo.A” and one of the tech leads wanted me to replace all of these strings with enums. However, you can see from my example string that it isn’t formatted like an enum. An enum would look something like ActivityCode.Foo. But how do you write ActivityCode.Foo.A where there is some nesting going on? The tech lead specifically requested that I use an enum, not an object, which brings us to this blog post: How do you create a nested enum in TypeScript?

Well, the short answer is: You can’t create nested enums in TypeScript.

However, there is a little hack you can use where you can create an object (ActivityCode), which contains a bunch of enums and essentially achieve the same effect. So if you need to write something like ActivityCode.Foo.A using enums, you can write something like:

enum Foo {
A = "ActivityCode.Foo.A",
B = "ActivityCode.Foo.B",
C = "ActivityCode.Foo.C",
}
enum Bar {
A = "ActivityCode.Bar.A",
B = "ActivityCode.Bar.B",
C = "ActivityCode.Bar.C",
}
enum Baz {
A = "ActivityCode.Baz.A",
B = "ActivityCode.Baz.B",
C = "ActivityCode.Baz.C",
}
const ActivityCode = {
Foo,
Bar,
Baz,
};
console.log(ActivityCode.Foo.A);
view raw nestenum.ts hosted with ❤ by GitHub

So there you have it! Pseudo nested enums in TypeScript.

 

[SOLVED] Xcode quit unexpectedly: How To Get Xcode to Open Your App When it Keeps Crashing Every Time You Try to Open Your Project

Xcode quit unexpectedly. Click Reopen to open the application again. This report will be sent to Apple automatically…

Oh boy! So Xcode is refusing to open your project and keeps crashing over and over again everytime you try to open your workspace. Well you’ve come to the right place.

For me, this issue started happening on my machine when attempting to open two different versions of the same app located in different directories. However, I’m unsure on what the cause of this issue is, and I’m sure lots of people likely run into this issue for all sorts of different reasons. Maybe you received an error dialog like the one shown above, or maybe Xcode simply doesn’t respond at all when you try to open your project. Regardless, here’s the quick fix you need that was passed down to myself by one of my co-workers:

Instead of trying to open your workspace/project with Xcode, open up your project’s directory using your Mac’s Finder application, then just double click on your app’s .xcodeproj file or .xcworkspace file depending on what you normally open. And that’s it! Sort of silly, but this trick is absolutely essential! So if you find yourself in a situation where Xcode doesn’t want to open your project, open it with Finder instead, and you’ll be back in business in no time.

 

React Native Navigation + Redux

Last week after work I was working on one of my side projects, and wanted to install Redux into a new app I’m working on which is using Wix’s React Native Navigation. However, I quickly realized that the old Redux boiler plate code that I normally use for my React Navigation based apps (not to be confused React Native Navigation from Wix) wasn’t going to work. I assumed that React Native Navigation would have a section about Redux on their site, but I wasn’t able to find anything. In fact, I actually wasn’t able to get installed in my after work coding session and pushed this work off to the weekend, which brings me here to you now writing this blog post!

Okay so here is what I’ve found: React Native Navigation used to have a helper function called registerComponentWithRedux that you could use. Unfortunately this function has since been deprecated. But the good news is, the Wix team left an excellent comment in their source code with instructions on how to install Redux into your React Native Navigation app:

registerComponentWithRedux is deprecated and will be removed in the next version! Please use Navigation.registerComponent instead. Visit the docs for more information https://wix.github.io/react-native-navigation/api/component#registering-a-component-wrapped-with-providers

https://github.com/wix/react-native-navigation/blob/b53f13c60fe6498ad1690adf1dfd7509f602965c/lib/src/Navigation.ts

Then if you head on over to the React Native Navigation docs you can check out the section on Registering a component wrapped with Providers. The code snippet they provide demonstrating how to do this looks something like:

// Source Code by Wix Published into the Public Domain
import { Provider } from 'react-redux';
const store = createStore();

Navigation.registerComponent(`navigation.playground.MyScreen`, () => (props) =>
  <Provider store={store}>
    <MyScreen {...props} />
  </Provider>,
  () => MyScreen)
);

Boom! There you have it. Simply wrap your screens with Redux s in your registerComponent declarations and you’re good to go. Then I assume you just need to make sure to pass the same store to all of your screens which you are registering, and your Redux store should be available all throughout your app.

 

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

 

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.