Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16552

Custom font not working in React Native

$
0
0

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'?


Viewing all articles
Browse latest Browse all 16552

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>