ewizard
Reputation: 2862
backgroundColor not being set
I have this code:
import React from 'react';
import { StyleSheet, Text, View, Picker, TouchableHighlight } from 'react-native';
export default class SelectHours extends React.Component {
render() {
let tpd = this.props.navigation.getParam('tpd', 'two');
switch(tpd) {
case '1':
tpd = 'one';
break;
case '2':
tpd = 'two';
break;
case '3':
tpd = 'three';
break;
case '4':
tpd = 'four';
break;
default:
//alert(tpd);
}
return (
<View styles={styles.container}>
{tpd != 'one' || tpd != 'one/shortcut' &&
<View styles={styles.choices}>
<Text>Please select a time for each period of the day:</Text>
<View styles={styles.choice}>
<Text>Morning:</Text>
<Picker
selectedValue={this.state.morning}
style={{ height: 50, width: 50 }}
onValueChange={(itemValue, itemIndex) => this.setState({morning: itemValue})}>
<Picker.Item label='1' value={1}/>
<Picker.Item label='2' value={2}/>
<Picker.Item label='3' value={3}/>
<Picker.Item label='4' value={4}/>
<Picker.Item label='5' value={5}/>
<Picker.Item label='6' value={6}/>
<Picker.Item label='7' value={7}/>
<Picker.Item label='8' value={8}/>
<Picker.Item label='9' value={9}/>
{tpd === 'two' &&
<View>
<Picker.Item label='10' value={10}/>
<Picker.Item label='11' value={11}/>
</View>
}
</Picker>
<Text>AM</Text>
</View>
<View>
{tpd === 'four' &&
<View styles={styles.choice}>
<Text>Late morning:</Text>
<Picker
selectedValue={this.state.late_morning}
style={{ height: 50, width: 50 }}
onValueChange={(itemValue, itemIndex) => this.setState({late_morning: itemValue})}>
<Picker.Item label='10' value={10}/>
<Picker.Item label='11' value={11}/>
</Picker>
<Text>AM</Text>
</View>
}
</View>
<View>
{tpd != 'two' &&
<View styles={styles.choice}>
<Text>Afternoon</Text>
<Picker
selectedValue={this.state.afternoon}
style={{ height: 50, width: 50 }}
onValueChange={(itemValue, itemIndex) => this.setState({afternoon: itemValue})}>
<Picker.Item label='12' value={12}/>
<Picker.Item label='1' value={13}/>
<Picker.Item label='2' value={14}/>
<Picker.Item label='3' value={15}/>
<Picker.Item label='4' value={16}/>
<Picker.Item label='5' value={17}/>
</Picker>
<Text>PM</Text>
</View>
}
<View styles={styles.choice}>
<Text>Nighttime</Text>
<Picker
selectedValue={this.state.nighttime}
style={{ height: 50, width: 50 }}
onValueChange={(itemValue, itemIndex) => this.setState({nighttime: itemValue})}>
{tpd === 'two' &&
<View>
<Picker.Item label='12' value={12}/>
<Picker.Item label='1' value={13}/>
<Picker.Item label='2' value={14}/>
<Picker.Item label='3' value={15}/>
<Picker.Item label='4' value={16}/>
<Picker.Item label='5' value={17}/>
</View>
}
<Picker.Item label='6' value={18}/>
<Picker.Item label='7' value={19}/>
<Picker.Item label='8' value={20}/>
<Picker.Item label='9' value={21}/>
<Picker.Item label='10' value={22}/>
<Picker.Item label='11' value={23}/>
<Picker.Item label='12' value={24}/>
</Picker>
<Text>PM</Text>
</View>
</View>
</View>
}
{tpd === 'one' || tpd == 'one/shortcut' &&
<View style={styles.choices}>
<Text>What time would you like to start taking your medication every day?</Text>
<Picker
selectedValue={this.state.once}
style={{ height: 50, width: 50 }}
onValueChange={(itemValue, itemIndex) => this.setState({once: itemValue})}>
<Picker.Item label='1 AM' value={1}/>
<Picker.Item label='2 AM' value={2}/>
<Picker.Item label='3 AM' value={3}/>
<Picker.Item label='4 AM' value={4}/>
<Picker.Item label='5 AM' value={5}/>
<Picker.Item label='6 AM' value={6}/>
<Picker.Item label='7 AM' value={7}/>
<Picker.Item label='8 AM' value={8}/>
<Picker.Item label='9 AM' value={9}/>
<Picker.Item label='10 AM' value={10}/>
<Picker.Item label='11 AM' value={11}/>
<Picker.Item label='12 PM' value={12}/>
<Picker.Item label='1 PM' value={13}/>
<Picker.Item label='2 PM' value={14}/>
<Picker.Item label='3 PM' value={15}/>
<Picker.Item label='4 PM' value={16}/>
<Picker.Item label='5 PM' value={17}/>
<Picker.Item label='6 PM' value={18}/>
<Picker.Item label='7 PM' value={19}/>
<Picker.Item label='8 PM' value={20}/>
<Picker.Item label='9 PM' value={21}/>
<Picker.Item label='10 PM' value={22}/>
<Picker.Item label='11 PM' value={23}/>
<Picker.Item label='12 PM' value={24}/>
</Picker>
</View>
}
</View>
);
}
constructor() {
super();
this.state = {
morning: 5,
late_morning: 10,
afternoon: 14,
nighttime: 8,
once: 12
}
}
methodSelect = () => {
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
choices: {
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'space-between',
marginTop: 70
},
choice: {
flex: 1,
flexDirection: 'row',
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'space-between',
},
});
This is what I am seeing:
Why isn't it all white?
UPDATE
For the Picker background I used:
...
style={{width: Dimensions.get('window').width}}
itemStyle={{backgroundColor: 'white', width: 100, alignSelf: 'center'}}>
...
Upvotes: 0
Views: 61
Answers (1)
ewizard
Reputation: 2862
It was a typo, <View styles= should be <View style=, obviously.
UPDATE
I had some problems past this point, and I wanted to share that breaking up my code into more manageable functions helped clear things up, if things weren't actually solved by this, it at least helped me to identify the source of the problem:
...
render() {
...
return (
<ScrollView contentContainerStyle={styles.container}>
{this.showMultiple(tpd)}
{this.showOnce(tpd)}
</ScrollView>
);
}
showMultiple = (tpd) => {
if(tpd != 'one' && tpd != 'one/shortcut') {
return (
<View style={{flex: 0, justifyContent: 'center', alignItems: 'center'}}>
<Text style={styles.instructions}>Please select a time for each period of the day:</Text>
<View style={styles.choices}>
<View style={styles.choice}>
<Text style={styles.bold}>Morning</Text>
{this.showMorning(tpd)}
<Text style={[styles.am_pm, styles.bold]}>AM</Text>
</View>
{this.showLateMorning(tpd)}
{this.showAfternoon(tpd)}
<View style={styles.choice}>
<Text style={styles.bold}>Nighttime</Text>
{this.showNighttime(tpd)}
<Text style={[styles.am_pm, styles.bold]}>PM</Text>
</View>
</View>
</View>
)
}
}
showMorning = (tpd) => {
if(tpd === 'two') {
return (
<Picker
selectedValue={this.state.morning}
onValueChange={(itemValue, itemIndex) => this.setState({morning: itemValue})}
itemStyle={{backgroundColor: 'white', width: 100}}>
<Picker.Item label='1' value={1}/>
<Picker.Item label='2' value={2}/>
<Picker.Item label='3' value={3}/>
<Picker.Item label='4' value={4}/>
<Picker.Item label='5' value={5}/>
<Picker.Item label='6' value={6}/>
<Picker.Item label='7' value={7}/>
<Picker.Item label='8' value={8}/>
<Picker.Item label='9' value={9}/>
<Picker.Item label='10' value={10}/>
<Picker.Item label='11' value={11}/>
</Picker>
)
}
else {
return (
<Picker
selectedValue={this.state.morning}
onValueChange={(itemValue, itemIndex) => this.setState({morning: itemValue})}
itemStyle={{backgroundColor: 'white', width: 100}}>
<Picker.Item label='1' value={1}/>
<Picker.Item label='2' value={2}/>
<Picker.Item label='3' value={3}/>
<Picker.Item label='4' value={4}/>
<Picker.Item label='5' value={5}/>
<Picker.Item label='6' value={6}/>
<Picker.Item label='7' value={7}/>
<Picker.Item label='8' value={8}/>
<Picker.Item label='9' value={9}/>
</Picker>
)
}
}
showLateMorning = (tpd) => {
if(tpd === 'four') {
return (
<View style={styles.choice}>
<Text style={styles.bold}>Late morning</Text>
<Picker
selectedValue={this.state.late_morning}
onValueChange={(itemValue, itemIndex) => this.setState({late_morning: itemValue})}
itemStyle={{backgroundColor: 'white', width: 100}}>
<Picker.Item label='6' value={6}/>
<Picker.Item label='7' value={7}/>
<Picker.Item label='8' value={8}/>
<Picker.Item label='9' value={9}/>
<Picker.Item label='10' value={10}/>
<Picker.Item label='11' value={11}/>
<Picker.Item label='11' value={12}/>
</Picker>
<Text style={[styles.am_pm, styles.bold]}>AM</Text>
</View>
)
}
}
showAfternoon = (tpd) => {
if(tpd != 'two') {
return (
<View style={styles.choice}>
<Text style={styles.bold}>Afternoon</Text>
<Picker
selectedValue={this.state.afternoon}
onValueChange={(itemValue, itemIndex) => this.setState({afternoon: itemValue})}
itemStyle={{backgroundColor: 'white', width: 100}}>
<Picker.Item label='12' value={12}/>
<Picker.Item label='1' value={13}/>
<Picker.Item label='2' value={14}/>
<Picker.Item label='3' value={15}/>
<Picker.Item label='4' value={16}/>
<Picker.Item label='5' value={17}/>
<Picker.Item label='6' value={18}/>
</Picker>
<Text style={[styles.am_pm, styles.bold]}>PM</Text>
</View>
)
}
}
showNighttime = (tpd) => {
if(tpd != 'two') {
return (
<Picker
selectedValue={this.state.nighttime}
onValueChange={(itemValue, itemIndex) => this.setState({nighttime: itemValue})}
itemStyle={{backgroundColor: 'white', width: 100}}>
<Picker.Item label='6' value={18}/>
<Picker.Item label='7' value={19}/>
<Picker.Item label='8' value={20}/>
<Picker.Item label='9' value={21}/>
<Picker.Item label='10' value={22}/>
<Picker.Item label='11' value={23}/>
<Picker.Item label='12' value={24}/>
</Picker>
)
}
else {
return (
<Picker
selectedValue={this.state.nighttime}
onValueChange={(itemValue, itemIndex) => this.setState({nighttime: itemValue})}
itemStyle={{backgroundColor: 'white', width: 100}}>
<Picker.Item label='12' value={12}/>
<Picker.Item label='1' value={13}/>
<Picker.Item label='2' value={14}/>
<Picker.Item label='3' value={15}/>
<Picker.Item label='4' value={16}/>
<Picker.Item label='5' value={17}/>
<Picker.Item label='6' value={18}/>
<Picker.Item label='7' value={19}/>
<Picker.Item label='8' value={20}/>
<Picker.Item label='9' value={21}/>
<Picker.Item label='10' value={22}/>
<Picker.Item label='11' value={23}/>
<Picker.Item label='12' value={24}/>
</Picker>
)
}
}
showOnce = (tpd) => {
if(tpd === 'one' || tpd == 'one/shortcut') {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<View style={styles.once_choices}>
<Text style={{paddingLeft: 15, paddingRight: 15}}>What time would you like to start taking your medication every day?</Text>
<Picker
selectedValue={this.state.once}
onValueChange={(itemValue, itemIndex) => this.setState({once: itemValue})}
itemStyle={{backgroundColor: 'white', width: 100}}>
<Picker.Item label='1 AM' value={1}/>
<Picker.Item label='2 AM' value={2}/>
<Picker.Item label='3 AM' value={3}/>
<Picker.Item label='4 AM' value={4}/>
<Picker.Item label='5 AM' value={5}/>
<Picker.Item label='6 AM' value={6}/>
<Picker.Item label='7 AM' value={7}/>
<Picker.Item label='8 AM' value={8}/>
<Picker.Item label='9 AM' value={9}/>
<Picker.Item label='10 AM' value={10}/>
<Picker.Item label='11 AM' value={11}/>
<Picker.Item label='12 PM' value={12}/>
<Picker.Item label='1 PM' value={13}/>
<Picker.Item label='2 PM' value={14}/>
<Picker.Item label='3 PM' value={15}/>
<Picker.Item label='4 PM' value={16}/>
<Picker.Item label='5 PM' value={17}/>
<Picker.Item label='6 PM' value={18}/>
<Picker.Item label='7 PM' value={19}/>
<Picker.Item label='8 PM' value={20}/>
<Picker.Item label='9 PM' value={21}/>
<Picker.Item label='10 PM' value={22}/>
<Picker.Item label='11 PM' value={23}/>
<Picker.Item label='12 PM' value={24}/>
</Picker>
</View>
</View>
)
}
}
...
Upvotes: 1
Related Questions
- Flexbox styling with React Native
- React Native: Background Image not filling the entire app
- React Native Flex Styling Issue
- backgroundColor not working on View
- React Native Background Color property is not working properly
- React Native styling header with Background Image
- Set background of div using flex
- how to set background color to the text only in react native
- Having difficulty in using flexbox in react native
- Why won't backgroundColor work (React Native)?