React-native is ignoring all of my container styles from StyleSheet

Question

Here is my code:

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

export default class ShortcutsHome extends React.Component {
  render() {
    return (
      <View styles={styles.container}>
        <View styles={[styles.four_six, styles.section]}>
          <TouchableOpacity
            onPress={() => this.methodSelect('four')}>
              <Text>4 hrs</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => this.methodSelect('six')}>
              <Text>6 hrs</Text>
          </TouchableOpacity>
        </View>
        <View styles={[styles.twelve_twenty_four, styles.section]}>
          <TouchableOpacity
            onPress={() => this.methodSelect('twelve')}>
              <Text>12 hrs</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => this.methodSelect('twenty_four')}>
              <Text>24 hrs</Text>
          </TouchableOpacity>
        </View>
        <View styles={[styles.daily_custom_daily, styles.section]}>
          <TouchableOpacity
            onPress={() => this.methodSelect('daily')}>
              <Text>Daily</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => this.methodSelect('custom_daily')}>
              <Text>Custom Daily</Text>
          </TouchableOpacity>
        </View>
        <View styles={styles.weekly}>
          <TouchableOpacity
            onPress={() => this.methodSelect('weekly')}>
              <Text>Weekly</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  methodSelect = (strategy) => {
    const { navigate } = this.props.navigation;
    switch(strategy) {
    case 'four':

      break;
    case 'six':

      break;
    case 'twelve':

      break;
    case 'twenty_four':

      break;
    case 'daily':
      navigate('Tpd', { strategy: 'daily' });
      break;
    case 'weekly':
      navigate('Tpd', { strategy: 'weekly' });
      break;
    case 'custom_daily':
      navigate('Tpd', { strategy: 'custom_daily' });
      break;
    default:
      alert("Something went wrong when selecting your strategy, please try again.");
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  section: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  four_six: {
    backgroundColor: '#ccc'
  },
  twelve_twenty_four: {
    backgroundColor: '#aaa'
  },
  daily_custom_daily: {
    backgroundColor: '#eee'
  },
  weekly: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#000'
  }
});

It gets loaded from a navigator:

import React from 'react';
import { createStackNavigator } from 'react-navigation';

import ShortcutsHome from '../pages/ShortcutsHome';
import Tpd from '../pages/Tpd';
import SelectHours from '../pages/SelectHours';

const ShortcutsNavigator = createStackNavigator({
  ShortcutsHome: {
    screen: ShortcutsHome,
    navigationOptions: {
      title: 'Setup',
      headerTransparent: true
    }
  },
  Tpd: {
    screen: Tpd,
    navigationOptions: {
      title: 'Setup',
      headerTransparent: true
    }
  },
  SelectHours: {
    screen: SelectHours,
    navigationOptions: {
      title: 'Setup',
      headerTransparent: true
    }
  }
},
{
  initialRouteName: 'ShortcutsHome'
});

export default ShortcutsNavigator;

This is what it looks like though, none of the styles are being applied:

The background should at least be #fff, it seems like flex: 1 might not be working for some reason? If flex: 1 isn't working, would it negate the rest of the styles from the StyleSheet?

Answer 1

the main problem is the ShortcutsHome class, where you must replace styles = {} with style = {}:

your class should be as follows:

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

export default class ShortcutsHome extends React.Component {
  render() {
    return (
      <View style={styles.container}> // hear
        <View style={[styles.four_six, styles.section]}> // hear
          <TouchableOpacity
            onPress={() => this.methodSelect('four')}>
              <Text>4 hrs</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => this.methodSelect('six')}>
              <Text>6 hrs</Text>
          </TouchableOpacity>
        </View>
        <View style={[styles.twelve_twenty_four, styles.section]}> // hear
          <TouchableOpacity
            onPress={() => this.methodSelect('twelve')}>
              <Text>12 hrs</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => this.methodSelect('twenty_four')}>
              <Text>24 hrs</Text>
          </TouchableOpacity>
        </View>
        <View style={[styles.daily_custom_daily, styles.section]}> // hear
          <TouchableOpacity
            onPress={() => this.methodSelect('daily')}>
              <Text>Daily</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => this.methodSelect('custom_daily')}>
              <Text>Custom Daily</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.weekly}> // hear
          <TouchableOpacity
            onPress={() => this.methodSelect('weekly')}>
              <Text>Weekly</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  methodSelect = (strategy) => {
    const { navigate } = this.props.navigation;
    switch(strategy) {
    case 'four':

      break;
    case 'six':

      break;
    case 'twelve':

      break;
    case 'twenty_four':

      break;
    case 'daily':
      navigate('Tpd', { strategy: 'daily' });
      break;
    case 'weekly':
      navigate('Tpd', { strategy: 'weekly' });
      break;
    case 'custom_daily':
      navigate('Tpd', { strategy: 'custom_daily' });
      break;
    default:
      alert("Something went wrong when selecting your strategy, please try again.");
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  section: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  four_six: {
    backgroundColor: '#ccc'
  },
  twelve_twenty_four: {
    backgroundColor: '#aaa'
  },
  daily_custom_daily: {
    backgroundColor: '#eee'
  },
  weekly: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#000'
  }
});

Answer 2

I was using styles= instead of style=, just a typo.