Translucent Sidebar with React Native for MacOS 
Tags: reactnative, macos, objectivec
Published: 2020-06-08 19:54:34

---
title: Translucent Sidebar with React Native for MacOS 
published: true
description: Using Cocoa API for React Native for MacOS to create native translucent sidebar style
tags: reactnative, macos, objectivec
---

Since there was news about [React Native for MacOS](https://github.com/Microsoft/react-native-macos) being supported by Microsoft engineers I was excited to try it out. When thinking of a potential MacOS app there is one common pattern to have Sidebar in your main window.

The Sidebar is well documented in [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/macos/windows-and-views/sidebars/). Usually, it has a semi-transparent background slightly blurred. More accurately, it's a translucent window.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/adtazrkaf8gl2fz1h8np.png)

I was interested, is it possible to get this effect in React Native. Half an hour later, I got it working, and here are my notes on how to achieve it.

Key thing is that the effect is part of Cocoa API. There is no problem to use it for React Native MacOS. Simply include `#import <Cocoa/Cocoa.h>` and you can use `NSVisualEffectView` that will get you this effect.

NSVisualEffectView can be simply a block that can be placed anywhere and you can add child views inside of it. Following [Native Modules](https://reactnative.dev/docs/native-modules-ios) guidelines it's very straightforward.

SidebarView.h
```obj-c
#import <Cocoa/Cocoa.h>

@interface SidebarView : NSView
@end
```

SidebarView.m
```obj-c
#import "SidebarView.h"

@implementation SidebarView

- (instancetype)initWithFrame:(NSRect)frame
{
  if (NSClassFromString(@"NSVisualEffectView")) {
    self = [[NSClassFromString(@"NSVisualEffectView") alloc] initWithFrame:frame];
  } else {
    self = [super initWithFrame:frame];
  }
  
  return self;
}

@end
```

SidebarViewManager.h
```obj-c
#import <React/RCTViewManager.h>

@interface SidebarViewManager : RCTViewManager
@end
```

SidebarViewManager.m
```obj-c
#import "SidebarViewManager.h"
#import "SidebarView.h"
#import <React/RCTBridge.h>

@implementation SidebarViewManager

RCT_EXPORT_MODULE();

@synthesize bridge = _bridge;

- (NSView *)view
{
  return [[SidebarView alloc] init];
}

@end
```

On JavaScript side:

SidebarView.macos.js
```js
import {requireNativeComponent} from 'react-native';

const SidebarBackgroundView = requireNativeComponent('SidebarView');

export default SidebarBackgroundView;
```

App.js
```js
import React from 'react';
import {StyleSheet, View} from 'react-native';
import SidebarView from './SidebarView';

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  sidebar: {
    flex: 1,
  },
  main: {
    flex: 2,
  },
});

export default App;
```

And here is the result:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/svovqn6bc2u8iwpu0ane.png)

Full code example: https://github.com/edvinasbartkus/react-native-macos-translucent-sidebar

If you need any help, reach me at [@edvinasbartkus](https://twitter.com/edvinasbartkus)