Different style files for different components - react-native

Question

I'm learning react-native and have came up with a problem. I'm following a Tutorial series but might have missed something. I'm trying to use different style files for different components but the styles doesn't seem to apply.
Here is the snippet of the code:
index.ios.js
import React, {
AppRegistry,
Component,
Text,
View,
StatusBar
} from 'react-native';
StatusBar.setBarStyle('light-content');
class iTunesBrowser extends Component {
render() {
return (
<View style={styles.global.mainContainer} >
<View style={styles.navbar.appearance}>
<View style={styles.navbar.button} ></View>
<Text style={styles.navbar.title}>iTunesBrowser</Text>
<Text style={styles.navbar.button} >Search</Text>
</View>
<View style={styles.global.content}>
<Text> Some Text </Text>
</View>
</View>
);
}
}
import styles from './styles';
AppRegistry.registerComponent('iTunesBrowser', () => iTunesBrowser);
styles.js
export default {
global: require('./styles/global'),
navbar: require('./styles/navbar')
};
styles/global.js
import React, {StyleSheet} from 'react-native';
export default StyleSheet.create({
mainContainer: {
flex: 1
},
content: {
flex: 1,
backgroundColor: '#ccc'
}
});
styles/navbar.js
import React, {StyleSheet} from 'react-native';
export default StyleSheet.create({
appearance: {
backgroundColor: '#003333',
paddingTop: 30,
paddingBottom: 10,
flexDirection: 'row'
},
title: {
color: '#FFFFFF',
textAlign: 'center',
fontWeight: 'bold',
flex: 1
},
button: {
width: 50,
color: '#FEFEFE',
textAlign: 'center'
}
});
The styles work when put on the index or in a single style file.

Answer 1

I've tried your example and it works when you use JS files with this pattern:
import React, {StyleSheet} from 'react-native';
var global = StyleSheet.create({
mainContainer: {
flex: 1
},
content: {
flex: 1,
backgroundColor: '#ccc'
}
});
module.exports = global;
and
import React, {StyleSheet} from 'react-native';
var navbar = StyleSheet.create({
appearance: {
backgroundColor: '#003333',
paddingTop: 30,
paddingBottom: 10,
flexDirection: 'row'
},
title: {
color: '#FFFFFF',
textAlign: 'center',
fontWeight: 'bold',
flex: 1
},
button: {
width: 50,
color: '#FEFEFE',
textAlign: 'center'
}
});
module.exports = navbar;

Answer 2

The typical way to work with component styles in React Native is to keep the creation of your StyleSheets in the components themselves, not in separate files as you may be used to on the web with CSS. That way everything about the Component, the structure and the style are in the same file.
You can still have a global stylesheet, and pull in those styles when needed, but keep Component styles in the Component.
For a great example on how the community and Facebook recommends styling your components check out: http://makeitopen.com/