issam-seghir

Image source

https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png

Try resize it!

• ![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png | width=100)

issam-seghir

const MAX_FILE_SIZE = 500000;
const ACCEPTED_IMAGE_TYPES = ["image/jpeg", "image/jpg", "image/png", "image/webp"];

const RegistrationSchema = z.object({
  profileImage: z
    .any()
    .refine((files) => files?.length == 1, "Image is required.")
    .refine((files) => files?.[0]?.size <= MAX_FILE_SIZE, `Max file size is 5MB.`)
    .refine(
      (files) => ACCEPTED_IMAGE_TYPES.includes(files?.[0]?.type),

issam-seghir

this is my implementation with RHF + Zod for both Client + Server side validation with server actions :

"use client";
....
const formSchema = z.object({
        .....
});
    const [loading, setLoading] = useState(false);

issam-seghir

Link to Youtube video: https://youtu.be/QxcRmsGHcWY

Manual steps:

• Download and install Victor Mono font
• Update VSCode setting as bellow:
  • font size, line height and font weight are optional and you can update them as you prefer

{
  "editor.fontSize": 13,
  "editor.lineHeight": 24,

issam-seghir

import {Dimensions, FlatList, View} from 'react-native';

const screenWidth = Dimensions.get('window').width;
const numColumns = 2;
const gap = 5;

const availableSpace = screenWidth - (numColumns - 1) * gap;
const itemSize = availableSpace / numColumns;

const renderItem = ({item}) => {

issam-seghir

const TELEGRAM_BOT_TOKEN = '110201543:AAHdqTcvCH1vGWJxfSeofSAs0K5PALDsaw'; // https://core.telegram.org/bots#creating-a-new-bot


export const verifyTelegramWebAppData = async (telegramInitData: string): boolean => {
  // The data is a query string, which is composed of a series of field-value pairs.
  const encoded = decodeURIComponent(telegramInitData); 
  
  
  // HMAC-SHA-256 signature of the bot's token with the constant string WebAppData used as a key.
  const secret = crypto