v1.0.0

React Native

Bridge Sitka design tokens and glass aesthetics to mobile apps using React Native.

Installation

bash

npm install @sitka/react-native framer-motion-react-native

Usage

Import the Sitka theme provider to wrap your application. This provides access to tokens and glass materials.

tsx

import { SitkaProvider, Colors, Theme } from '@sitka/react-native';

export default function App() {
  return (
    <SitkaProvider theme={Theme.dark}>
      <YourApp />
    </SitkaProvider>
  );
}

Tokens

Tokens are available as a typed object for use in your StyleSheet.

tsx

import { StyleSheet } from 'react-native';
import { Theme } from '@sitka/react-native';

const styles = StyleSheet.create({
  container: {
    padding: Theme.space[4],
    backgroundColor: Theme.colors.dark.surface,
    borderRadius: Theme.radius.lg,
  },
  text: {
    color: Theme.colors.dark.textPrimary,
    fontSize: Theme.typography.fontSize.base,
  }
});

Glass on Mobile

Use the BlurView component (powered by expo-blur or similar) to achieve the Sitka glass look.

tsx

import { BlurView } from '@sitka/react-native';

<BlurView 
  intensity={Theme.materials.blur.lg} 
  style={styles.glassPanel}
>
  <Text>Liquid Glass Mobile</Text>
</BlurView>