Theming & UI

Twinbloc uses uniwind (Tailwind CSS) for styling, making it easy to build responsive and dark-mode ready interfaces.

uniwind

We use uniwind which allows you to use standard Tailwind CSS classes in your React Native components. It provides a seamless developer experience by bringing the utility-first CSS framework to native mobile development.

For comprehensive documentation, visit the uniwind documentation.

1import { View, Text } from 'react-native';
2
3export function Card() {
4  return (
5    <View className="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-sm">
6      <Text className="text-lg font-bold text-slate-900 dark:text-white">
7        Hello World
8      </Text>
9    </View>
10  );
11}

Platform Specific Styles

uniwind allows you to apply styles conditionally based on the platform using the ios:, android:, and web: prefixes. This is extremely useful for handling platform-specific UI nuances.

1<View className="p-4 ios:pt-12 android:pt-8 bg-white">
2  <Text className="text-base ios:font-semibold android:font-bold">
3    Platform Specific Padding & Font Weight
4  </Text>
5</View>

Responsive Design

Build responsive layouts that adapt to different screen sizes using standard Tailwind breakpoints.

Breakpoints

sm: min-width 640px
md: min-width 768px
lg: min-width 1024px
xl: min-width 1280px

1<View className="w-full md:w-1/2 lg:w-1/3 bg-blue-500">
2  <Text className="text-white">Responsive Width</Text>
3</View>

Dark Mode

Dark mode is supported out of the box. The app automatically detects the system theme, but you can also manually toggle it.

1import { useSelectedTheme } from '@/hooks/general/use-selected-theme';
2
3function ThemeToggle() {
4  const { selectedTheme, setSelectedTheme } = useSelectedTheme();
5  
6  return (
7    <Button onPress={() => setSelectedTheme(selectedTheme === 'dark' ? 'light' : 'dark')}>
8      {selectedTheme === 'dark' ? 'Switch to Light' : 'Switch to Dark'}
9    </Button>
10  );
11}

Custom Colors

You can customize the color palette in tailwind.config.js.

tailwind.config.js

1module.exports = {
2  theme: {
3    extend: {
4      colors: {
5        primary: '#3b82f6',
6        secondary: '#64748b',
7        // ...
8      }
9    }
10  }
11}