Add a theme provider

eslint.config.mjs

@@ -54,7 +54,7 @@ export default [
     rules: {
       'observation/no-function-without-logging': 'error',
 
-      'react-native/no-unused-styles': 'error',
+      'react-native/no-unused-styles': 'off',
       'react-native/no-inline-styles': 'off',
 
       'prettier/prettier': 'error',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.72.0",
+  "version": "1.73.0",
   "main": "src/index.ts",
   "repository": "git@github.com:observation/react-native-components.git",
   "author": "Observation.org",

src/components/BackButton.tsx

@@ -3,18 +3,22 @@ import React from 'react'
 import { NavigationProp, ParamListBase } from '@react-navigation/native'
 
 import IconButton from '../components/IconButton'
-import { theme } from '../styles'
+import { useTheme } from '../theme/ThemeProvider'
 
 type Props = {
   navigation: NavigationProp<ParamListBase>
 }
 
-const BackButton = ({ navigation }: Props) => (
-  <IconButton
-    containerStyle={{ padding: theme.margin.common }}
-    onPress={() => navigation.goBack()}
-    icon={{ name: 'chevron-left', size: theme.icon.size.xxl, color: theme.color.primary500 }}
-  />
-)
+const BackButton = ({ navigation }: Props) => {
+  const theme = useTheme()
+
+  return (
+    <IconButton
+      containerStyle={{ padding: theme.margin.common }}
+      onPress={() => navigation.goBack()}
+      icon={{ name: 'chevron-left', size: theme.icon.size.xxl, color: theme.color.primary500 }}
+    />
+  )
+}
 
 export default BackButton

src/components/BottomSheet.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
 
-import { useTheme } from '@react-navigation/native'
+import { useTheme as useNavigationTheme } from '@react-navigation/native'
 
 import LargeButton, { LargeButtonProps } from './LargeButton'
-import { shadow, theme } from '../styles'
+import { Theme } from '../@types/theme'
+import { shadow } from '../styles'
 import textStyle from '../styles/text'
+import { useStyles, useTheme } from '../theme/ThemeProvider'
 
 type Props = {
   title?: string
@@ -17,7 +19,10 @@ type Props = {
 }
 
 const BottomSheet = ({ title, text, buttons = [], style, testID, children }: Props) => {
-  const { colors } = useTheme()
+  const { colors } = useNavigationTheme()
+  const theme = useTheme()
+  const styles = useStyles(createStyles)
+
   const buttonsMarginTop = title || text ? theme.margin.common : 0
   return (
     <View style={[styles.container, style]} testID={testID}>
@@ -59,27 +64,28 @@ const BottomSheet = ({ title, text, buttons = [], style, testID, children }: Pro
 
 export default BottomSheet
 
-const styles = StyleSheet.create({
-  container: {
-    ...shadow.normal.ios,
-    borderTopWidth: 1 / 3,
-    borderTopColor: theme.color.grey300,
-  },
-  bottomSheetContainer: {
-    ...shadow.normal.android,
-  },
-  bottomSheet: {
-    flexDirection: 'column',
-    margin: theme.margin.common,
-  },
-  buttonContainer: {
-    marginHorizontal: -theme.margin.half,
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-  },
-  buttonStyle: {
-    flex: 1,
-    margin: 0,
-    marginHorizontal: theme.margin.half,
-  },
-})
+const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    container: {
+      ...shadow.normal.ios,
+      borderTopWidth: 1 / 3,
+      borderTopColor: theme.color.grey300,
+    },
+    bottomSheetContainer: {
+      ...shadow.normal.android,
+    },
+    bottomSheet: {
+      flexDirection: 'column',
+      margin: theme.margin.common,
+    },
+    buttonContainer: {
+      marginHorizontal: -theme.margin.half,
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+    },
+    buttonStyle: {
+      flex: 1,
+      margin: 0,
+      marginHorizontal: theme.margin.half,
+    },
+  })

src/components/BrandIcon.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
 
 import BrandIcons, { BrandIconName } from '../lib/BrandIcons'
-import { theme } from '../styles'
+import { useTheme } from '../theme/ThemeProvider'
 
 type Props = {
   name: BrandIconName
@@ -12,6 +12,7 @@ type Props = {
 }
 
 export const BrandIcon = ({ name, color, size }: Props) => {
+  const theme = useTheme()
   const icon = BrandIcons[name]
   const iconColor = color ?? theme.color.primary500
   const iconSize = size ?? theme.icon.size.l

src/components/Checkbox.tsx

@@ -3,7 +3,7 @@ import { StyleProp, StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-
 
 import { Icon } from './Icon'
 import Log from '../lib/Log'
-import { theme } from '../styles'
+import { useTheme } from '../theme/ThemeProvider'
 
 type Props = {
   enabled: boolean
@@ -21,16 +21,18 @@ const Checkbox = ({
   containerStyle,
   iconContainerStyle,
   children,
-  lineHeight = theme.margin.large,
+  lineHeight,
   testID = 'pressable',
 }: Props) => {
   Log.debug('Checkbox')
 
+  const theme = useTheme()
+  const size = lineHeight ?? theme.margin.large
   return (
     <View style={[styles.containerStyle, containerStyle]}>
       <View style={[styles.iconContainer, iconContainerStyle]}>
         <TouchableOpacity testID={testID} onPress={onPress} activeOpacity={0.5}>
-          <View style={[styles.iconInnerContainer, { width: lineHeight, height: lineHeight }]}>
+          <View style={[styles.iconInnerContainer, { width: size, height: size }]}>
             {enabled ? (
               <Icon name="check-square" color={theme.color.black} />
             ) : (

src/components/Chip.tsx

@@ -10,8 +10,10 @@ import {
   ViewStyle,
 } from 'react-native'
 
-import { fontSize, theme } from '../styles'
+import { Theme } from '../@types/theme'
+import { fontSize } from '../styles'
 import appTextStyle from '../styles/text'
+import { useStyles, useTheme } from '../theme/ThemeProvider'
 
 type Props = {
   text?: string
@@ -22,6 +24,8 @@ type Props = {
 }
 
 const Chip = ({ text, textStyle, containerStyle, onPress, disabled }: Props) => {
+  const theme = useTheme()
+  const styles = useStyles(createStyles)
   const [borderRadius, setBorderRadius] = useState(theme.margin.common)
   return (
     <TouchableOpacity onPress={disabled ? undefined : onPress} activeOpacity={0.5} disabled={disabled}>
@@ -37,25 +41,26 @@ const Chip = ({ text, textStyle, containerStyle, onPress, disabled }: Props) =>
   )
 }
 
-const styles = StyleSheet.create({
-  chipTextContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-  chipText: {
-    ...appTextStyle.body,
-    color: theme.color.white,
-    lineHeight: theme.margin.common,
-    fontSize: fontSize.medium,
-  },
-  chipContainer: {
-    backgroundColor: theme.color.accentLime400,
-    paddingHorizontal: theme.margin.common,
-    paddingVertical: theme.margin.half,
-    borderRadius: theme.margin.common,
-    minWidth: 44,
-    justifyContent: 'center',
-  },
-})
+const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    chipTextContainer: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+    },
+    chipText: {
+      ...appTextStyle.body,
+      color: theme.color.white,
+      lineHeight: theme.margin.common,
+      fontSize: fontSize.medium,
+    },
+    chipContainer: {
+      backgroundColor: theme.color.accentLime400,
+      paddingHorizontal: theme.margin.common,
+      paddingVertical: theme.margin.half,
+      borderRadius: theme.margin.common,
+      minWidth: 44,
+      justifyContent: 'center',
+    },
+  })
 
 export default Chip

src/components/ContentImage.tsx

@@ -4,14 +4,18 @@ import { Dimensions, Image, StyleSheet, Text, TouchableOpacity, View } from 'rea
 import ScalableImage from 'react-native-scalable-image'
 
 import Lightbox from './Lightbox'
-import { font, rounded, shadow, theme } from '../styles'
+import { Theme } from '../@types/theme'
+import { font, rounded, shadow } from '../styles'
+import { useTheme } from '../theme/ThemeProvider'
 
 type Props = {
   src: string
   alt?: string
 }
 
 const ContentImage = ({ src, alt }: Props) => {
+  const theme = useTheme()
+  const styles = createStyles(theme)
   const [photoIndex, setPhotoIndex] = React.useState<number>()
   if (!alt) {
     return <ScalableImage width={Dimensions.get('window').width - 2 * theme.margin.common} source={{ uri: src }} />
@@ -53,43 +57,44 @@ const ContentImage = ({ src, alt }: Props) => {
 
 export default ContentImage
 
-const styles = StyleSheet.create({
-  outerContainer: {
-    margin: -theme.margin.common,
-    marginBottom: -theme.margin.half,
-    ...shadow.normal.ios,
-  },
-  innerContainer: {
-    flexDirection: 'row',
-    margin: theme.margin.common,
-    backgroundColor: theme.color.white,
-    ...shadow.normal.android,
-    ...rounded.large,
-    borderWidth: 1,
-    borderColor: theme.color.grey50,
-  },
-  imageContainer: {
-    margin: theme.margin.common,
-    marginRight: theme.margin.half,
-    ...rounded.large,
-  },
-  image: {
-    height: 80,
-    width: 80,
-  },
-  textContainer: {
-    flex: 1,
-    marginRight: theme.margin.common,
-    marginLeft: theme.margin.half,
-    justifyContent: 'center',
-  },
-  title: {
-    ...font.smallBold,
-    color: theme.color.black,
-    marginBottom: theme.margin.quarter,
-  },
-  description: {
-    ...font.small,
-    color: theme.color.grey500,
-  },
-})
+const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    outerContainer: {
+      margin: -theme.margin.common,
+      marginBottom: -theme.margin.half,
+      ...shadow.normal.ios,
+    },
+    innerContainer: {
+      flexDirection: 'row',
+      margin: theme.margin.common,
+      backgroundColor: theme.color.white,
+      ...shadow.normal.android,
+      ...rounded.large,
+      borderWidth: 1,
+      borderColor: theme.color.grey50,
+    },
+    imageContainer: {
+      margin: theme.margin.common,
+      marginRight: theme.margin.half,
+      ...rounded.large,
+    },
+    image: {
+      height: 80,
+      width: 80,
+    },
+    textContainer: {
+      flex: 1,
+      marginRight: theme.margin.common,
+      marginLeft: theme.margin.half,
+      justifyContent: 'center',
+    },
+    title: {
+      ...font.smallBold,
+      color: theme.color.black,
+      marginBottom: theme.margin.quarter,
+    },
+    description: {
+      ...font.small,
+      color: theme.color.grey500,
+    },
+  })

src/components/Date.tsx

@@ -3,24 +3,27 @@ import { StyleProp, ViewStyle } from 'react-native'
 
 import { Icon } from './Icon'
 import IconText from './IconText'
-import { theme } from '../styles'
 import textStyle from '../styles/text'
+import { useTheme } from '../theme/ThemeProvider'
 
 type Props = {
   date: string
   containerStyle?: StyleProp<ViewStyle>
 }
 
-const Date = ({ date, containerStyle }: Props) => (
-  <IconText
-    icon={<Icon name="calendar-day" style={'solid'} color={theme.color.grey300} size={theme.icon.size.m} />}
-    text={date}
-    style={{
-      containerStyle,
-      textStyle: textStyle.light,
-    }}
-    singleLineText
-  />
-)
+const Date = ({ date, containerStyle }: Props) => {
+  const theme = useTheme()
+  return (
+    <IconText
+      icon={<Icon name="calendar-day" style={'solid'} color={theme.color.grey300} size={theme.icon.size.m} />}
+      text={date}
+      style={{
+        containerStyle,
+        textStyle: textStyle.light,
+      }}
+      singleLineText
+    />
+  )
+}
 
 export default Date