react-native-football-formation 1.0.0

package/src/assets/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Default image assets for the Formation Field component
+ * Users can override these by passing custom ImageSourcePropType to the component
+ */
+export const defaultAssets = {
+  field: require('./images/field.png'),
+  football: require('./images/football.png'),
+  kicker: require('./images/kicker.png'),
+  renewal: require('./images/renewal.png'),
+  ownGoals: require('./images/ownGoals.png'),
+  playerPlaceholder: require('./images/playerPlaceholder.png'),
+};

package/src/components/FormationField.tsx

@@ -0,0 +1,182 @@
+import React, { useMemo } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ImageBackground,
+  Dimensions,
+  I18nManager,
+  Platform,
+} from 'react-native';
+import { FormationFieldProps } from '../types';
+import { transformLineupByFormationPlace } from '../utils';
+import { mergeTheme } from '../theme';
+import { defaultAssets } from '../assets';
+import PlayerCard from './PlayerCard';
+
+const { width: screenWidth } = Dimensions.get('window');
+
+const FormationField: React.FC<FormationFieldProps> = ({
+  lineup,
+  width = screenWidth + 10,
+  height = 395,
+  theme: customTheme,
+  fieldImage = defaultAssets.field,
+  playerPlaceholder,
+  footballIcon,
+  kickerIcon,
+  renewalIcon,
+  ownGoalIcon,
+  logoImage,
+  renderPlayerCard,
+  renderFooter,
+  onPlayerPress,
+  showLogo = false,
+  showFormation = true,
+  showRating = false,
+  containerStyle,
+  playerCardStyle,
+  playerNameStyle,
+  getPlayerPhotoUrl,
+}) => {
+  const theme = mergeTheme(customTheme);
+
+  const lineupTransformed = useMemo(() => {
+    if (!lineup) return [];
+
+    const formation = lineup?.formationUsed?.split('').join('-') || '4-3-3';
+    return transformLineupByFormationPlace(lineup, formation, getPlayerPhotoUrl);
+  }, [lineup, getPlayerPhotoUrl]);
+
+  const formationDisplay = lineup?.formationUsed?.split('').join('-') || '4-3-3';
+
+  return (
+    <ImageBackground
+      source={fieldImage}
+      style={[
+        styles.footballField,
+        {
+          width,
+          height,
+        },
+        containerStyle,
+      ]}
+      resizeMode="cover">
+      {/* Players */}
+      {!!lineupTransformed?.length &&
+        lineupTransformed?.map(player => {
+          if (renderPlayerCard) {
+            return (
+              <View key={player.playerId}>
+                {renderPlayerCard(player, width, height)}
+              </View>
+            );
+          }
+
+          return (
+            <PlayerCard
+              key={player.playerId}
+              player={player}
+              fieldWidth={width}
+              fieldHeight={height}
+              theme={theme}
+              onPress={onPlayerPress}
+              style={playerCardStyle}
+              nameStyle={playerNameStyle}
+              playerPlaceholder={playerPlaceholder}
+              footballIcon={footballIcon}
+              kickerIcon={kickerIcon}
+              renewalIcon={renewalIcon}
+              ownGoalIcon={ownGoalIcon}
+            />
+          );
+        })}
+
+      {/* Footer Section */}
+      {renderFooter ? (
+        <View style={styles.fieldBottomWrapper}>
+          {renderFooter(formationDisplay)}
+        </View>
+      ) : (
+        <View style={styles.fieldBottomWrapper}>
+          <View
+            style={[
+              styles.fieldBottomContainer,
+              {
+                flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
+              },
+            ]}>
+            {/* Formation Display */}
+            {showFormation && (
+              <View style={{ justifyContent: 'center' }}>
+                <View
+                  style={[
+                    styles.formationUsedContainer,
+                    { backgroundColor: theme.colors.formationBadge },
+                  ]}>
+                  <Text
+                    style={[
+                      styles.formationText,
+                      {
+                        fontSize: theme.typography.formationSize,
+                        fontFamily: theme.typography.fontFamilyBold,
+                        color: theme.colors.white,
+                      },
+                    ]}>
+                    {formationDisplay}
+                  </Text>
+                </View>
+              </View>
+            )}
+
+            {/* Optional Logo */}
+            {showLogo && logoImage && (
+              <View style={styles.logoImageContainer}>
+                <ImageBackground source={logoImage} style={styles.logoImage} />
+              </View>
+            )}
+          </View>
+        </View>
+      )}
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  footballField: {
+    position: 'relative',
+    marginTop: 20,
+  },
+  fieldBottomWrapper: {
+    height: 40,
+    position: 'absolute',
+    bottom: Platform.OS === 'ios' ? 4 : 5,
+  },
+  fieldBottomContainer: {
+    paddingHorizontal: 10,
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  formationUsedContainer: {
+    minWidth: 60,
+    minHeight: 20,
+    borderRadius: 99,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+  },
+  formationText: {
+    includeFontPadding: false,
+  },
+  logoImageContainer: {
+    justifyContent: 'center',
+  },
+  logoImage: {
+    width: 64,
+    height: 60,
+  },
+});
+
+export default React.memo(FormationField);

package/src/components/PlayerCard.tsx

@@ -0,0 +1,452 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  I18nManager,
+  Platform,
+} from 'react-native';
+import { PlayerCardProps } from '../types';
+import { defaultAssets } from '../assets';
+
+const PlayerCard: React.FC<PlayerCardProps> = ({
+  player,
+  fieldWidth,
+  fieldHeight,
+  theme,
+  onPress,
+  style,
+  nameStyle,
+  playerPlaceholder = defaultAssets.playerPlaceholder,
+  footballIcon = defaultAssets.football,
+  kickerIcon = defaultAssets.kicker,
+  renewalIcon = defaultAssets.renewal,
+  ownGoalIcon = defaultAssets.ownGoals,
+}) => {
+  const getFirst10Chars = (str: string) => {
+    const trimmed = [...str].slice(0, 10).join('');
+    return str?.length > 10 ? trimmed + '…' : trimmed;
+  };
+
+  const playerX = (Number(player?.x) / 100) * fieldWidth - theme.spacing.playerCardWidth / 2;
+  const playerY = (Number(player?.y) / 100) * fieldHeight - theme.spacing.playerCardHeight / 2;
+
+  const cardContent = (
+    <View
+      style={[
+        styles.playerCard,
+        {
+          left: playerX,
+          top: playerY,
+          width: theme.spacing.playerCardWidth,
+          height: theme.spacing.playerCardHeight,
+        },
+        style,
+      ]}>
+      <View
+        style={[
+          styles.playerImageContainer,
+          {
+            width: theme.spacing.playerImageSize,
+            height: theme.spacing.playerImageSize,
+            borderRadius: theme.borderRadius.playerImage,
+            borderColor: theme.colors.white,
+          },
+        ]}>
+        <Image
+          source={player?.photo ? { uri: player.photo } : playerPlaceholder}
+          style={[
+            styles.playerImage,
+            { borderRadius: theme.borderRadius.playerImage },
+          ]}
+        />
+
+        {/* Jersey Number */}
+        <View
+          style={[
+            styles.jerseyNumber,
+            I18nManager.isRTL ? { right: -5 } : { left: -5 },
+          ]}>
+          <View
+            style={[
+              styles.jerseyNumberWrapper,
+              {
+                width: theme.spacing.jerseyNumberSize,
+                height: theme.spacing.jerseyNumberSize,
+                borderRadius: theme.spacing.jerseyNumberSize,
+                backgroundColor: theme.colors.white,
+                borderColor: theme.colors.border,
+              },
+            ]}>
+            <Text
+              style={[
+                styles.jerseyText,
+                {
+                  fontSize: theme.typography.jerseyNumberSize,
+                  color: theme.colors.text,
+                  fontFamily: theme.typography.fontFamily,
+                },
+              ]}>
+              {player?.shirtNumber}
+            </Text>
+          </View>
+        </View>
+
+        {/* Goal Assist Icon */}
+        {player?.isGoalAssist && (
+          <View
+            style={[
+              styles.assistIconWrapper,
+              I18nManager.isRTL ? { right: -8 } : { left: -8 },
+            ]}>
+            <Image
+              source={kickerIcon}
+              style={[
+                styles.assistIcon,
+                {
+                  width: theme.spacing.iconSize,
+                  height: theme.spacing.iconSize,
+                  borderRadius: theme.spacing.iconSize,
+                },
+              ]}
+            />
+          </View>
+        )}
+
+        {/* Own Goals */}
+        {player?.isOwnGoal && (
+          <View
+            style={[
+              styles.ownGoalsWrapper,
+              I18nManager.isRTL ? { right: -4 } : { left: -4 },
+            ]}>
+            <View
+              style={[
+                styles.ownGoalsContainer,
+                {
+                  height: theme.spacing.iconSize,
+                  borderRadius: theme.spacing.iconSize,
+                  backgroundColor: theme.colors.white,
+                  borderColor: theme.colors.error,
+                },
+                Number(player?.ownGoals) > 1 && I18nManager.isRTL
+                  ? { paddingLeft: 3 }
+                  : { paddingRight: 3 },
+              ]}>
+              <View
+                style={{
+                  flexDirection: I18nManager.isRTL ? 'row' : 'row-reverse',
+                }}>
+                {Number(player?.ownGoals) > 1 && (
+                  <View
+                    style={[
+                      I18nManager.isRTL ? { paddingRight: 2 } : { paddingLeft: 2 },
+                    ]}>
+                    <Text
+                      style={[
+                        styles.goalsText,
+                        {
+                          fontSize: theme.typography.goalCountSize,
+                          color: theme.colors.newError,
+                          fontFamily: theme.typography.fontFamilyBold,
+                        },
+                      ]}>
+                      {player?.ownGoals}
+                    </Text>
+                  </View>
+                )}
+                <Image
+                  source={ownGoalIcon}
+                  style={[
+                    styles.assistIcon,
+                    {
+                      width: theme.spacing.iconSize,
+                      height: theme.spacing.iconSize,
+                      borderRadius: theme.spacing.iconSize,
+                    },
+                  ]}
+                />
+              </View>
+            </View>
+          </View>
+        )}
+
+        {/* Goals Scored */}
+        {player?.isScorer && (
+          <View
+            style={[
+              styles.footballIconWrapper,
+              I18nManager.isRTL
+                ? { left: Number(player?.goals) > 1 ? -10 : -2.8 }
+                : { right: Number(player?.goals) > 1 ? -10 : -2.8 },
+            ]}>
+            <View
+              style={[
+                styles.goalsContainer,
+                {
+                  height: theme.spacing.iconSize,
+                  borderRadius: theme.spacing.iconSize,
+                  borderColor: theme.colors.success,
+                  backgroundColor: theme.colors.white,
+                },
+                Number(player?.goals) > 1 && I18nManager.isRTL
+                  ? { paddingRight: 3 }
+                  : { paddingLeft: 3 },
+              ]}>
+              <View
+                style={{
+                  flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
+                }}>
+                {Number(player?.goals) > 1 && (
+                  <View
+                    style={[
+                      I18nManager.isRTL ? { paddingLeft: 2 } : { paddingRight: 2 },
+                    ]}>
+                    <Text
+                      style={[
+                        styles.goalsText,
+                        {
+                          fontSize: theme.typography.goalCountSize,
+                          color: theme.colors.text,
+                          fontFamily: theme.typography.fontFamilyBold,
+                        },
+                      ]}>
+                      {player?.goals}
+                    </Text>
+                  </View>
+                )}
+                <Image
+                  source={footballIcon}
+                  style={[
+                    styles.footballIcon,
+                    {
+                      width: theme.spacing.iconSize,
+                      height: theme.spacing.iconSize,
+                      borderRadius: theme.spacing.iconSize,
+                    },
+                  ]}
+                />
+              </View>
+            </View>
+          </View>
+        )}
+
+        {/* Yellow Card */}
+        {player?.isYellowCard && (
+          <View
+            style={[
+              styles.yellowCardWrapper,
+              I18nManager.isRTL ? { left: -8 } : { right: -8 },
+            ]}>
+            <View
+              style={[
+                styles.yellowCardContainer,
+                {
+                  width: theme.spacing.iconSize,
+                  height: theme.spacing.iconSize,
+                  borderRadius: theme.spacing.iconSize,
+                  backgroundColor: theme.colors.white,
+                  borderColor: theme.colors.border,
+                },
+              ]}>
+              <View
+                style={[
+                  styles.yellowCard,
+                  {
+                    borderRadius: theme.borderRadius.card,
+                    backgroundColor: theme.colors.warning,
+                  },
+                ]}
+              />
+            </View>
+          </View>
+        )}
+
+        {/* Red Card */}
+        {player?.isRedCard && (
+          <View
+            style={[
+              styles.redCardWrapper,
+              I18nManager.isRTL ? { left: -8 } : { right: -8 },
+            ]}>
+            <View
+              style={[
+                styles.redCardContainer,
+                {
+                  width: theme.spacing.iconSize,
+                  height: theme.spacing.iconSize,
+                  borderRadius: theme.spacing.iconSize,
+                  backgroundColor: theme.colors.white,
+                  borderColor: theme.colors.border,
+                },
+              ]}>
+              <View
+                style={[
+                  styles.redCard,
+                  {
+                    borderRadius: theme.borderRadius.card,
+                    backgroundColor: theme.colors.error,
+                  },
+                ]}
+              />
+            </View>
+          </View>
+        )}
+
+        {/* Substitute Icon */}
+        {player?.isSubstitute && (
+          <View
+            style={[
+              styles.playerSubstituteWrapper,
+              I18nManager.isRTL ? { left: -4 } : { right: -4 },
+            ]}>
+            <View
+              style={[
+                styles.playerSubstituteContainer,
+                {
+                  width: theme.spacing.iconSize,
+                  height: theme.spacing.iconSize,
+                  backgroundColor: theme.colors.white,
+                  borderRadius: theme.spacing.iconSize,
+                },
+              ]}>
+              <Image
+                source={renewalIcon}
+                style={styles.playerSubstituteIcon}
+              />
+            </View>
+          </View>
+        )}
+      </View>
+
+      <Text
+        numberOfLines={1}
+        style={[
+          styles.playerName,
+          {
+            fontSize: theme.typography.playerNameSize,
+            color: theme.colors.text,
+            fontFamily: theme.typography.fontFamily,
+          },
+          nameStyle,
+        ]}>
+        {getFirst10Chars(player?.matchName)}
+      </Text>
+    </View>
+  );
+
+  if (onPress) {
+    return (
+      <TouchableOpacity onPress={() => onPress(player)} activeOpacity={0.7}>
+        {cardContent}
+      </TouchableOpacity>
+    );
+  }
+
+  return cardContent;
+};
+
+const styles = StyleSheet.create({
+  playerCard: {
+    position: 'absolute',
+    borderRadius: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  playerImageContainer: {
+    borderWidth: 1,
+  },
+  playerImage: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover',
+  },
+  jerseyNumber: {
+    position: 'absolute',
+    top: -4,
+    zIndex: 3,
+  },
+  jerseyNumberWrapper: {
+    borderWidth: 0.3,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  jerseyText: {
+    includeFontPadding: false,
+  },
+  assistIconWrapper: {
+    position: 'absolute',
+    top: 16,
+    zIndex: 3,
+  },
+  assistIcon: {},
+  ownGoalsWrapper: {
+    position: 'absolute',
+    bottom: -1,
+    zIndex: 3,
+  },
+  ownGoalsContainer: {
+    borderWidth: 0.3,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  footballIconWrapper: {
+    position: 'absolute',
+    top: -3,
+  },
+  goalsContainer: {
+    borderWidth: 0.3,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  goalsText: {
+    includeFontPadding: false,
+    lineHeight: 13.8,
+  },
+  footballIcon: {},
+  yellowCardWrapper: {
+    position: 'absolute',
+    top: 16,
+  },
+  yellowCardContainer: {
+    borderWidth: 0.3,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  yellowCard: {
+    width: 6,
+    height: 8,
+  },
+  redCardWrapper: {
+    position: 'absolute',
+    top: 16,
+  },
+  redCardContainer: {
+    borderWidth: 0.3,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  redCard: {
+    width: 6,
+    height: 8,
+  },
+  playerSubstituteWrapper: {
+    position: 'absolute',
+    bottom: -1,
+  },
+  playerSubstituteContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  playerSubstituteIcon: {
+    width: 7.6,
+    height: 7.6,
+  },
+  playerName: {
+    marginTop: 2,
+  },
+});
+
+export default React.memo(PlayerCard);

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export { default as FormationField } from './FormationField';
+export { default as PlayerCard } from './PlayerCard';

package/src/index.ts

@@ -0,0 +1,20 @@
+/**
+ * React Native Football Formation
+ * A highly customizable component for displaying football/soccer team formations
+ * @author Arbab Rafiq
+ */
+
+// Main Components
+export { FormationField, PlayerCard } from './components';
+
+// Types
+export * from './types';
+
+// Utilities
+export * from './utils';
+
+// Theme
+export * from './theme';
+
+// Assets
+export { defaultAssets } from './assets';