@squad-sports/react-native 1.3.1 → 1.3.3

package/README.md

@@ -17,8 +17,8 @@ npm install @squad-sports/react-native @squad-sports/core
 ```bash
 npm install react-native-gesture-handler react-native-safe-area-context \
   @react-navigation/native @react-navigation/native-stack \
-  @react-native-async-storage/async-storage \
-  react-native-sse expo-secure-store expo-av expo-image expo-image-picker
+  @react-native-async-storage/async-storage @gorhom/bottom-sheet \
+  recoil react-native-sse expo-secure-store expo-av expo-image
 ```
 
 ## Quick Start
@@ -83,7 +83,7 @@ Full integration guide, API reference, and configuration options:
 
 ## Requirements
 
-- React Native 0.73+
+- React Native 0.72+
 - React 18+
 - iOS 15+ / Android SDK 24+ (Android 7.0)
 - Expo SDK 50+ (if using Expo)

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@squad-sports/react-native",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "Squad Sports Experience SDK for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
-  "files": ["src"],
+  "files": [
+    "src"
+  ],
   "scripts": {
     "build": "echo 'RN package uses source directly'",
     "typecheck": "tsc --noEmit",

package/src/navigation/SquadNavigator.tsx

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { ActivityIndicator, View } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { useRecoilValue } from 'recoil';
 
 import { User } from '@squad-sports/core';
 import { useSquadSDK } from '../SquadProvider';
 import { Colors } from '../theme/ThemeContext';
 import { ScreenErrorBoundary } from '../components/ErrorBoundary';
+import { featureFlags } from '../state/features';
 
 // Auth Screens
 import { LandingScreen } from '../screens/auth/LandingScreen';
@@ -133,6 +135,7 @@ type NavigationState = 'loading' | 'auth' | 'onboarding' | 'main';
 export function SquadNavigator() {
   const sdk = useSquadSDK();
   const [navState, setNavState] = useState<NavigationState>('loading');
+  const features = useRecoilValue(featureFlags);
 
   useEffect(() => {
     const determineRoute = async () => {
@@ -232,12 +235,12 @@ export function SquadNavigator() {
             <Stack.Screen name="BlockedUsers" component={withErrorBoundary(BlockedUsersScreen, 'BlockedUsers')} />
             <Stack.Screen name="DeleteAccount" component={withErrorBoundary(DeleteAccountScreen, 'DeleteAccount')} />
             <Stack.Screen name="Events" component={withErrorBoundary(EventScreen, 'Events')} />
-            <Stack.Screen name="Wallet" component={withErrorBoundary(WalletScreen, 'Wallet')} />
+            {features.wallet && <Stack.Screen name="Wallet" component={withErrorBoundary(WalletScreen, 'Wallet')} />}
             <Stack.Screen name="Messaging" component={withErrorBoundary(MessagingScreen, 'Messaging')} />
             <Stack.Screen name="FreestyleCreate" component={withErrorBoundary(FreestyleCreationScreen, 'FreestyleCreate')} />
             <Stack.Screen name="PollResponse" component={withErrorBoundary(PollResponseScreen, 'PollResponse')} />
             <Stack.Screen name="Invite" component={withErrorBoundary(InviteScreen, 'Invite')} />
-            <Stack.Screen name="AddCallTitle" component={withErrorBoundary(AddCallTitleScreen, 'AddCallTitle')} />
+            {features.squadLine && <Stack.Screen name="AddCallTitle" component={withErrorBoundary(AddCallTitleScreen, 'AddCallTitle')} />}
             <Stack.Screen name="Freestyle" component={withErrorBoundary(FreestyleScreen, 'Freestyle')} />
             <Stack.Screen name="FreestyleListens" component={withErrorBoundary(FreestyleListensScreen, 'FreestyleListens')} />
             <Stack.Screen name="FreestyleReactions" component={withErrorBoundary(FreestyleReactionsScreen, 'FreestyleReactions')} />
@@ -246,17 +249,19 @@ export function SquadNavigator() {
             <Stack.Screen name="PollSummation" component={withErrorBoundary(PollSummationScreen, 'PollSummation')} />
             <Stack.Screen name="InvitationQrCode" component={withErrorBoundary(InvitationQrCodeScreen, 'InvitationQrCode')} />
             <Stack.Screen name="NetworkStatus" component={withErrorBoundary(NetworkStatusScreen, 'NetworkStatus')} />
-            <Stack.Screen
-              name="ActiveCall"
-              component={withErrorBoundary(CallScreen, 'ActiveCall')}
-              options={{ animation: 'slide_from_bottom', gestureEnabled: false }}
-            />
+            {features.squadLine && (
+              <Stack.Screen
+                name="ActiveCall"
+                component={withErrorBoundary(CallScreen, 'ActiveCall')}
+                options={{ animation: 'slide_from_bottom', gestureEnabled: false }}
+              />
+            )}
           </>
         )}
       </Stack.Navigator>
 
-      {/* Global overlay for incoming calls */}
-      <IncomingCallOverlay />
+      {/* Global overlay for incoming calls — only when Squad Line is enabled */}
+      {features.squadLine && <IncomingCallOverlay />}
     </>
   );
 }

package/src/screens/profile/ProfileScreen.tsx

@@ -10,9 +10,11 @@ import {
 import { useRoute, useNavigation } from '@react-navigation/native';
 import type { RouteProp } from '@react-navigation/native';
 
+import { useRecoilValue } from 'recoil';
 import type { RootStackParamList } from '../../navigation/SquadNavigator';
 import { useApiClient } from '../../SquadProvider';
 import { useTheme, Colors } from '../../theme/ThemeContext';
+import { featureFlags } from '../../state/features';
 import ScreenHeader from '../../components/ux/layout/ScreenHeader';
 import UserImage from '../../components/ux/user-image/UserImage';
 import Button from '../../components/ux/buttons/Button';
@@ -31,6 +33,7 @@ export function ProfileScreen() {
   const route = useRoute<Route>();
   const navigation = useNavigation();
   const apiClient = useApiClient();
+  const features = useRecoilValue(featureFlags);
   const { theme } = useTheme();
 
   const { userId } = route.params;
@@ -136,14 +139,16 @@ export function ProfileScreen() {
                 Message
               </Text>
             </Button>
-            <Button
-              style={styles.actionButtonOutline}
-              onPress={() =>
-                (navigation as any).navigate('AddCallTitle', { connectionId: userId })
-              }
-            >
-              <Text style={styles.actionButtonOutlineText}>Call</Text>
-            </Button>
+            {features.squadLine && (
+              <Button
+                style={styles.actionButtonOutline}
+                onPress={() =>
+                  (navigation as any).navigate('AddCallTitle', { connectionId: userId })
+                }
+              >
+                <Text style={styles.actionButtonOutlineText}>Call</Text>
+              </Button>
+            )}
           </View>
         )}
       </ScrollView>

package/src/state/features.ts

@@ -8,12 +8,12 @@ import { atom, selector } from 'recoil';
 export const featureFlags = atom<Record<string, boolean>>({
   key: 'squad-sdk:features:flags',
   default: {
-    squadLine: true,
+    squadLine: false,
     freestyle: true,
     messaging: true,
     polls: true,
     events: true,
-    wallet: true,
+    wallet: false,
   },
 });