Skip to content
A curated list of helpful tips and trick for react native developers.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images
.gitignore
LICENSE
README.md

README.md

React Native tips and tricks

A curated list of helpful tips and trick for react native developers.

Table of contents

Android specific

Ripple goes outside of the TouchableNativeFeedback with border radius

Problem:

Sometimes you need to implement rounded buttons with ripple animation. You will go ahead and use a TouchableNativeFeedback with some borderRadius. But you'll notice that ripple animation doesn't follow your border radius and goes outside of rounded container.

Touchable native feedback ripple with border radius problem screenshot

Solution:

To fix that wrap your TouchableNativeFeedback with another View with some styles:

<View style={{
  borderRadius: 0,
  backgroundColor: 'transparent',
}}>
  <TouchableNativeFeedback>
    {/* all your content goes here... */}
  </TouchableNativeFeedback>
</View>

Touchable native feedback ripple with border radius solution screenshot

Demo:

Run snack with the demo.

iOS specific

Title for ios example

Cross-platform

FlatList last item margin bottom

Problem:

Sometimes you might want to add an extra whitespace in the bottom of your FlatList. You will see that neither adding paddingBottom to the style property of the FlatList nor adding extra margin to your list items makes any effect.

Flatlist last item margin bottom problem screenshot

Solution:

The solution to this problem is to add paddingBottom style to the contentContainerStyle. i.e.:

<FlatList
  contentContainerStyle={{paddingBottom: 20}}
  data={data}
  renderItem={renderItem}
  // ...
/>

Flatlist last item margin bottom result screenshot

Related issues:

Bundling

How to use symlinks

Problem:

Symlinks are really common and helpful thing when you're developing in monorepo using lerna or just an example for your library. They will allow you to link your local modules between each other so the module inside your node_module folder will be pointing to your local folder and will be up to date with all changes you've made. Currently metro (the react native packager) doesn't follow symlinks and won't build your bundle.

Solution:

To fix that you'll have to:

  1. Create a symlink of your package (here) is example).

  2. Run inside your react native project metro-with-symlinks tool.

It will generate you a rn-cli.config.js file with all the instructions for metro how to resolve symlinks and build the bundle.

Absolute imports

Problem:

Module imports in your project are usually separated in two types:

  • import npm modules which are resolved relatively to the node_modules folder
  • import your own modules

Doing the second, you will always find something like this import { SomeComponent } from '../SomeComponent'; and it is ok for smaller projects or when you have a relatively independent module. But as your project start to grow, your imports may become a hell: import { doSomething } from '../../../../../../../some-module'; and it is extremely hard to read or follow this path in your IDE to find the right file. Furthermore, your import will fail if you move dependent file somewhere else during a refactoring.

Solution:

Absolute imports in react native. So, what if we could import our component located in src/components from the src/screens with something like this:

import { SomeComponent } from 'components/SomeComponent';

Just create a package.json file under your src/components folder with the next content:

{
  "name": "components"
}

It does make sense to create such package.json for each root module. So imagine you have a file structure like this:

  src/
    components/
    screens/
    config/
    constants/
    i18n/
    utils/
  index.js
  package.json - your app's main package.json

Just create a similar package.json for every folder to become resolvable absolutely. And you will have something like this:

  src/
    components/
      package.json - "components"
    screens/
      package.json - "screens"
    config/
      package.json - "config"
    constants/
      package.json - "constants"
    i18n/
      package.json - "i18n"
    package.json - "app"
  index.js
  package.json  - your app's main package.json

License

MIT

You can’t perform that action at this time.