React Native : how to import flexbox styles from another file js? - react-native

Question

I'm a newbie in React Native, and I try to learn basic flexbox from tutorial point but I always get an error, I have two file index.android.js and MyPresentationalComponent.js for styles code file.
This error picture, when I run myproject
index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
styles,
View
} from 'react-native';
import MyPresentationalComponent from './MyPresentationalComponent';
export default class belajar extends Component {
constructor() {
super();
this.state = {
myText: 'Lorem ipsum dolor sit amet.'
};
}
render() {
return (
<View>
<MyPresentationalComponent style={styles.container} />
</View>
);
}
}
AppRegistry.registerComponent('belajar', () => belajar);
MyPresentationalComponent.js
import React, { Component } from 'react';
import {
View,
StyleSheet
} from 'react-native';
const MyPresentationalComponent = (props) => {
return (
<View style={styles.container}>
<View style={styles.redbox} />
<View style={styles.bluebox} />
<View style={styles.blackbox} />
</View>
);
};
export default MyPresentationalComponent;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'grey',
height: 600
},
redbox: {
width: 100,
height: 100,
backgroundColor: 'red'
},
bluebox: {
width: 100,
height: 100,
backgroundColor: 'blue'
},
blackbox: {
width: 100,
height: 100,
backgroundColor: 'black'
},
});

Answer 1

The problem is that you are not exporting the styles variable out of the file, and so it will not be visible to other files, even when you import the class marked with export default. I would suggest the following:
import React, { Component } from 'react';
import {
View,
StyleSheet
} from 'react-native';
const MyPresentationalComponent = (props) => {
return (
<View style={styles.container}>
<View style={styles.redbox} />
<View style={styles.bluebox} />
<View style={styles.blackbox} />
</View>
);
};
export default MyPresentationalComponent;
export const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'grey',
height: 600
},
redbox: {
width: 100,
height: 100,
backgroundColor: 'red'
},
bluebox: {
width: 100,
height: 100,
backgroundColor: 'blue'
},
blackbox: {
width: 100,
height: 100,
backgroundColor: 'black'
},
});
Then, your index.android.js should look like this:
import React, { Component } from 'react';
import {
AppRegistry,
styles,
View
} from 'react-native';
import MyPresentationalComponent, {styles} from './MyPresentationalComponent';
export default class belajar extends Component {
constructor() {
super();
this.state = {
myText: 'Lorem ipsum dolor sit amet.'
};
}
render() {
return (
<View>
<MyPresentationalComponent style={styles.container} />
</View>
);
}
}
AppRegistry.registerComponent('belajar', () => belajar);
Please note the difference between defaut exports and named exports. You can have just one default export, and the name that you give it is not relevant at all, when you import it, it can use a different name. For named imports, you need to use the curly braces notation and the name must be the same in both export and import . However, you can have as many of them as you want.

Answer 2

According to #Gui Herzog answer simplier solution to include any external style file can be done:
stylesheet file
import {
StyleSheet
} from 'react-native';
export default styles = StyleSheet.create({
// or export const styles = StyleSheet.create({
Container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
})
Than simply use in your components:
import styles from './styles'
// or import { styles } from './styles'
using:
<View style={styles.Container}>

Answer 3

The problem is because you're exporting only the component MyPresentationalComponentand not its StyleSheet. If you want to have global styles I recommend you to create a different file. You could call it Styles.js and export it so you can use on all components you need. For example:
import { StyleSheet } from 'react-native'
module.exports = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'grey',
height: 600
},
})
Then you can import it on your MyPresentationalComponent and Index.js using:
import STYLES from 'Styles.js'
And to use you could:
<Component style={STYLES.container} />
Hope this helps!