Fix alignment of phone code select

src/components/InternationalPhoneCodeSelect.tsx

@@ -1,4 +1,5 @@
 import {Fragment, useMemo} from 'react'
+import {Text as RNText} from 'react-native'
 import {Image} from 'expo-image'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -113,5 +114,5 @@ function Flag({unicodeFlag, svgFlag}: {unicodeFlag: string; svgFlag: any}) {
       />
     )
   }
-  return unicodeFlag + ' '
+  return <RNText style={[{lineHeight: 21}]}>{unicodeFlag + ' '}</RNText>
 }

src/view/screens/Storybook/Forms.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {type TextInput, View} from 'react-native'
 
+import {APP_LANGUAGES} from '#/lib/../locale/languages'
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {DateField, LabelText} from '#/components/forms/DateField'
@@ -9,6 +10,8 @@ import * as TextField from '#/components/forms/TextField'
 import * as Toggle from '#/components/forms/Toggle'
 import * as ToggleButton from '#/components/forms/ToggleButton'
 import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
+import {InternationalPhoneCodeSelect} from '#/components/InternationalPhoneCodeSelect'
+import * as Select from '#/components/Select'
 import {H1, H3} from '#/components/Typography'
 
 export function Forms() {
@@ -22,6 +25,9 @@ export function Forms() {
 
   const [value, setValue] = React.useState('')
   const [date, setDate] = React.useState('2001-01-01')
+  const [countryCode, setCountryCode] = React.useState('US')
+  const [phoneNumber, setPhoneNumber] = React.useState('')
+  const [lang, setLang] = React.useState('en')
 
   const inputRef = React.useRef<TextInput>(null)
 
@@ -29,6 +35,44 @@ export function Forms() {
     <View style={[a.gap_4xl, a.align_start]}>
       <H1>Forms</H1>
 
+      <Select.Root value={lang} onValueChange={setLang}>
+        <Select.Trigger label="Select app language">
+          <Select.ValueText />
+          <Select.Icon />
+        </Select.Trigger>
+        <Select.Content
+          label="App language"
+          renderItem={({label, value}) => (
+            <Select.Item value={value} label={label}>
+              <Select.ItemIndicator />
+              <Select.ItemText>{label}</Select.ItemText>
+            </Select.Item>
+          )}
+          items={APP_LANGUAGES.map(l => ({
+            label: l.name,
+            value: l.code2,
+          }))}
+        />
+      </Select.Root>
+
+      <View style={[a.flex_row, a.gap_sm, a.align_center]}>
+        <View>
+          <InternationalPhoneCodeSelect
+            // @ts-ignore
+            value={countryCode}
+            onChange={value => setCountryCode(value)}
+          />
+        </View>
+
+        <View style={[a.flex_1]}>
+          <TextField.Input
+            label="Phone number"
+            value={phoneNumber}
+            onChangeText={setPhoneNumber}
+          />
+        </View>
+      </View>
+
       <View style={[a.gap_md, a.align_start, a.w_full]}>
         <H3>InputText</H3>