React Native Shadow is Missing on iOS but is Okay on Android

In one of our projects, some of the items that had a shadow, was working just fine on Android, but the shadow was missing on iOS.

After investigating it, it turned out to be related to the items that had overflow: 'hidden', which on iOS resulted in shadow being trimmed.

Turns out on iOS, the shadow is part of the UI component that you define it at, which results in removing the shadow, when one has the overflow set to hidden. On Android, the shadow is applied outside of the component, so it is just fine to have overflow: 'hidden' and still get the shadow.

The solution was to wrap the component in another <View /> with the shadow defined in it, while having the overflow: 'hidden' in the inner component.

Example code:

// Before:
// ...
<View style={ { 
  // we need the overflow hidden to round the images in the content
  overflow: 'hidden',
  borderRadius: 20,
  
  // shadow definition
  shadowColor: '#000',
  shadowOffset: {
    width: 0,
    height: 2,
  },
  shadowOpacity: 0.25,
  shadowRadius: 3.84,
  elevation: 5,  
} }>
  { children }
</View>

// After:
<View style={ { 
  // we still need the same radius, so the shadow would have the same shape as
  // the inner container

  borderRadius: 20,
  
  // shadow definition
  shadowColor: '#000',
  shadowOffset: {
    width: 0,
    height: 2,
  },
  shadowOpacity: 0.25,
  shadowRadius: 3.84,
  elevation: 5,  
} }>

  <View style={ {
    // we need the overflow hidden to round the images in the content
    overflow: 'hidden',
    borderRadius: 20,
  } }>
  { children }

  </View>
</View>

So if you end up having missing shadows on iOS, make sure to check for overflow: 'hidden' on the element : )

SentryError: Native Client is not available, can’t start on native when updating expo-cli to 4.x.x (from version 3.22.3)

TL;DR: Update your metro.config.js to use @expo/metro-config based on the latest guidelines (SDK 40+) –

It’s funny when you encounter an error in a project, and after spending a lot of effort researching it, to find out that the cause is the same with a totally different error on a very different project.

In my case this was caused by outdated metro.config.js file, specifically the SVG loading code that uses react-native-svg-transformer.

To fix it, I replaced the metro config with the following:

const { getDefaultConfig } = require("@expo/metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig(__dirname);
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

And also intall the '@expo/metro-config' module:

yarn add @expo/metro-config
// or
npm install @expo/metro-config

More info on the other error – SVG Icons Not Loaded After Updating ReactNative Expo to Version 40

Cheers!

Wondering how big is your React project?

Recently I wanted to explore the impact of a refactoring I did so I ended up checking the length of the files I’ve had in git (hoping that this number would decrease).

The magic command was to list the files in git, grep the ones ending with js, jsx and css and count the lines.

git ls-files | grep -P ".*(js|jsx|css)$" | xargs wc -l

This works both on Linux and Windows with Git Bash

Side note: Feel free to remove/add/change extentions in the (js|jsx|css) to check your source files.

Thanks to this Stack Overflow question 🙂

Testing with Jest in a node and ReactJS monorepo (and getting rid of environment.teardown error)

Big number of the applications we develop have at least one ReactJS UI, that is held in one repo and an API, held in another. If we need to reuse some part of the code, we do so by moving it to another repository and adding it as a git submodule

For our latest project we decided to give the monorepo approach a try (which we didn’t come to a conclusion yet if it better fits our needs). The project is a node.js API with a ReactJS app, that is based on create-react-app

This first issue we faced with it was with testing the node app – tests ran just fine in the react application (/app/) but if you tried to run it for the server, you’d get the following error:

● Test suite failed to run
TypeError: environment.teardown is not a function

  at ../node_modules/jest-runner/build/run_test.js:230:25

In our package.json we had the trivial test definition – just running jest:

"scripts": {
    ...
    "test": "jest"
    ...
}

We didn’t had issue with this approach in a node API with no CRA app in it, so as it turned out to be the case, we had to indicate that the environment is node.

To do so we added a testconfig.json and added it to the script in the package.json

testconfig.json

{
	"testEnvironment": "node"
}

package.json

{
	"scripts": {
		"test": "jest --config=testconfig.json"
	}
}

If you want jest to monitor your files, change the “test’ script to “jest –watchAll –config=testconfig.json”