View on GitHub

React Native Sports App Tutorial

Building a small sports score React Native application from the ground up.

All Posts

Lets Write Some Code

Finally we’re in a position to write some simple code. A picture is worth a thousand words, so a video must be worth much more. Below is all we’re going to accomplish with this post, but it’s kind of a big deal.

We’re getting exposure to simple tags. React Native is not React and does not use HTML, but the concepts are similar. To display text, we use the <Text /> tag. For a complete list of components, see.

https://facebook.github.io/react-native/docs/components-and-apis.html

Some of the more common tags that we’ll be usings are:

The list of components is relatively small compared to reactjs, so later on we’ll be utilizing another external library called NativeBase.

Back to our tiny React Native app. The video shows us removing the default boilerplate and putting a single <Text> tag in with the words Hello World. Easy enough.

Container Components

If you’re familiar with reactjs, you know that you need a container component to house things like text and image components. In React Native, the simplest form is the <View /> component.

Later on we’ll deal with more robust containers that allow us to scroll, layout and refresh.

React Native Styling

React Native is not HTML. The styling tags look remarkably similar to CSS, but it is not CSS. A great resource for React Native styling tags that are available is the React Native Cheatsheet.

Layout with Flexbox

React Native uses flexbox to arrange items within a container. This is functionally similar to CSS flexbox. It’s beyond the scope of this tutorial to teach all of the concepts of flexbox, but we’ll go over some basics in the next tutorial and touch on particulars when they’re relevant to the application that we’re building.

Looking for an app developer?

I’m your guy! I’ve been a contract app developer for over 14 years and can help you or your company on your project. The best way to contact me and my team is via our company page. Yye Software is an application development company based in the Atlanta metro area with offices in Kennesaw.