Start with React Native: Part 2. Build an Expo Application
Background image

April 29, 2021

Start with React Native: Part 2. Build an Expo Application

Patryk Kluczak

Frontend Developer
SHARE
frontend app(4)

Introduction

Welcome again! It’s time for the second part of our react native app. Like I said last time today I will show you how to create and manage app views, create routing and add and install few useful plugins. Let’s begin.

Used Plugins

First of all we have to add plugins to the project. Like always it will be very simple. To install plugins to the project you can use npm or yarn.

First plugin it’s a react-navigation with @types/react-navigation of course if you use typeScript in your project. ;) The extension is the counterpart to the react-router-dom for standard react projects.

Second plugin will be styled-components with @types/styled-components it works in react native too.

Last extension will be a language plugin. I chose react-intl with @types/react-intl but If you prefer the i18n framework don’t worry, work’s too.

Ok so for now we know what plugins will be needed so install them. yarn add react-navigation yarn add styled-components yarn add react-intl

Simple right ? …. but on an android device you can see errors about missing Intl variables. The solution is very simple: yarn add intl

Code examples

Here is a example without any rocket science. it’s really similar to the browser react app import React from 'react';

import 'intl';
import { IntlProvider } from 'react-intl';
 
import Router from './components/Router';
import messages_en from './language/en.json';
 
interface messagesType {
 [name: string]: { [name: string]: string };
}
 
const messages: messagesType = {
 en: messages_en,
};
 
const App = () => {
 const language = navigator.language
   ? navigator.language.split(/[-_]/)[0]
   : 'en';
 
 return (
   <IntlProvider locale={language} messages={messages[language as string]}>
     <Router />
   </IntlProvider>
 );
};
 
export default App;

Ok now we can go ahead to the router component. In this place where we use Stack.Navigator and manage Stack.Screen are the counterparts of BroswerRouter

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { ThemeProvider } from 'styled-components';
 
const Stack = createStackNavigator();
 
const Router = () => {
 return (
   <ThemeProvider theme={variables}>
     <NavigationContainer>
       <Stack.Navigator initialRouteName="Home">
         <Stack.Screen name="Home" component={Home} />
         <Stack.Screen name="Dashboard" component={Dashboard} />
       </Stack.Navigator>
     </NavigationContainer>
   </ThemeProvider>
 );
};
 
export default Router;

For our app I prepare two components/views Home is a little bit modified from the previous article. I created button

  <Button onPress={() => navigation.navigate('Dashboard')}>
       <Text>
         <FormattedMessage id="app.home.button" />
       </Text>
  </Button>

And style via style-components but why did I decide to use styled components? because in my opinion it fits into the logic of working on components better then standard CSS class.

Styled components

Styled components is a library that allows us to change standard CSS rules for React components and use them like normal functional components. Use template literals and all power of CSS including animations and keyframes objects.

Of course we have another benefits like:

  • No class name bugs
  • Simple dynamic style
  • Simple managed and deleted CSS rules
  • Automatic vendor prefixing

To summarizing, we can create reusable components and if necessary overwrite actuality existing code, add completely new or add flag and render extra CSS depending on the needs. You decide which solution will be the best.

In the example below I used styled components like wrapper. In the same way we can modify another components, if you want style HTML element you have to write something like this

import styled from 'styled-components';
 
export const Input = styled.input`
 ....
  CSS rules
 ....
`;
 
export const Paragraph = styled.p`
 ....
  CSS rules
 ....
`;

Like you see it simple but what if in the project we use TypeScript? Don't worry styled components support TS and you can write:

export const Paragraph = styled.p<{ bold?: boolean }>`
 font-weight: ${(props) => (props.bold ? '700' : '400')};
`;

At the beginning I mentioned the flags. It is useful when you want to add more rules or isolate fragments of code.

import styled, { css } from 'styled-components';
export const Paragraph = styled.p<{ bold?: boolean; error?: boolean }>`
 font-weight: ${(props) => (props.bold ? '700' : '400')};
 
 ${({ error }) =>
   error &&
   css`
     font-color: red;
     font-size: 18px;
     text-align: center;
   `}
`;

Ok, we come back to the app and write some CSS rules to our button.

TouchableOpacity it’s a wrapper area where the user can touch and activate some action. In this case navigate to the other view.

import styled from 'styled-components';
import { TouchableOpacity } from 'react-native';
 
export default styled(TouchableOpacity)`
 background-color: ${({ theme }) => theme.colors.violetLight};
 padding: 8px 16px;
 border-radius: 3px;
`;

OK. so all for now On the last part of our mini series we will talking about app debugging.

What do you think? Share your impressions!

Meet the author

Patryk
Diamond logo icon
Mail logo

Patryk Kluczak

Frontend Developer

I am JS Developer, specialize in creating stucture and implementing solution for multiplatform app.

Still have some questions?

If you have any questions, feel free to contact us. Our Business Development Team will do their best to find the solution.