For designers we provide a huge Figma file containing a variety of components, styles and variables. Here you will learn how to install the file correctly in order to use our file.

1. Install the latest Version

1. Download the Component library on Gumroad.

2. Download the latest Figma Version.

2. Set up your Figma Project

1. Open Figma.

2. Open‍

Drafts.

3. Click the + Create new button in the top right corner. A drop-down menu will open.

4. There you the have to click on

Import.

5. Wait until the component library is installed.

6. Open the file and use our components for your new project.

Image 2.1 : Import the file in Figma

SwiftUI

For developers we provide a huge SwiftUI file containing a variety of components, styles and variables. Here you will learn how to install the file correctly in order to use our file.

Getting Started with the Free Version

1. Create a new iOS Project

1. Open Xcode and create a new iOS project.

2. Select SwiftUI as the interface when prompted.

2. Add DynamicLayer SDK via Swift Package Manager

1. Go to the Dynamic Layer SDK GitHub repository.

2. Copy the repository URL.

3. In your Xcode project, navigate to File -> Add Package Dependencies.

4. Paste the copied URL into the search bar.

5. Select the Dynamic Layer SDK from the search results.

6. Click Add Package to download and integrate the SDK into your project.

3. Import and Use the SDK

1. In your SwiftUI file (e.g., ContentView.swift), import the SDK at the top:

Swift

import Dynamiclayer

2. You can now use the SDK's features in your SwiftUI views or logic.

4. Example Usage

Here’s a simple example to get started:

Swift

import SwiftUI
import Dynamiclayer
‍
struct ContentView: View {
var body: some View {
VStack {
DLButton(
size: .lg,
type: .primary,
label: "Button"
)
}
.padding()
}
}
‍
#Preview {
ContentView()
}

5. Next Steps

Explore the SDK's documentation for available features and APIs.

Refer to the GitHub repository for examples and advanced usage.

That’s it! You’re ready to use the Dynamic Layer SDK in your SwiftUI project.

Getting Started with Dynamic Layer Pro

1. Create a new iOS Project

1. Open Xcode and create a new iOS project.

2. Select SwiftUI as the interface when prompted.

2. Download and Add Dynamic Layer Pro

1. Download the ZIP file of the pro version.

2. Unzip the downloaded file and copy the folder.

3. Paste the folder into your Xcode project's root directory.

3. Add the SDK Locally via Swift Package Manager

1. In your Xcode project, navigate to File -> Add Package Dependencies.

2. Click the Add Local button.

3. Select the folder you pasted into your Xcode project directory.

4. Xcode will add the DynamicLayer Pro SDK to your project.

4. Import and Use the SDK

1. In your SwiftUI file (e.g., ContentView.swift), import the SDK at the top:

Swift

import Dynamiclayer

2. You can now use the SDK's features in your SwiftUI views or logic.

5. Example Usage

Here’s a simple example to get started:

Swift

import SwiftUI
import Dynamiclayer
‍
struct ContentView: View {
var body: some View {
VStack {
DLButton(
size: .lg,
type: .primary,
label: "Button"
)
}
.padding()
}
}
‍
#Preview {
ContentView()
}

6. Next Steps

Explore the SDK's documentation for available features and APIs.

Refer to the GitHub repository for examples and advanced usage.

That’s it! You’re ready to use the Dynamic Layer SDK in your SwiftUI project.

Jetpack Compose

1. Step

1. Download android studio by clicking on this link.

2. After download complete install the android studio.

2. Step

1. Open Dynamic Layer components GitHub repository by clicking on this link.

2. After visit on this page click on "code".

3. Then click on download to zip.

4. After download, complete unzip the code file to a specific directory.

3. Step

1. Open your android studio and click on open.

2. Select project folder and click on open.

3. After open wait for gradle build.

4. Step

1. After gradle complete now run the project to run project on emulator go into Tools > DeviceManager.

2. Device manager window appears click on + button and then click on create virtual device.

3. Now Select your device and click on next.

4. Select API 34 and click on next.

5. Now click on finish.

6. The process is complete now click on Run arrow button on top side and project will run on emulator.

1. Install the following Programms

1. Homebrew

Download and install the latest version of Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Copy

2. Git

Download and install the latest version of Git

brew install git

Copy

3. Flutter

Download and install the latest version of Flutter

brew install flutter

Copy

4. Cocoapods

