I want to use a font from google fonts in my app. Here is the font.
I have placed the .ttf file in app/fonts
.
package.json:
{"name": "xxx","version": "0.0.1","private": true,"scripts": {"start": "node node_modules/react-native/local-cli/cli.js start","test": "jest" },"rnpm": {"assets": ["./app/fonts"] },"jest": {"preset": "react-native","moduleNameMapper": {"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js","\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js" } },"dependencies": {"flow-typed": "^2.0.0","immutable": "^3.8.1","react": "~15.4.1","react-native": "0.42.0","react-native-vector-icons": "^4.0.0","react-redux": "^5.0.3","redux": "^3.6.0","redux-immutable": "^4.0.0","redux-observable": "^0.14.1","rxjs": "^5.2.0" },"devDependencies": {"babel-eslint": "^7.1.1","babel-jest": "19.0.0","babel-preset-react-native": "1.9.1","eslint": "^3.17.0","eslint-plugin-flowtype": "^2.30.3","eslint-plugin-jsx": "^0.0.2","eslint-plugin-react": "^6.10.0","eslint-plugin-react-native": "^2.3.1","flow-bin": "^0.42.0","jest": "19.0.2","jest-cli": "^19.0.2","react-test-renderer": "~15.4.1","redux-devtools": "^3.3.2","remote-redux-devtools": "^0.5.7" }}
then ran react-native link
.
Then use the font in my app:
import { View, Text } from 'react-native'import React from 'react'import Width from '../width/Width'import Shape from '../shape/Shape'import Height from '../height/Height'import Thickness from '../thickness/Thickness'export const Volcalc = () => (<View style={styles.container}><Text style={styles.text}>SHAPE</Text><Shape /><Text style={styles.text}>HEIGHT</Text><Height /><Text style={styles.text}>WIDTH</Text><Width /><Text style={styles.text}>THICKNESS</Text><Thickness /></View>)const $mainColor = '#00d1b2'const styles = { container: { flex: 1, padding: 20, backgroundColor: $mainColor }, text: { textAlign: 'center', color: 'rgba(255, 255, 255, 0.9)', fontSize: 15, fontFamily: 'Orbitron' }}
In android it doesn't show the new font but has no error. In ios it has error:
Unrecognised font family "Orbitron"
What am I doing wrong?
How do I find out the EXACT value to place in fontFamily: 'xxx'
?