@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

npm install @crossbuildui/core
# or
yarn add @crossbuildui/core

Peer Dependencies:

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

"peerDependencies": {
  "react": ">=17.0.0",
  "react-native": ">=0.60.0"
}

Usage

1. Wrap your application with ThemeProvider:

   In your main App.tsx (or equivalent):

   import React from 'react';
   import { ThemeProvider, View, Text, defaultAppConfig } from '@crossbuildui/core';
   // import { yourCustomTheme } from './path/to/yourCustomTheme'; // Optional
   
   const App = () => {
     // To use a custom theme, pass it to the ThemeProvider:
     // const myTheme = { ...defaultAppConfig, themes: { light: { colors: { primary: { DEFAULT: 'green' } } } } };
   
     return (
       // <ThemeProvider theme={myTheme}> {/* With custom theme */}
       <ThemeProvider> {/* With default theme */}
         <MainScreen />
       </ThemeProvider>
     );
   };
   
   const MainScreen = () => {
     // Use themed components
     return (
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
         <Text>Hello from CrossBuild UI!</Text>
       </View>
     );
   };
   
   export default App;

2. Using Themed Components and useTheme Hook:

   import React from 'react';
   import { View, Text, useTheme } from '@crossbuildui/core';
   
   const MyComponent = () => {
     const { colors, mode, layout, toggleTheme } = useTheme();
   
     return (
       <View style={{ backgroundColor: colors.background, padding: layout.borderRadius.md }}>
         <Text style={{ color: colors.primary.DEFAULT }}>Current mode: {mode}</Text>
         {/* <Pressable onPress={toggleTheme}><Text>Toggle Theme</Text></Pressable> */}
       </View>
     );
   };

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.

// myCustomTheme.ts
import { AppConfig, defaultAppConfig } from '@crossbuildui/core';

export const myCustomTheme: Partial<AppConfig> = {
  themes: {
    light: {
      colors: {
        primary: {
          ...defaultAppConfig.themes.light.colors.primary,
          '500': '#FF5733',
          'DEFAULT': '#FF5733',
        },
      },
    },
  },
};

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