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