react-nativecalabashcalabash-ios

Calabash takes ugly screenshot when borders are present in React Native app

We use Calabash for functional testing and also screenshots taking for our react native app, but we ran into an issue with screenshots.

When one component has a border, the screenshot is messed up:

For example, with an index.ios.js such as:

import React from 'react';
import { AppRegistry, View } from 'react-native';

AppRegistry.registerComponent('App', () => () => (
  <View style={{flex: 1, backgroundColor: 'blue', justifyContent: 'center', alignItems: 'center'}}>
    <View style={{height: 100, width: 200, backgroundColor: 'red', borderColor: 'green', borderWidth: 10}}>
    </View>
  </View>
));

This is the display on simulator:

On Simulator

This is the screenshot taken (say by running screenshot after calabash-ios console):

On screenshot

Without the borderWidth, it works!

We're on RN 0.26.2, using calabash-cucumber 0.19.2.

Any help would be super appreciated! Thanks!!

Solution

  • Solved by updating the calabash-server with a calabash-ios download :)