Toggling between off and on

Another common element you'll see in web forms is checkboxes. React Native has a Switch component that works on both iOS and Android. Thankfully, this component is a little easier to style than the Picker component. Here's a look at a simple abstraction you can implement to provide labels for your switches:

import React, { PropTypes } from 'react'; 
import { 
  View, 
  Text, 
  Switch, 
} from 'react-native'; 
 
import styles from './styles'; 
 
// A fairly straightforward wrapper component 
// that adds a label to the React Native 
// "<Switch>" component. 
const CustomSwitch = props => ( 
  <View style={styles.customSwitch}> 
    <Text>{props.label}</Text> 
    <Switch {...props} /> 
  </View> 
); 
 
CustomSwitch.propTypes = { 
  label: PropTypes.string, 
}; 
 
export default CustomSwitch; 

Now let's see how we can use a couple of switches to control application...