Merge pull request #21 from dctalbot/issue-15

fix persona layout

Author: dctalbot

eslint.config.js

@@ -13,6 +13,7 @@
 import eslint from "@eslint/js";
 import tseslint from "typescript-eslint";
 import reactRecommended from "eslint-plugin-react/configs/recommended.js";
+import reactHooks from "eslint-plugin-react-hooks";
 import globals from "globals";
 
 const custom = {
@@ -69,4 +70,10 @@ const defaults = tseslint.config(
   ...tseslint.configs.strict,
 );
 
-export default defaults.concat(reactRecommended, custom, ignore, langOptions);
+export default defaults.concat(
+  reactRecommended,
+  reactHooks.configs.flat.recommended,
+  custom,
+  ignore,
+  langOptions,
+);

package-lock.json

@@ -45,6 +45,7 @@
     "babel-plugin-transform-remove-console": "^6.9.4",
     "eslint": "^9.35.0",
     "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "prettier": "^3.6.2",
     "typescript": "~5.9.2",
     "typescript-eslint": "^8.43.0",

package.json

@@ -87,14 +87,14 @@ export function PersonaView() {
       )}
       <>
         {showIDs.length > 0 && (
-          <>
+          <View style={{ flex: 1 }}>
             <AppListHeader text="Shows" />
             <ScrollView>
               {showIDs.map((id) => (
                 <ShowPreview key={id} id={id} />
               ))}
             </ScrollView>
-          </>
+          </View>
         )}
       </>
     </View>
@@ -105,5 +105,6 @@ const styles = StyleSheet.create({
   bio: {
     padding: spacing[12],
     maxHeight: 150,
+    flexGrow: 0,
   },
 });

src/screens/persona/PersonaView.tsx

@@ -27,7 +27,7 @@ function SpinView() {
     if (song) {
       nav.setOptions({ title: song });
     }
-  }, [song]);
+  }, [song, nav]);
 
   const { isPending, error, data } = useSpin({ id });