Transitioning from React to React Native
Tags: reactnative
Published: 2021-07-03 12:12:14

---
title: Transitioning from React to React Native
published: true
date: 2021-07-03 00:00:00 UTC
tags: reactnative
canonical_url: https://bionicjulia.com/blog/transitioning-from-react-to-react-native
description: 3 things I learnt this week
---

When I learnt that I was going to be moving to our mobile app development team, one of the first things I did was to try googling for things React engineers should know when moving to React Native. I strangely didn't find a lot of content around this - perhaps because I wasn't searching for the right thing, or perhaps because no one's really created much content around this yet.

I therefore thought it might be a good idea to periodically write down some thoughts around things I learn or come across that I think web devs transitioning to mobile app development would find useful to know.

Here's the first post which covers 3 things that I learnt over the course of last week that I wish I had learnt sooner. I would definitely have been able to realise these sooner if I had just spent some time reading the official React Native documentation, but I don't really operate that way! I find it easier to read documentation once I have some context and have tried building something myself and have it fail, as I find it a lot easier to get the "_aha_" moment that way. Writing it down in a blog post like this then helps to consolidate my learnings. 😄

### 1. CSS does not really cascade

CSS tends to mostly work the same way in React Native, as it does on web. The main thing to note however, is that elements don't really inherit style properties from their parent containers in the same way.

So for instance, if you have something like `View` encapsulating a couple of `Text` elements, the child `Text` elements will not inherit the `textAlign` style property from `View`.

```jsx
<View style={{ textAlign: 'center' }}>
  <Text>Blah blah</Text> // this will not be center aligned!
  <Text>Blah blah</Text> // this will not be center aligned!
</View>
```

What you'd need to do is apply the style to the `Text` elements directly:

```jsx
<View>
  <Text style={{ textAlign: 'center' }}>Blah blah</Text>
  <Text style={{ textAlign: 'center' }}>Blah blah</Text>
</View>
```

This obviously starts to get tedious after a while, so there are a few patterns to get around this that basically involving abstracting out the style you want.

**Option 1: Abstracting the style out to a reusable class through `Stylesheet` - still repetitive though**

```jsx
;<View>
  <Text style={styles.centerText}>Blah blah</Text>
  <Text style={styles.centerText}>Blah blah</Text>
</View>

const styles = StyleSheet.create({
  centerText: {
    textAlign: 'center',
  },
})
```

**Option 2: Creating custom components - less repetitive, but more convoluted**

```jsx
export const RegularCenterText = ({ style, children }: Props) => (
  <Text style={[fontStyles.textReg, style]}>
    {children}
  </Text>
);

export const fontStyles = StyleSheet.create({
  textReg: {
    color: 'black,
    fontSize: 16,
    lineHeight: 24,
		textAlign: 'center',
  },
)
```

### 2. Use native List Views to render lists more efficiently

The official React Native documents will explain this better than I will so refer to [this document](https://reactnative.dev/docs/using-a-listview). In essence, the idea behind this is that the screen sizes on mobile devices are relatively smaller than web browsers for Mac or PCs. Your app can therefore be optimised by only loading what is visible on the screen at any one time. There's no real point in rendering a list with say a 1000 rows, if only 5 are visible on the screen at any one time.

Native components like `FlatList` or `SectionList` allow us to do this easily by taking in a data array, and allowing us to define how to render a single item.

### 3. Think about the touchable area on screen

This was something I hadn't considered at all, until I saw a PR from another senior engineer which included a prop called `hitSlop`. The name itself doesn't give a lot away, so I did some googling which opened up a whole new area of mobile development that I'm ashamed to say, had not crossed my mind at all.

To take a step back, when developing on React Native, there are certain native components you can use to define whether certain elements are interactable. For instance, there's a `Pressable` component that allows you to define what happens `onPress` but also `onLongPress` lasting more than 500ms. The thing to consider here is what you're making "pressable". If it's a small word, e.g. "link", it might be difficult for the user to actually click on it depending on the size of their finger, what device they are using, magnification settings etc etc.

The thing we can do here is to expand the interactable area by using `hitSlop`. This allows us to sets the additional [rectangular] area around an element in which the interaction can still be detected. Read [this document](https://reactnative.dev/docs/pressable#hitslop) if you want to learn more.

Are you a React Native developer? Do you have any other tips for me or any other improvement suggestions to my realisations above? Let me know on [Twitter](https://twitter.com/bionicjulia) or [Instagram](https://instagram.com/bionicjulia) @bionicjulia.