templates

animatePresence.tsx

//· <AnimatePresence> ·

"use client"

import { AnimatePresence, motion } from "framer-motion"

const opened = true

// ...

const render = () => {
  return (
    <AnimatePresence>
      {opened && (
        <motion.div
          initial={{ height: 0 }}
          animate={{ height: "200px" }}
          exit={{ height: 0 }}
          transition={{ duration: 0.2, ease: "easeIn" }}
        >
          <p>Content</p>
        </motion.div>
      )}
    </AnimatePresence>
  )
}

component.tsx

"use client"

import { useState } from "react"

import { cn } from "@/utils/cn"

interface Props {
  children: React.ReactNode
}

//· Component ·

export const Component = ({ children }: Props) => {
  return { children }
}

componentNative.tsx

//· <componentNative> ·

import React, { useState } from "react"

import { cn } from "@/utils/cn"

interface Props {
  children: React.ReactNode
}

//- <componentNative> -

export const Component = ({ children }: Props) => {
  return { children }
}

haptics.tsx

//· EXPO haptics ·

import * as Haptics from "expo-haptics"

Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)

sqlite_kv.tsx

// expo SQLite key-value storage example

import Storage from "expo-sqlite/kv-store"

await Storage.setItem("key", JSON.stringify({ entity: "value" }))
const value = await Storage.getItem("key")
const entity = JSON.parse(value)
console.log(entity) // { entity: 'value' }

// sync methods are also available

// The storage API is the default export, you can call it Storage, AsyncStorage, or whatever you prefer.
import Storage from "expo-sqlite/kv-store"

Storage.setItemSync("key", "value")
const value = Storage.getItemSync("key")

translate.tsx

//· translate ·

//- layout -
import "@/utils/i18n"

//- root file -
// ./i18n.ts
import i18n from "i18next"
import { initReactI18next } from "react-i18next"

const resources = {
  es: {
    translation: {
      signInNeedEmail: "Necesitas un email",
      userNotRegistered: ["### AÚN NO TE HAS REGISTRADO"].join("\n"),
    },
  },
  en: {
    translation: {
      signInNeedEmail: "You need an email",
      userRegistered: [
        "### You are already registered",
        "If you unlink your account, you will not have access to some options, but your data and lists will still be accessible on this device.",
      ].join("\n"),
    },
  },
}
i18n.use(initReactI18next).init({
  lng: "es",
  fallbackLng: "en",
  resources,
  interpolation: {
    escapeValue: false, // not needed for react as it does escape per default to prevent xss!
  },
})

export default i18n

//- component file -

import { useTranslation } from "react-i18next"

const { t } = useTranslation()

// <Text>{t("hello")}</Text>
// t("hello")