add support for theming the Switches we put in tableview cells

Author: hawkrives

source/views/components/cells/toggle.js

@@ -2,6 +2,7 @@
 import * as React from 'react'
 import {Switch} from 'react-native'
 import {Cell} from 'react-native-tableview-simple'
+import * as c from '../colors'
 
 type PropsType = {
 	label: string,
@@ -10,10 +11,13 @@ type PropsType = {
 }
 
 export function CellToggle({value, onChange, label}: PropsType) {
-	return (
-		<Cell
-			cellAccessoryView={<Switch onValueChange={onChange} value={value} />}
-			title={label}
+	let toggle = (
+		<Switch
+			onTintColor={c.switchTintOn}
+			onValueChange={onChange}
+			value={value}
+			tintColor={c.switchTintOff}
 		/>
 	)
+	return <Cell cellAccessoryView={toggle} title={label} />
 }

source/views/components/colors.js

@@ -270,6 +270,22 @@ export const iosPushButtonCellForeground = firstReadable(
 	[accent, sto.black, sto.white],
 )
 
+// Background color when the switch is turned on.
+export const switchTintOn = Platform.select({
+	ios: accent,
+	// don't set on Android so the platform can pick the right shades from the theming system
+	android: undefined,
+})
+// Border color on iOS and background color on Android when the switch is turned off.
+export const switchTintOff = undefined
+// Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.
+export const switchThumbTint = Platform.select({
+	// don't set on ios so we keep the drop shadow
+	ios: undefined,
+	// don't set on Android so the platform can pick the right shades from the theming system
+	android: undefined,
+})
+
 export const androidListHeaderBackground = sto.white
 export const androidListHeaderForeground = firstReadable(
 	androidListHeaderBackground,