DEV Community: Raymond

Setting Up Tailwind in React Native SDK 51 with NativeWind

Raymond — Mon, 04 Nov 2024 16:27:23 +0000

Introduction

This guide provides a streamlined setup to integrate Tailwind CSS in your new React Native SDK 51 project. Follow each step closely, and let’s get your project styled in no time.

Folder Structure

Begin by reviewing your project’s folder structure. In the "app" folder, you’ll need to add some new files for Tailwind to work properly.

Step 1: Create a Global CSS File

Create a global.css file inside the "app" folder and add any global styling you may need here.

css
/* app/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;``

Step 2: Configure the Main Index Component

In /app/(tabs)/index.tsx, add the following base code:

import React from 'react'; import { Text, View } from 'react-native'; export default function Index() { return ( <View className="flex-1 items-center justify-center bg-white"> <Text className="text-lg font-bold">Hello, Tailwind!</Text> </View> ); }

This file will help you set up Tailwind classes, but initially, you may encounter an error for the className attribute.

Step 3: Fix `className` Error with NativeWind Types

To resolve the className error, create a nativewind-env.d.ts file with a reference to NativeWind types:

/// <reference types="nativewind/types" />

This extends React Native types to support Tailwind.

Step 4: Update `_layout.tsx` for Global CSS

In /app/_layout.tsx, add the following code to import your global CSS:

import { Slot } from "expo-router"; import "../app/global.css"; export default Slot;

Ensure that this is properly set up to apply global styling throughout your project.

Step 5: Configure `tailwind.config.js`

Replace the content of tailwind.config.js with the following code, ensuring that the paths to all component files are included:

/** @type {import('tailwindcss').Config} */ module.exports = { content: ["./app/**/*.{js,jsx,ts,tsx}"], presets: [require("nativewind/preset")], theme: { extend: {}, }, plugins: [], };

Step 6: Configure `babel.config.js`

Add the necessary configurations for NativeWind in babel.config.js:

module.exports = function (api) { api.cache(true); return { presets: [ ["babel-preset-expo", { jsxImportSource: "nativewind" }], "nativewind/babel", ], }; };

Step 7: Configure `metro.config.js`

Finally, if you don’t have a metro.config.js file, create one and add the following code:

const { getDefaultConfig } = require("expo/metro-config"); const { withNativeWind } = require("nativewind/metro"); const config = getDefaultConfig(__dirname); module.exports = withNativeWind(config, { input: "./app/global.css" });

This ensures Tailwind CSS compatibility with Expo and NativeWind.

Conclusion

You’re all set! Tailwind CSS is now integrated into your React Native SDK 51 project. Happy coding, and enjoy building with Tailwind's powerful styling capabilities!

QR Code Generator with React and Firebase Authentication

Raymond — Wed, 10 Jan 2024 12:02:25 +0000

QR Code-Generator

Description:
This QR Code Generator project, built with React, offers a feature-rich experience for users to create customized QR codes. The application includes functionalities such as image upload, color selection, and various QR code styles. Additionally, it integrates with Firebase for user authentication, allowing users to log in, sign up, and personalize their experience.

Key Features:

User Authentication: Utilizing Firebase authentication, users can log in and sign up securely. The project displays the user's profile picture if available.

Dynamic Styling: The application provides users with a selection of QR code styles, allowing them to choose from different visual representations. The styles are dynamically applied to the generated QR codes.

Dark Mode Support: Users can toggle between light and dark modes for a personalized viewing experience.

Image Upload and Color Selection: Users can upload images to embed in QR codes and choose colors for customization. This adds a personal touch to the generated QR codes.

QR Code Generation: The core functionality of the project involves generating QR codes based on user inputs, including URL or text, chosen style, and optional image and color.

Cookie Consent: The project incorporates a cookie consent feature, providing users with the option to accept or reject cookies. This enhances transparency and user control over their data.

Buy Me Coffee Option: A "Buy Me Coffee" button is included, allowing users to support the developer through a PayPal donation link.

Responsive Design: The project is designed to be responsive, ensuring a seamless experience across different devices.

Instructions:

QR Code Customization: Users can customize QR codes by uploading images, selecting colors, and choosing from various styles.

Dark Mode Toggle: The application supports both light and dark modes, providing users with a visually comfortable environment.

Cookie Consent: Users are prompted to accept or reject cookies, enhancing transparency and compliance with privacy standards.

Support the Developer: Users have the option to support the developer by making a donation through the "Buy Me Coffee" button.

Explore the features of this QR Code Generator to create unique and visually appealing QR codes for your needs.

Business Card Generator!

Raymond — Mon, 13 Nov 2023 14:47:19 +0000

Hey DEV Community 👋,

Are you tired of the same old, uninspiring business card designs? Do you want to stand out in the professional crowd with a card that truly represents your brand? Look no further! 🚀

🌟 Introducing Creative Minds Graphics Pty Ltd's Business Card Generator!

Unleash your creativity and leave a lasting impression with our cutting-edge Business Card Generator. Here's why it's a game-changer:

✨ Dual-Sided Magic: Design both the front and back of your card, showcasing your uniqueness.

✨ Diverse Templates: Choose from a plethora of professionally designed templates to match your style.

✨ Customization at Your Fingertips: Personalize colors, fonts, logos, and more for a truly distinctive look.

✨ Easy Editing: Our user-friendly interface ensures effortless card creation - no design skills required!

✨ High-Quality Printing: We guarantee your cards will look as good in print as they do on the screen.

🚀 How It Works:

Choose Your Template: Select a design that resonates with your brand.
Customize: Add your company logo, and

contact info, and sprinkle a bit of your personality.
Preview: See your creation come to life with our real-time preview feature.
Print or Share: Print at your convenience or share digitally with ease.
💼 Why settle for ordinary? Impress clients, colleagues, and connections with your standout business cards!

Ready to elevate your professional image? Join the future of business card creation now! 🌐 Business Crad Generator

🎉 Don't miss out on making a lasting impression. Try Creative Minds Graphics Pty Ltd's Business Card Generator today! 🎉

Feel free to drop your thoughts, questions, or card designs in the comments below. Let's revolutionize the way we network and leave a memorable mark together! 🔥