Skip to main content

React Native Hello World

Victoria Harbour, Hongkong

Github Repository


npm install -g expo-cli
expo init client

Choose the blank template and run the client:

cd client
npm install react-native-cli styled-components axios
npm start

I can test code by scanning the QR Code using the Expo Go app under Android or by pressing the w key to activate a web preview.

error:0308010C:digital envelope routines::unsupported: Newer versions of Node.js use OpenSSLv3 that brought some breaking changes. Can be fixed (>=Nodejs v17) by adding the following option to the start script inside your package.json -> "start": "export NODE_OPTIONS=--openssl-legacy-provider && expo start"

Hello World

The Expo CLI gave us a basic app boiler plate that we can now edit. Start by removing the content of App.js (or index.js) and add the following:

import React from 'react'
import Home from './src/screens/Home';

const App = () => {
	return (
		<Home />

export default App

And create the ./src/screens/Home.js component:

import React from 'react'
import {Text} from 'react-native'

const Home = () => {
	return (
			Hi There!

export default Home

Check the output inside your browser - there should be a small Hi There! displayed in the top right.


We can now use Styled Components to create a few components to fill our home screen with. We will store them in ./src/components.


import React from 'react'
import {Text, View} from 'react-native'
import styled from 'styled-components/native';

const InputField = styled(View)`
	display: flex;
	flex-direction: row;
	justify-content: center;
	height: 70px;
	padding: 5%;
	background-color: dodgerblue;
	margin-bottom: 5%;

const InputText = styled(Text)`
	font-weight: 500;
	font-size: 22px;
	color: white;

const Header = () => {
	return (

export default Header

API Access

We can use an online API to fill our basic app with some data. For example:

This URL returns the following JSON object:


The axios library allows us to async get the JSON data the API provides in componentDidMount.


import React from 'react'
import {ScrollView} from 'react-native'
import axios from 'axios'

import ResultDetails from './ResultDetails'

class ResultList extends React.Component {

	constructor() {
			this.state = { resultList: [] }

	componentDidMount() {
		.then((response) => {
		this.setState({ resultList: })

	renderList = () => {
		return => {
		return <ResultDetails brand={brand} key={brand.model[0].name} />

	render() {
		return (
				{ this.renderList() }

export default ResultList


import React from 'react'
import {Text, View} from 'react-native'

const ResultDetails = (props) => {
	return (

export default ResultDetails

Adding Click Event Handler

We want to add a button that will when pressed open the selected Homepage URL inside the mobile web browser. ReactNative offers a component called Linking that we can use to accomplish this:

import {Linking} from 'react-native'


	buttonPress = {() => {
}} />

The button component used here is build using the TouchableOpacity component:

import React from 'react'
import {Text, TouchableOpacity} from 'react-native'

const Button = (props) => {
	return (
		<TouchableOpacity onPress={props.buttonPress}>
			<Text>Click Me!</Text>


export default Button