Sign in Go Pro

Build a React Native Application

Displaying Images and Icons in React Native

This lesson is for PRO members.

Upgrade today to get access to all the PRO lessons.

Unlock this lesson
Autoplay

Up next

Previous

About

Importing and using images can be accomplished by including the images in your app's source, and references the image using a regular import.

Icons are also easy to setup and use, by utilizing an icon font. We use the icons that come packaged with Native Base to add open circles and checkmarks to the todo items.

Images

Star and Checkmark images here

Summary of Content:

  • Download 1x, 2x, and 3x version of icons
  • Import icons, and use them with the Image component
  • Add that image to the tab bar
  • Using an icon font set
  • Styling icons and images

Instructor

Links

Comments

Make sure you don't use react-navigation 2 because it doesn't work well (it doesn't show the check icon plus it produces a deprecation warning).

The code of the video is not working!

In line 31 of file App.js there is:

"...TabNavigator.Presets.iOSBottomTabs"

But, this is deprecated since it has been updated this file in Lessons 12 "React Native Routing and Navigation with the React Navigation Library":
https://caster.io/lessons/react-native-routing-and-navigation-with-the-react-navigation-library

It has been changed from line 10:
"import { TabNavigator, StackNavigator } from 'react-navigation'"
to
"import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';"

So we need to replace line 31 "...TabNavigator.Presets.iOSBottomTabs" to something, some code.

I was trying to adapt the code below to the example of this current lesson:
https://snack.expo.io/@react-navigation/stacks-in-tabs

I tried that and it didn't work.

``
const TabNav = createBottomTabNavigator({
TodoNav: { screen: TodoNav },
About: { screen: About },
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'TodoNav') {
iconName =
check;
} else if (routeName === 'About') {
iconName =
star`;
}

// You can return any component that you like here! We usually use an
// icon component from react-native-vector-icons
return ;
},
}),
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: '#0066CC',
showIcon: false,
labelStyle: {
fontSize: 12
},
},
// ...createBottomTabNavigator.Presets.iOSBottomTabs
})
```

After new attempt I got a new code for App.js, that produces this result:
http://bit.ly/2P4oiZe

Where is the TodoNav icon?

Here is the App.js source code:

```
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';

// import { TabNavigator, StackNavigator } from 'react-navigation'
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';
import Animated from 'react-native-reanimated';

import ToDoList from './src/components/TodoList'
import About from './src/components/About'
import AddTodo from './src/components/AddTodo'

const TodoNav = createStackNavigator({
TodoList: { screen: ToDoList },
AddTodo: { screen: AddTodo }
}, {
mode: 'modal'
})

const TabNav = createBottomTabNavigator({
TodoNav: { screen: TodoNav },
About: { screen: About },
}, {
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: '#0066CC',
showIcon: true,
labelStyle: {
fontSize: 12
},
},
// ...createBottomTabNavigator.Presets.iOSBottomTabs
})

const Apps = createAppContainer(TabNav)

type Props = {};
export default class App extends Component {
render() {
return (

);
}
}

const styles = StyleSheet.create({
});
```

Now, finally, problem solved!

Here is the updated App.js:

```
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';

// import { TabNavigator, StackNavigator } from 'react-navigation'
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';
import Animated from 'react-native-reanimated';

import ToDoList from './src/components/TodoList'
import About from './src/components/About'
import AddTodo from './src/components/AddTodo'

const TodoNav = createStackNavigator({
TodoList: { screen: ToDoList },
AddTodo: { screen: AddTodo }
}, {
mode: 'modal'
})

const TabNav = createBottomTabNavigator({
TodoNav: { screen: ToDoList }, <<<<<<<<<<-------------------------------------------------- LINE CHANGED
About: { screen: About },
}, {
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: '#0066CC',
showIcon: true,
labelStyle: {
fontSize: 12
},
},
// ...createBottomTabNavigator.Presets.iOSBottomTabs
})

const Apps = createAppContainer(TabNav)

type Props = {};
export default class App extends Component {
render() {
return (

);
}
}

const styles = StyleSheet.create({
});
```

So the change was:

FROM
TodoNav: { screen: TodoNav },
TO
TodoNav: { screen: ToDoList },

>
You need to go PRO to post comments.

Lessons in Build a React Native Application