I am currently learning react native and facing some difficulties with styling the elements. I followed the tutorials that recommended using the StyleSheet.create() method to style my components, but I keep encountering an error.
The style prop requires a mapping from style properties to values, not just a string. For instance, use style={{marginRight: spacing + 'em'}} when working with JSX.
Below is an example of my code:
MyComponent.js
import React from 'react';
import { Icon } from 'react-native-material-ui';
import { StyleSheet, Text, View } from 'react-native';
import {header} from '../assets/css/style.js'
export default class MyComponent extends React.Component {
state = {
}
constructor(props) {
super(props);
}
render() {
return (
<div style={ styles.headerStyle }>
<h2 style={ styles.headerMargin }> Hello! </h2>
</div>
}
const styles = StyleSheet.create({
headerStyle : header.headerStyle,
headerMargin:header.headerMargin
});
style.js
export const header= {
headerStyle: {
backgroundColor: '#000',
paddingTop: '20px',
paddingBottom: '20px',
color: '#fff'
},
headerCenter: {
width: '100%',
textAlign: 'center',
display: 'block'
},
headerMargin: {
margin: '0',
padding: '0'
}
}