Tagging elements on your React Native Project

Learn how to tag the various elements on your mobile app design for your React Native app. Follow along as we convert this Figma design into a React Native Travel App

It is easy to use Locofy to turn your mobile app design to code. You can do so by tagging your elements to turn them into working live components.

Types of Tags for React Native

Global Tags

These tags are for global elements that are across all screens

Other Tags

These tags are available for individual screens

Tagging your Buttons

In this guide, you’ll see examples of tagging for common items that you’ll find in most mobile apps

1. Select the button on your design and tag it as a “Button.” Afterward, click on the library and variation you used in your design.

2. In the Properties tab, you can further customize the attributes for your button.

3. Next, in the Layout settings under Step 3: Styling and Layout (opens in a new tab) of the plugin, you can customize alignment and size, including settings such as percentage widths, as well as minimum and maximum width.

4. Then, in the styling tab, you can further customize your button’s color, border and shadow.

5. Finally, in the actions tab Step 4: Add Actions (opens in a new tab) of the plugin, you can define what happens when a user presses the button. Select from triggers such as “Press” and “Long Press,” and choose an action.

6. Click done. You have successfully tagged your React Native button.

Tagging your Input

1. Select the input frame on your design and tag it as an “Input”. Then, select the library and variation which you used in your design.

2. In the Properties settings, further customize the attributes for your input. For libraries such as React Native Paper, you add icons and choose from over 1000 material icons by clicking on the link below the icon section.

3. Next, in the Layout settings under Step 3: Styling and Layout (opens in a new tab) of the plugin, you can customize alignment and size, including settings such as percentage widths, as well as minimum and maximum width.

4. Then, in the styling tab, you can set up active and inactive colour, along with other settings such as typography.

5. Click done. You have successfully tagged your text input

Tagging your Bottom Tabs, Drawer Menus and Top Tabs

These tags have very similar workflows. You will need to identify the designs for the active and inactive state for each tab/menu item, as well as the content you want to show.

1. Select the element on your canvas and tag is correspondingly as a “Bottom Tab”, “Drawer Menu” or “Top Tab”

2. In the properties page, you’ll notice that some of the icons are automatically detected based on your selection. Use the swap button if you need to swap your active and normal state icons

3. You will need to select and locate the correct layer on Figma for each of your Active and Normal state icons.

4. Then, you will need to indicate the Figma frame to show for each of the tabs. Press locate and select the frame you want to display for each respective tab.

5. Once all of the tabs have been configured, click done. You have successfully tagged your Bottom tab, Drawer menu, or Top Tab.

To view specific guides for each of the tags, you can follow these links:

Tagging your Scroll Views

1. Scroll views are usually used when the contents exceed the width of the device frame.

2. To set up your scroll view, use a frame that fits within the size of your design. The contents of the frame can be allowed to overflow out of the frame as seen in the image below.

3. Then, select the frame which contains the overflowing content, and tag it as a “Scroll View”

4. In the properties settings, set your scrolling direction to horizontal or vertical. You can also toggle the scroll indicators and choose the indicator style.

5. Click done. You have now successfully set up your scroll view.

Tagging your Status Bars

1. Select the status bar in your design and tag it as a “Status bar”. The option can be found in the Global Tags section of the Locofy plugin.

2. You will then be taken to the properties tab. Here you can indicate if this status bar should use your global setting or override these settings or if you want to use custom settings for this specific status bar.

3. You can then customize the background colour and toggle translucency for your status bar. Settings applied on the Global level will apply for all status bars. While settings applied on the Custom level only applies for the selected status bar.

4. Click done. You have now successfully tagged your status bar.

Note: After tagging your status bars, they will not be visible in the Plugin Preview and on the Locofy Builder Prototype. You will see the status bars when you run the app in your development simulator or on your physical device.

By tagging your layers, you can bring your design elements to life. Locofy is continuously adding support for new tags and components for you to use in your app.

If you have any requests for additional tag, please share your suggestions with us at support@locofy.ai