And OTA Version to Info Tab in Settings (#617)

src/components/Settings/components/info-tab.tsx

@@ -2,7 +2,7 @@ import { version } from '../../../../package.json'
 import { Text } from '../../Global/helpers/text'
 import SettingsListGroup from './settings-list-group'
 import { Linking } from 'react-native'
-import { ScrollView, XStack } from 'tamagui'
+import { ScrollView, XStack, YStack } from 'tamagui'
 import Icon from '../../Global/components/icon'
 import usePatrons from '../../../api/queries/patrons'
 import { useQuery } from '@tanstack/react-query'
@@ -10,7 +10,7 @@ import INFO_CAPTIONS from '../utils/info-caption'
 import { ONE_HOUR } from '../../../constants/query-client'
 import { pickRandomItemFromArray } from '../../../utils/random'
 import { FlashList } from '@shopify/flash-list'
-
+import { getStoredOtaVersion } from 'react-native-nitro-ota'
 export default function InfoTab() {
 	const patrons = usePatrons()
 
@@ -20,7 +20,8 @@ export default function InfoTab() {
 		staleTime: ONE_HOUR,
 		initialData: 'Live and in stereo',
 	})
-
+	const otaVersion = getStoredOtaVersion()
+	const otaVersionText = otaVersion ? `OTA Version: ${otaVersion}` : ''
 	return (
 		<ScrollView contentInsetAdjustmentBehavior='automatic'>
 			<SettingsListGroup
@@ -31,24 +32,34 @@ export default function InfoTab() {
 						iconName: 'jellyfish',
 						iconColor: '$primary',
 						children: (
-							<XStack gap={'$3'} marginTop={'$2'}>
-								<XStack
-									alignItems='center'
-									onPress={() =>
-										Linking.openURL('https://github.com/Jellify-Music/App')
-									}
-								>
-									<Icon name='code-tags' small color='$borderColor' />
-									<Text>View Source</Text>
+							<YStack>
+								{otaVersionText && (
+									<XStack gap={'$3'} marginTop={'$2'}>
+										<Text color='$borderColor'>{otaVersionText}</Text>
+									</XStack>
+								)}
+
+								<XStack gap={'$3'} marginTop={'$2'}>
+									<XStack
+										alignItems='center'
+										onPress={() =>
+											Linking.openURL('https://github.com/Jellify-Music/App')
+										}
+									>
+										<Icon name='code-tags' small color='$borderColor' />
+										<Text>View Source</Text>
+									</XStack>
+									<XStack
+										alignItems='center'
+										onPress={() =>
+											Linking.openURL('https://discord.gg/yf8fBatktn')
+										}
+									>
+										<Icon name='chat' small color='$borderColor' />
+										<Text>Join Discord</Text>
+									</XStack>
 								</XStack>
-								<XStack
-									alignItems='center'
-									onPress={() => Linking.openURL('https://discord.gg/yf8fBatktn')}
-								>
-									<Icon name='chat' small color='$borderColor' />
-									<Text>Join Discord</Text>
-								</XStack>
-							</XStack>
+							</YStack>
 						),
 					},
 					{