Upgrade react-theme-provider to v3

modules/app-theme/index.js

@@ -1,5 +1,11 @@
 // @flow
 
+import {createTheming} from '@callstack/react-theme-provider'
+
+let {ThemeProvider, withTheme, useTheme} = createTheming()
+
+export {ThemeProvider, withTheme, useTheme}
+
 export type AppTheme = {
 	accent: string,
 	androidListHeaderBackground: string,
@@ -27,6 +33,7 @@ let theme: AppTheme
 
 export function setTheme(newTheme: AppTheme) {
 	theme = newTheme
+	;({ThemeProvider, withTheme, useTheme} = createTheming(newTheme))
 }
 
 export function getTheme(): AppTheme {

modules/button/index.js

@@ -6,7 +6,7 @@ import noop from 'lodash/noop'
 import {material, iOSUIKit} from 'react-native-typography'
 import * as c from '@frogpond/colors'
 import {type AppTheme} from '@frogpond/app-theme'
-import {withTheme} from '@callstack/react-theme-provider'
+import {useTheme} from '@frogpond/app-theme'
 
 const styles = StyleSheet.create({
 	button: {
@@ -47,18 +47,18 @@ type Props = {
 	buttonStyle?: any,
 	textStyle?: any,
 	mode?: 'default' | 'inverted',
-	theme: AppTheme,
 }
 
-function Button({
+export function Button({
 	title = 'Push me!',
 	onPress = noop,
 	disabled = false,
 	buttonStyle = null,
 	textStyle = null,
 	mode = 'default',
-	theme,
 }: Props) {
+	let theme: AppTheme = useTheme()
+
 	let background =
 		mode === 'default'
 			? {backgroundColor: theme.buttonBackground}
@@ -85,9 +85,3 @@ function Button({
 		</BasicButton>
 	)
 }
-
-export const RawButton = Button
-
-const ThemedButton = withTheme(Button)
-
-export {ThemedButton as Button}

modules/button/package.json

@@ -13,11 +13,11 @@
     "react-native": "^0.60.0"
   },
   "dependencies": {
-    "@callstack/react-theme-provider": "^1.0.3",
+    "@callstack/react-theme-provider": "^3.0.3",
     "@frogpond/app-theme": "^1.0.0",
     "@frogpond/colors": "^1.0.0",
-    "react-native-button": "^2.3.0",
     "lodash": "^4.17.15",
+    "react-native-button": "^2.3.0",
     "react-native-typography": "^1.3.0"
   }
 }

modules/event-list/package.json

@@ -9,14 +9,14 @@
     "test": "jest"
   },
   "peerDependencies": {
+    "moment-timezone": "^0.5.21",
     "react": "^16.0.0",
     "react-native": "^0.60.0",
     "react-native-vector-icons": "^6.0.0",
-    "react-navigation": "^3.0.0",
-    "moment-timezone": "^0.5.21"
+    "react-navigation": "^3.0.0"
   },
   "dependencies": {
-    "@callstack/react-theme-provider": "^1.0.3",
+    "@callstack/react-theme-provider": "^3.0.3",
     "@frogpond/add-to-device-calendar": "^1.0.0",
     "@frogpond/app-theme": "^1.0.0",
     "@frogpond/colors": "^1.0.0",

modules/event-list/vertical-bar.js

@@ -3,7 +3,7 @@ import * as React from 'react'
 import {StyleSheet, View, Platform} from 'react-native'
 import * as c from '@frogpond/colors'
 import {type AppTheme} from '@frogpond/app-theme'
-import {withTheme} from '@callstack/react-theme-provider'
+import {useTheme} from '@frogpond/app-theme'
 import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet'
 
 const dotBarStyles = StyleSheet.create({
@@ -24,17 +24,12 @@ const dotBarStyles = StyleSheet.create({
 	},
 })
 
-type BaseProps = {
+type Props = {
 	style?: ViewStyleProp,
 }
 
-type HocProps = {
-	theme: AppTheme,
-}
-
-type Props = BaseProps & HocProps
-
-function DottedBar({style, theme}: Props) {
+function DottedBar({style}: Props) {
+	let theme: AppTheme = useTheme()
 	let background = {backgroundColor: theme.accent}
 
 	return (
@@ -46,10 +41,6 @@ function DottedBar({style, theme}: Props) {
 	)
 }
 
-const ThemedDottedBar: React.StatelessFunctionalComponent<BaseProps> = (withTheme(
-	DottedBar,
-): any)
-
 const solidBarStyles = StyleSheet.create({
 	border: {
 		width: 1.5,
@@ -66,7 +57,7 @@ export function Bar(props: Object) {
 		case 'ios':
 			return <SolidBar {...props} />
 		case 'android':
-			return <ThemedDottedBar {...props} />
+			return <DottedBar {...props} />
 		default:
 			return <SolidBar {...props} />
 	}

modules/filter/active-filter-button.js

@@ -11,17 +11,18 @@ import {
 import Icon from 'react-native-vector-icons/Ionicons'
 import {white} from '@frogpond/colors'
 import {type AppTheme} from '@frogpond/app-theme'
-import {withTheme} from '@callstack/react-theme-provider'
+import {useTheme} from '@frogpond/app-theme'
 
 type Props = {
 	filter: FilterType,
 	label: string,
 	onRemove: (filter: FilterType) => any,
 	style?: any,
-	theme: AppTheme,
 }
 
-function ActiveFilterButton({filter, label, onRemove, style, theme}: Props) {
+export function ActiveFilterButton({filter, label, onRemove, style}: Props) {
+	let theme: AppTheme = useTheme()
+
 	let iconName = Platform.select({
 		ios: 'ios-close-circle',
 		android: 'md-close-circle',
@@ -42,12 +43,6 @@ function ActiveFilterButton({filter, label, onRemove, style, theme}: Props) {
 	)
 }
 
-export const RawActiveFilterButton = ActiveFilterButton
-
-const ThemedActiveFilterButton = withTheme(ActiveFilterButton)
-
-export {ThemedActiveFilterButton as ActiveFilterButton}
-
 const styles = StyleSheet.create({
 	badge: {
 		alignItems: 'center',

modules/filter/filter-toolbar-button.js

@@ -7,7 +7,7 @@ import {FilterPopover} from './filter-popover'
 import * as c from '@frogpond/colors'
 import {Touchable} from '@frogpond/touchable'
 import {type AppTheme} from '@frogpond/app-theme'
-import {withTheme} from '@callstack/react-theme-provider'
+import {withTheme} from '@frogpond/app-theme'
 
 const buttonStyles = StyleSheet.create({
 	button: {

modules/filter/package.json

@@ -11,17 +11,17 @@
   "peerDependencies": {
     "react": "^16.0.0",
     "react-native": "^0.60.0",
-    "react-native-vector-icons": "^6.0.0",
-    "react-native-popover-view": "^1.0.7"
+    "react-native-popover-view": "^1.0.7",
+    "react-native-vector-icons": "^6.0.0"
   },
   "dependencies": {
-    "@callstack/react-theme-provider": "^1.0.3",
+    "@callstack/react-theme-provider": "^3.0.3",
     "@frogpond/app-theme": "^1.0.0",
     "@frogpond/colors": "^1.0.0",
+    "@frogpond/layout": "^1.0.0",
+    "@frogpond/tableview": "^1.0.0",
     "@frogpond/touchable": "^1.0.0",
     "@frogpond/viewport": "^1.0.0",
-    "@frogpond/tableview": "^1.0.0",
-    "@frogpond/layout": "^1.0.0",
     "lodash": "^4.17.15"
   }
 }

modules/food-menu/package.json

@@ -9,15 +9,15 @@
     "test": "jest"
   },
   "peerDependencies": {
+    "moment": "^2.22.2",
+    "moment-timezone": "^0.5.21",
     "react": "^16.0.0",
     "react-native": "^0.60.0",
     "react-native-vector-icons": "^6.0.0",
-    "react-navigation": "^3.0.0",
-    "moment": "^2.22.2",
-    "moment-timezone": "^0.5.21"
+    "react-navigation": "^3.0.0"
   },
   "dependencies": {
-    "@callstack/react-theme-provider": "^1.0.3",
+    "@callstack/react-theme-provider": "^3.0.3",
     "@frogpond/app-theme": "^1.0.0",
     "@frogpond/colors": "^1.0.0",
     "@frogpond/filter": "^1.0.0",
@@ -26,8 +26,8 @@
     "@frogpond/lists": "^1.0.0",
     "@frogpond/notice": "^1.0.0",
     "@frogpond/tableview": "^1.0.0",
-    "@frogpond/touchable": "^1.0.0",
     "@frogpond/toolbar": "^1.0.0",
+    "@frogpond/touchable": "^1.0.0",
     "lodash": "^4.17.15"
   }
 }

modules/lists/list-section-header.js

@@ -3,7 +3,7 @@ import * as React from 'react'
 import {Platform, StyleSheet, Text, View} from 'react-native'
 import * as c from '@frogpond/colors'
 import {type AppTheme} from '@frogpond/app-theme'
-import {withTheme} from '@callstack/react-theme-provider'
+import {useTheme} from '@frogpond/app-theme'
 import type {
 	ViewStyleProp,
 	TextStyleProp,
@@ -67,7 +67,7 @@ const styles = StyleSheet.create({
 	},
 })
 
-type BaseProps = {
+type Props = {
 	title: string,
 	bold?: boolean,
 	titleStyle?: TextStyleProp,
@@ -78,13 +78,7 @@ type BaseProps = {
 	spacing?: {left?: number, right?: number},
 }
 
-type HocProps = {
-	theme: AppTheme,
-}
-
-type Props = BaseProps & HocProps
-
-function ListSectionHeader(props: Props) {
+export function ListSectionHeader(props: Props) {
 	let {
 		style,
 		title,
@@ -94,9 +88,10 @@ function ListSectionHeader(props: Props) {
 		subtitleStyle,
 		separator = ' — ',
 		spacing: {left: leftSpacing = 15} = {},
-		theme,
 	} = props
 
+	let theme: AppTheme = useTheme()
+
 	let containerTheme = {paddingLeft: leftSpacing}
 	let titleTheme = {}
 
@@ -132,11 +127,3 @@ function ListSectionHeader(props: Props) {
 		</View>
 	)
 }
-
-export const RawListSectionHeader = ListSectionHeader
-
-const ThemedListSectionHeader: React.StatelessFunctionalComponent<BaseProps> = (withTheme(
-	ListSectionHeader,
-): any)
-
-export {ThemedListSectionHeader as ListSectionHeader}

modules/lists/package.json

@@ -14,11 +14,11 @@
     "react-native-vector-icons": "^6.0.0"
   },
   "dependencies": {
-    "@callstack/react-theme-provider": "^1.0.3",
+    "@callstack/react-theme-provider": "^3.0.3",
     "@frogpond/app-theme": "^1.0.0",
     "@frogpond/colors": "^1.0.0",
-    "@frogpond/touchable": "^1.0.0",
     "@frogpond/separator": "^1.0.0",
+    "@frogpond/touchable": "^1.0.0",
     "lodash": "^4.17.15"
   }
 }

modules/listview/package.json

@@ -13,11 +13,11 @@
     "react-native": "^0.60.0"
   },
   "dependencies": {
-    "@callstack/react-theme-provider": "^1.0.3",
-    "@hawkrives/react-native-alphabetlistview": "^1.0.0",
+    "@callstack/react-theme-provider": "^3.0.3",
     "@frogpond/app-theme": "^1.0.0",
     "@frogpond/colors": "^1.0.0",
     "@frogpond/searchbar": "^1.0.0",
+    "@hawkrives/react-native-alphabetlistview": "^1.0.0",
     "lodash": "^4.17.15"
   }
 }

modules/markdown/package.json

@@ -14,13 +14,13 @@
     "react-native": "^0.60.0"
   },
   "dependencies": {
-    "@callstack/react-theme-provider": "^1.0.3",
+    "@callstack/react-theme-provider": "^3.0.3",
     "@frogpond/app-theme": "^1.0.0",
     "@frogpond/colors": "^1.0.0",
     "@frogpond/open-url": "^1.0.0",
+    "lodash": "^4.17.15",
     "react-markdown": "^2.5.1",
-    "react-native-typography": "^1.3.0",
-    "lodash": "^4.17.15"
+    "react-native-typography": "^1.3.0"
   },
   "devDependencies": {
     "prop-types": "15.7.2"

modules/tableview/cells/toggle.js

@@ -3,19 +3,20 @@ import * as React from 'react'
 import {Switch} from 'react-native'
 import {Cell} from 'react-native-tableview-simple'
 import {type AppTheme} from '@frogpond/app-theme'
-import {withTheme} from '@callstack/react-theme-provider'
+import {useTheme} from '@frogpond/app-theme'
 
 type PropsType = {
 	label: string,
 	value: boolean,
 	onChange: (val: boolean) => any,
-	theme: AppTheme,
 	detail?: string,
 	disabled?: boolean,
 }
 
-function CellToggle(props: PropsType) {
-	let {value, onChange, label, detail, theme, disabled} = props
+export function CellToggle(props: PropsType) {
+	let theme: AppTheme = useTheme()
+
+	let {value, onChange, label, detail, disabled} = props
 
 	let toggle = (
 		<Switch
@@ -35,9 +36,3 @@ function CellToggle(props: PropsType) {
 		/>
 	)
 }
-
-export const RawCellToggle = CellToggle
-
-const ThemedCellToggle = withTheme(CellToggle)
-
-export {ThemedCellToggle as CellToggle}