react-native-football-formation 1.0.4 → 1.0.7

package/README.md

@@ -6,6 +6,12 @@ A highly customizable React Native component for displaying football/soccer team
 ![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue)
 ![License](https://img.shields.io/badge/license-MIT-green)
 
+## Demo
+
+<p align="center">
+  <img src="formation-demo.png" alt="Football Formation Demo" width="400" />
+</p>
+
 ## Features
 
 ✅ **24 Supported Formations** - All major tactical formations (4-3-3, 4-2-3-1, 3-5-2, etc.)
@@ -81,6 +87,63 @@ export default function FormationScreen() {
 }
 ```
 
+### Complete Player Object Example
+
+Here's a complete player object showing all available fields and stats:
+
+```tsx
+const teamLineup = {
+  players: [
+    // Example 1: Player with all stats
+    {
+      playerId: "5il4uc7d941ndwjl0qu97y7dh",
+      matchName: "Marcelo Grohe",
+      shirtNumber: 43,
+      rating: "7.2",
+      position: "Goalkeeper",
+      positionSide: "Centre",
+      formationPlace: "1",
+      stats: [
+        { type: "totalSubOff", value: "1" },
+        { type: "goals", value: 1 },
+        { type: "yellowCard", value: "1" },
+        { type: "redCard", value: "1" },
+        { type: "goalAssist", value: "0" },
+        { type: "ownGoals", value: "1" }
+      ]
+    },
+    // Example 2: Player with stats array containing null values
+    {
+      playerId: "abc123",
+      matchName: "Lionel Messi",
+      shirtNumber: 10,
+      rating: "9.5",
+      position: "Forward",
+      positionSide: "Right",
+      formationPlace: "10",
+      stats: [
+        { type: "goals", value: 2 },
+        null,
+        { type: "goalAssist", value: "1" },
+        null,
+        { type: "yellowCard", value: "0" }
+      ]
+    },
+    // ... 9 more players with formationPlace "2" to "9", "11"
+  ],
+  formationUsed: "433" // or "4-3-3"
+};
+
+<FormationField
+  lineup={teamLineup}
+  getPlayerPhotoUrl={(playerId) =>
+    `https://example.com/players/${playerId}.png`
+  }
+/>
+```
+
+**Note:** The `stats` array can contain both `PlayerStats` objects and `null` values. Null values are safely ignored.
+
 ### With Custom Theme
 
 ```tsx
@@ -89,6 +152,7 @@ export default function FormationScreen() {
   theme={{
     colors: {
       primary: '#FF0000',
+      playerName: '#FFFFFF',
       success: '#00FF00',
       warning: '#FFAA00',
     },
@@ -166,11 +230,11 @@ interface Player {
   matchName: string;
   shirtNumber: number;
   formationPlace?: string; // "1" to "11"
-  stats: PlayerStats[] | null[];
+  stats: (PlayerStats | null)[]; // Array can contain PlayerStats objects or null values
 }
 
 interface PlayerStats {
-  type: string; // "goals", "yellowCard", "redCard", "goalAssist", etc.
+  type: 'goals' | 'yellowCard' | 'redCard' | 'goalAssist' | 'totalSubOff' | 'ownGoals';
   value: string | number;
 }
 ```
@@ -184,6 +248,7 @@ interface FormationTheme {
     blue: string;
     white: string;
     text: string;
+    playerName: string;
     border: string;
     warning: string;
     success: string;
@@ -322,27 +387,47 @@ The component supports 24 different tactical formations:
 
 ## Player Statistics
 
-The component automatically displays player statistics when available:
+The component automatically displays player statistics when available. The `stats` array can contain `PlayerStats` objects or `null` values.
+
+### Supported Stat Types
 
-- ⚽ **Goals** - Football icon with count
-- 👟 **Assists** - Kicker icon
-- 🟨 **Yellow Card** - Yellow card indicator
-- 🟥 **Red Card** - Red card indicator
-- 🔄 **Substitution** - Substitution icon
-- ⚽🔴 **Own Goals** - Own goal icon with count
+| Stat Type | Display | Description |
+|-----------|---------|-------------|
+| `goals` | ⚽ Football icon + count | Number of goals scored |
+| `goalAssist` | 👟 Kicker icon | Number of assists provided |
+| `yellowCard` | 🟨 Yellow card | Yellow card received |
+| `redCard` | 🟥 Red card | Red card received |
+| `totalSubOff` | 🔄 Substitution icon | Player was substituted off |
+| `ownGoals` | ⚽🔴 Own goal icon + count | Number of own goals |
 
-Statistics are extracted from the `stats` array in the player data:
+### Example Player Stats
+
+The `stats` array can contain both stat objects and `null` values:
 
 ```typescript
 {
+  playerId: '1',
+  matchName: 'Cristiano Ronaldo',
+  shirtNumber: 7,
+  formationPlace: '9',
   stats: [
-    { type: 'goals', value: '2' },
-    { type: 'yellowCard', value: '1' },
-    { type: 'goalAssist', value: '1' },
+    { type: 'goals', value: 1 },           // Scored 1 goal
+    { type: 'yellowCard', value: '1' },   // Received yellow card
+    { type: 'goalAssist', value: '0' },   // No assists (won't display)
+    { type: 'redCard', value: '1' },      // Received red card
+    { type: 'totalSubOff', value: '1' },  // Was substituted
+    { type: 'ownGoals', value: '1' },     // Scored own goal
+    null,                                  // Null values are safely handled
   ]
 }
 ```
 
+**Note:**
+- Values can be either `string` or `number` types
+- Stats with a value of `'0'` or `0` won't be displayed
+- The `stats` array safely handles `null` entries
+- If `stats` is empty or all values are `null`, no stats will be displayed
+
 ## Utilities
 
 The package exports utility functions for advanced use cases:
@@ -380,6 +465,8 @@ The package is written in TypeScript and includes full type definitions. Import
 import type {
   TeamLineup,
   Player,
+  PlayerStats,
+  PlayerStatType,
   LineupFormationPlayer,
   FormationTheme,
   FormationFieldProps,

package/dist/components/FormationField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormationField.d.ts","sourceRoot":"","sources":["../../src/components/FormationField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAUvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;;AA2K/C,wBAA0C"}
+{"version":3,"file":"FormationField.d.ts","sourceRoot":"","sources":["../../src/components/FormationField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAUvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;;AA4K/C,wBAA0C"}

package/dist/components/FormationField.js

@@ -48,10 +48,11 @@ const FormationField = ({ lineup, width = screenWidth + 10, height = 395, theme:
     const lineupTransformed = (0, react_1.useMemo)(() => {
         if (!lineup)
             return [];
-        const formation = lineup?.formationUsed?.split('').join('-') || '4-3-3';
-        return (0, utils_1.transformLineupByFormationPlace)(lineup, formation, getPlayerPhotoUrl);
+        // Normalize formation: remove dashes then add them back properly
+        const normalizedFormation = lineup?.formationUsed?.replace(/-/g, '').split('').join('-') || '4-3-3';
+        return (0, utils_1.transformLineupByFormationPlace)(lineup, normalizedFormation, getPlayerPhotoUrl);
     }, [lineup, getPlayerPhotoUrl]);
-    const formationDisplay = lineup?.formationUsed?.split('').join('-') || '4-3-3';
+    const formationDisplay = lineup?.formationUsed?.replace(/-/g, '').split('').join('-') || '4-3-3';
     return (<react_native_1.ImageBackground source={fieldImage} style={[
             styles.footballField,
             {

package/dist/components/PlayerCard.js

@@ -102,6 +102,7 @@ const PlayerCard = ({ player, fieldWidth, fieldHeight, theme, onPress, style, na
             }}>
                 {Number(player?.ownGoals) > 1 && (<react_native_1.View style={[
                     react_native_1.I18nManager.isRTL ? { paddingRight: 2 } : { paddingLeft: 2 },
+                    { justifyContent: 'center' }
                 ]}>
                     <react_native_1.Text style={[
                     styles.goalsText,
@@ -247,7 +248,7 @@ const PlayerCard = ({ player, fieldWidth, fieldHeight, theme, onPress, style, na
             styles.playerName,
             {
                 fontSize: theme.typography.playerNameSize,
-                color: theme.colors.text,
+                color: theme.colors.playerName,
                 fontFamily: theme.typography.fontFamily,
             },
             nameStyle,
@@ -317,7 +318,6 @@ const styles = react_native_1.StyleSheet.create({
     },
     goalsText: {
         includeFontPadding: false,
-        lineHeight: 13.8,
     },
     footballIcon: {},
     yellowCardWrapper: {

package/dist/theme/defaultTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,cAsC1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,GACrB,cAAc,OAAO,CAAC,cAAc,CAAC,KACpC,cAqBF,CAAC"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,cAuC1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,GACrB,cAAc,OAAO,CAAC,cAAc,CAAC,KACpC,cAqBF,CAAC"}

package/dist/theme/defaultTheme.js

@@ -11,6 +11,7 @@ exports.defaultTheme = {
         blue: '#2194FF',
         white: '#ffffff',
         text: '#13151F',
+        playerName: '#ffffff',
         border: '#96CBCB',
         warning: '#FFA500',
         success: '#34C759',

package/dist/types/formation.types.d.ts

@@ -1,6 +1,10 @@
 /**
  * Type definitions for React Native Football Formation component
  */
+/**
+ * Supported player statistics types
+ */
+export type PlayerStatType = 'goals' | 'yellowCard' | 'redCard' | 'goalAssist' | 'totalSubOff' | 'ownGoals';
 export interface PlayerStats {
     type: string;
     value: string | number;
@@ -14,7 +18,7 @@ export interface Player {
     positionSide?: string;
     formationPosition?: string;
     formationPlace?: string;
-    stats: PlayerStats[] | null[];
+    stats: (PlayerStats | null)[];
 }
 export interface TeamLineup {
     players: Player[];

package/dist/types/formation.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formation.types.d.ts","sourceRoot":"","sources":["../../src/types/formation.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,MAAM;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,MAAM,aAAa,GACrB,OAAO,GACP,WAAW,GACX,OAAO,GACP,OAAO,GACP,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,OAAO,GACP,OAAO,GACP,OAAO,GACP,OAAO,GACP,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,CAAC,GAAG,EAAE,MAAM,GAAG,eAAe,CAAC;CAChC,CAAC"}
+{"version":3,"file":"formation.types.d.ts","sourceRoot":"","sources":["../../src/types/formation.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,MAAM,MAAM,cAAc,GACtB,OAAO,GACP,YAAY,GACZ,SAAS,GACT,YAAY,GACZ,aAAa,GACb,UAAU,CAAC;AAEf,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,MAAM;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,MAAM,aAAa,GACrB,OAAO,GACP,WAAW,GACX,OAAO,GACP,OAAO,GACP,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,OAAO,GACP,OAAO,GACP,OAAO,GACP,OAAO,GACP,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,CAAC,GAAG,EAAE,MAAM,GAAG,eAAe,CAAC;CAChC,CAAC"}

package/dist/types/theme.types.d.ts

@@ -6,6 +6,7 @@ export interface FormationThemeColors {
     blue: string;
     white: string;
     text: string;
+    playerName?: string;
     border: string;
     warning: string;
     success: string;

package/dist/types/theme.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.types.d.ts","sourceRoot":"","sources":["../../src/types/theme.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,qBAAqB;IACpC,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,wBAAwB;IACvC,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,0BAA0B;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,oBAAoB,CAAC;IAC7B,OAAO,EAAE,qBAAqB,CAAC;IAC/B,UAAU,EAAE,wBAAwB,CAAC;IACrC,YAAY,EAAE,0BAA0B,CAAC;CAC1C"}
+{"version":3,"file":"theme.types.d.ts","sourceRoot":"","sources":["../../src/types/theme.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,qBAAqB;IACpC,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,wBAAwB;IACvC,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,0BAA0B;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,oBAAoB,CAAC;IAC7B,OAAO,EAAE,qBAAqB,CAAC;IAC/B,UAAU,EAAE,wBAAwB,CAAC;IACrC,YAAY,EAAE,0BAA0B,CAAC;CAC1C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-football-formation",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "description": "A highly customizable React Native component for displaying football/soccer team formations with player positions and match statistics",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,7 +12,8 @@
     "dist",
     "src",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "formation-demo.png"
   ],
   "scripts": {
     "build": "tsc && npm run copy-assets",

package/src/components/FormationField.tsx

@@ -44,11 +44,12 @@ const FormationField: React.FC<FormationFieldProps> = ({
   const lineupTransformed = useMemo(() => {
     if (!lineup) return [];
 
-    const formation = lineup?.formationUsed?.split('').join('-') || '4-3-3';
-    return transformLineupByFormationPlace(lineup, formation, getPlayerPhotoUrl);
+    // Normalize formation: remove dashes then add them back properly
+    const normalizedFormation = lineup?.formationUsed?.replace(/-/g, '').split('').join('-') || '4-3-3';
+    return transformLineupByFormationPlace(lineup, normalizedFormation, getPlayerPhotoUrl);
   }, [lineup, getPlayerPhotoUrl]);
 
-  const formationDisplay = lineup?.formationUsed?.split('').join('-') || '4-3-3';
+  const formationDisplay = lineup?.formationUsed?.replace(/-/g, '').split('').join('-') || '4-3-3';
 
   return (
     <ImageBackground

package/src/components/PlayerCard.tsx

@@ -143,6 +143,7 @@ const PlayerCard: React.FC<PlayerCardProps> = ({
                   <View
                     style={[
                       I18nManager.isRTL ? { paddingRight: 2 } : { paddingLeft: 2 },
+                      {justifyContent: 'center'}
                     ]}>
                     <Text
                       style={[
@@ -327,7 +328,7 @@ const PlayerCard: React.FC<PlayerCardProps> = ({
           styles.playerName,
           {
             fontSize: theme.typography.playerNameSize,
-            color: theme.colors.text,
+            color: theme.colors.playerName,
             fontFamily: theme.typography.fontFamily,
           },
           nameStyle,
@@ -403,7 +404,6 @@ const styles = StyleSheet.create({
   },
   goalsText: {
     includeFontPadding: false,
-    lineHeight: 13.8,
   },
   footballIcon: {},
   yellowCardWrapper: {

package/src/theme/defaultTheme.ts

@@ -10,6 +10,7 @@ export const defaultTheme: FormationTheme = {
     blue: '#2194FF',
     white: '#ffffff',
     text: '#13151F',
+    playerName: '#ffffff',
     border: '#96CBCB',
     warning: '#FFA500',
     success: '#34C759',

package/src/types/formation.types.ts

@@ -2,8 +2,19 @@
  * Type definitions for React Native Football Formation component
  */
 
+/**
+ * Supported player statistics types
+ */
+export type PlayerStatType =
+  | 'goals'
+  | 'yellowCard'
+  | 'redCard'
+  | 'goalAssist'
+  | 'totalSubOff'
+  | 'ownGoals';
+
 export interface PlayerStats {
-  type: string;
+  type: string; // Accepts any string, but PlayerStatType provides supported values
   value: string | number;
 }
 
@@ -16,7 +27,7 @@ export interface Player {
   positionSide?: string;
   formationPosition?: string;
   formationPlace?: string;
-  stats: PlayerStats[] | null[];
+  stats: (PlayerStats | null)[]; // Array can contain PlayerStats objects or null values
 }
 
 export interface TeamLineup {

package/src/types/theme.types.ts

@@ -7,6 +7,7 @@ export interface FormationThemeColors {
   blue: string;
   white: string;
   text: string;
+  playerName?: string;
   border: string;
   warning: string;
   success: string;