How Fig keeps millions eating safely with a five-engineer team and Expo

// Imports svg as a string
import thumbsUpIcon from '@assets/icons/thumbs-up.svg';
import { iconDefault } from '@utils/colors.util';

const Icon: FunctionComponent<IconProps> = ({
  iconSize,
  color,
  rotation,
  transform,
  height,
  width,
  ...otherProps
}) => {
  const parsedIconSize = !height && !width ? getIconSize(iconSize) : undefined;

  const sizeProps: { height?: NumberProp; width?: NumberProp } = {};
  if (parsedIconSize || height) {
    sizeProps.height = parsedIconSize ?? height;
  }
  if (parsedIconSize || width) {
    sizeProps.width = parsedIconSize ?? width;
  }

  // svg string is passed via `xml` in otherProps
  return (
    <SvgXml
      color={color ?? iconDefault}
      transform={rotation ? [{ rotate: `${rotation}deg` }] : transform}
      {...sizeProps}
      {...otherProps}
    />
  );
};

import { Image } from 'expo-image';
import styled, { css } from 'styled-components/native';

// Icons are `require`d from the assets folder, like other static assets
export const iconAssets = {
  thumbsUp: require('@assets/icons/thumbs-up.svg'),
  ...
} as const;

export const StyledImage = styled(Image)<{
  width?: number;
  height?: number;
  rotation?: number;
}>`
  ${({ width }) =>
    width !== undefined &&
    css`
      width: ${width}px;
    `}
  ${({ height }) =>
    height !== undefined &&
    css`
      height: ${height}px;
    `}
  ${({ rotation }) =>
    !!rotation &&
    css`
      transform: rotate(${rotation}deg);
    `}
`;

const Icon: FunctionComponent<IconProps> = ({
  iconSource: iconName,
  iconSize,
  height,
  width,
  rotation,
  color,
  ...otherProps
}) => {
  const parsedIconSize = !height && !width ? getIconSize(iconSize) : undefined;

  // Icons are referenced by iconAssets key, native image libraries handle the rendering
  return (
    <StyledImage
      tintColor={color}
      source={typeof iconName === 'object' ? iconName : iconAssets[iconName]}
      width={parsedIconSize ?? width}
      height={parsedIconSize ?? height}
      rotation={rotation}
      contentFit="contain"
      {...otherProps}
    />
  );
};

import * as Location from 'expo-location';

// Max age of a cached location in milliseconds
const locationMaximumAge = 3 * 60 * 1000; // 3 minutes
const locationRequiredAccuracy = 11; // meters, just above the LocationAccuracy.High
const approximateLocationRequiredAccuracy = 3001; // meters, just above the LocationAccuracy.Lowest

export const LocationProvider: FunctionComponent<
  PropsWithChildren<LocationProviderProps>
> = ({ children }) => {

  const [coordinates, setCoordinates] = useState<Coordinates>();
  const [approximateCoordinates, setApproximateCoordinates] =
    useState<Coordinates>();

  // You can alternatively use expo-location methods to request permission
  const {
    permissionStatus: locationPermissionStatus,
    triggerRequestPermission: triggerRequestLocationPermission,
  } = usePermission('location');

  const fetchCoordinates = useCallback(
    async (
      setNewCoords: (coords: Coordinates) => void,
      requiredAccuracy: number,
      locationAccuracy: Location.LocationAccuracy,
      maxAge?: number,
    ) => {
      try {
        // Try to use a cached location first
        let location = await Location.getLastKnownPositionAsync({
          requiredAccuracy,
          maxAge,
        });
        if (!location) {
          // If no cached location, get the current position, which may take some time
          location = await Location.getCurrentPositionAsync({
            accuracy: locationAccuracy,
          });
        }

        const newCoordinates = location?.coords;
        setNewCoords(newCoordinates);
        return newCoordinates;
      } catch (e) {
        logFigError('Error getting location', {
          error: e,
        });
      }
    },
    [mockLatitude, mockLongitude],
  );

  const updateLocation = useCallback(async () => {
    const [, newCoordinates] = await Promise.all([
      // Fetch approximate coordinates for faster loading
      fetchCoordinates(
        setApproximateCoordinates,
        approximateLocationRequiredAccuracy,
        Location.LocationAccuracy.Lowest,
      ),
      // Fetch more accurate coordinates for better accuracy
      fetchCoordinates(
        setCoordinates,
        locationRequiredAccuracy,
        Location.LocationAccuracy.High,
        locationMaximumAge,
      ),
    ]);
    return newCoordinates;
  }, [fetchCoordinates]);

  useEffectOnce(locationPermissionStatus === 'granted', () => {
    updateLocation();
  });

  return (
    <LocationContext.Provider value={{ coordinates, approximateCoordinates, updateLocation }}>
      {children}
    </LocationContext.Provider>
  );
};

import * as StoreReview from 'expo-store-review';

if (await StoreReview.hasAction()) {
  StoreReview.requestReview();
}