> For the complete documentation index, see [llms.txt](https://notes.danfitz.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://notes.danfitz.com/javascript/complete-react-native/f-setting-up-an-app.md).

# 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:

```js
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.

```js
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.

```js
<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.