@crossbuildui/core

The core package for CrossBuild UI, providing essential theming capabilities, context providers, and base themed components for React Native applications.

Features

• Theming: Easily define and switch between light and dark themes, or provide your own custom theme.
• Themed Components: A set of basic React Native components (View, Text, Pressable, etc.) that automatically adapt to the current theme.
• Customizable: Override default theme values or provide a completely custom theme structure.
• Context-Based: Uses React Context to propagate theme information throughout your component tree.

Installation

1npm install @crossbuildui/core
2# or
3yarn add @crossbuildui/core

Peer Dependencies:

This package has react and react-native as peer dependencies. Ensure they are installed in your project.

1"peerDependencies": {
2  "react": ">=17.0.0",
3  "react-native": ">=0.60.0"
4}

Usage

1. Wrap your application with ThemeProvider:

   In your main App.tsx (or equivalent):

   1import React from 'react';
   2import { ThemeProvider, View, Text, defaultAppConfig } from '@crossbuildui/core';
   3// import { yourCustomTheme } from './path/to/yourCustomTheme'; // Optional
   4
   5const App = () => {
   6  // To use a custom theme, pass it to the ThemeProvider:
   7  // const myTheme = { ...defaultAppConfig, themes: { light: { colors: { primary: { DEFAULT: 'green' } } } } };
   8
   9  return (
   10    // <ThemeProvider theme={myTheme}> {/* With custom theme */}
   11    <ThemeProvider> {/* With default theme */}
   12      <MainScreen />
   13    </ThemeProvider>
   14  );
   15};
   16
   17const MainScreen = () => {
   18  // Use themed components
   19  return (
   20    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
   21      <Text>Hello from CrossBuild UI!</Text>
   22    </View>
   23  );
   24};
   25
   26export default App;

2. Using Themed Components and useTheme Hook:

   1import React from 'react';
   2import { View, Text, useTheme } from '@crossbuildui/core';
   3
   4const MyComponent = () => {
   5  const { colors, mode, layout, toggleTheme } = useTheme();
   6
   7  return (
   8    <View style={{ backgroundColor: colors.background, padding: layout.borderRadius.md }}>
   9      <Text style={{ color: colors.primary.DEFAULT }}>Current mode: {mode}</Text>
   10      {/* <Pressable onPress={toggleTheme}><Text>Toggle Theme</Text></Pressable> */}
   11    </View>
   12  );
   13};

Customization

You can provide a theme prop to the ThemeProvider to customize the appearance. The theme prop should be a partial AppConfig object. You can import defaultAppConfig and the AppConfig type to help structure your custom theme.

1// myCustomTheme.ts
2import { AppConfig, defaultAppConfig } from '@crossbuildui/core';
3
4export const myCustomTheme: Partial<AppConfig> = {
5  themes: {
6    light: {
7      colors: {
8        primary: {
9          ...defaultAppConfig.themes.light.colors.primary,
10          '500': '#FF5733',
11          'DEFAULT': '#FF5733',
12        },
13      },
14    },
15  },
16};

Then pass it to the provider: <ThemeProvider theme={myCustomTheme}>...</ThemeProvider>

Contributing

Please refer to the main repository at https://github.com/crossbuildui/components.

License

MIT