Recent posts

Building a Master-Detail Pattern in React Native

August 16, 2017  5 minute read  

I’m in the middle of writing a simple Notes app in React Native. Thus far, I’ve: Worked out how to handle orientation changes. Worked out how to implement swipe-to-delete. Figured out the best way to use TypeScript. Integrated MobX for the Flux pattern. Fixed up the project for universal iOS apps. Now it’s time to get to the master-detail pattern itself. Master-Detail is a basic pattern that incorporates a list (the master) and a detail page. On phones (and tablets in portrait m...

Universal iOS Apps with React Native

August 14, 2017  less than 1 minute read  

This is one of those short “tip” posts. I was developing a nice React Native app and blogging about it. However, I bumped into a problem where my iOS simulator runs always appeared as if they were on an iPhone. If I ran the app on an iPad, it would still act as if it were on an iPhone. The fix for this is buried inside XCode. Open XCode and then open the .xcodeproj file, which is inside the ios folder of your project. Then click on the project name. You will see a section like this: Note...

Integrating React Native, TypeScript, and MobX

August 11, 2017  5 minute read  

In my last article, I psted about getting TypeScript working with React Native. I’m building a flexible, best-practices, Notes App in React Native. This means I need a backing store, and it has to be local for offline capabilities. React has a definite way of building data into the UI and the manipulation of that data is an architecture known as Flux. Flux isn’t a concrete implementation, however. Normally, I would use Redux as the concrete implementation. However, I have recently started wor...

Debugging React Native with TypeScript and Visual Studio Code

August 09, 2017  2 minute read  

One of the things I really miss from React Native was the support for TypeScript. TypeScript helps me immensely, but it really comes into its own with React programming as the PropTypes are specified for you (no more propTypes static). I’m also getting into MobX as a flux implementation and that uses decorators, which is native in TypeScript. There is lots to love in TypeScript. However, every single guide I saw for implementing TypeScript within React Native was flawed. Specifically, there ...

Implementing swipe-right on a React Native FlatList

August 07, 2017  6 minute read  

I’m progressing on my “master-detail” pattern for a react-native app. The actual implementation of master-detail is shockingly simple (more on that later). However, I bumped into some specific issues when I was implementing it. The first of these was covered last time – how to detect orientation changes in React Native. The next is this. How do I implement swipe-right so that I can add a swipe-to-delete function to a FlatList. Let me explain a little further. The latest edition of React Nati...