backgroundColor not being set
up vote
0
down vote
favorite
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'}}>
...
javascript css react-native flexbox rendering
asked Nov 17 at 14:36
ewizard
1,05622467
|
show 1 more comment
up vote
0
down vote
favorite
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'}}>
...
javascript css react-native flexbox rendering
asked Nov 17 at 14:36
ewizard
1,05622467
probably the elements are positioned out of the flow .. why not simply addind background to body?
– Temani Afif
Nov 17 at 14:42
stackoverflow.com/questions/40101451/…
– Yossi
Nov 17 at 14:42
@TemaniAfif can i directly access the body element with react?
– ewizard
Nov 17 at 14:43
@Yossi I already tried this
– ewizard
Nov 17 at 14:43
nm it worked i needed to do a few things ill post my answer
– ewizard
Nov 17 at 14:45
|
show 1 more comment
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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'}}>
...
javascript css react-native flexbox rendering
asked Nov 17 at 14:36
ewizard
1,05622467
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'}}>
...
javascript css react-native flexbox rendering
javascript css react-native flexbox rendering
asked Nov 17 at 14:36
ewizard
1,05622467
asked Nov 17 at 14:36
ewizard
1,05622467
edited Nov 17 at 14:48
asked Nov 17 at 14:36
ewizard
1,05622467
asked Nov 17 at 14:36
ewizard
1,05622467
asked Nov 17 at 14:36
ewizard
1,05622467
1,05622467
probably the elements are positioned out of the flow .. why not simply addind background to body?
– Temani Afif
Nov 17 at 14:42
stackoverflow.com/questions/40101451/…
– Yossi
Nov 17 at 14:42
@TemaniAfif can i directly access the body element with react?
– ewizard
Nov 17 at 14:43
@Yossi I already tried this
– ewizard
Nov 17 at 14:43
nm it worked i needed to do a few things ill post my answer
– ewizard
Nov 17 at 14:45
|
show 1 more comment
probably the elements are positioned out of the flow .. why not simply addind background to body?
– Temani Afif
Nov 17 at 14:42
stackoverflow.com/questions/40101451/…
– Yossi
Nov 17 at 14:42
@TemaniAfif can i directly access the body element with react?
– ewizard
Nov 17 at 14:43
@Yossi I already tried this
– ewizard
Nov 17 at 14:43
nm it worked i needed to do a few things ill post my answer
– ewizard
Nov 17 at 14:45
probably the elements are positioned out of the flow .. why not simply addind background to body?
– Temani Afif
Nov 17 at 14:42
probably the elements are positioned out of the flow .. why not simply addind background to body?
– Temani Afif
Nov 17 at 14:42
stackoverflow.com/questions/40101451/…
– Yossi
Nov 17 at 14:42
stackoverflow.com/questions/40101451/…
– Yossi
Nov 17 at 14:42
@TemaniAfif can i directly access the body element with react?
– ewizard
Nov 17 at 14:43
@TemaniAfif can i directly access the body element with react?
– ewizard
Nov 17 at 14:43
@Yossi I already tried this
– ewizard
Nov 17 at 14:43
@Yossi I already tried this
– ewizard
Nov 17 at 14:43
nm it worked i needed to do a few things ill post my answer
– ewizard
Nov 17 at 14:45
nm it worked i needed to do a few things ill post my answer
– ewizard
Nov 17 at 14:45
|
show 1 more comment
1 Answer
1
active
oldest
votes
up vote
0
down vote
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>
)
}
}
...
answered Nov 17 at 18:07
ewizard
1,05622467
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
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>
)
}
}
...
answered Nov 17 at 18:07
ewizard
1,05622467
add a comment |
up vote
0
down vote
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>
)
}
}
...
answered Nov 17 at 18:07
ewizard
1,05622467
add a comment |
up vote
0
down vote
up vote
0
down vote
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>
)
}
}
...
answered Nov 17 at 18:07
ewizard
1,05622467
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>
)
}
}
...
answered Nov 17 at 18:07
ewizard
1,05622467
edited 2 days ago
answered Nov 17 at 18:07
ewizard
1,05622467
answered Nov 17 at 18:07
ewizard
1,05622467
answered Nov 17 at 18:07
ewizard
1,05622467
1,05622467
add a comment |
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53352220%2fbackgroundcolor-not-being-set%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
probably the elements are positioned out of the flow .. why not simply addind background to body?
– Temani Afif
Nov 17 at 14:42
stackoverflow.com/questions/40101451/…
– Yossi
Nov 17 at 14:42
@TemaniAfif can i directly access the body element with react?
– ewizard
Nov 17 at 14:43
@Yossi I already tried this
– ewizard
Nov 17 at 14:43
nm it worked i needed to do a few things ill post my answer
– ewizard
Nov 17 at 14:45