diff --git a/local-cli/templates/HelloNavigation/App.js b/local-cli/templates/HelloNavigation/App.js index 9bd3691aa..8b422a767 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 110a60504..2c3d94b4c 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, FlatLists, 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 b6a0896fc..2317f38b7 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 7ccfba465..36ca5af70 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 c899f5dec..4d4fcc093 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 7aed21db8..6f1dfff32 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 4b993634d..62b7fba55 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 7a12d97f8..bf77b5101 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 bf9025301..8e040208a 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,