Native component for rendering views straight under the Window. Based on RCTPerfMonitor.
npm install react-native-window-viewimport * as React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import RNWindowView from 'react-native-window-view';
export default function App() {
const [shown, setShown] = React.useState(true);
return (
<View style={styles.container}>
<Button title="Show/hide window view" onPress={() => setShown(!shown)} />
<RNWindowView shown={shown}>
<View style={styles.box} />
</RNWindowView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'flex-start',
justifyContent: 'center',
},
box: {
width: 40,
height: 40,
borderRadius: 10,
borderWidth: 2,
borderColor: 'black',
backgroundColor: 'red',
},
});To make the compoent stay on top even after pushing modals, you need to add the following code to your appDelegate.m
#import <react-native-window-view/RNWindowView.h>
- (void)didAddSubview:(UIView *)subview
{
if (![subview isKindOfClass:[RNViewContainer class]]) {
for (UIView *view in self.subviews) {
if ([view isKindOfClass:[RNViewContainer class]]) {
[self bringSubviewToFront:view];
}
}
}
}
@end
@implementation AppDelegate
// inside didFinishLaunchingWithOptions replace this line
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
// with this
self.window = [[RNWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT