Platform-Specific Code for Vega OS

When building apps for Vega OS, you might need to write platform-specific code that only runs on Vega or organize your code to handle differences between platforms. This guide explains how to use platform-specific extensions and the Platform module on Vega OS.

Platform Module

React Native for Vega provides a Platform module to detect the platform on which your app is running. On Vega OS, you can use this module to execute Vega-specific code.

Platform.OS

The Platform.OS property returns a string representing the current platform. Note: On Vega OS, Platform.OS returns 'kepler'.

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      kepler: {
        backgroundColor: 'blue',
      },
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'green',
      },
    }),
  },
});

Platform.select()

The Platform.select() method returns the value for the platform you're currently running on. Use kepler as the key for Vega-specific values.

import { Platform } from 'react-native';

const Component = Platform.select({
  kepler: () => require('ComponentKepler'),
  ios: () => require('ComponentIOS'),
  android: () => require('ComponentAndroid'),
})();

Platform-Specific Extensions

When your platform-specific code is more complex, you should split the code into separate files. React Native will detect when a file has a platform-specific extension and load the relevant platform file when required from other components.

For Vega OS, use the .kepler extension.

Example

Suppose you have the following files in your project:

Button.kepler.tsx
Button.ios.tsx
Button.android.tsx

When you import the component.

import Button from './Button';

React Native will automatically pick up the correct file based on the running platform:

• On Vega OS: Button.kepler.tsx is loaded
• On iOS: Button.ios.tsx is loaded
• On Android: Button.android.tsx is loaded

Supported Extensions

You can use the .kepler extension with the following file types:

• .kepler.tsx - TypeScript with JSX
• .kepler.ts - TypeScript
• .kepler.jsx - JavaScript with JSX
• .kepler.js - JavaScript

Tree Shaking and Platform-Specific Code

Platform-specific tree shaking is fully supported on Vega OS. This means that when you build your app, the bundler will automatically exclude code for other platforms, reducing your bundle size.

How It Works

When you use platform-specific file extensions like .kepler.tsx, the build system will:

1. Detect the target platform during the build process
2. Include only the .kepler files in the Vega OS bundle
3. Exclude .ios and .android files from the final bundle
4. Remove unused platform-specific code branches

Important Note

Since Vega OS is registered as kepler in the platform system, you must use the kepler keyword (not vega) in your platform-specific file names for tree shaking to work correctly.

Correct:

Button.kepler.tsx  ✓
utils.kepler.js    ✓

Incorrect:

Button.vega.tsx    ✗
utils.vega.js      ✗

Best Practices

1. Use platform-specific files for significant differences: If the implementation differs substantially between platforms, use separate files with the .kepler extension.

2. Use Platform.select() for minor differences: For small variations like styling or simple conditional logic, use Platform.select() or Platform.OS checks within a single file.

3. Keep shared logic in common files: Extract platform-agnostic logic into shared files without platform extensions to maximize code reuse.

4. Leverage tree shaking: Use platform-specific extensions to make sure your Vega OS bundle only includes relevant code, improving performance and reducing bundle size.

Additional Resources

For more information about React Native platform-specific code patterns, see the React Native documentation on platform-specific code.

Last updated: Jan 13, 2026