Enable rule react-native/no-unused-styles again

eslint.config.mjs

@@ -52,9 +52,14 @@ export default [
     },
 
     rules: {
-      'observation/no-function-without-logging': 'error',
+      'observation/no-function-without-logging': [
+        'error',
+        {
+          ignoreList: ['createStyles'],
+        },
+      ],
 
-      'react-native/no-unused-styles': 'off',
+      'react-native/no-unused-styles': 'error',
       'react-native/no-inline-styles': 'off',
 
       'prettier/prettier': 'error',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.79.0",
+  "version": "1.80.0",
   "main": "src/index.ts",
   "exports": {
     ".": "./src/index.ts",

src/components/BottomSheet.tsx

@@ -62,8 +62,8 @@ const BottomSheet = ({ title, text, buttons = [], style, testID, children }: Pro
 
 export default BottomSheet
 
-const createStyles = (theme: Theme) =>
-  StyleSheet.create({
+const createStyles = (theme: Theme) => {
+  const styles = StyleSheet.create({
     container: {
       ...shadow.normal.ios,
       borderTopWidth: 1 / 3,
@@ -87,3 +87,6 @@ const createStyles = (theme: Theme) =>
       marginHorizontal: theme.margin.half,
     },
   })
+
+  return styles
+}

src/components/Chip.tsx

@@ -38,8 +38,10 @@ const Chip = ({ text, textStyle, containerStyle, onPress, disabled }: Props) =>
   )
 }
 
-const createStyles = (theme: Theme) =>
-  StyleSheet.create({
+export default Chip
+
+const createStyles = (theme: Theme) => {
+  const styles = StyleSheet.create({
     chipTextContainer: {
       flexDirection: 'row',
       justifyContent: 'center',
@@ -60,4 +62,5 @@ const createStyles = (theme: Theme) =>
     },
   })
 
-export default Chip
+  return styles
+}

src/components/ContentImage.tsx

@@ -56,8 +56,8 @@ const ContentImage = ({ src, alt }: Props) => {
 
 export default ContentImage
 
-const createStyles = (theme: Theme) =>
-  StyleSheet.create({
+const createStyles = (theme: Theme) => {
+  const styles = StyleSheet.create({
     outerContainer: {
       margin: -theme.margin.common,
       marginBottom: -theme.margin.half,
@@ -97,3 +97,6 @@ const createStyles = (theme: Theme) =>
       color: theme.color.text.system.subtler,
     },
   })
+
+  return styles
+}

src/components/Disclose.tsx

@@ -29,8 +29,8 @@ const Disclose = ({ text, onPress, textStyle, containerStyle }: Props) => {
 
 export default Disclose
 
-const createStyles = (theme: Theme) =>
-  StyleSheet.create({
+const createStyles = (theme: Theme) => {
+  const styles = StyleSheet.create({
     containerStyle: {
       flexDirection: 'row',
       alignItems: 'center',
@@ -39,3 +39,6 @@ const createStyles = (theme: Theme) =>
       backgroundColor: theme.color.background.system.surfaceBase,
     },
   })
+
+  return styles
+}

src/components/IconText.tsx

@@ -38,8 +38,10 @@ const IconText = ({ icon, text, style, onPress, singleLineText = false }: Props)
   )
 }
 
-const createStyles = (theme: Theme) =>
-  StyleSheet.create({
+export default IconText
+
+const createStyles = (theme: Theme) => {
+  const styles = StyleSheet.create({
     containerStyle: {
       flexDirection: 'row',
     },
@@ -49,4 +51,5 @@ const createStyles = (theme: Theme) =>
     },
   })
 
-export default IconText
+  return styles
+}

src/components/InputField.tsx

@@ -106,11 +106,10 @@ const InputField = ({
 
 export default InputField
 
-// eslint-disable-next-line observation/no-function-without-logging
 const createStyles = (theme: Theme) => {
   const inputStyles = createInputStyles(theme)
 
-  return StyleSheet.create({
+  const styles = StyleSheet.create({
     containerStyle: {
       flexDirection: 'column',
     },
@@ -136,4 +135,6 @@ const createStyles = (theme: Theme) => {
       color: theme.color.text.system.subtle,
     },
   })
+
+  return styles
 }

src/components/InputPanel.tsx

@@ -63,8 +63,8 @@ const InputPanel = ({
 
 export default InputPanel
 
-const createStyles = (theme: Theme) =>
-  StyleSheet.create({
+const createStyles = (theme: Theme) => {
+  const styles = StyleSheet.create({
     container: {
       flexDirection: 'row',
       justifyContent: 'space-between',
@@ -89,3 +89,6 @@ const createStyles = (theme: Theme) =>
       marginLeft: theme.margin.half,
     },
   })
+
+  return styles
+}

src/components/ItemSeparator.tsx

@@ -18,8 +18,8 @@ const ItemSeparator = ({ style, orientation = 'horizontal' }: Props) => {
 
 export default ItemSeparator
 
-const createStyles = (theme: Theme) =>
-  StyleSheet.create({
+const createStyles = (theme: Theme) => {
+  const styles = StyleSheet.create({
     horizontalSeparator: {
       borderBottomWidth: 1,
       borderBottomColor: theme.color.background.system.surfaceRaised,
@@ -29,3 +29,6 @@ const createStyles = (theme: Theme) =>
       borderRightColor: theme.color.background.system.surfaceRaised,
     },
   })
+
+  return styles
+}

src/components/LargeButton.tsx

@@ -87,8 +87,8 @@ const LargeButton = ({
 export default LargeButton
 export type { LargeButtonProps }
 
-const createStyles = (theme: Theme) =>
-  StyleSheet.create({
+const createStyles = (theme: Theme) => {
+  const styles = StyleSheet.create({
     container: {
       ...rounded.normal,
       margin: theme.margin.common,
@@ -109,3 +109,6 @@ const createStyles = (theme: Theme) =>
       paddingRight: theme.margin.half,
     },
   })
+
+  return styles
+}

src/components/Lightbox.tsx

@@ -165,8 +165,8 @@ const Lightbox = ({
 
 export default Lightbox
 
-const createStyles = (theme: Theme) =>
-  StyleSheet.create({
+const createStyles = (theme: Theme) => {
+  const styles = StyleSheet.create({
     lightboxFooterContainer: {
       ...layout.absoluteBottom,
       backgroundColor: theme.overlay.black50,
@@ -216,3 +216,6 @@ const createStyles = (theme: Theme) =>
       alignItems: 'center',
     },
   })
+
+  return styles
+}

src/components/ListItem.tsx

@@ -69,8 +69,8 @@ const ListItem = ({ icon, onPress, label, subLabel, extraSubLabel, selected = fa
 
 export default ListItem
 
-const createStyles = (theme: Theme) =>
-  StyleSheet.create({
+const createStyles = (theme: Theme) => {
+  const styles = StyleSheet.create({
     containerStyle: {
       flexDirection: 'row',
       alignItems: 'center',
@@ -86,3 +86,6 @@ const createStyles = (theme: Theme) =>
       color: theme.color.text.system.subtler,
     },
   })
+
+  return styles
+}

src/components/NotificationPopup.tsx

@@ -50,8 +50,12 @@ const NotificationPopup = ({ visible, title, message, leftButton, rightButton, o
   )
 }
 
-const createStyles = (theme: Theme) =>
-  StyleSheet.create({
+export default NotificationPopup
+
+export type { NotificationPopupProps, NotificationPopupStaticProps }
+
+const createStyles = (theme: Theme) => {
+  const styles = StyleSheet.create({
     mainContainer: {
       backgroundColor: theme.color.background.system.surfaceBase,
       margin: theme.margin.common,
@@ -89,6 +93,5 @@ const createStyles = (theme: Theme) =>
     },
   })
 
-export default NotificationPopup
-
-export type { NotificationPopupProps, NotificationPopupStaticProps }
+  return styles
+}

src/components/PageIndicator.tsx

@@ -66,8 +66,8 @@ const PageIndicator = ({ currentPage, numberOfPages }: Props) => {
 
 export default PageIndicator
 
-const createStyles = (theme: Theme) =>
-  StyleSheet.create({
+const createStyles = (theme: Theme) => {
+  const styles = StyleSheet.create({
     containerStyle: {
       flexDirection: 'row',
       alignSelf: 'center',
@@ -88,3 +88,6 @@ const createStyles = (theme: Theme) =>
       backgroundColor: theme.color.background.system.surfaceBase,
     },
   })
+
+  return styles
+}

src/components/Panel.tsx

@@ -23,8 +23,8 @@ const Panel = ({ children, topShadow = true, containerStyle, panelStyle }: Props
 
 export default Panel
 
-const createStyles = (theme: Theme) =>
-  StyleSheet.create({
+const createStyles = (theme: Theme) => {
+  const styles = StyleSheet.create({
     panelContainer: {
       marginTop: theme.margin.quarter,
       ...shadow.small.ios,
@@ -37,3 +37,6 @@ const createStyles = (theme: Theme) =>
       borderColor: theme.color.border.system.subtle,
     },
   })
+
+  return styles
+}

src/components/Popup.tsx

@@ -28,8 +28,8 @@ const Popup = ({ children, visible }: Props) => {
 
 export default Popup
 
-const createStyles = (theme: Theme) =>
-  StyleSheet.create({
+const createStyles = (theme: Theme) => {
+  const styles = StyleSheet.create({
     modalBackground: {
       flex: 1,
       alignItems: 'stretch',
@@ -43,3 +43,6 @@ const createStyles = (theme: Theme) =>
       backgroundColor: 'transparent',
     },
   })
+
+  return styles
+}

src/components/ProgressBarList.tsx

@@ -109,8 +109,10 @@ const ProgressBarList = ({ progressBars, separator }: Props) => {
 const barHeight = 16
 const borderRadius = barHeight / 2
 
-const createStyles = (theme: Theme) =>
-  StyleSheet.create({
+export default ProgressBarList
+
+const createStyles = (theme: Theme) => {
+  const styles = StyleSheet.create({
     mainContainer: {
       width: '100%',
       flexDirection: 'row',
@@ -165,4 +167,5 @@ const createStyles = (theme: Theme) =>
     },
   })
 
-export default ProgressBarList
+  return styles
+}

src/components/SectionHeader.tsx

@@ -19,8 +19,8 @@ const SectionHeader = ({ title, containerStyle }: Props) => {
 
 export default SectionHeader
 
-const createStyles = (theme: Theme) =>
-  StyleSheet.create({
+const createStyles = (theme: Theme) => {
+  const styles = StyleSheet.create({
     header: {
       paddingHorizontal: theme.margin.common,
       marginTop: theme.margin.common,
@@ -33,3 +33,6 @@ const createStyles = (theme: Theme) =>
       color: theme.color.text.system.subtler,
     },
   })
+
+  return styles
+}

src/components/Tooltip.tsx

@@ -88,8 +88,8 @@ export default Tooltip
 
 export type { TooltipProps }
 
-const createStyles = (theme: Theme) =>
-  StyleSheet.create({
+const createStyles = (theme: Theme) => {
+  const styles = StyleSheet.create({
     tooltipContainer: {
       borderBottomLeftRadius: 16,
       borderBottomRightRadius: 16,
@@ -106,3 +106,6 @@ const createStyles = (theme: Theme) =>
       justifyContent: 'center',
     },
   })
+
+  return styles
+}