Default Styles

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.

Releases

Features

Licensing

Overview

Enable Default Styles

Usage

Supported Components

Style Specificity

​Overview

​Enable Default Styles

​Usage

​Supported Components

​Style Specificity

Overview

Enable Default Styles

Usage

Supported Components

Style Specificity