Provider

Provider responsible for taking care of Native-style navigability.

danger

If not imported correctly, Native-style will not work properly.

Usage

RNUIDevKitProvider

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

tip

We recommend that you download the Library project. In addition to having the ready-to-use code for all components, you will see the correct configuration and its full operation.

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

// RNUIDevKitProvider
import { RNUIDevKitProvider, Item } from 'react-native-ui-devkit';

const Stack = createNativeStackNavigator();
const App = () => {
  const Component = (props) => {
    return (
      <Item data={{ title: 'Item', onPress: async () => { } }} />
    )
  }

  return (
    <RNUIDevKitProvider theme={'auto'} backgroundColor={'both'}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Component" component={Component} />
        </Stack.Navigator>
      </NavigationContainer>
    </RNUIDevKitProvider>
  );
}

export default App;

Props

All properties, parameters and values that the component accepts are described here.

theme

Set whether the theme is automatic, light or dark.

Type: auto light dark

backgroundColor

Defines whether the system's native background color will be used.

Type: both android ios none