FarazPatankar

.Spinner {
  animation: rotate 1.3s linear infinite;
}

.SpinnerContainer-large {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

FarazPatankar

const SPINNER_SIZES = {
  small: 30,
  medium: 50,
  large: 70,
};

const STROKE_WIDTHS = {
  small: 4,
  medium: 5,
  large: 6,

FarazPatankar

<div class="bg-gray-200 py-10 px-5 mx-auto max-w-lg md:max-w-4xl lg:max-w-5xl w-full">
  <p class="text-gray-900 text-lg font-medium">Last 30 days</p>
  <div class="grid gap-5 grid-rows-3 md:grid-cols-3 md:grid-rows-1 mt-5">
    <div class="flex flex-col bg-white rounded-md shadow">
      <div class="py-5 flex items-center px-5">
        <div class="h-12 w-12 rounded-lg bg-indigo-700 items-center justify-center flex">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            class="text-white h-6 w-6 fill-current"

FarazPatankar

<div class="flex flex-col bg-white py-3 px-5 rounded-lg shadow-md max-w-2xl mx-auto my-10 w-full">
  <h4 class="text-lg font-medium text-gray-900">Delete your account</h4>
  <p class="text-gray-600 text-sm">
    Once you delete your accoubt, you will lose all data associated with it.
  </p>
  <div>
    <button class="bg-red-200 text-red-700 font-semibold rounded py-2 px-3 text-sm mt-4">
      Delete account
    </button>
  </div>

FarazPatankar

<div class="flex flex-col items-center bg-white py-10 px-5 w-full">
  <h1 class="text-center text-3xl font-bold leading-tight">
    <span>Ready to dive in?</span>
    <br />
    <span>Start your free trial today.</span>
  </h1>
  <div class="flex space-x-4 mt-5">
    <button class="bg-indigo-700 text-white font-medium rounded py-3 px-5">Get started</button>
    <button class="bg-indigo-200 text-indigo-700 font-medium rounded py-3 px-5">Learn more</button>
  </div>

FarazPatankar

<div class="grid grid-rows-3 md:grid-rows-1 md:grid-cols-3 md:col-gap-5 row-gap-5 md:col-gap-0 py-10 px-5 bg-white">
  <div class="flex flex-col">
    <div class="h-16 md:h-10 w-16 md:w-10 bg-indigo-700 rounded-md flex justify-center items-center">
      <svg
        class="h-10 md:h-6 w-10 md:w-6 text-white fill-current"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
      >
        <path d="M4.06 13a8 8 0 0 0 5.18 6.51A18.5 18.5 0 0 1 8.02 13H4.06zm0-2h3.96a18.5 18.5 0 0 1 1.22-6.51A8 8 0 0 0 4.06 11zm15.88 0a8 8 0 0 0-5.18-6.51A18.5 18.5 0 0 1 15.98 11h3.96zm0 2h-3.96a18.5 18.5 0 0 1-1.22 6.51A8 8 0 0 0 19.94 13zm-9.92 0c.16 3.95 1.23 7 1.98 7s1.82-3.05 1.98-7h-3.96zm0-2h3.96c-.16-3.95-1.23-7-1.98-7s-1.82 3.05-1.98 7zM12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20z"/>
      </svg>

FarazPatankar

<manifest
  xmlns:android="http://schemas.android.com/apk/res/android"
  <!-- You need this line to use the tools namespace -->
  xmlns:tools="http://schemas.android.com/tools"
  package="YOUR_PACKAGE_NAME"
>
  <uses-permission tools:node="remove" android:name="android.permission.ACCESS_COARSE_LOCATION"/>
</manifest>

FarazPatankar

{
  "expo": {
    "assetBundlePatterns": ["assets/fonts/*", "assets/svgs/*", "assets/*"],
  }
}

FarazPatankar

...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                storeFile file(MYAPP_UPLOAD_STORE_FILE)
                storePassword MYAPP_UPLOAD_STORE_PASSWORD
                keyAlias MYAPP_UPLOAD_KEY_ALIAS

FarazPatankar

import { KeyboardAvoidingView } from 'react-native';

// Based on the behavior you need, you might have to update the prop accordingly.
// https://docs.expo.io/versions/latest/react-native/keyboardavoidingview/#behavior
<KeyboardAvoidingView behavior="padding">
	// Existing UI code
</KeyboardAvoidingView>