Use badge for beta notice

components/SwitchListItem.js

@@ -5,8 +5,8 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Switch } from 'react-native';
-import { ListItem } from 'react-native-elements';
+import { Switch, View } from 'react-native';
+import { Badge, ListItem } from 'react-native-elements';
 
 const SwitchListItem = ({ item, index }) => (
 	<ListItem
@@ -15,11 +15,21 @@ const SwitchListItem = ({ item, index }) => (
 		bottomDivider
 	>
 		<ListItem.Content>
-			<ListItem.Title
-				testID='title'
-			>
-				{item.title}
-			</ListItem.Title>
+			<View style={{ flexDirection: 'row' }}>
+				<ListItem.Title
+					testID='title'
+				>
+					{item.title}
+				</ListItem.Title>
+				{(
+					item.badge &&
+					<Badge
+						value={item.badge.value}
+						status={item.badge.status}
+						containerStyle={{ marginStart: 8 }}
+					/>
+				)}
+			</View>
 			{(
 				item.subtitle &&
 				<ListItem.Subtitle

langs/en.json

@@ -1,5 +1,6 @@
 {
   "common": {
+    "beta": "BETA",
     "cancel": "Cancel",
     "ok": "OK",
     "unknown": "Unknown"
@@ -55,7 +56,7 @@
   "settings": {
     "version": "Version: {{version}}",
     "keepAwake": "Keep Screen Awake",
-    "nativeVideoPlayer": "Use Native Video Player [BETA]",
+    "nativeVideoPlayer": "Use Native Video Player",
     "minimumServerVersion": "Requires Server Version 10.7+",
     "fmp4Support": "Prefer fMP4 in HLS",
     "lightTheme": "Use Light Theme",

screens/SettingsScreen.js

@@ -128,6 +128,9 @@ const SettingsScreen = observer(() => {
 			playbackSettingsData.push({
 				key: 'native-video-switch',
 				title: t('settings.nativeVideoPlayer'),
+				badge: {
+					value: t('common.beta')
+				},
 				subtitle: t('settings.minimumServerVersion'),
 				value: rootStore.settingStore.isNativeVideoPlayerEnabled,
 				onValueChange: action(value => {