NativeFlow: A Tailwind-Like, Object-Based React Native UI Library 🚀

Jay Singh — Sun, 22 Sep 2024 04:26:10 +0000

In the world of React Native development, UI styling can sometimes be a pain point, especially for those used to the flexibility and simplicity of utility-first CSS frameworks like Tailwind. You know the drill — hours spent wrestling with babel setups, styles, tweaking tiny details, and hoping it looks good on both iOS and Android. 🥲

Many existing solutions rely on wrapping Tailwind with custom Babel setups or trying to make it work inside React Native's ecosystem. But (let’s be real), these approaches often add extra complexity, unsupported properties, or completely miss out on platform-specific APIs.

That’s where NativeFlow comes in. 🦸‍♂️

What is NativeFlow?

NativeFlow is a React Native UI library with a syntax that closely resembles Tailwind but departs in one key way: it uses objects instead of classes. 🎉 This decision aligns with how React Native handles styling natively – because let's face it, RN prefers objects, unlike the web, where classes dominate.

So... Why does this matter? 🤔

Most Tailwind-inspired React Native libraries use a “wrap-and-parse” technique. They require a Babel setup, parse your styles, and inject them as objects. While this may work, it brings along its own set of baggage:

Unsupported Properties: Features like web animated properties aren’t natively supported in React Native, yet many libraries attempt to force them in, leading to unexpected bugs.
Platform-Specific Limitations: Libraries often forget about properties unique to Android (looking at you, elevation) or iOS (what happened to borderCurve?), leaving your app with inconsistent styling across devices.

NativeFlow's Key Advantage: It Just Works

NativeFlow leverages React Native's natural strengths by allowing styling directly as objects, ensuring every property it supports is fully compatible with React Native’s platform-specific APIs.

Zero Setup Hassles: There’s no need for additional Babel setups or complex configurations. NativeFlow works out-of-the-box.
Object-Based Syntax: The familiarity of object-based styling with the utility-first approach of Tailwind is preserved, making it intuitive for developers who are already accustomed to Tailwind.
True React Native Support: No funky hacks. Everything NativeFlow does is fully supported by React Native’s ecosystem. It’s native-born, no forced migrations.
Advanced Platform-Specific Properties: NativeFlow embraces platform-specific styling options, like elevation, shadow properties, and borderCurve, allowing developers to build platform-optimized user interfaces easily.
Fully Open Source: NativeFlow is 100% open-source, with well-organized docs. Contributions are welcome!

How Does NativeFlow Work? ⚙️

NativeFlow provides utility objects similar to Tailwind – the default styling format in React Native. This makes it faster, more reliable, and true to the framework's core.

Here’s a quick example of using NativeFlow:



import { View, Text } from "react-native";
import { flex, justify, text} from "nativeflowcss";

const App = () => {
  return (
    <View style={[flex.f_1, justify.center]}>
      <Text style={[text.center, text.fs_2xl, text.color_amber_600 ]}>
        Hello World
      </Text>
    </View>
  );
};

export default App;

✨ See the resemblance to Tailwind? But wait... there’s more! NativeFlow is specifically designed to work flawlessly with React Native’s unique layout system.

Want to see it in action? A snippet on a Todo List (yeah canon event) built using React Native, styled using NativeFlow, check it out here - Expo Snack

Why NativeFlow should be Trending

With React Native’s rise as a go-to for cross-platform development, tools that simplify the process are in demand. NativeFlow’s object-based syntax and deep integration with native properties offer a perfect balance between simplicity and power. No extra setup, no missing features – just plug and play.

Benefits At A Glance:

Familiar Tailwind-Like Syntax: Reuse your Tailwind knowledge while building native mobile apps.
Seamless Native Support: NativeFlow fully supports both Android and iOS without additional workarounds.
Active, Open-Source Project: NativeFlow is community-driven, and developers are encouraged to collaborate.

Conclusion

If you're tired of dealing with configuration issues, unsupported properties, or just want to streamline your UI development, NativeFlow is the library you’ve been waiting for.

Try NativeFlow today, and experience the difference:

GitHub repository (🌟pleaseee)
Official Documentation

How-to add popup(thumbnail) images using HTML

Jay Singh — Wed, 01 May 2024 20:16:42 +0000

I recently got curious about why always my Lighthouse Reports were 😔 in SEO section, it had something to do with meta description.

Low SEO score because of meta description requirement

Which somehow felt to me like the things that pop up when we post those links on WhatsApp, X, etc. and the rest was ✨curiosity✨

Requirements for the Image to Display to work correctly

Dimensions: 256×256
Format: jpg
Should be served via an HTTP(S)-URL

But Jay I don't wanna fiddle around with cdn static hosting services?

Option 1: Shortcut using Github's hosting

Make a new private repository
Add a folder for ./assets and an index.html
Get your desired image in the ./assets
Also add it in index html using <img> (To ensure Github serves it as a static asset)
Host it using Github Pages
Inspect > Sources > assets > copy link address of the img

Option 2: Include it in your local deploy

Caution: When running a bundler the file will be renamed and you cannot predict the name causing it to fail to work

Add it to your prod's assets section
It'll serve as a static, get the link from there

Where to add these Edits?

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/icon.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Updates would be included here in the HEAD tag -->
  <title>OpennRésumé</title>
</head>

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

</html>

index.html in project where you desire thumbnail

What Changes?

<!-- MS, fb & Whatsapp -->

<!-- MS Tile - for Microsoft apps-->
<meta name="msapplication-TileImage" content="http://www.example.com/image01.jpg">    

<!-- FB & Whatsapp -->

<!-- Site Name, Title, and Description to be displayed -->
<meta property="og:site_name" content="The Rock Photo Studio">
<meta property="og:title" content="The Rock Photo Studio in Florida">
<meta property="og:description" content="The best photo studio for your events">
<meta name="description" content="Description to show in search Engines." />

<!-- Image to display -->
<!-- Replace   «example.com/image01.jpg» with your own -->
<meta property="og:image" content="http://www.example.com/image01.jpg">

<!-- No need to change anything here -->
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpeg">

<!-- Size of the image. Any size up to 300. Anything above 256px will not work in WhatsApp -->
<meta property="og:image:width" content="256">
<meta property="og:image:height" content="256">

<!-- Website to visit when clicked on FB or WhatsApp-->
<meta property="og:url" content="http://www.example.com">

A perfect SEO rating

Copy and paste this code and don't forget to edit all those fields for your preferred text! Code for how I added this thumbnail to my latest project, you can also try it out by pasting my link in your favourite social media to see how it works opennresume.netlify.app

Previews

$whoami

I'm a freshman student pursuing a Bachelor's in Information Technology, started to code a year ago, learning WebDev with The Odin Project, check out my Github(mathdebate09) for more of my progress.

References

P.S. - Should I write a step-by-step article about my React-App toy project OpennRésumé which generates a pdf for entered fields?

also, I use ARCH LINUX btw

DEV Community: Jay Singh