I have the following function in a file:
helpers.js:
export const returnStateElement = (...elements) => {
console.log("returnStateElement",this,elements)
const copy = Object.assign({}, this);
return elements.reduce((obj, key) => ({ ...obj, [key]: copy[key] }), {});
};
index.js:
import { validateEmail, returnStateElement } from '../../helpers'
...
constructor(props) {
super(props);
this.state = {
email: "site#host.com",
};
}
...
handleSubmit = () => {
const dataSender = this.state.returnStateElement("email");
console.log("handleSubmit",dataSender)
}
I would like to do that by doing such a thing:
this.state.returnStateElement("email")
passed as this state, this.state is I would return the values which are contained as function arguments.
Link: codesandbox
You need to bind the context to the function. Here is a working snack showing how you might do that in the constructor
https://snack.expo.io/Sy8J3fyGL
And the code
import * as React from 'react';
import {Button, TouchableOpacity, Text, View, StyleSheet } from 'react-native';
const returnStateElement = (currentState, ...elements) => {
const copy = Object.assign({}, currentState);
return elements.reduce((obj, key) => ({ ...obj, [key]: copy[key] }), {});
};
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
email: 'test#test.com'
}
this.returnStateElement = (...elements) => returnStateElement(this.state, ...elements);
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => alert(JSON.stringify(this.returnStateElement('email', 'pass')))}>
<Text style={styles.paragraph}>Press here</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
Related
FOUND ANSWER, ACCESSING WHOLE STATE INSTEAD OF TODO, answer below.
I have a bound function in a component which I pass to a const. The checkbox clicks correctly once but then it stops working. What am I doing wrong?
The toggleTodoOnPress is called correctly once but then stops responding. The value changes from false to true correctly but then gets stuck on true when checkbox is clicked again. The checkbox value shows false even though todo.complete is true. After one click the function is never called again.
Parent Compenent:
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {
View,
Text,
TouchableOpacity,
ScrollView,
TextInput,
StyleSheet,
Dimensions,
} from 'react-native';
import {addTodo, toggleTodo} from './action/Todo';
import Todo from './component/Todo';
import {addTextInputPlaceholderText, addTodoButtonText} from './Constants';
let ScreenHeight = Dimensions.get('window').height;
let addTodoBarHeight = 0.08 * ScreenHeight;
class TodoApp extends Component {
constructor(props) {
super(props);
this.toggleTodoOnPress = this.toggleTodoOnPress.bind(this);
}
state = {
todo: '',
todos: [],
};
addTodoInputOnChangeText = (value) => {
this.setState({
todo: value,
});
};
addTodoOnPress = () => {
if (this.state.todo.trim() === '') {
return;
}
this.props.addTodo(this.state.todo);
this.setState({
todo: '',
});
};
toggleTodoOnPress = (id) => {
this.props.toggleTodo(id);
};
render() {
console.log(this.props.todos)
var todosList = this.props.todos;
var todos = [];
for (let i = 0; i < todosList.length; i++) {
todos.push(
<Todo
key={'todo-' + todosList[i].id}
todo={todosList[i]}
toggleTodoOnPress={(id) => this.toggleTodoOnPress(todosList[i].id)}
/>,
);
}
return (
<View>
<View style={styles.inputContainer}>
<TextInput
placeholder={addTextInputPlaceholderText}
placeholderTextColor="white"
style={styles.addTextInput}
value={this.state.todo}
onChangeText={this.addTodoInputOnChangeText}
/>
<TouchableOpacity
style={styles.addButton}
onPress={this.addTodoOnPress}
title={addTodoButtonText}>
<Text style={styles.addButtonText}>{addTodoButtonText}</Text>
</TouchableOpacity>
</View>
<ScrollView>{todos}</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
inputContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
height: addTodoBarHeight,
width: '100%',
},
addTextInput: {
paddingLeft: 16,
fontSize: 16,
height: '100%',
width: '70%',
backgroundColor: 'black',
color: 'white',
},
addButton: {
alignItems: 'center',
justifyContent: 'center',
height: '100%',
width: '30%',
backgroundColor: 'green',
},
addButtonText: {
fontSize: 18,
color: 'white',
},
});
const mapStateToProps = (state) => {
return {
todos: state.Todos.todos.length === 0 ? [] : state.Todos.todos,
};
};
const mapDispatchToProps = (dispatch) => {
return {
addTodo: (task) => {
dispatch(addTodo(task));
},
toggleTodo: (id) => {
dispatch(toggleTodo(id));
},
};
};
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);
Child Const:
import React from 'react';
import {connect} from 'react-redux';
import {View, Text, StyleSheet} from 'react-native';
import CheckBox from '#react-native-community/checkbox';
const Todo = ({todo, toggleTodoOnPress}) => (
console.log(todo.complete),
<View style={styles.todoContainer}>
<Text style={styles.todoText}>{todo.content}</Text>
<View style={styles.todoCheckboxContainer}>
<CheckBox
value={todo.complete}
onChange={toggleTodoOnPress}
onValueChange={toggleTodoOnPress}
tintColors={{true: 'green', false: 'black'}}
tintColor='black'
onCheckColor='white'
onFillColor='green'
onTintColor='green'
/>
</View>
</View>
);
const styles = StyleSheet.create({
todoContainer: {
backgroundColor: 'white',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
},
todoText: {
fontWeight: 'bold',
fontSize: 18,
padding: 12,
paddingTop: 16,
paddingBottom: 16,
width: '90%',
},
todoCheckboxContainer: {
alignItems: 'center',
justifyContent: 'center',
width: '10%',
},
});
export default Todo;
toggleTodo reducer:
const Todos = (state = initialState, action) => {
switch (action.type) {
case TODO_ADD:
return {
...state,
todos: state.todos.concat({
id: action.id,
content: action.content,
complete: action.complete,
}),
};
case TODO_TOGGLE:
return {
...state,
todos: state.todos.map((todo) =>
todo.id === action.id
? {
...todo,
complete: !state.complete,
}
: todo,
),
};
default:
return state;
}
};
Hope the question makes sense, happy to explain.
Error was in toggleTodo reducer, changed ...state to ...todo, was accessing entire state instead of the single todo.
toggleTodo reducer updated (correct):
const Todos = (state = initialState, action) => {
switch (action.type) {
case TODO_ADD:
return {
...state,
todos: state.todos.concat({
id: action.id,
content: action.content,
complete: action.complete,
}),
};
case TODO_TOGGLE:
return {
...state,
todos: state.todos.map((todo) =>
todo.id === action.id
? {
...todo,
complete: !todo.complete,
}
: todo,
),
};
default:
return state;
}
};
I want to render the same component a fixed number of times(entered by the user) one after the other (Asynchronously). For this, I have used the below function passing as props approach where a while loop is used to make the code run asynchronously and could progress only after the state variable componentRendered becomes true, but it's not working. Could someone help to figure this out. Thanks in advance.
HomeScreen.js
import {View, Text} from 'react-native';
import Stepper from '../components/Stepper';
class HomeScreen extends Component {
constructor(props) {
super(props);
this.state = {
componentRendered: false,
};
}
setComponentRender = () => {
this.setState({componentRendered: true});
};
render() {
var stepperElement = [];
for (let i = 1; i <= 2; i++) {
stepperElement.push(
<Stepper setComponentRender={this.setComponentRender} />,
);
while (this.state.componentRendered === false) {}
this.setState({componentRendered: false});
}
return <View>{stepperElement}</View>;
}
}
export default HomeScreen;
Stepper.js
import {View, TextInput, Text, Alert} from 'react-native';
import {ProgressSteps, ProgressStep} from 'react-native-progress-steps';
class Stepper extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
};
}
static navigationOptions = {
header: null,
};
defaultScrollViewProps = {
keyboardShouldPersistTaps: 'handled',
contentContainerStyle: {
flex: 1,
justifyContent: 'center',
},
};
onNextStep = () => {
console.log('called next step');
};
onPaymentStepComplete = () => {
Alert.alert(
'Payment completed!',
'Your Payment is Successful',
[
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{cancelable: false},
);
};
onPrevStep = () => {
console.log('called previous step');
};
onSubmitSteps = () => {
console.log('called on submit step.');
this.props.setComponentRender();
};
render() {
return (
<View style={{flex: 1, marginTop: 50}}>
<ProgressSteps>
<ProgressStep
label="Payment"
onNext={this.onPaymentStepComplete}
onPrevious={this.onPrevStep}
scrollViewProps={this.defaultScrollViewProps}>
<View style={{alignItems: 'center'}}>
<Text>Payment step content</Text>
</View>
</ProgressStep>
<ProgressStep
label="Confirm Order"
onPrevious={this.onPrevStep}
onSubmit={this.onSubmitSteps}
scrollViewProps={this.defaultScrollViewProps}>
<View style={{alignItems: 'center'}}>
<Text>Confirm order step content</Text>
</View>
</ProgressStep>
</ProgressSteps>
</View>
);
}
}
export default Stepper;
I am building a react native app that uses the Wordpress api. I am having problems displaying the cart and receive this error.
Object {} error [Error: Request failed with status code 404]
undefined
I have tried everything and have figures it might be a problem with Axios...
Please advise me on what I can do...
CartAction.js
import * as types from '../constants/ActionTypes';
import CartApi from '../api/CartApi';
export function getCart() {
return (dispatch) => {
return CartApi.getCart().then(cart => {
dispatch(getCartSuccess(cart));
}).catch(err => {
//TODO:get correct error msg
console.log(err.error);
})
};
}
function getCartSuccess(cart) {
return {
type: types.GET_CART_SUCCESS,
cart
};
}
export function addToCart(product, quantity) {
return (dispatch) => {
return CartApi.addToCart(product, quantity).then(cartUpdate => {
dispatch(addToCartSuccess(cartUpdate));
}).catch(err => {
//TODO:get correct error msg
console.log('error',err);
})
};
}
function addToCartSuccess(cartUpdate) {
return {
type: types.ADD_TO_CART_SUCCESS,
cartUpdate
};
}
CartPage.js
import React from 'react'
import { StyleSheet, Text, View, FlatList, Image } from 'react-native'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as CartAction from '../../actions/CartAction';
class CartPage extends React.Component {
constructor(props) {
super(props);
this.state = {
cart: {}
}
}
componentDidMount() {
this.props.CartAction.getCart();
}
_keyExtractor = (item, index) => item.key;
render() {
console.log(this.props.cart)
const cartObject = this.props.cart;
var cartArray = [];
Object.keys(cartObject).forEach(function(key) {
cartArray.push(cartObject[key]);
});
const Items = <FlatList contentContainerStyle={styles.list}
data={cartArray}
keyExtractor={this._keyExtractor}
renderItem={({ item }) =>
// <TouchableHighlight style={{width:'50%'}} onPress={() => navigate("Product", { product: item })} underlayColor="white">
<View style={styles.lineItem} >
<Image style={styles.image} source={{uri: item.product_image}} />
<Text style={styles.text}>{item.product_name}</Text>
<Text style={styles.text}>{item.quantity}</Text>
</View>
// </TouchableHighlight>
}
/>;
return (
<View style={styles.container}>
{Items}
</View>
)
}
}
const styles = StyleSheet.create({
lineItem: {
flexDirection: 'row'
},
list: {
flexDirection: 'column'
},
image: {
width: 50,
height: 50
},
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 20,
padding: 5
}
})
function mapStateToProps(state) {
return {
cart: state.cart
};
}
function mapDispatchToProps(dispatch) {
return {
CartAction: bindActionCreators(CartAction, dispatch)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(CartPage);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Teaching myself react native by making a chat app, now when someone clicks on a delete button next to the message (not visible in this code as it's irrelevant), it deletes it from the database but I need to make the changes here in the app.
For this I have set a ref one each of the <Message/> components and I have the ref which matches the ref on the component. But i need to target the actual component node which has that ref.
Is refs the way to go about doing this? If not, what else can I do?
Many thanks
edit: Full code:
import React, { Component } from "react"
import { ListView, View, Text, StyleSheet, TextInput, TouchableHighlight } from "react-native"
import * as firebase from 'firebase';
import Icon from 'react-native-vector-icons/FontAwesome'
import { Hideo } from 'react-native-textinput-effects';
import Message from './Message'
export default class Chat extends Component {
constructor() {
super();
this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.onSend = this.onSend.bind(this);
this.state = {
messages: this.ds.cloneWithRows([]),
messageContent: '',
};
}
componentWillMount() {
// Get all of the messages from firebase database and push them into "nodes" array which then gets set in the "messages" state above in handleChat.
const chatRef = firebase.database().ref().child('general');
this.messages = [];
chatRef.on('child_added', snap => {
this.messages.push({user: snap.val().user.name,
text: snap.val().text,
messageId: snap.key
})
this.handleChat(this.messages);
}
).bind(this);
// this is what happens when someone removes a comment
chatRef.on('child_removed', snap => {
const messageId = snap.key; // <- This is the key in the database, for example: '-KVZ_zdbJ0HMNz6lEff'
this.removeMessage(messageId);
})
}
removeMessage(messageId){
let messages = this.messages.filter(message => message.messageId !== messageId);
this.handleChat(messages);
}
handleChat(messages) {
this.setState({messages: this.ds.cloneWithRows(messages)})
}
onSend(messages) {
const generalRef = firebase.database().ref().child('general');
const user = firebase.auth().currentUser;
generalRef.push(
{
_id: 1,
text: this.state.messageContent,
createdAt: new Date().getTime(),
user: {
_id: 2,
name: user.displayName,
avatar: 'http://mdepinet.org/wp-content/uploads/person-placeholder.jpg'
}
});
this.setState({messageContent: ''})
}
removeMessage(messageId){
let messages = this.messages.filter(message => message.messageId !== messageId);
this.handleChat(messages);
}
render() {
return (
<View style={{flex: 1, alignItems: 'flex-end'}}>
<ListView
style={{ marginBottom: 60 }}
enableEmptySections={true}
dataSource={this.state.messages}
renderRow={message => <Message name={message.user} text={message.text}/> }/>
<Hideo
style={{position: 'absolute', bottom: 0}}
onChangeText={messageContent => this.setState({messageContent})} value={this.state.messageContent} placeholder="Name"
iconClass={Icon}
iconName={'envelope'}
iconColor={'white'}
iconBackgroundColor={'#222'}
inputStyle={{ color: '#464949' }}
/>
<TouchableHighlight onPress={this.onSend} style={{position: 'absolute', alignItems: 'center', bottom: 10, right: 10, borderRadius: 10, backgroundColor: '#d4af37'}}>
<Text style={{color: 'whitesmoke', fontSize: 20, padding: 5}}>Send</Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
username: {
fontFamily: 'AvenirNext-Bold'
},
comment: {
fontFamily: 'AvenirNext-Regular'
},
bubble: {
flex: 1,
width: 250,
backgroundColor: '#f5f5f5',
margin: 15,
padding: 10,
borderRadius: 20
}
})
Using refs to ListView row items is not a Good idea. As Elmeister told we just need to remove the message elements from array and update the ListView datasource in order to delete a message from ListView.
Here is a sample code which will give you an idea of how you can do the same in your app.
import React, {
Component
} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
TouchableHighlight,
} from 'react-native';
class StackOverflow extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.messages = this.getMessages();
this.state = {
dataSource: ds.cloneWithRows(this.messages)
};
}
getMessages() {
let arr = [];
for (let i = 0; i < 100; i++) {
arr.push({
user: 'User ' + i,
text: 'This is a sample user message ' + i,
messageId: 'messageId' + i,
});
}
return arr;
}
onDeletePress(messageId) {
this.messages = this.messages.filter(message => message.messageId !== messageId);
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.messages)
});
}
renderRow(rowData) {
return (
<View style={{padding:8}}>
<Text>{rowData.user}</Text>
<Text>{rowData.text}</Text>
<TouchableHighlight
style={{alignSelf :'flex-end',backgroundColor:'red'}}
onPress={this.onDeletePress.bind(this,rowData.messageId)}>
<Text>Delete</Text>
</TouchableHighlight>
</View>
);
}
render() {
return (
<View style={{flex: 1, paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
/>
</View>
);
}
}
AppRegistry.registerComponent('StackOverflow', () => StackOverflow);
In the above example, We are creating dummy messages and saving them in messages array and updating dataSource with messages.
When onDeletePress is called we pass the messageId to that method, and below line
this.messages = this.messages.filter(message => message.messageId !== messageId);
removes the message from messages array. Then we update the dataSource state which will update the ListView.
In your code probably these changes you will have to make,
Change handleChat
handleChat(messages) {
this.setState({messages: this.ds.cloneWithRows(messages)})
}
Update Chat component like below,
import React, {Component} from "react"
import {ListView, View, Text, StyleSheet, TextInput, TouchableHighlight} from "react-native"
import * as firebase from 'firebase';
import Icon from 'react-native-vector-icons/FontAwesome'
import {Hideo} from 'react-native-textinput-effects';
import Message from './Message'
export default class Chat extends Component {
constructor() {
super();
this.chatRef = firebase.database().ref().child('general');
this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.onSend = this.onSend.bind(this);
this.state = {
messages: this.ds.cloneWithRows([]),
messageContent: '',
};
}
componentWillMount() {
// Get all of the messages from firebase database and push them into "nodes" array which then gets set in the "messages" state above in updateMessageList.
this._messages = [];
this.chatRef.on('child_added', snap => {
this._messages.push({
user: snap.val().user.name,
text: snap.val().text,
messageId: snap.key
});
this.updateMessageList(this._messages);
}
).bind(this);
// this is what happens when someone removes a comment
this.chatRef.on('child_removed', snap => {
const messageId = snap.key; // <- This is the key in the database, for example: '-KVZ_zdbJ0HMNz6lEff'
this.removeMessage(messageId);
}).bind(this);
}
removeMessage(messageId) {
this._messages = this._messages.filter(message => message.messageId !== messageId);
this.updateMessageList(this._messages);
}
updateMessageList(messages) {
this.setState({messages: this.ds.cloneWithRows(messages)})
}
onSend(messages) {
const user = firebase.auth().currentUser;
this.chatRef.push(
{
_id: 1,
text: this.state.messageContent,
createdAt: new Date().getTime(),
user: {
_id: 2,
name: user.displayName,
avatar: 'http://mdepinet.org/wp-content/uploads/person-placeholder.jpg'
}
});
this.setState({messageContent: ''})
}
render() {
return (
<View style={{flex: 1, alignItems: 'flex-end'}}>
<ListView
style={{ marginBottom: 60 }}
enableEmptySections={true}
dataSource={this.state.messages}
renderRow={message => <Message name={message.user} text={message.text}/> }/>
<Hideo
style={{position: 'absolute', bottom: 0}}
onChangeText={messageContent => this.setState({messageContent})} value={this.state.messageContent}
placeholder="Name"
iconClass={Icon}
iconName={'envelope'}
iconColor={'white'}
iconBackgroundColor={'#222'}
inputStyle={{ color: '#464949' }}
/>
<TouchableHighlight onPress={this.onSend}
style={{position: 'absolute', alignItems: 'center', bottom: 10, right: 10, borderRadius: 10, backgroundColor: '#d4af37'}}>
<Text style={{color: 'whitesmoke', fontSize: 20, padding: 5}}>Send</Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
username: {
fontFamily: 'AvenirNext-Bold'
},
comment: {
fontFamily: 'AvenirNext-Regular'
},
bubble: {
flex: 1,
width: 250,
backgroundColor: '#f5f5f5',
margin: 15,
padding: 10,
borderRadius: 20
}
});
I have a key value array in my state containing booleans indicating the value of my switches.
When I trigger the Switch component, the value is correctly changed in my state but the value of my Switch stays the same. It's like the component is not updated. I did the exact same thing in another project and it is working there.
_changeValue(k) {
switchesValues[k] = !switchesValues[k]
this.setState({
switches: switchesValues
})
}
_renderEventRow(allergiesList) {
var k = allergiesList.key
return (
<View style={{flexDirection: 'row', height: 50, alignItems: 'center', paddingLeft: 10, borderBottomWidth: 0.5, borderColor: 'lightgray'}}>
<Text style={{flex: 1, color: '#5f5f5f'}}>{allergiesList.name}</Text>
<Switch style={{marginRight: 10}} value={this.state.switches[k]} onValueChange={() => this._changeValue(k)}/>
</View>
)
}
My list view :
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2})
constructor(props) {
super(props)
this.state = {
ds:[],
dataSource:ds,
switches: []
}
}
componentDidMount() {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.state.ds),
})
this.findAllergies()
}
render() {
return(
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => { return this._renderEventRow(rowData)}}
/>)}
)
}
findAllergies() {
var that = this
firebase.database().ref("allergies").on("value", (snap) => {
var items = [];
snap.forEach((child) => {
items.push({
name: child.val(),
key: child.key,
})
})
that.setState({
dataSource: that.state.dataSource.cloneWithRows(items),
});
})
}
Hi I have created a sample app to implement your requirement. Have a look at the below code.
import React, {Component} from 'react';
import {
AppRegistry,
Text,
View,
TouchableOpacity,
Switch,
ListView,
} from 'react-native';
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2});
export default class AwesomeProject extends Component {
constructor(props) {
super(props)
this.state = {
ds: [],
dataSource: ds,
switches: []
}
}
componentDidMount() {
let allergies = [];
this.switchesValues = [];
for (let i = 0; i <= 5; i++) {
allergies.push({
key: i,
name: 'Name ' + i,
});
this.switchesValues[i] = false;
}
this.setState({
dataSource: this.state.dataSource.cloneWithRows(allergies),
switches: this.switchesValues,
})
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => { return this._renderEventRow(rowData)}}
/>);
}
_changeValue(k) {
console.log('Status '+JSON.stringify(this.switchesValues))
this.switchesValues[k] = !this.switchesValues[k];
this.setState({
switches: this.switchesValues,
})
}
_renderEventRow(allergiesList) {
var k = allergiesList.key
return (
<View
style={{flexDirection: 'row', height: 50, alignItems: 'center', paddingLeft: 10, borderBottomWidth: 0.5, borderColor: 'lightgray'}}>
<Text style={{flex: 1, color: '#5f5f5f'}}>{allergiesList.name}</Text>
<Switch style={{marginRight: 10}} value={this.state.switches[k]}
onValueChange={() => this._changeValue(k)}/>
</View>
)
}
}
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);