Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.uniwind.dev/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

Default styles let you define baseline styles for React Native components directly in your CSS file. This is useful when you want every component of a given type to share the same default styling without repeating class names.
Default styles are available only in Uniwind Pro starting from version 1.2.0.

​
Enable Default Styles

Default styles are experimental and disabled by default. Enable them in your Metro config:
metro.config.js
module.exports = withUniwindConfig(config, {
  experimental: {
    defaultStyles: true,
  },
});
This feature is experimental. It may not work for every use case and may include breaking changes in a future release.

​
Usage

Add component selectors to your CSS file:
global.css
View {
  border-color: var(--color-primary);
}
This applies border-color: var(--color-primary) to every View in your app. You can also use default styles to define typography for every Text component:
global.css
Text {
  font-family: Inter;
  font-size: 16px;
}
This applies font-family: Inter and font-size: 16px to every Text in your app.

​
Supported Components

Default styles support the following React Native components:
Component
ActivityIndicator
FlatList
Image
ImageBackground
InputAccessoryView
KeyboardAvoidingView
Modal
Pressable
RefreshControl
SafeAreaView
ScrollView
SectionList
Switch
Text
TextInput
TouchableHighlight
TouchableNativeFeedback
TouchableOpacity
TouchableWithoutFeedback
View
VirtualizedList

​
Style Specificity

Default styles act as baseline styles. More specific styles, such as className styles applied directly to a component, can override them.