Mobile Expert | Bootspring Docs

The Mobile Expert agent specializes in mobile application development for iOS, Android, and cross-platform solutions.

Expertise Areas#

React Native - Components, navigation, native modules
Expo - Managed workflow, EAS Build, OTA updates
Flutter - Widgets, state management, platform channels
Native Development - Swift/SwiftUI, Kotlin/Jetpack Compose
Mobile Patterns - Offline-first, push notifications, deep linking
App Store - Submission, guidelines, optimization

Usage Examples#

React Native App#

Use the mobile-expert agent to create a React Native app structure for a food delivery app.

Response includes:

Project structure
Navigation setup
State management
API integration patterns

Expo Setup#

Use the mobile-expert agent to set up Expo with EAS Build for our team.

Response includes:

Expo configuration
EAS Build setup
Environment management
OTA update strategy

Mobile UI#

Use the mobile-expert agent to build a swipeable card component like Tinder.

Response includes:

Gesture handling
Animation implementation
Performance optimization
Platform-specific code

React Native Patterns#

Project Structure#

src/
├── app/                    # App entry, providers
├── components/             # Reusable components
│   ├── ui/                 # Base UI components
│   └── features/           # Feature-specific components
├── screens/                # Screen components
├── navigation/             # Navigation configuration
├── hooks/                  # Custom hooks
├── services/               # API, storage, etc.
├── store/                  # State management
├── utils/                  # Utilities
├── types/                  # TypeScript types
└── constants/              # App constants

// navigation/RootNavigator.tsx
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Stack = createNativeStackNavigator<RootStackParamList>();
const Tab = createBottomTabNavigator<MainTabParamList>();

function MainTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          const icons = {
            Home: focused ? 'home' : 'home-outline',
            Search: focused ? 'search' : 'search-outline',
            Profile: focused ? 'person' : 'person-outline',
          };
          return <Ionicons name={icons[route.name]} size={size} color={color} />;
        },
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Search" component={SearchScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

export function RootNavigator() {
  const { isAuthenticated } = useAuth();

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        {!isAuthenticated ? (
          <Stack.Screen name="Auth" component={AuthNavigator} />
        ) : (
          <>
            <Stack.Screen name="Main" component={MainTabs} />
            <Stack.Screen name="Details" component={DetailsScreen} />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Custom Hooks#

// hooks/useApi.ts
export function useApi<T>(
  fetcher: () => Promise<T>,
  deps: any[] = []
) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    let cancelled = false;

    setLoading(true);
    fetcher()
      .then((result) => {
        if (!cancelled) {
          setData(result);
          setError(null);
        }
      })
      .catch((err) => {
        if (!cancelled) {
          setError(err);
        }
      })
      .finally(() => {
        if (!cancelled) {
          setLoading(false);
        }
      });

    return () => {
      cancelled = true;
    };
  }, deps);

  return { data, loading, error, refetch: () => fetcher() };
}

// hooks/useKeyboard.ts
export function useKeyboard() {
  const [keyboardHeight, setKeyboardHeight] = useState(0);
  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);

  useEffect(() => {
    const showListener = Keyboard.addListener('keyboardDidShow', (e) => {
      setKeyboardHeight(e.endCoordinates.height);
      setIsKeyboardVisible(true);
    });

    const hideListener = Keyboard.addListener('keyboardDidHide', () => {
      setKeyboardHeight(0);
      setIsKeyboardVisible(false);
    });

    return () => {
      showListener.remove();
      hideListener.remove();
    };
  }, []);

  return { keyboardHeight, isKeyboardVisible };
}

Expo Configuration#

app.json / app.config.js#

// app.config.js
export default {
  expo: {
    name: 'MyApp',
    slug: 'my-app',
    version: '1.0.0',
    orientation: 'portrait',
    icon: './assets/icon.png',
    splash: {
      image: './assets/splash.png',
      resizeMode: 'contain',
      backgroundColor: '#ffffff',
    },
    ios: {
      bundleIdentifier: 'com.mycompany.myapp',
      supportsTablet: true,
      config: {
        usesNonExemptEncryption: false,
      },
    },
    android: {
      package: 'com.mycompany.myapp',
      adaptiveIcon: {
        foregroundImage: './assets/adaptive-icon.png',
        backgroundColor: '#ffffff',
      },
    },
    plugins: [
      'expo-router',
      [
        'expo-notifications',
        {
          icon: './assets/notification-icon.png',
          color: '#ffffff',
        },
      ],
    ],
    extra: {
      apiUrl: process.env.API_URL,
      eas: {
        projectId: 'your-project-id',
      },
    },
  },
};

EAS Build Configuration#

// eas.json
{
  "cli": {
    "version": ">= 5.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": {
        "simulator": true
      }
    },
    "preview": {
      "distribution": "internal",
      "channel": "preview"
    },
    "production": {
      "channel": "production"
    }
  },
  "submit": {
    "production": {
      "ios": {
        "appleId": "your@email.com",
        "ascAppId": "123456789"
      },
      "android": {
        "serviceAccountKeyPath": "./google-service-account.json"
      }
    }
  }
}

Mobile-Specific Patterns#

Offline-First#

// services/offline.ts
import NetInfo from '@react-native-community/netinfo';
import AsyncStorage from '@react-native-async-storage/async-storage';

class OfflineQueue {
  private queue: Array<{ action: string; data: any }> = [];

  async addToQueue(action: string, data: any) {
    this.queue.push({ action, data });
    await AsyncStorage.setItem('offline_queue', JSON.stringify(this.queue));
  }

  async processQueue() {
    const state = await NetInfo.fetch();
    if (!state.isConnected) return;

    const stored = await AsyncStorage.getItem('offline_queue');
    if (!stored) return;

    const queue = JSON.parse(stored);
    for (const item of queue) {
      try {
        await this.processItem(item);
      } catch (error) {
        console.error('Failed to process queue item:', error);
      }
    }

    await AsyncStorage.removeItem('offline_queue');
  }

  private async processItem(item: { action: string; data: any }) {
    // Process based on action type
  }
}

Push Notifications#

// services/notifications.ts
import * as Notifications from 'expo-notifications';

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: true,
  }),
});

export async function registerForPushNotifications() {
  const { status: existingStatus } = await Notifications.getPermissionsAsync();
  let finalStatus = existingStatus;

  if (existingStatus !== 'granted') {
    const { status } = await Notifications.requestPermissionsAsync();
    finalStatus = status;
  }

  if (finalStatus !== 'granted') {
    throw new Error('Permission not granted');
  }

  const token = await Notifications.getExpoPushTokenAsync();
  return token.data;
}

Sample Prompts#

Task	Prompt
Setup	"Set up a React Native app with Expo and TypeScript"
Navigation	"Create a stack + tab navigator with auth flow"
Gestures	"Build a pull-to-refresh list with smooth animations"
Notifications	"Implement push notifications with deep linking"
Performance	"Optimize FlatList for 1000+ items"

Configuration#

// bootspring.config.js
module.exports = {
  agents: {
    customInstructions: {
      'mobile-expert': `
        - Use Expo managed workflow when possible
        - Follow platform-specific guidelines
        - Optimize for performance and battery
        - Handle offline scenarios
        - Test on both iOS and Android
      `,
    },
  },
};

Frontend Expert - React patterns
UI/UX Expert - Mobile UI design
Performance Expert - Mobile optimization