Installation: A Step-by-Step Guide

Learn how to seamlessly install and set up FlexNative UI for your React Native + Expo project.

Create project

Run the init command to start the setup process:

Terminal
npx flexnative-cli init

Configure flexnative.json

You will be asked a few questions to configure flexnative.json:

Terminal
Where is your tsconfig.json? (tsconfig.json) 
What path should map to '@/*'? (./src/*)
Which theme do you want to use for now? (default)

After the command is finished, you will see a message like this:

Terminal
✅ Created/updated flexnative.json
✅ Created: constants/colors.ts
✅ Created: hooks/theme/use-color-scheme.ts
✅ Created: theme/theme-colors.ts

🎉 Init finished!

Configure the root layout

In your RootLayout, integrate the theme colors:

app/_layout.tsx
import { SafeAreaView, KeyboardAvoidingView, Platform } from "react-native";
import { getThemeColors } from "@/theme/theme-colors"; 
import { Stack } from "expo-router";

export default function RootLayout() {
const colors = getThemeColors(); 

return (
  <SafeAreaView
    style={{
      flex: 1,
      backgroundColor: colors["background"], 
    }}
  >
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      keyboardVerticalOffset={Platform.OS === "ios" ? 0 : 0}
    >
      <Stack
        screenOptions={{
          headerShown: false,
          contentStyle: {
            backgroundColor: colors["background"], 
          },
        }}
      >
        <Stack.Screen name="(with-tabs)" />
      </Stack>
    </KeyboardAvoidingView>
  </SafeAreaView>
);
}

Handle nested layouts (if you have them)

If you use nested layouts (e.g., Tabs), ensure you define the background styles explicitly. Defining explicit styles for nested layouts ensures a consistent look across all screens:

app/(with-tabs)/_layout.tsx
import { Tabs } from "expo-router";
import { getThemeColors } from "@/theme/theme-colors"; 

export default function Layout() {
const colors = getThemeColors(); 

return (

<Tabs
screenOptions={{
  sceneStyle: {
    backgroundColor: colors['background'] 
  },
  tabBarStyle: {
    backgroundColor: colors['background'], 
    borderTopColor: colors['muted'] 
  }
}}
/>
); }

That's it

You can now start adding components to your project.

Terminal
npx flexnative-cli add "https://registry.flexnative.com/c/button.json"

The command above will add the Button component to your project. You can then import it like this:

Importing
import { Button } from '@/components/ui/button';
Applying
<Button variant="default" label="Default" />

Project Structure

Here’s the updated project structure to align with your setup:


Project Structure
your-project/
├── app/
│   ├── (with-non-tabs)/
│   │   └── index.tsx        # Layout inheriting from root
│   ├── (with-tabs)/
│   │   ├── _layout.tsx      # Nested layout with tabs
│   │   └── index.tsx
├── constants/
│   └── colors.ts          # Theme colors
├── hooks/
│   └── theme/
│       └── use-color-scheme.ts
├── theme/
│   └── theme-colors.ts     # Theme utilities

You're all set! Your FlexNative UI for React Native is ready.