Setting Up An App

Project Generation

To generate a boilerplate project, you have 2 popular CLIs available:

• expo-cli

• react-native-cli

The expo-cli project generator comes with a lot more useful features pre-configured, so you'll generally prefer this. (Examples include icons, video, camera use, etc.)

More on React Navigation

Types of navigators

There are 3 kinds of navigators that are commonly used:

• DrawerNavigator

• BottomTabNavigator

• StackNavigator

Each of these navigators are like big objects that store the different views that can be rendered.

Configuring App.js

The App.js file is a special file where the default export is the root location from which React Native renders your entire application.

When you use react-navigation (and its associated libraries), 3 main things tend to happen in your App.js file:

1. You create the navigator using one of the navigator types, passing in an object containing your screens.

2. In that same navigator initialization, you pass configuration for that navigator.

3. You export the navigator wrapped around createAppContainer. (This happens because React Native expects a React component to be exported from App.js, and the navigator by itself is not a React component.)

Simple example:

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Search from './src/screens/SearchScreen';

const navigator = createStackNavigator(
  // 1. Object containing screens
  { Search: SearchScreen },
  // 2. Configuration
  {
    initialRouteName: 'Search',
    defaultNavigationOptions: { title: 'Business Search' },
  }
);

// 3. Wrap content in React component
export default createAppContainer(navigator);

Displaying Icons

Expo tends to give you a very useful library called @expo/vector-icons. This is a collection of React icon libraries like Ant Design, Font Awesome, etc. that you can use.

import { AntDesign } from '@expo/vector-icons';

<AntDesign name='search' size={30} />;

onEndEditing in TextInput

When a user is done adding text to an input and presses enter or submit, you use the onEndEditing prop to trigger a callback. This callback gets passed an event object.

<TextInput
  value={text}
  onChangeText={setText}
  onEndEditing={() => console.log('submitted!')}
/>

Styling Tips

Displaying images

By default, even if you give a primitive Image component a source prop, it won't appear on the page until you give the Image height and width dimensions.

Displaying content that goes beyond the screen

If your content gets long enough, it will go beyond the screen. By default, you can't get to that content.

There are 3 potential fixes to this:

• Apply flex: 1 to the parent container, so it stretches vertically as far as possible.

• Use a ScrollView component to add scroll-ability.

• Remove the parent container altogether and just use a React.Fragment, so you don't have to style any parent container.