Getting Started with react-native

fonts.markdown

Fonts and other vector assets

As an ember developer accustomed to the "batteries-included" mentality of sensible defaults and convention over configuration, getting into the groove of react-native can be a little tricky - especially for seemingly should-be-simple things such as including fonts in our app.

rnpm link

In ember-cli land, installing font-awesome (or any font) was done with a simple cli command: ember install ember-cli-font-awesome. In react native, similar packages exist, but the installation instructions require a little more research on my part. Here's how it's done:

• install the https://github.com/oblador/react-native-vector-icons npm package via npm install --save react-native-vector-icons
• manually drag-and-drop the fonts I want from the node_modules like so:

mkdir -p assets/fonts
cp ./node_modules/react-native-vector-icons/Fonts/FontAwesome.tff ./assets/fonts/

• configure package.json so that react-native npm knows where to look for our fonts

"rnpm": {
  "assets": ["./assets/fonts"]
}

• use the react-native cli to link the font

react-native link

The sauce on this process was discovered here: https://medium.com/@danielskripnik/how-to-add-and-remove-custom-fonts-in-react-native-b2830084b0e4

• next, manually build again (I'm using ios) to get your new assets picked up

react-native run-ios

(if you skip this step, you'll get an error that says something about not being able to find your font family)

• use the font-family in our stylesheet objects:

fontFamily: 'FontAwesome'

Notes to Self

If I ever decide to build ember-native or glimmer-native, something I should do is make this process of linking and whatnot more "batteries-included" as is the philosophy behind ember

styles.markdown

Styles and CSS in the world of React Native

As a web developer coming into the world of react native means we have to do css styling a little different. The below are a few of the things I've learned just today!

Display Flex is the only choice

In web css land, we have block, inline, inline-block, inline-flex, etc., different modes of the display: property. In react-native (and probably native in general), we only have flex and none (flex is default obviously).

As such, it's definitely a good idea to brush up on flex with this article https://css-tricks.com/snippets/css/a-guide-to-flexbox/

dpi and percentage only

In web, we had em, rem, vh, vw, px, etc., as our units of distance / size. In native land, we only have %, and dp and dp is default. I need to be aware of this as this means instead of specifying width: 15em, I now would do width: 15