react-native-elements#normalize TypeScript Examples
The following examples show how to use
react-native-elements#normalize.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: FormHeader.tsx From SQUID with MIT License | 5 votes |
|
padding = normalize(18)
Example #2
| Source File: QuestionaireSelect.tsx From SQUID with MIT License | 5 votes |
|
padding = normalize(16)
Example #3
| Source File: AgreementPolicy.tsx From SQUID with MIT License | 5 votes |
|
AgreementPolicy = () => {
const navigation = useNavigation()
return (
<SafeAreaView style={styles.container}>
<StatusBar backgroundColor={'white'} barStyle="light-content" />
<FormHeader>
<View style={styles.header}>
<Text style={styles.title}>{I18n.t('term_and_conditions')}</Text>
<Text style={styles.subtitle}>{I18n.t('before_usage')}</Text>
<Text style={styles.subtitle}>{I18n.t('please_accept_terms')}</Text>
</View>
</FormHeader>
<View style={styles.content}>
<ScrollView
contentContainerStyle={{
flexGrow: 1,
paddingVertical: 16,
}}
>
<View style={{ paddingHorizontal: 24 }}>
<Text style={styles.agreement}>{getAgreementText()} </Text>
</View>
</ScrollView>
</View>
{/* <CheckBox
title="ฉันยอมรับ{I18n.t('term_and_conditions')}"
containerStyle={{
backgroundColor: 'transparent',
borderWidth: 0,
marginBottom: 16,
}}
checked={agree}
onPress={() => setAgree(!agree)}
checkedColor={COLORS.BLUE}
textStyle={{ color: COLORS.BLACK_1, fontSize: FONT_SIZES[600], fontWeight:'normal'}}
fontFamily={FONT_BOLD}
/> */}
<View style={styles.footer}>
<PrimaryButton
// disabled={!agree}
title={I18n.t('accept')}
style={{ width: '100%' }}
containerStyle={{ width: '100%', marginTop: normalize(16) }}
onPress={() => {
applicationState.setData('skipRegistration', true)
navigation.navigate('Onboarding')
}}
/>
<Button
type="outline"
title={I18n.t('deny')}
style={{ width: '100%' }}
titleStyle={{
fontFamily: FONT_MED,
fontSize: FONT_SIZES[600],
lineHeight: 30,
}}
containerStyle={{ width: '100%', marginTop: 8 }}
onPress={() => {
navigation.pop()
}}
/>
</View>
</SafeAreaView>
)
}
Example #4
| Source File: AgreementPolicy.tsx From SQUID with MIT License | 5 votes |
|
styles = StyleSheet.create({
container: { flex: 1, backgroundColor: 'white' },
header: {
alignItems: 'flex-start',
marginBottom: 16,
marginHorizontal: 24,
},
title: {
fontFamily: FONT_BOLD,
fontSize: FONT_SIZES[700],
alignItems: 'center',
color: COLORS.BLACK_1,
textAlign: 'center',
},
subtitle: {
fontFamily: FONT_FAMILY,
fontSize: FONT_SIZES[500],
lineHeight: 24,
alignItems: 'center',
color: COLORS.SECONDARY_DIM,
textAlign: 'center',
},
content: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLORS.LIGHT_BLUE,
borderTopWidth: 1,
borderBottomWidth: 1,
borderStyle: 'solid',
borderColor: COLORS.BORDER_LIGHT_BLUE,
},
agreement: {
fontSize: FONT_SIZES[400],
lineHeight: 24,
color: COLORS.GRAY_4,
marginBottom: 16,
},
footer: {
alignItems: 'center',
paddingHorizontal: normalize(20),
marginBottom: 8,
},
})
Example #5
| Source File: OnboardBluetooth.tsx From SQUID with MIT License | 5 votes |
|
OnboardBluetooth = () => {
const navigation = useNavigation()
const contactTracer = useContactTracer()
const { showSpinner, hide } = useHUD()
const handleSubmit = async () => {
showSpinner()
await contactTracer?.enable()
hide()
setTimeout(() => {
navigation.navigate('OnboardNotification')},1000)
}
return ( <>
<SafeAreaView style={{
backgroundColor: COLORS.BLUE,
}}/>
<SafeAreaView
style={{
flex: 1,
backgroundColor: COLORS.WHITE,
}}
>
<StatusBar backgroundColor={COLORS.WHITE} barStyle="dark-content" />
<OnboardHeader
style={{
backgroundColor: COLORS.BLUE,
}}/>
<View
style={styles.topContainer}
>
<View style={{ padding: 8, paddingHorizontal: 30, justifyContent: 'center', alignItems: 'center'}}>
<Image
source={require('../../assets/morchana-permission-bluetooth.png')}
resizeMode="contain"
style={{ height: doctorSize }}
/>
<Text style={I18n.currentLocale() == 'en'? styles.titleEN : styles.title}>{I18n.t('risky_ppl_nearby')}</Text>
<Text style={styles.subtitle}>{I18n.t('app_can_check_with_bluetooth')}</Text>
</View>
</View>
<View
style={styles.bottomContainer}
>
<View style={{ flexDirection: 'row' }}>
<View style={{ paddingRight: 16 }}>
<Image
source={require('../../assets/perm-bluetooth-icon.png')}
resizeMode="contain"
style={{ width: normalize(40) }}
/>
</View>
<View style={{ flex: 1 }}>
<Text style={styles.itemTitle}>{I18n.t('pls_grant_bluetooth_access')}</Text>
<Text style={styles.description}>
{I18n.t('consume_low_energy_and_can_detect_closed_contact')}
</Text>
</View>
</View>
<PrimaryButton
containerStyle={{ width: '100%' }}
title={I18n.t('grant_permission')}
style={{
marginTop: 30,
alignSelf: 'center',
width: '100%',
backgroundColor: COLORS.BLUE_BUTTON,
}}
onPress={() => handleSubmit()}
/>
</View>
</SafeAreaView>
</>
)
}
Example #6
| Source File: const.ts From SQUID with MIT License | 5 votes |
|
padding = normalize(20)
Example #7
| Source File: DebugBackgroundLocation.tsx From SQUID with MIT License | 5 votes |
|
DebugBackgroundLocation = () => {
const navigation = useNavigation()
const [logs, setLogs] = useState('')
useEffect(() => {
let interval = setInterval(() => {
BackgroundGeolocation.logger.getLog().then((log) => {
setLogs(log)
});
}, (1000))
return () => clearInterval(interval)
})
return (
<MyBackground variant="light">
<StatusBar
barStyle="dark-content"
backgroundColor={COLORS.PRIMARY_LIGHT}
/>
<SafeAreaView style={{ flex: 1 }}>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}
>
<Text style={{
fontSize: FONT_SIZES[200] * 0.75
}}>{logs}</Text>
</ScrollView>
<View style={{
alignItems: 'center',
paddingHorizontal: normalize(16),
marginBottom: 16,
}}>
<PrimaryButton
title={I18n.t('close')}
style={{ width: '100%' }}
containerStyle={{ width: '100%' }}
onPress={() => {
navigation.pop()
}}
/>
</View>
</SafeAreaView>
</MyBackground>
)
}
Example #8
| Source File: QuestionaireForm.tsx From SQUID with MIT License | 5 votes |
|
padding = normalize(18)
Example #9
| Source File: QuestionaireHome.tsx From SQUID with MIT License | 5 votes |
|
Content = styled(View)({
padding: normalize(20),
backgroundColor: 'white',
borderRadius: 20,
})
Example #10
| Source File: ChangeLanguage.tsx From SQUID with MIT License | 5 votes |
|
padding = normalize(16)
Example #11
| Source File: PrivacyPolicy.tsx From SQUID with MIT License | 5 votes |
|
padding = normalize(16)
Example #12
| Source File: OnboardLocation.tsx From SQUID with MIT License | 4 votes |
|
OnboardLocation = () => {
const navigation = useNavigation()
const [locationPerm, setLocationPerm] = useState('checking')
const [activityPerm, setActivityPerm] = useState('checking')
const { showSpinner, hide } = useHUD()
const checkPerms = async () => {
const perms = await Promise.all([
check(LOCATION_PERMISSION),
check(ACTIVITY_PERMISSION),
])
if (perms[0] === 'granted' && perms[1] === 'granted') {
await backgroundTracking.start()
navigation.navigate('OnboardProgressing')
} else {
setLocationPerm(perms[0])
setActivityPerm(perms[1])
}
}
useEffect(() => {
checkPerms()
}, [])
const handleSubmit = async () => {
showSpinner()
await request(LOCATION_PERMISSION)
await request(ACTIVITY_PERMISSION)
hide()
backgroundTracking.start()
setTimeout(() => {
navigation.navigate('OnboardBluetooth')
}, 1000)
}
if (locationPerm === 'checking' || activityPerm === 'checking') {
return (
<View
style={{
flex: 1,
backgroundColor: COLORS.WHITE,
justifyContent: 'center',
alignItems: 'center',
}}
>
<ActivityIndicator size="large" />
</View>
)
}
return (
<>
<SafeAreaView
style={{
backgroundColor: COLORS.BLUE,
}}
/>
<SafeAreaView
style={{
flex: 1,
backgroundColor: COLORS.WHITE,
// paddingHorizontal: 20
}}
>
<StatusBar backgroundColor={COLORS.WHITE} barStyle="dark-content" />
<OnboardHeader
style={{
backgroundColor: COLORS.BLUE,
}}
/>
<View style={styles.topContainer}>
<View
style={{
padding: 8,
paddingHorizontal: 30,
justifyContent: 'center',
alignItems: 'center',
}}
>
<Image
source={require('../../assets/morchana-permission-location.png')}
resizeMode="contain"
style={{ height: doctorSize }}
/>
<Text
style={
I18n.currentLocale() == 'en' ? styles.titleEN : styles.title
}
>
{I18n.t('pls_grant_permission')}
</Text>
<Text style={styles.subtitle}>
{I18n.t('let_doc_estimate_your_risk')}
</Text>
</View>
</View>
<View style={styles.bottomContainer}>
<View style={{ flexDirection: 'row' }}>
<View style={{ paddingRight: 16 }}>
<Image
source={require('../../assets/perm-location-icon.png')}
resizeMode="contain"
style={{ width: normalize(40) }}
/>
</View>
<View style={{ flex: 1 }}>
<Text style={styles.itemTitle}>{I18n.t('your_position')}</Text>
<Text style={styles.description}>
{I18n.t('help_notify_if_you_get_near_risky_person_or_area')}
</Text>
</View>
</View>
<View style={{ flexDirection: 'row' }}>
<View style={{ paddingRight: 16 }}>
<Image
source={require('../../assets/perm-motion-icon.png')}
resizeMode="contain"
style={{ width: normalize(40) }}
/>
</View>
<View style={{ flex: 1 }}>
<Text style={styles.itemTitle}>{I18n.t('your_motion')}</Text>
<Text style={styles.description}>
{I18n.t('to_manage_mobile_energy_efficiently')}
</Text>
</View>
</View>
<PrimaryButton
containerStyle={{ width: '100%' }}
title={I18n.t('grant_permission')}
style={{
marginTop: 30,
alignSelf: 'center',
width: '100%',
backgroundColor: COLORS.BLUE_BUTTON,
}}
onPress={() => handleSubmit()}
/>
</View>
</SafeAreaView>
</>
)
}
