React Native styling not showing using style.container

Question

I am learning React Native and applying some simple styling to a View. But the styling is not showing up at all. What am I doing wrong?

import React, { Component } from 'react'
import { Text, View } from 'react-native'

export default class Header extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text> Hello </Text>
      </View>
    )
  }
}

const styles = {
    container: {
        backgrounColor: '#ddd',
        color: 'red',
        paddingTop: 14
    }
}

If I change it to <View style={{backgroundColor: '#ddd', color: 'red', paddingTop: 14}}> it would work, but why won't the first approach work?

I am using:

react-native-cli: 2.0.1 and react-native: 0.57.8

Answer 1

You need to use StyleSheet to create JavaScript styles in react-native

Import StyleSheet from react-native and change your variable style to:

const styles = StyleSheet.create({
    container: {
        backgrounColor: '#ddd',
        color: 'red',
        paddingTop: 14
    }
});