React and React Native

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, }; ...