dev-resources.site

for different kinds of informations.

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

Published at

1/12/2025

Installation

Start with installing the components library.

npm install @react-native-blossom-ui/components

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>
  );
}

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="[email protected]"
        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>
  );
}

Here's the result of it.

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)}
    />
  )
}