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: Instagram Layout - Snack

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.



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