1import Ionicons from '@expo/vector-icons/build/Ionicons';
2import React from 'react';
3import { Platform, ScrollView, Text, View } from 'react-native';
4
5export default class FontScreen extends React.Component {
6  static navigationOptions = {
7    title: 'Font',
8  };
9
10  render() {
11    return (
12      <ScrollView style={{ flex: 1 }}>
13        <View
14          style={{
15            paddingVertical: 10,
16            paddingHorizontal: 15,
17            flexDirection: 'row',
18            justifyContent: 'space-between',
19            flex: 1,
20          }}>
21          <Ionicons name="logo-facebook" size={25} />
22          <Ionicons name="logo-apple" size={25} />
23          <Ionicons name="logo-amazon" size={25} />
24          <Ionicons name="logo-npm" size={25} />
25          <Ionicons name="logo-google" size={25} />
26          <Ionicons name="alarm" size={25} />
27        </View>
28
29        <View style={{ paddingVertical: 10, paddingHorizontal: 15, flex: 1 }}>
30          <Text style={{ fontFamily: 'space-mono', fontSize: 16 }}>
31            Font icons sets and other custom fonts can be loaded from the web
32          </Text>
33          <Text style={{ fontFamily: 'Roboto', fontSize: 16 }}>
34            Font icons sets and other custom fonts can be loaded by providing remote uri as well.
35          </Text>
36          {Platform.OS === 'ios' && (
37            <Text
38              adjustsFontSizeToFit
39              numberOfLines={2}
40              style={{
41                fontFamily: 'space-mono',
42                fontSize: 420,
43              }}>
44              Custom font with `adjustsFontSizeToFit` on iOS
45            </Text>
46          )}
47          {Platform.OS === 'ios' && (
48            <Text
49              adjustsFontSizeToFit
50              numberOfLines={1}
51              style={{
52                fontFamily: 'Roboto',
53                fontSize: 420,
54              }}>
55              Custom remote uri font with `adjustsFontSizeToFit` on iOS
56            </Text>
57          )}
58        </View>
59      </ScrollView>
60    );
61  }
62}
63