Skip to content

Commit d15bc1a

Browse files
codeAbinashcodeAbinash
committed
Update default font scaling for Text and TextInput components
1 parent 4a3026a commit d15bc1a

File tree

12 files changed

+66
-62
lines changed

12 files changed

+66
-62
lines changed

‎index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,11 @@
55
import { AppRegistry } from 'react-native'
66
import App from './App'
77
import { name as appName } from './app.json'
8+
import { Text, TextInput } from 'react-native'
9+
10+
Text.defaultProps = Text.defaultProps || {}
11+
Text.defaultProps.allowFontScaling = false
12+
TextInput.defaultProps = TextInput.defaultProps || {}
13+
TextInput.defaultProps.allowFontScaling = false
814

915
AppRegistry.registerComponent(appName, () => App)

‎src/components/Feature.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ export default function Feature({
1515
<View className='w-full flex-row items-center p-2' style={{ gap: 20 }}>
1616
{Icon}
1717
<View className='w-full flex-[0]' style={{ flexGrow: 1 }}>
18-
<SemiBold style={{ fontSize: 14.5 }} className='text-zinc-700 dark:text-zinc-300'>
18+
<SemiBold style={{ fontSize: 12 }} className='text-zinc-700 dark:text-zinc-300'>
1919
{title}
2020
</SemiBold>
21-
<Medium style={{ fontSize: 13 }} className='text-zinc-400 dark:text-zinc-500'>
21+
<Medium style={{ fontSize: 10.5 }} className='text-zinc-400 dark:text-zinc-500'>
2222
{description}
2323
</Medium>
2424
</View>

‎src/components/Search.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default function Search({ onChangeText, value, ...all }: TextInputProps)
3131
<TextInput
3232
ref={ref}
3333
className='flex-1 p-2 px-3 text-zinc-800 dark:text-zinc-200'
34-
style={[PoppinsMedium, { fontSize: 15.5 }]}
34+
style={[PoppinsMedium, { fontSize: 12.2 }]}
3535
placeholderTextColor={scheme === 'dark' ? Colors.zinc[500] : Colors.zinc[400]}
3636
cursorColor={Colors.accent}
3737
selectionColor={Colors.accent + '55'}

‎src/components/TopArea.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default function TopArea() {
1717
<View className='flex-row items-center justify-between'>
1818
<TouchableOpacity activeOpacity={0.7} onPress={() => navigation.navigate('Greeting')}>
1919
<View className='flex-row items-center'>
20-
<Bold style={[{ fontSize: 20 }]} className='items-center justify-center text-gray-800 dark:text-gray-200'>
20+
<Bold style={[{ fontSize: 16 }]} className='items-center justify-center text-gray-800 dark:text-gray-200'>
2121
{/* {nickName ? 'Hello ' + nickName : greetingByTime()} */}
2222
{getLocalDate()}
2323
</Bold>

‎src/screens/Home/Greeting.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Feature from '@components/Feature'
44
import { PaddingBottom } from '@components/SafePadding'
55
import { Colors } from '@utils/colors'
66
import { APP_VERSION } from '@utils/data'
7-
import { Bold, PoppinsMedium, SemiBold } from '@utils/fonts'
7+
import { Bold, Medium, PoppinsMedium, SemiBold } from '@utils/fonts'
88
import type { NavProp } from '@utils/types'
99
import { getLocalDate, greetingByTime } from '@utils/utils'
1010
import React from 'react'
@@ -21,8 +21,8 @@ export default function Greeting({ navigation }: NavProp) {
2121
>
2222
<View className='w-full'>
2323
<View className='my-9 mb-9'>
24-
<Bold className='text-center text-3xl text-zinc-800 dark:text-zinc-200'>{getLocalDate()}</Bold>
25-
<SemiBold className='mt-2 text-center text-lg text-zinc-800 dark:text-zinc-200'>
24+
<Bold className='text-center text-2xl text-zinc-800 dark:text-zinc-200'>{getLocalDate()}</Bold>
25+
<SemiBold className='mt-2 text-center text-base text-zinc-800 dark:text-zinc-200'>
2626
{greetingByTime()}
2727
</SemiBold>
2828
</View>
@@ -54,13 +54,11 @@ export default function Greeting({ navigation }: NavProp) {
5454
</View>
5555
</ScrollView>
5656
<View className='w-full px-10 pt-2'>
57-
<Text style={[PoppinsMedium, { fontSize: 11 }]} className='mb-3 text-center text-zinc-500 dark:text-zinc-500'>
57+
<Medium style={[{ fontSize: 9.5 }]} className='mb-3 text-center text-zinc-500 dark:text-zinc-500'>
5858
The above are some of the features of the application that have been added or improved in the latest version.
59-
</Text>
59+
</Medium>
6060
<Btn title='Close' onPress={() => navigation.goBack()} className='bg-accent' />
61-
<Text style={PoppinsMedium} className='mt-2 text-center text-xs text-zinc-500 dark:text-zinc-500'>
62-
Version {APP_VERSION}
63-
</Text>
61+
<Medium className='mt-2 text-center text-xs text-zinc-500 dark:text-zinc-500'>Version {APP_VERSION}</Medium>
6462
<PaddingBottom />
6563
</View>
6664
</View>

‎src/screens/Home/HomeScreen.tsx‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -29,19 +29,15 @@ function Elements() {
2929
activeOpacity={0.7}
3030
onPress={() => navigation.navigate('RoutineWelcome')}
3131
>
32-
<Text className='text-gray-800 dark:text-gray-200' style={PoppinsMedium}>
33-
Routine
34-
</Text>
32+
<Medium className='text-xs text-gray-800 dark:text-gray-200'>Routine</Medium>
3533
</TouchableOpacity>
3634
<TouchableOpacity
3735
style={[height_weight, styles.shadow]}
3836
className='items-center justify-center rounded-3xl bg-white dark:bg-zinc-900'
3937
activeOpacity={0.7}
4038
onPress={() => navigation.navigate('NotesWelcome')}
4139
>
42-
<Text className='text-gray-800 dark:text-gray-200' style={PoppinsMedium}>
43-
Notes
44-
</Text>
40+
<Medium className='text-xs text-gray-800 dark:text-gray-200'>Notes</Medium>
4541
</TouchableOpacity>
4642
<View style={[height_weight, styles.shadow]} className='rounded-3xl bg-white dark:bg-zinc-900'></View>
4743
<View style={[height_weight, styles.shadow]} className='rounded-3xl bg-white dark:bg-zinc-900'></View>
@@ -56,21 +52,21 @@ function Shortcuts() {
5652
}, [width])
5753
return (
5854
<View>
59-
<Text className='my-2 px-5 text-xl text-gray-800 dark:text-gray-300' style={PoppinsSemiBold}>
55+
<Text className='my-2 px-5 text-base text-gray-800 dark:text-gray-300' style={PoppinsSemiBold}>
6056
Shortcuts
6157
</Text>
6258
<View className='w-full flex-row flex-wrap' style={{ gap: 12, paddingHorizontal: 18 }}>
6359
<View style={[hw, styles.shadow, styles.center]} className='w-1/2 rounded-2xl bg-white dark:bg-zinc-900'>
64-
<Medium className='text-gray-700 dark:text-gray-300'>Shortcut 1</Medium>
60+
<Medium className='text-xs text-gray-700 dark:text-gray-300'>Shortcut 1</Medium>
6561
</View>
6662
<View style={[hw, styles.shadow, styles.center]} className='w-1/2 rounded-2xl bg-white dark:bg-zinc-900'>
67-
<Medium className='text-gray-700 dark:text-gray-300'>Shortcut 2</Medium>
63+
<Medium className='text-xs text-gray-700 dark:text-gray-300'>Shortcut 2</Medium>
6864
</View>
6965
<View style={[hw, styles.shadow, styles.center]} className='w-1/2 rounded-2xl bg-white dark:bg-zinc-900'>
70-
<Medium className='text-gray-700 dark:text-gray-300'>Shortcut 3</Medium>
66+
<Medium className='text-xs text-gray-700 dark:text-gray-300'>Shortcut 3</Medium>
7167
</View>
7268
<View style={[hw, styles.shadow, styles.center]} className='w-1/2 rounded-2xl bg-white dark:bg-zinc-900'>
73-
<Medium className='text-gray-700 dark:text-gray-300'>Shortcut 4</Medium>
69+
<Medium className='text-xs text-gray-700 dark:text-gray-300'>Shortcut 4</Medium>
7470
</View>
7571
</View>
7672
</View>
@@ -80,7 +76,7 @@ function Shortcuts() {
8076
function Graph() {
8177
return (
8278
<View className='px-5'>
83-
<Text className='my-2 text-xl text-gray-800 dark:text-gray-300' style={PoppinsSemiBold}>
79+
<Text className='my-2 text-base text-gray-800 dark:text-gray-300' style={PoppinsSemiBold}>
8480
Weekly Progress
8581
</Text>
8682
<View
@@ -92,7 +88,7 @@ function Graph() {
9288
}}
9389
className='h-52 w-full items-center justify-center rounded-3xl bg-white dark:bg-zinc-900'
9490
>
95-
<Medium className='text-gray-700 dark:text-gray-300'>Graph</Medium>
91+
<Medium className='text-xs text-gray-700 dark:text-gray-300'>Graph</Medium>
9692
</View>
9793
</View>
9894
)

‎src/screens/Weather/Main/Weather.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,10 @@ import FeelsLike, { getFeelsLikeStatusString } from './components/FeelsLike'
1717
import Header from './components/Header'
1818
import HourlyForecast from './components/HourlyForecast'
1919
import Humidity from './components/Humidity'
20-
import Pressure, { calculatePressurePercentage } from './components/Pressure'
21-
import Visibility, { getVisibilityStatusString } from './components/Visibility'
20+
import Pressure from './components/Pressure'
21+
import { calculatePressurePercentage } from '../utils'
22+
import Visibility from './components/Visibility'
23+
import { getVisibilityStatusString } from '../utils'
2224
import WeatherTopInfo from './components/WeatherTopInfo'
2325

2426
export default function WeatherScreen({ navigation }: NavProp) {

‎src/screens/Weather/Main/components/Pressure.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { weatherStore } from '@/zustand/weatherStore'
22
import { SortingDownSolidIcon } from '@assets/icons/icons'
3-
import type { Weather } from '@screens/Weather/types'
43
import { boxSize } from '@screens/Weather/utils'
54
import { Medium } from '@utils/fonts'
65
import type { Theme } from '@utils/types'
@@ -9,8 +8,8 @@ import { StyleSheet, View } from 'react-native'
98
import GradientPath from './GradientPath'
109
import WeatherLabel from './WeatherLabel'
1110

12-
const minPressure = 970
13-
const maxPressure = 1030
11+
export const minPressure = 970
12+
export const maxPressure = 1030
1413

1514
export default function Pressure({ theme, pressure, percent }: { theme: Theme; pressure: number; percent: number }) {
1615
const unit = weatherStore((state) => state.atmPressureUnit)
@@ -27,10 +26,3 @@ export default function Pressure({ theme, pressure, percent }: { theme: Theme; p
2726
</View>
2827
)
2928
}
30-
31-
export function calculatePressurePercentage(w: Weather) {
32-
let percent = ((w?.current.pressure || 0) - minPressure) / (maxPressure - minPressure)
33-
percent = percent >= 1 ? 0.999 : percent
34-
percent = percent < 0 ? 0 : percent
35-
return percent
36-
}

‎src/screens/Weather/Main/components/Visibility.tsx‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,3 @@ export default function Visibility({ theme, visibility, visibilityStatus }: Visi
2525
</View>
2626
)
2727
}
28-
29-
export function getVisibilityStatusString(distance: number): string {
30-
if (distance >= 10000) return "It's perfectly clear. Visibility is excellent."
31-
if (distance >= 5000) return 'Visibility is good, clear conditions ahead.'
32-
if (distance >= 1000) return 'Visibility is moderate, some haze may be present.'
33-
if (distance >= 500) return 'Visibility is poor, expect mist or fog.'
34-
return 'Visibility is very poor, dense fog or heavy mist is likely.'
35-
}

‎src/screens/Weather/Widget/WeatherWidget.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,17 @@ import { Icons } from '../utils'
1515

1616
const WeatherWidget = React.memo<{ navigation: StackNav }>(({ navigation }) => {
1717
const weatherWidgetIsActive = weatherStore((state) => state.weatherWidgetIsActive)
18-
const currentCity = weatherStore((state) => state.currentCity)
19-
const currentUnit = weatherStore((state) => state.temperatureUnit)
20-
const lastUpdated = weatherStore((state) => state.lastUpdated)
21-
const currentWeather = weatherStore((state) => state.currentWeather)
22-
const setCurrentWeather = weatherStore((state) => state.setCurrentWeather)
23-
const setLastUpdated = weatherStore((state) => state.setLastUpdated)
24-
const weatherCacheTime = weatherStore((state) => state.weatherCacheTime)
18+
const { currentCity, currentUnit, lastUpdated, currentWeather, setCurrentWeather, setLastUpdated, weatherCacheTime } =
19+
weatherStore((state) => ({
20+
currentCity: state.currentCity,
21+
currentUnit: state.temperatureUnit,
22+
lastUpdated: state.lastUpdated,
23+
currentWeather: state.currentWeather,
24+
setCurrentWeather: state.setCurrentWeather,
25+
setLastUpdated: state.setLastUpdated,
26+
weatherCacheTime: state.weatherCacheTime,
27+
}))
28+
2529
const height = hw.height
2630
const width = hw.width
2731

@@ -90,26 +94,26 @@ const WeatherWidget = React.memo<{ navigation: StackNav }>(({ navigation }) => {
9094
>
9195
<View>
9296
<View className='flex-row justify-between'>
93-
<Medium className='text-base' style={color}>
97+
<Medium className='text-sm' style={color}>
9498
{currentCity.name}
9599
</Medium>
96100
{isPending && <ActivityIndicator size={15} color={color.color} />}
97101
</View>
98-
<Regular style={[{ fontSize: 50, lineHeight: 70 }, color]}>
102+
<Regular style={[{ fontSize: 45, lineHeight: 65 }, color]}>
99103
{w ? tempConverter({ temp: w.current.temp, unit: currentUnit }) : '__'}
100104
{currentUnit === 'K' ? '' : '°'}
101105
</Regular>
102106
</View>
103107
<View>
104108
<Icon width={25} height={25} color={color.color} />
105-
<Medium style={[color]} className='mt-0.5 capitalize'>
109+
<Medium style={[color]} className='mt-0.5 text-xs capitalize'>
106110
{w ? w.current.weather[0]!.description : '__'}
107111
{/* {w.current.weather[0].icon} */}
108112
</Medium>
109113
{/* <Medium style={[color]}>
110114
H:{w ? tempConverter(w.daily[0].temp.max, currentUnit) : '__'}° L: {w ? tempConverter(w.daily[0].temp.min, currentUnit) : '__'}°
111115
</Medium> */}
112-
<Medium style={[color]}>
116+
<Medium style={[color]} className='text-xs'>
113117
{w ? tempConverter({ temp: w.daily[0]!.temp.min, unit: currentUnit }) : '__'}
114118
{currentUnit === 'K' ? currentUnit : '° ' + currentUnit} /{' '}
115119
{w ? tempConverter({ temp: w.daily[0]!.temp.max, unit: currentUnit }) : '__'}
@@ -142,7 +146,7 @@ const WeatherWithText = React.memo<{ text: string; onPress?: () => void; theme:
142146
activeOpacity={0.7}
143147
onPress={onPress}
144148
>
145-
<Medium style={color} className='text-center'>
149+
<Medium style={color} className='text-center text-xs'>
146150
{text}
147151
</Medium>
148152
</TouchableOpacity>

0 commit comments

Comments
 (0)