Expo Client shows checkers after import a JS in Expo Snack

[raptorkwok]

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 {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
} 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 (
            <TouchableOpacity 
                    key={tab} 
                    onPress={() => this.props.goToPage(i)}
                    style={styles.tab}>
                <Image source={this.prop.activeTab === i ? tabImages[tab + 'selected'] : tabImages[tab]} />
            </TouchableOpacity>
          );
        })
      }
      </View>
    );
  },
});

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

[adamjnav]

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.

Cheers,

Adam