Download and install the latest version of Cocoapods

brew install cocoapods

Copy

5. Android licenses

Download and install the latest version of Android licenses

flutter doctor --android-licenses

Copy

6. Node

Download and install the latest version of Node

brew install node

Copy

7. Claude Code

Download and install the latest version of Claude Code

curl -fsSL https://claude.ai/install.sh | bash

Copy

2. Install Xcode

Download and install the latest version of Xcode

Install Xcode

3. Install Android Studio

Download and install the latest version of Android Studio

Install Android Studio

4. Setup Xcode

1. Setup Xcode

Setup the latest version of Xcode

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

Copy

sudo xcodebuild -runFirstLaunch

Copy

xcodebuild -downloadPlatform iOS

Copy

5. Usage Guide

5.1. Project Structure

The project follows a modular architecture with the following structure:

animations/

Custom animation components

components/

Reusable UI components

config/

Configuration files

navigation/

Navigation setup

screens/

Application screens

style.js

Global styles

5.2. Components

Located in "src/components/", the app includes several reusable components:

5.2.1. Common Components

CustomButton.js

CustomButtonDock.js

CustomButtonIcon.js

CustomCard.js

CustomInput.js

NotificationBadge.js

5.2.2. Navigation Components

CustomTabNavigator.js - Custom bottom tab navigation

CustomTopNavigation.js - Custom top navigation bar

5.2.3. Navigation

The app's navigation is managed through "src/navigation/AppNavigator.js", which sets up the routing structure. It utilizes React Navigation for seamless screen transitions.

5.2.4. Screens

The application screens are organized in "src/screens/" with two main directories:

"Main/" - Primary application screens

"PreviewScreens/" - Preview and demonstration screens

5.2.5. Assets

The "assets/" directory contains:

Icons (organized by category in "icons/")

Images and placeholder content

SVG components in "icons/svg_js/"

5.2.6. Customization

You can customize the app's appearance and behavior through:

Global styles in "src/style.js"

6. Usage Guide

6.1. Adding New Screens

6.1.2. Option 1: Adding a Tab Screen

To add a new screen as a tab in the bottom navigation:

Create your screen component in "src/screens/Main/":

JavaScript

// src/screens/Main/NewScreen.js

import React from "react";
import { View, Text } from "react-native";
import { CustomButton } from "../../components/common/CustomButton";

export const NewScreen = () => {
return (
<View>
<Text>New Screen</Text>
<CustomButton text="Click Me" onPress={() => {}} />
</View>
);
};

Copy

Add the screen to the tab configuration in "src/navigation/AppNavigator.js":

JavaScript

import HomeScreen from "../screens/Main/HomeScreen";
import TemplateScreen from "../screens/Main/templateScreen";
import NewScreen from "../screens/Main/NewScreen";

const tabScreens = [
{ name: "Home", component: HomeScreen, icon: HomeIcon, notifications: 0 },
{ name: "Templates", component: TemplateScreen, icon: TemplatesIcon, notifications: 5 },
{ name: "NewTab", component: NewScreen, icon: YourIcon, notifications: 0 },
];
function MainTabScreen() {
return <CustomTabNavigator type="md" screens={tabScreens} />;
}

Copy

6.1.3. Option 2: Adding a Default Screen

Create your screen component in "src/screens/Main/" or "src/screens/PreviewScreens/":

JavaScript

import React from "react";
import { View, Text } from "react-native";
import { CustomButton } from "../../components/common/CustomButton";

export const NewScreen = () => {
return (
<View>
<Text>New Screen</Text>
<CustomButton text="Click Me" onPress={() => {}} />
</View>
);
};

Copy

Add the screen to the MainStack navigator in "src/navigation/AppNavigator.js":

JavaScript

<MainStack.Navigator screenOptions={defaultScreenOptions}>
<MainStack.Screen name="MainTabs" component={MainTabScreen} options={{
headerShown: false }} />
<MainStack.Screen name="NewScreen" component={NewScreen} options={{ title: "New Screen" }} />
</MainStack.Navigator>

Copy

Using Navigation:

JavaScript

import { useNavigation } from "@react-navigation/native";
const MyComponent = () => {
const navigation = useNavigation();
return (
<CustomButton title="Go to Screen" onPress={() =>
navigation.navigate("ScreenName")} />
);
};

Copy

Discover more content

Figma

Github

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Get Pro Version