Skip to content

Latest commit

 

History

History
119 lines (87 loc) · 3.31 KB

getting-started.md

File metadata and controls

119 lines (87 loc) · 3.31 KB
Raw

Getting Started

Collection of components that are accessible, composable, customizable from low level to build your own UI & Design System

🚀 Installation

# npm
npm install @adaptui/react-native-tailwind

# Yarn
yarn add @adaptui/react-native-tailwind

Make sure you have the latest react react-native react-native-reanimated react-native-gesture-handler is installed.

Also make sure to wrap your App with GestureHandlerRootView from react-native-gesture-handler, and AdaptUIProvider from @adaptui/react-native-tailwind

import React from "react";
import { SafeAreaView, StatusBar } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { AdaptUIProvider } from "@adaptui/react-native-tailwind";

const AppContainer = () => {
  const tailwind = useTheme();

  return (
    <GestureHandlerRootView style={tailwind.style("flex-1")}>
      <NavigationContainer>
        <SafeAreaProvider>
          // your app here
        </SafeAreaProvider>
      </NavigationContainer>
    </GestureHandlerRootView>
  );
};

const App = () => {
  return (
    <AdaptUIProvider>
      <AppContainer />
    </AdaptUIProvider>
  );
};

export default App;

Further Instructions

Fonts Loading (Android)

Our components look well with the Inter font on Android.

You can pick the fonts from here

And link and load it up in your React Native project using expo-font library if using Expo.

The library works well with bare React Native workflow too.

Check out blogs on getting to know about Adding Fonts to React Native in our Publication.

Haptics

Haptics is a technology that allows devices to provide tactile feedback to users, simulating the sense of touch. So it can be used to enhance the user experience in a variety of ways, such as providing feedback when a button is pressed, alerting the user to an event, or guiding the user through a task.

In AdaptUI we have enabled the Haptics to all our Tappable components (Button, Tag, Radio, Checkbox and Switch) through expo-haptics.

You will have to install this as a dependency to get your haptics working on our Tappable components.

You can use the haptics through our hook useHaptics

Simple Usage

Code below will render an Avatar

See Avatar docs for more info.

import React from "react";
import { Avatar, useTheme } from "@adaptui/react-native-tailwind";

function AvatarComponentScreen() {
  const tailwind = useTheme();

  return (
    <View
      style={tailwind.style("flex-1 justify-center items-center bg-white-900")}
    >
      <Avatar style={tailwind.style("my-1")} />
    </View>
  );
}

Component Docs