Native UI Development Kit for React Native

Before you get started with our React Native UI DevKit package, we'll provide a simplified overview.

What is React Native UI DevKit?

React Native UI DevKit is a free component library developed with the Native-style concept that delivers a native interface for each platform.

Action, Button, Card, Checkbox, Collapsible, Divider, FlatList, Icon, Item, List, Radio, Separator, Swipeable (iOS), Switch, TextInput

Where does it apply?

React Native UI DevKit components can be used simply and efficiently in your applications developed in React Native.

Transform the experience of users who use or will use your application into a native navigability experience according to the platform and version for Android and iOS.

Getting started

Installation

1 npm install react-native-ui-devkit

Peer Dependencies

• react-native-gesture-handler: https://www.npmjs.com/package/react-native-gesture-handler
• react-native-device-info: https://www.npmjs.com/package/react-native-device-info
• react-native-vector-icons: https://www.npmjs.com/package/react-native-vector-icons
• react-native-sfsymbols: https://www.npmjs.com/package/react-native-sfsymbols
• react-native-haptic-feedback: https://www.npmjs.com/package/react-native-haptic-feedback
• react-native-reanimated: https://www.npmjs.com/package/react-native-reanimated

Refer to the documentation for each package. Each package has its own installation instructions that should be followed to ensure a correct and smooth integration. Keep in mind that the individual installation guidelines for each package are essential for the success of the project.

1 npm install react-native-gesture-handler react-native-device-info react-native-vector-icons react-native-sfsymbols react-native-haptic-feedback react-native-reanimated

From React Native 0.60 and higher, linking is automatic. So you don't need to run react-native link.

If you're on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking.

1 cd ios && pod install

Provider

The provider has to be imported and has to wrap its routes due to Native-style and light and dark modes.

1import React from 'react';
2import { NavigationContainer } from '@react-navigation/native';
3import { createNativeStackNavigator } from '@react-navigation/native-stack';
4
5// React Native UI DevKit
6import { RNUIDevKitProvider, Item } from 'react-native-ui-devkit';
7
8const Stack = createNativeStackNavigator();
9const App = () => {
10  const Component = (props) => {
11    return (
12      <Item data={{ title: 'Item', onPress: async () => { } }} />
13    )
14  }
15
16  return (
17    <RNUIDevKitProvider theme={'auto'} backgroundColor={'both'} >
18      <NavigationContainer>
19        <Stack.Navigator>
20          <Stack.Screen name="Component" component={Component} />
21        </Stack.Navigator>
22      </NavigationContainer>
23    </RNUIDevKitProvider>
24  );
25}
26
27export default App;

Test

1 npx react-native run-android

Migrating from your component to React Native UI DevKit components

See how easy it is to migrate your components to the Native-style version of React Native UI DevKit components.

1// From
2import React from "react";
3import { Text, TouchableOpacity } from "react-native";
4
5const App = () => {
6  return (
7    <TouchableOpacity onPress={async () => { }}>
8        <Text>Button</Text>
9    </TouchableOpacity>
10  )
11};
12
13export default App;

1// To
2import React from "react";
3
4// React Native UI DevKit
5import { Button } from "react-native-ui-devkit";
6
7const App = () => {
8  return (<Button data={{ title: 'Button', onPress: async () => { } }} />)
9};
10
11export default App;

Features

See here all the features that the React Native UI DevKit has.

Provider

• RNUIDevKitProvider

Components

• Action
• Button
• Card
• Checkbox
• Collapsible
• Divider
• FlatList
• Icon
• Item
• List
• Radio
• Separator
• Swipeable (iOS)
• Switch
• TextInput

Fonts

• TitleFontSize
• MediumFontSize
• DescriptionFontSize

Functions

• useColors()
• marginTop()
• marginBottom()
• marginHorizontal()
• paddingTop()
• paddingBottom()
• paddingHorizontal()
• borderRadius()
• androidOldVersion()
• iosOldVersion()

Library

The React Native UI DevKit Library is a project that covers the use of all components of the React Native UI DevKit package in addition to the light and dark theme. You can use it to check the behavior of each component in the real world and facilitate implementation in your projects.

Learn more...

Layout

The React Native UI DevKit Layout is a project that includes the use of some standard layouts in applications. You can use some ready-made layouts to have a starting point and facilitate implementation in your projects.

Learn more...

Continuous Innovation

The React Native UI DevKit continuous innovation protocol is constantly evolving through research and development. It consists of two steps: the first is the analysis of the Android and iOS platforms and their versions and updates, to test and deploy the latest updates. The second is our testing ground to validate new features and improvements before they are implemented in the React Native UI DevKit package update.

Contributing

If you have any questions, suggestions or complaints please send us an email at feedback@reactnativeuidevkit.com.

License

Licensed under The MIT License.
Copyright © 2023 React Native UI DevKit - All rights reserved.

See license for more information.