RN Inline to StyleSheet

A VS Code extension that converts React Native inline styles into StyleSheet.create — improving performance and keeping your code cleaner.

Why?

Inline styles in React Native are recreated on every render, which can hurt performance. Using StyleSheet.create is the recommended approach for static styles.

This extension lets you keep writing inline styles while coding, then extract them to a StyleSheet with one command.

Features

• Convert selected inline style objects to named StyleSheet entries
• Replace style={{ ... }} with style={styles.yourName}
• Automatically add or update import { StyleSheet } from 'react-native'
• Append to an existing StyleSheet.create block, or create a new one
• Works with .js, .jsx, .ts, and .tsx files

How to Use

1. Select the inline style object

import { View } from 'react-native';

const App = () => (
  <View
    style={{
      flex: 1,
      padding: 24,
      alignItems: 'center',
    }}
  />
);

Select the object inside style={{ ... }}:

{
  flex: 1,
  padding: 24,
  alignItems: 'center',
}

2. Run the command

Open the Command Palette:

• macOS: Cmd + Shift + P
• Windows / Linux: Ctrl + Shift + P

Search for: Extract Inline Style to StyleSheet

3. Enter a style name

When prompted, type a name — for example: container

Result

import { StyleSheet, View } from 'react-native';

const App = () => (
  <View style={styles.container} />
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    alignItems: 'center',
  },
});

Keyboard Shortcut

You can customize this in Preferences → Keyboard Shortcuts by searching for Extract Inline Style to StyleSheet.

Context Menu

Right-click in the editor and select Extract Inline Style to StyleSheet after selecting your style object.

Supported Patterns

• style={{ ... }} — double-brace form (most common)
• style={ ... } — single-brace form

Current Limitations

• Stylesheet variable is always named styles
• Does not support import * as RN from 'react-native' (e.g. RN.StyleSheet)

License

MIT