I am new to React Native and I'm sorry for my english if i make mistakes!
I'm trying to create a smartphone app with reactnative and nativebase.
I have one page for the settings with a switch and I have a function called Base in one other js file, with the layout for multiple cooking recipes, but my problem is:
I would like that by activating the switch, my measurements in ml become in ozbut I can't even import the state of the switch ...
how can I import the status of the switch?
Thank you!
Settings.js
class Settings extends Component {constructor(props) { super(props);state = { switchValue: false}toggleSwitch = (value) => { this.setState({ switchValue: value })}render() { return (<Container style={styles.container}><Header><Left><Button transparent onPress={() => this.props.navigation.openDrawer()}><Icon name="menu" /></Button></Left><Body><Title>Settings</Title></Body><Right /></Header><Content><List><ListItem><Left><Text>Impostare le misurazioni come ml</Text></Left><Right><Switch style={{ marginTop: 30 }} onValueChange={this.toggleSwitch} value={this.state.switchValue}/></Right></ListItem></List></Content></Container> );}}export default Settings;
Base.js
export function Base(props) { return (<Container style={styles.container}><Header style={{backgroundColor:props.headercolor}}><Left><Button transparent><Icon name="arrow-back" /></Button></Left><Body style={{ flex: 1.2 }}><Title>{props.title}</Title></Body><Right><Text>e</Text></Right></Header><Grid><Row size={25}><Image style={{ flex: 1, height: null, resizeMode: 'contain', width: null}} source={path_pageimage[props.title]} /></Row><Row size={75}><Col size={35}><Row size={5}><Body><Title style={styles.title}>Preparations</Title></Body></Row><Row size={15} style={{ borderBottomColor: "gainsboro", borderBottomWidth: 1 }}><Col size={35}><View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}><Text>Glass:</Text></View></Col><Col size={65}><View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}><View style={{ height: "80%" }}><Image style={{ flex: 1, height: null, resizeMode: 'contain', width: null }} source={path_glass[props.glass]} /></View><View style={{ alignItems: "center" }}><Text style={{ fontSize: 12 }}>{props.glass}</Text></View></View></Col></Row><Row size={7}><Body><Text style={{ fontWeight: "bold" }}>{props.preparation}</Text></Body></Row><Row size={73}><Image style={{ marginTop: 0, flex: 1, height: null, resizeMode: 'contain', width: null }} source={path_preparation[props.preparation]} /></Row></Col><Col size={65} style={{ borderLeftColor: "gainsboro", borderLeftWidth: 1 }}><Row size={5}><Body><Title style={styles.title}>Ingredients</Title></Body></Row><Row size={55} style={{ marginBottom: 5, borderBottomColor: "gainsboro", borderBottomWidth: 1 }}><FlatList style={{ marginLeft: 10 }} horizontal={false} numColumns={2} data={props.utlizatedingr} keyExtractor={(item, index) => index.toString()} renderItem={({ item }) => (<TouchableOpacity onPress={() => this.props.navigation.navigate(item.l)}><View><Liquor l={item.l} q={item.q}/></View></TouchableOpacity> )} /></Row><Row size={5}><Body><Title style={styles.title}>Curiosity</Title></Body></Row><Row size={35} style={{ marginLeft: 20 }}><ScrollView> <Text>{props.curiosity}</Text></ScrollView></Row></Col></Row></Grid></Container> );}function Liquor(props) { //.l = liquor, .q = quantity return (<View style={{ flex: 1, flexDirection: 'row' }}><View style={{ width: "25%", margin: 5 }}><Image source={path_ingredients[props.l]} style={{ height: 80, width: 40 }} /></View><View style={{ marginLeft: 10, marginTop: 5, justifyContent: "space-evenly" }}><Text style={{ fontWeight: "bold" }}>{props.l}</Text><Text>{props.q} oz</Text></View></View> ); }
Example Recipes: Mojito.js
import { Base } from "../constructor_recipes/base"const title = "Mojito"const headercolor = "green"const buttoncolor = "blue"const utlizatedingr = [{ l: "Rum", q: "4"},{ l: "Vodka", q: "2" }, { l: "Vodka", q: "5"}] const glass = "Double Rock" const preparation = "Shake & Pour" const curiosity = "Lorem ipsum dolor sit" class Mojito extends Component { render() {return (<Base title={title} headercolor = {headercolor} buttoncolor = {buttoncolor} utlizatedingr={utlizatedingr} glass={glass} preparation={preparation} curiosity={curiosity}></Base> ); } } export default Mojito;
