react native functional components and hot reloading not working - react-native

Question

In the middle of making a react native application and I'm experimenting with functional programming within React Native and for some reason when I convert the prebuilt code into an arrow function the HOT RELOADING responds but doesn't push the changes please help.
Here's the prebuilt code w/ class
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Component1 from './app/components/msg/propsMsg'
export default class tutorial extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome a React Native Sandbox!
</Text>
<Component1 msg="props MSG"/>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fefefe',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('tutorial', () => tutorial);
Here's my attempt at turning it functional
const tutorial = () => {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome a React Native Sandbox!
</Text>
<Component1 msg="props MSG 2"/>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
)
}
export default tutorial