How to Add External StyleSheet for My React Native Project - react-native

Question

How to Add External StyleSheet for My React Native Project
Add External StyleSheet

Answer 1

First, you must create a file to export a StyleSheet object with styles.
Style.js
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
box: {
width: '80%',
height: 150,
backgroundColor: 'red',
alignSelf: 'center',
borderRadius: 9
}
});
export { styles }
And in your component, you must import that.
import React, { Component } from "react";
import { View } from 'react-native';
import { styles } from "./Style";
class Home extends Component {
render(){
return(
<View>
<View style={styles.box}>
</View>
</View>
)
}
}
export default Home;
Finally, run the app.

Answer 2

If I understand you correctly, you want to add a style to your component/s.
I assume you are using a Functional Component.
A good practice is to do it by creating a style.js file, on the same folder where your component is located.
style.js
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
backgroundColor: 'green'
}
})
export { styles }
and in your desired component you should import it.
MyComponent.js
import React from 'react'
import { View } from 'react-native'
import { styles } from './styles' //<<-- import
const MyComponent = (props) => {
. (Whatever states and handlers, etc. that your component does)
.
.
return (
<View style={styles.container}> //<<-- usage
...rest of your JSX
</View>
)
}
export default MyComponent
good luck!