react-native (5)

Generating test IDsNovember 19, 2019

Automatically generate component unique test IDs for React

TL;DR An interesting approach to generating unique identifiers that can be used to target elements, during testing, in your React component render tree. Preface Because React Native does not have any concept of class names or ids, you use to find components in your render tree while testing. When I was working more in React Native, we would heavily use the prop in our tests to accurately target…Keep Reading

#react#react-native#testing#javascript
CodePush, is it worth it?November 03, 2017

What is CodePush and is it worth integrating into your React Native App

Last week at work was hack week, so I took the time to look into getting CodePush into our React Native app. It was pretty simple to get set up but after some discussion with the team, we started to question whether or not CodePush was worth the added complexity. So what is CodePush? CodePush is a service provided by Microsoft for Cordova and React Native apps, that allows you to push out new…Keep Reading

#react-native#react#codepush#git-workflow#app-release

Get a local module working with a React Native app for quick development

After building an app using React Native and using modules from NPM, you may decide that a component in your app could be used by others and you want to share it to NPM. While the typical “How to deploy a JS module to NPM” will get you most of the way there, React Native has a few caveats that need to be addressed. Let’s start by finding a component in our app that can be pulled out into it’s own…Keep Reading

#react#react-native#npm#module

How to get the dimensions of a view in React Native

A common pattern in React Native is changing the layout/sizes of views based on the size of its parent view. We can use React Native’s implementation of flexbox to get us 90% of the way there. But there are just some layouts that flexbox just has a hard time with. In the app I am building at work, there are two common instances where this is the case. When an absolutely positioned view needs to…Keep Reading

#react#react-native#module

Rendering large lists can quickly become very slow. Insert FlatList.

Coming from a primarily web front end and backend developer, I have learned to take some things for granted. On today’s modern hardware, I don’t spend a ton of time thinking about how something might result in slow render performance, since that usually isn’t an issue. But now that I’ve been doing a lot of mobile development with React Native, some patterns have come around to bite me primarily…Keep Reading

#react#react-native#scrollview#flatlist#performance#optimization

© Matthew Sessions 2020