The document discusses how to build a movie explorer app using React Native and the Navigator component. It covers setting up the basic navigator with initial and render scene functions. It then discusses adding multiple scenes, manipulating the route stack, adding navigation bars, and transitions. It also covers splitting code into separate scene components, passing data between scenes, using the ListView component to display search results, making API calls to the OMDb API, and displaying detailed movie information in a second scene.

1. Kobkrit Viriyayudhakorn, Ph.D.
CEO of iApp Technology Limited.
kobkrit@gmail.com
http://www.kobkrit.com

2. Movie Explorer App
$|> react-native init l8_movie

3. Navigator
• Navigator controls and handles the transition
between different scenes (screens) in the app.
• Navigator can switch the scenes to be display in
the apps.
• To setup the navigator, you provide one or more
objects call routes, to identify each scene.
• You also provide a renderScene function that
renders the scene for each route object.

4. Most Basic Navigator

5. Navigator’s Props
• initialRoute : Default route object when the app is
started.
• renderScene: Function that read route object and
return the JSX (UI) of that scene.

6. Second Scene
Click!

7. Navigator’s Route Stack
• initialRouteStack props : Supplying the Navigator’s All
possible routes object array.
• navigation.push(): Adding scene into the route stack.
• navigation.pop(): Remove the latest scene from the route
stack
• navigation.popN(2): Remove the latest 2 scene from stack.
{title: ‘First Scene’,
index: 0}
{title: ‘Second Scene’,
index: 1}
Displaying Scene

8. navigator.push({title: ‘Second Scene’, index: 1})

9. navigator.pop()

10. Some Other Route Stack
Manipulation Methods
• navigation.jumpTo(route): Transition to an existing
scene without unmounting.
• navigation.jumpForward(): Jump forward to the next
scene in the route stack.
• navigation.jumpBack(): Jump backward without
unmounting the current scene.
• navigation.popToTop(): Pop to the first scene in the
stack, unmounting every other scene.

11. navigator.jumpForward()

12. navigator.jumpBack()

13. Debugging routeStack
• navigation.getCurrentRoutes() =>
[{"title":"First Scene","index":0},{"title":"Second
Scene”,"index":1}]
• navigation.resetTo({"title":"First Scene”,”index”:0});
• navigation.getCurrentRoutes() =>
[{"title":"First Scene”,”index":0}]

14. Adding
Navigation Bar

15. • navigationBar props : Adding
UI for navigation bar.
• routeMapper’s props of
Navigator.NavigationBar:
define the UI of navigation
bar.
• LeftButton: UI for Left Part
of Nav Bar
• RightButton: UI for Right
Part of Nav Bar
• Title: UI for Center Part of
Nav Bar

16. Adding Transitions

17. • We can add transition in configureScene prop.
• There are so many transition available.
• Navigator.SceneConfigs.PushFromRight (default)
• Navigator.SceneConfigs.FloatFromRight
• Navigator.SceneConfigs.FloatFromLeft
• Navigator.SceneConfigs.FloatFromBottom
• Navigator.SceneConfigs.FloatFromBottomAndroid

18. • Navigator.SceneConfigs.FadeAndroid
• Navigator.SceneConfigs.SwipeFromLeft
• Navigator.SceneConfigs.HorizontalSwipeJump
• Navigator.SceneConfigs.HorizontalSwipeJumpFro
mRight
• Navigator.SceneConfigs.VerticalUpSwipeJump
• Navigator.SceneConfigs.VerticalDownSwipeJump

19. Adding Proper Styles

20. barStyle=“default” barStyle=“light-content”
Fixing Status Bar Style

21. Splitting Code
• Each scene should belong to a component (having its
own file).
• We need to change the Navigator’s renderScene
method to support the components rendering.
• We create two new files. Each file having a scene
component.
• ListScreen component in ListScreen.js
• DetailScreen component in DetailScreen.js

22. List Screen
ListScreen.js

23. Detail Screen
DetailScreen.js

24. Updated Index.js

26. Passing Value to New Scene
listScreen.js
index.js

27. Passing Value to New Scene
detailScreen.js

28. List View
• A core component designed for efficient display of
vertically scrolling lists of changing data.
• List View requires a ListView.Datasource to
manipulate the display data. Its simplest form is a
simple array of data.
• List View render each item of data according to
ListView.RenderRow callback.

30. List View Benefits over
Custom-made UI
• ListView supports advanced features such as
• Scrolling
• Section Segmentation
• Sticky Section Headers
• Header and Footer Supports
• Callback when reaching the end of the available data
(onEndReached), which can enable infinite browsing.
• Re-render only when necessary + Several Performance
Optimization

31. OMDb API
https://www.omdbapi.com/

32. Search a movie
http://www.omdbapi.com/?s=Batman

33. {
"Search": [
{
"Title": "Harry Potter and the Deathly Hallows: Part 2",
"Year": "2011",
"imdbID": "tt1201607",
"Type": "movie",
"Poster": "http://ia.media-imdb.com/images/M/V1_SX300.jpg"
},
{
"Title": "Harry Potter and the Sorcerer's Stone",
"Year": "2001",
"imdbID": "tt0241527",
"Type": "movie",
"Poster": “http://ia.media-imdb.com/images/M/..1_SX300.jpg”
},
…
},
http://www.omdbapi.com/?s=Harry

34. Get movie information
http://www.omdbapi.com/?i=tt1201607&plot=short&r=json

35. Making API • Create a new file api.js

36. iOS Block HTTP connection
• By default, only HTTPS connection is allowed in iOS.
• To remove this restriction, go to {project folder}/ios/movie/info.plist
• At <Key>NSAppTransportSecurity<Key> (line 41)
• Replace as shown below and save.

37. Getting Movies List by
Search

38. ListScreen.js

39. Styling Row

41. Adding Button to DetailScreen
Since we need imdbID for querying movie information, we
send it to detail screen instead of the movie name.

42. Show imdbID in Detail Screen

43. Click!

44. DetailScreen: Getting Movie
Information

45. DetailScreen.js

46. DetailScreen.js

48. Home Work
• Why only “Batman” movie?
• Make a search box for any kind of movies you
want.