React WebkitAppRegion Warnings - css

Question

Ok, so I'm extremely new to react, so sorry if this question is really dumb.
I've been working on a react application using electron and expo, and don't fully understand how to solve this warning which is showing in my developer console.
Warning: Failed prop type: Invalid props.style key `WebkitAppRegion` supplied to `View`.
Bad object: {
"display": "flex",
"flexDirection": "row",
"height": 20,
"backgroundColor": "#0e0e11",
"margin": 0,
"borderBottomWidth": 0.5,
"borderColor": "#060607",
"WebkitAppRegion": "drag"
}
When I originally built the design for this UI, I did so with standard html and SCSS, and now I'm attempting to change it to react as my first big project. So having done some googling, I found the information that to include my -webkit-app-region: drag all I needed to do was CammelCase and remove the "-"'s. Except it's now throwing this error, it does the function as intended but how does one solve the "invalid props style" issue?
Some shitty code for ya to critique xD
//app.tsx
import React from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import { SplashScreen } from 'expo';
import * as Font from 'expo-font';
import * as styles from './assets/styles/main'
SplashScreen.preventAutoHide();
setTimeout(SplashScreen.hide, 10000);
export default class App extends React.Component {
state = {
fontLoaded: false,
};
async componentDidMount() {
await Font.loadAsync(styles.fontList);
this.setState({ fontLoaded: true });
}
render() {
return (
this.state.fontLoaded ? (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'stretch', backgroundColor: styles.colors.dark1 }}>
<this.DisplayHandles />
</View>
) : null
);
}
DisplayHandles() {
if (Platform.OS === 'web' && process.versions.electron) {
return ([
<View style={[styles.electron.header, {WebkitAppRegion: 'drag'}]}>
<View style={styles.electron.titleContainer}>
<Text key='title' style={[styles.electron.title, {WebkitAppRegion: 'no-drag', 'userSelect': 'none'}]}> Smartcloud</Text>
</View>
<View style={styles.electron.controlContainer}>
<Text key='minimize' style={[styles.electron.button, {WebkitAppRegion: 'no-drag', 'userSelect': 'none'}]} onClick={handleClick}>-</Text>
<Text key='maximize' style={[styles.electron.button, {WebkitAppRegion: 'no-drag', 'userSelect': 'none'}]} onClick={handleClick}>+</Text>
<Text key='close' style={[styles.electron.button, {WebkitAppRegion: 'no-drag', 'userSelect': 'none'}]} onClick={handleClick}>x</Text>
</View>
</View>,
<View style={{ flex: 1}}>
<Content.CreateHandles />
</View>
]
)
}
return <Content.Container/>
}
}
function handleClick(e) {
e.preventDefault();
console.log('I was clicked')
}
class Content {
static CreateHandles() {
return (
<View>
<Content.Container />
</View>
)
}
static Container () {
return (
<View style={{alignItems: 'center',}}>
<Content.TestingText />
</View>
)
}
static TestingText() {
if (Platform.OS === 'web') {
if (process.versions.electron) {
return (<Text style={{fontSize: 60, color: styles.colors.light5, fontFamily: styles.rubik.medium} }> This is a Electron {process.versions.electron} + {Platform.OS} version </Text>)
}
return (<Text style={{fontSize: 60, color: styles.colors.light5, fontFamily: styles.rubik.medium}}> This is a {Platform.OS} version </Text>)
}
return <Text style={{fontSize: 20, color: styles.colors.light5, fontFamily: styles.rubik.medium}}> This is a {Platform.OS} version</Text>
}
}
// ./assets/styles/main.tsx
export const electron = StyleSheet.create({
header: {
display: 'flex',
flexDirection: 'row',
height: 20,
backgroundColor: colors.dark4,
margin: 0,
borderBottomWidth: 0.5,
borderColor: colors.dark5,
},
titleContainer: {
display: 'flex',
alignItems: 'flex-start',
flexGrow: 1,
},
controlContainer: {
display: 'flex',
justifyContent: 'flex-end',
flexDirection: 'row',
alignItems: 'center',
},
title: {
color: colors.purple,
margin: 0,
marginLeft: 10,
fontSize: 14,
fontFamily: rubik.black,
},
button: {
width: 25,
margin: 0,
marginLeft: 10,
color: colors.purple,
textAlign: 'center',
fontSize: 14,
fontFamily: rubik.black,
}
})