Expo Client shows checkers after import a JS in Expo Snack


Dear community,

I’m working on Expo Snack. When I try to import a JS, the screen on Expo client App (iOS) becomes:

The JS I uploaded is:

import React from 'react';
import {
} from 'react-native';

// Change image file names if you need
export const tabImages = {
	'tab1': require('./assets/btn_square_view.png'),
	'tab2': require('./assets/btn_list_view.png'),
	'tab3': require('./assets/btn_tagged_view.png'),
	'tab4': require('./assets/btn_bookmark.png'),
	'tab1selected': require('./assets/btn_square_view_selected.png'),
	'tab2selected': require('./assets/btn_list_view_selected.png'),
	'tab3selected': require('./assets/btn_tagged_view_selected.png'),
	'tab4selected': require('./assets/btn_bookmark.png'),

const CustomTabBar = React.createClass({
  tabIcons: [],
  propTypes: {
    goToPage: React.PropTypes.func,
    activeTab: React.PropTypes.number,
    tabs: React.PropTypes.array,

  componentDidMount() {
  render() {
    return (
      <View style={[styles.tabs, this.props.style, ]}>
      {this.props.tabs.map((tab, i) => 
          return (
                    onPress={() => this.props.goToPage(i)}
                <Image source={this.prop.activeTab === i ? tabImages[tab + 'selected'] : tabImages[tab]} />

const styles = StyleSheet.create({
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingBottom: 10,
  tabs: {
    height: 45,
    flexDirection: 'row',
    paddingTop: 5,
    borderWidth: 1,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderBottomColor: 'rgba(0,0,0,0.05)',

export default CustomTabBar;

I added the CustomTabBar in App.js like this:

import CustomTabBar from './CustomTabBar';

The Snack link is: https://snack.expo.io/SklvlbR_X

What happened? and how to resolve?

Cross-posted in StackOverflow: https://stackoverflow.com/questions/52378984/checkered-pattern-appeared-in-expo-client-app-after-code-update-using-expo-snack


Hey @raptorkwok,

You see checkers when there is an error in the project when Snack attempts to load it. The Web Client should provide you with more information regarding the error.



closed #3

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.