diff --git a/local-cli/templates/HelloNavigation/App.js b/local-cli/templates/HelloNavigation/App.js index 9bd3691aa4c4e6..8b422a767b8bc7 100644 --- a/local-cli/templates/HelloNavigation/App.js +++ b/local-cli/templates/HelloNavigation/App.js @@ -1,5 +1,3 @@ -'use strict'; - /** * This is an example React Native app demonstrates ListViews, text input and * navigation between a few screens. diff --git a/local-cli/templates/HelloNavigation/README.md b/local-cli/templates/HelloNavigation/README.md index 110a605046931f..bc3da0b1c6a147 100644 --- a/local-cli/templates/HelloNavigation/README.md +++ b/local-cli/templates/HelloNavigation/README.md @@ -1,6 +1,6 @@ # App template for new React Native apps -This is a simple React Native app template which demonstrates a few basics concepts such as navigation between a few screens, ListViews, and handling text input. +This is a simple React Native app template which demonstrates a few basics concepts such as navigation between a few screens, FlaLists, and handling text input. Android Example @@ -13,7 +13,7 @@ The idea is to make it easier for people to get started with React Native. Curre - Navigating between screens - Handling text input and the software keyboard -This app serves as a template used by `react-native init` so it is easier for anyone to get up and running quickly by having an app with a few screens and a ListView ready to go. +This app serves as a template used by `react-native init` so it is easier for anyone to get up and running quickly by having an app with a few screens and a FlatList ready to go. ### Best practices @@ -21,7 +21,7 @@ Another purpose of this app is to define best practices such as the folder struc ## Not using Redux -This template intentionally doesn't use Redux. After discussing with a few people who have experience using Redux we concluded that adding Redux to this app targeted at beginners would make the code more confusing, and wouldn't clearly show the benefits of Redux (because the app is too small). There are already a few concepts to grasp - the React component lifecycle, rendeing lists, using async / await, handling the software keyboard. We thought that's the maximum amount of things to learn at once. It's better for everyone to see patterns in their codebase as the app grows and decide for themselves whether and when they need Redux. See also the post [You Might Not Need Redux](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367#.f3q7kq4b3) by [Dan Abramov](https://twitter.com/dan_abramov). +This template intentionally doesn't use Redux. After discussing with a few people who have experience using Redux we concluded that adding Redux to this app targeted at beginners would make the code more confusing, and wouldn't clearly show the benefits of Redux (because the app is too small). There are already a few concepts to grasp - the React component lifecycle, rendering lists, using async / await, handling the software keyboard. We thought that's the maximum amount of things to learn at once. It's better for everyone to see patterns in their codebase as the app grows and decide for themselves whether and when they need Redux. See also the post [You Might Not Need Redux](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367#.f3q7kq4b3) by [Dan Abramov](https://twitter.com/dan_abramov). ## Not using Flow (for now) @@ -34,7 +34,7 @@ We need your feedback. Do you have a lot of experience building React Native app ## How to use the template ``` -$ react-native init MyApp --version 0.42.0-rc.2 --template navigation +$ react-native init MyApp --template navigation $ cd MyApp $ react-native run-android $ react-native run-ios diff --git a/local-cli/templates/HelloNavigation/dependencies.json b/local-cli/templates/HelloNavigation/dependencies.json index b6a0896fc7c8ee..2317f38b79c837 100644 --- a/local-cli/templates/HelloNavigation/dependencies.json +++ b/local-cli/templates/HelloNavigation/dependencies.json @@ -1,3 +1,3 @@ { - "react-navigation": "1.0.0-beta.5" + "react-navigation": "1.0.0-beta.11" } diff --git a/local-cli/templates/HelloNavigation/views/HomeScreenTabNavigator.js b/local-cli/templates/HelloNavigation/views/HomeScreenTabNavigator.js index 7ccfba465562ef..36ca5af70fe227 100644 --- a/local-cli/templates/HelloNavigation/views/HomeScreenTabNavigator.js +++ b/local-cli/templates/HelloNavigation/views/HomeScreenTabNavigator.js @@ -1,5 +1,3 @@ -'use strict'; - import { TabNavigator } from 'react-navigation'; import ChatListScreen from './chat/ChatListScreen'; diff --git a/local-cli/templates/HelloNavigation/views/chat/ChatListScreen.js b/local-cli/templates/HelloNavigation/views/chat/ChatListScreen.js index c899f5dec74d41..4d4fcc093e9ca1 100644 --- a/local-cli/templates/HelloNavigation/views/chat/ChatListScreen.js +++ b/local-cli/templates/HelloNavigation/views/chat/ChatListScreen.js @@ -1,10 +1,8 @@ -'use strict'; - import React, { Component } from 'react'; import { ActivityIndicator, Image, - ListView, + FlatList, Platform, StyleSheet, View, @@ -16,47 +14,41 @@ export default class ChatListScreen extends Component { static navigationOptions = { title: 'Chats', - header: { - visible: Platform.OS === 'ios', - }, - tabBar: { - icon: ({ tintColor }) => ( - - ), - }, + header: Platform.OS === 'ios' ? undefined : null, + tabBarIcon: ({ tintColor }) => ( + + ), } constructor(props) { super(props); - const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { isLoading: true, - dataSource: ds, }; } async componentDidMount() { const chatList = await Backend.fetchChatList(); this.setState((prevState) => ({ - dataSource: prevState.dataSource.cloneWithRows(chatList), + chatList, isLoading: false, })); } - // Binding the function so it can be passed to ListView below - // and 'this' works properly inside renderRow - renderRow = (name) => { + // Binding the function so it can be passed to FlatList below + // and 'this' works properly inside renderItem + renderItem = ({ item }) => { return ( { // Start fetching in parallel with animating this.props.navigation.navigate('Chat', { - name: name, + name: item, }); }} /> @@ -72,9 +64,10 @@ export default class ChatListScreen extends Component { ); } return ( - index} style={styles.listView} /> ); diff --git a/local-cli/templates/HelloNavigation/views/chat/ChatScreen.js b/local-cli/templates/HelloNavigation/views/chat/ChatScreen.js index 04a9c62efd6e08..2c47545fa1712b 100644 --- a/local-cli/templates/HelloNavigation/views/chat/ChatScreen.js +++ b/local-cli/templates/HelloNavigation/views/chat/ChatScreen.js @@ -1,10 +1,8 @@ -'use strict'; - import React, { Component } from 'react'; import { ActivityIndicator, Button, - ListView, + FlatList, StyleSheet, Text, TextInput, @@ -15,16 +13,13 @@ import Backend from '../../lib/Backend'; export default class ChatScreen extends Component { - static navigationOptions = { - title: (navigation) => `Chat with ${navigation.state.params.name}`, - } - + static navigationOptions = ({ navigation }) => ({ + title: `Chat with ${navigation.state.params.name}`, + }); constructor(props) { super(props); - const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { messages: [], - dataSource: ds, myMessage: '', isLoading: true, }; @@ -47,7 +42,6 @@ export default class ChatScreen extends Component { } this.setState((prevState) => ({ messages: chat.messages, - dataSource: prevState.dataSource.cloneWithRows(chat.messages), isLoading: false, })); } @@ -82,7 +76,6 @@ export default class ChatScreen extends Component { ]; return { messages: messages, - dataSource: prevState.dataSource.cloneWithRows(messages), myMessage: '', } }); @@ -93,10 +86,10 @@ export default class ChatScreen extends Component { this.setState({myMessage: event.nativeEvent.text}); } - renderRow = (message) => ( + renderItem = ({ item }) => ( - {message.name} - {message.text} + {item.name} + {item.text} ) @@ -110,12 +103,13 @@ export default class ChatScreen extends Component { } return ( - + index} + style={styles.listView} + /> + { this.textInput = textInput; }} diff --git a/local-cli/templates/HelloNavigation/views/welcome/WelcomeScreen.js b/local-cli/templates/HelloNavigation/views/welcome/WelcomeScreen.js index 4b993634d01739..62b7fba55c5b06 100644 --- a/local-cli/templates/HelloNavigation/views/welcome/WelcomeScreen.js +++ b/local-cli/templates/HelloNavigation/views/welcome/WelcomeScreen.js @@ -1,5 +1,3 @@ -'use strict'; - import React, { Component } from 'react'; import { Image, @@ -14,18 +12,15 @@ export default class WelcomeScreen extends Component { static navigationOptions = { title: 'Welcome', - header: { - visible: Platform.OS === 'ios', - }, - tabBar: { - icon: ({ tintColor }) => ( - - ), - }, + // You can now set header: null on any component to hide the header + header: Platform.OS === 'ios' ? undefined : null, + tabBarIcon: ({ tintColor }) => ( + + ), } render() { diff --git a/local-cli/templates/HelloNavigation/views/welcome/WelcomeText.android.js b/local-cli/templates/HelloNavigation/views/welcome/WelcomeText.android.js index 7a12d97f8f91b0..bf77b5101c7a3a 100644 --- a/local-cli/templates/HelloNavigation/views/welcome/WelcomeText.android.js +++ b/local-cli/templates/HelloNavigation/views/welcome/WelcomeText.android.js @@ -1,5 +1,3 @@ -'use strict'; - import React, { Component } from 'react'; import { StyleSheet, diff --git a/local-cli/templates/HelloNavigation/views/welcome/WelcomeText.ios.js b/local-cli/templates/HelloNavigation/views/welcome/WelcomeText.ios.js index bf90253014f7e4..8e040208abbf39 100644 --- a/local-cli/templates/HelloNavigation/views/welcome/WelcomeText.ios.js +++ b/local-cli/templates/HelloNavigation/views/welcome/WelcomeText.ios.js @@ -1,5 +1,3 @@ -'use strict'; - import React, { Component } from 'react'; import { StyleSheet,