Here is the code snippet I am working on:
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'
}
});
The code is loaded from a navigator file:
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;
However, the styling applied to the components is not working as expected:
https://i.sstatic.net/ft0sW.jpg
The background color should be #fff, but it seems like the flex property might not be functioning correctly. If the flex property is not working, could it be causing the other styles defined in the StyleSheet to be ignored?