> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Mobile Examples

> Explore Para's mobile integration examples for React Native and Expo

export const Card = ({imgUrl, title, description, href, horizontal = false, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  const handleClick = e => {
    e.preventDefault();
    if (newTab) {
      window.open(href, '_blank', 'noopener,noreferrer');
    } else {
      window.location.href = href;
    }
  };
  return <div className={`not-prose relative my-2 p-[1px] rounded-xl transition-all duration-300 ${isHovered ? 'bg-gradient-to-r from-[#FF4E00] to-[#874AE3]' : 'bg-gray-200'}`} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <a href={href} onClick={handleClick} className={`not-prose flex ${horizontal ? 'flex-row' : 'flex-col'} font-normal h-full bg-white overflow-hidden w-full cursor-pointer rounded-[11px] no-underline`}>
        {imgUrl && <div className={`relative overflow-hidden flex-shrink-0 ${horizontal ? 'w-[30%] rounded-l-[11px]' : 'w-full'}`} onClick={e => e.stopPropagation()}>
            <img src={imgUrl} alt={title} className="w-full h-full object-cover pointer-events-none select-none" draggable="false" />
            <div className="absolute inset-0 pointer-events-none" />
          </div>}
        <div className={`flex-grow px-6 py-5 ${horizontal ? 'w-[70%]' : 'w-full'} flex flex-col ${horizontal && imgUrl ? 'justify-center' : 'justify-start'}`}>
          {title && <h2 className="font-semibold text-base text-gray-800 m-0">{title}</h2>}
          {description && <div className={`font-normal text-gray-500 re leading-6 ${horizontal || !imgUrl ? 'mt-0' : 'mt-1'}`}>
              <p className="m-0 text-xs">{description}</p>
            </div>}
        </div>
      </a>
    </div>;
};

Para offers a collection of mobile examples to help you integrate our technology into your React Native and Expo applications. These examples demonstrate minimal implementation requirements with clean, focused code that you can easily adapt to your specific application needs.

## Para Mobile Examples

Browse our mobile examples showcasing Para integration with React Native and Expo:

<CardGroup cols={2}>
  <Card horizontal title="React Native" imgUrl="/images/v2/framework-react-native.png" href="https://github.com/getpara/examples-hub/tree/2.0.0/mobile/with-react-native" description="Various Para SDKs and Signing features in a React Native app" />

  <Card horizontal title="Expo" imgUrl="/images/v2/framework-expo.png" href="https://github.com/getpara/examples-hub/tree/2.0.0/mobile/with-expo-one-click-login" description="Para integration in an Expo-managed React Native app" />
</CardGroup>

## Need Something Specific?

Don't see an example for your use case? Para's team is eager to create new examples to help you integrate with different libraries, third-party features, or providers.
