DEV Community

deepak kumar
deepak kumar

Posted on

Ship mobile apps faster with React-Native-Blossom-UI

React-Native open-source community provides very few UI library which is also great, customizable and up to date. And I faced the same problem and so I decided to make a new one which will be rich in components and also provides a full customizability, that's where the blossom-ui comes in.

You can skip this article and directly run to the Documentation website.

Blossom UI helps you to create an awesome UI on mobile and web platform. It's based on custom design system and it's totally configurable.Main features that it provides -

Base components - This contains all the basic components that react-native provides.
Theme Support - Out of the box Theme support with dark theme.
Customizability - You can customize all the components to match to your UI need.
Icons Support - react-native-vector-icons support out of the box.

Installation

Start with installing the components library.

npm install @react-native-blossom-ui/components
Enter fullscreen mode Exit fullscreen mode

Next install the react-native-vector-icons as it's a peer dependency of the library.

Now wrap your Root Component (Navigation Container) into the BlossomThemeProvider in your App.ts file

import React, { useState } from "react";
import { BlossomThemeProvider } from "@react-native-blossom-ui/components";

import lightTheme from "../lightTheme.json";
import darkTheme from "../darkTheme.json";
import options from "../options.json";
import { MyAppContainer } from "src/navigation";

export default function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <BlossomThemeProvider
      theme={isDark ? darkTheme : lightTheme}
      isDark={isDark}
      options={options}
    >
      <MyAppContainer />
    </BlossomThemeProvider>
  );
}
Enter fullscreen mode Exit fullscreen mode

Now, from here you can use all the 20+ components (as of now) to build and awesome blossom UI.
Let's make a login form real quick.

import React, { useCallback, useState } from "react";

import {
  Button,
  Checkbox,
  Text,
  TextInput,
  View,
} from "@react-native-blossom-ui/components";

export function Login() {
  const [isLoading, setIsLoading] = useState(false);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const [isEmailError, setIsEmailError] = useState(false);
  const [isPasswordError, setIsPasswordError] = useState(false);

  const onLoginPress = useCallback(() => {
    if (!email) {
      setIsEmailError(true);
      return;
    }

    if (!password) {
      setIsPasswordError(true);
      return;
    }

    setIsEmailError(false);
    setIsPasswordError(false);
    // Call the api
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
    }, 1500);
  }, []);

  return (
    <View style={{ margin: 16 }}>
      <Text typography="h4">Login</Text>
      <TextInput
        label="Email"
        placeholder="abc@gmail.com"
        value={email}
        onChangeText={setEmail}
        containerStyle={{ marginVertical: 8 }}
        error={isEmailError ? "Please enter your email" : ""}
      />
      <TextInput
        label="Password"
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        containerStyle={{ marginVertical: 8 }}
        secureTextEntry
        error={isPasswordError ? "Please enter a valid password" : ""}
      />
      <Checkbox status="primary" size="small" label="Remember Me" />
      <Button
        isLoading={isLoading}
        title="Login"
        style={{ width: "100%", marginVertical: 16 }}
        onPress={onLoginPress}
      />
    </View>
  );
}
Enter fullscreen mode Exit fullscreen mode

Here's the result of it.

Image description

Bonus Component

You can also use the in-built Select/MultiSelect component which come out of the box with theme support too. For example -


export function SelectClearable() {
  const [selectedValue, setSelectedValue] = useState<number | undefined>(-1)

  return (
    <Select
      options={OPTIONS}
      value={selectedValue}
      clearable
      onValueChange={(value) => setSelectedValue(value)}
    />
  )
}
Enter fullscreen mode Exit fullscreen mode

Thanks for reading, please star this repository if it looks awesome and a good step in react-native community.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay