I'm new to coding and react native, so sorry if this is a stupid question.
I'm having issues rendering a hamburger icon from the following code. It works as expected on Android but not iOS.
import React from 'react';import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';import { totalPoints, totalBucks } from '../datasets/UserData.js';export class Navbar extends React.Component { constructor(props){ super(props); } burgerPress = value => { this.props.onPress(); }render(){var points = totalPoints;var bucks = totalBucks; return(<View style={styles.row}><Text style={styles.column} /><Text style={styles.column}><Image source={require('../../assets/coins.png')} style={{ width: 30, height: 30, resizeMode: 'contain'}}/> {""}{ points }</Text> <Text style={styles.column}><Image source={require('../../assets/bills.png')} style={{ width: 40, height: 40, resizeMode: 'contain'}}/> {""}{ bucks }</Text><View style={styles.column}><TouchableOpacity onPress={() => this.burgerPress()} style={{width: 40, height: 40, justifyContent: 'center', alignItems: 'center'}}><Image source={require('../../assets/hamburger.png')} resizeMode={'contain'} style={{ width: 40, height: 40, backgroundColor: 'lightblue', tintColor: '#ffffff', justifyContent: 'center', alignItems: 'center'}}/> </TouchableOpacity></View></View> );};};const styles={ row: { flex: 1, alignItems: 'flex-end', flexDirection: 'row', borderBottomWidth: 1, borderColor: "#000000", padding: 5, justifyContent: 'center' }, column: { flex: 1, alignItems: 'center', flexDirection: 'column', justifyContent: 'center' }}The coins and bills icons load properly on both platforms. The hamburger loads on android, but on iOS, all I get is the background color. If I delete the backgroundColor and tintColor, it renders nothing, so I think the issue is that it is not importing the image at all but only on iOS. Is there any way to get this to work?
iOS display(unexpected)
Android display(expected)