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.

React Native

Follow these steps to set up and run the Dynamic Layer React Native project.

1. Prerequisites

Visual Studio Code

Download and install the latest version of Visual Studio Code

Recommended extensions:

React Native Tools

ESLint

Prettier

Node.js

Download and install the latest version of Node.js

Verify installation by running:

node

node --version

npm

npm --version

Git

Install Git for version control

Verify installation:

git

git --version

2. Installation

2.1. Clone the Repository

Download and install the latest version of Visual Studio Code

git clone

git clone https://github.com/dynamiclayer/dynamic-layer-react-native.git

cd dynamic-layer-react-native

2.2. Install Dependencies

Using npm:

npm

npm install

Or using yarn:

yarn

yarn install

3. Running the Project

3.1. Start the Development Server

Using npm:

npm

npm start

Or using yarn:

yarn

yarn start

3.2. Running on Different Platforms

Press "a" to run on Android emulator/device

Press "i" to run on iOS simulator (macOS only)

Press "w" to run in web browser

4. Additional Information

The development server will start at "http://localhost:19002"

Use the Expo Go app on your mobile device to test the app by scanning the QR code

Make sure your development machine and mobile device are on the same network

5. Troubleshooting

If you encounter any issues:

5.1. Clear the Metro bundler cache:

npm

npm start --reset-cache

5.2. Make sure all dependencies are properly installed:

npm

rm -rf node_modules
npm install

5.3. Make sure all dependencies are properly installed:

Verify that your development environment is properly set up according to the prerequisites

6. Usage Guide

6.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

6.2. Components

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

6.2.1. Common Components

CustomButton.js

CustomButtonDock.js

CustomButtonIcon.js

CustomCard.js

CustomInput.js

NotificationBadge.js

6.2.2. Navigation Components

CustomTabNavigator.js - Custom bottom tab navigation

CustomTopNavigation.js - Custom top navigation bar

6.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.

6.2.4. Screens

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

"Main/" - Primary application screens

"PreviewScreens/" - Preview and demonstration screens

6.2.5. Assets

The "assets/" directory contains:

Icons (organized by category in "icons/")

Images and placeholder content

SVG components in "icons/svg_js/"

6.2.6. Customization

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

Global styles in "src/style.js"

7. Usage Guide

7.1. Adding New Screens

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

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

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

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>

Using Navigation:

javascript

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

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