The content and look of the React Native website are outdated. Many of the existing guides and the overall flow of the documentation were written in 2015 and do not reflect well what it is like to build apps with React Native in 2019. When we asked what people dislike about React Native, documentation issues came up many times. We received more concrete feedback when we asked specifically.

This umbrella issue aims to outline the work necessary to update the website both with a new look and new content. While we'll handle the redesign work outside of this issue, we'd love to get your help in updating the entire documentation: if there is any item below issue that you'd love to help with, please send a Pull Request to this repo or get in touch otherwise! The best way to help right now is by updating the API docs with the actual implementations (see below) to ensure things are up-to-date for the upcoming release.

Goals

• A fresh look for React Native that represents the framework in 2019.
• Guides for beginners and advanced developers that are best in class.
• Always up-to-date API documentation that is synced with actual code and examples.

Redesign

The redesign is currently being worked on by @orta and @tesseralis. We are excited for you all to get a look very soon!

New Guide Structure

The current structure is quite outdated. It's hard to know upfront exactly what the new flow should be like but here is the proposal for a new structure which is open for discussion:

• Basics
  • Setup & Getting Started
  • Basics & React – this should mirror reactjs.org with a focus on RN, gently introduce RN and React, and link to reactjs.org for concepts.
  • Props – Removed and rolled into basics, with links to reactjs.org.
  • State – Removed and rolled into basics, with links to reactjs.org.
  • Style, Height and Width – Rolled up into a new guide "Styling & Dimensions"
  • Layout or "Thinking in flexbox" – Significantly expand this guide with more screenshots and possibly a live playground similar to yogalayout.com (first improvements were merged in add definition and example of how flexbox works #947).
  • Handling Text Input and Handling Touches – Merge into a single "Handling User Interactions" guide
  • Using a ScrollView and Using a List Views – Merge into a single guide
  • Networking – Ideally we'll factor data fetching into the preceding guides, like populating a ScrollView content, for example.
• New Guides
  • Guide on "The basics of native development for Android and iOS" aimed at web developers including Xcode, Android Studio and Cocoapods and Gradle
  • Include docs on RN integration into Kotlin and Swift apps.
  • A list of links on app deployment for Android and iOS
  • A guide on how to build a quality app (including links with information to app icons, launch screen, user interface guidelines and other polish).
• Improve the guide on building native modules including how to publish it as a package.
• Recommend third-party navigation libraries in the Navigation guide
• All other existing guides
  • Rethink all the guides beyond the basics, and improve them. This umbrella issue will be updated accordingly as we complete all the other work outlined in this issue.
  • RN Accessibility Guide
• ???

Documentation Rewrite Tasks

• Remove the Contributing guide from the website. Move all RN development related content into the RN GitHub repo. (@hramos)
• Remove obsolete API docs (@cpojer)
• Make the high level sections in the sidebar collapsible. Update Docusaurus to 1.9.0 #934 (@yangshun)
• Get rid of the “Guidelines for Text (https://github.com/facebook/react-native-website/blob/master/CONTRIBUTING.md#guidelines-for-text)” (@cpojer)
• Minor: Remove TimerMixins from the Timer docs, it's already gone from the code.
• Minor: Get rid of packager/config.js stuff across the docs and recommend using the Metro file in the template.
• Split the website up into high-level entry points for Docs (Guides) and APIs (Components and API docs). Split up Docs and API #962 @yangshun
• Minor: AppRegistry lifecycle docs aren't good: What do you dislike about React Native? react-native-community/discussions-and-proposals#64 (comment)
• A page that lists 30 of the top React Native community packages and high-quality third-party packages, like UI libraries that help people solve problems when building apps. See Add page for the Community Github Org with list of repos #884

API Docs

This is one where you can help even if you only have a few minutes. We need to update all our API docs and align them with the actual APIs in the code. For example, if you'd like to ensure consistency for the ScrollView component, it's best to go to the react-native repo and look for the ScrollView.js file. Then go through the ScrollView.md documentation in this repository and compare each prop that it accepts and update the .md file in this repo to align with what is in the code and send a Pull Request!

• Components
  • ActivityIndicator
  • Button
  • DatePickerIOS
  • DrawerLayoutAndroid
  • FlatList
  • Image
  • ImageBackground
  • InputAccessoryView
  • KeyboardAvoidingView
  • Modal
  • Picker
  • PickerIOS
  • ProgressBarAndroid
  • ProgressViewIOS
  • RefreshControl
  • SafeAreaView
  • ScrollView
  • SectionList
  • SegmentedControlIOS
  • Slider
  • StatusBar
  • Switch
  • Text
  • TextInput
  • ToolbarAndroid
  • TouchableHighlight
  • TouchableNativeFeedback
  • TouchableOpacity
  • TouchableWithoutFeedback
  • View
  • ViewPagerAndroid
  • VirtualizedList
• APIs
  • AccessibilityInfo
  • ActionSheetIOS
  • Alert
  • AlertIOS
  • Animated
  • AppRegistry
  • AppState
  • AsyncStorage
  • BackHandler
  • CameraRoll
  • Clipboard
  • DatePickerAndroid
  • Dimensions
  • Easing
  • ImageEditor
  • ImagePickerIOS
  • Image Style Props
  • InteractionManager
  • Keyboard
  • Layout Props
  • LayoutAnimation
  • Linking
  • ListViewDataSource
  • PanResponder
  • PermissionsAndroid
  • PixelRatio
  • PushNotificationIOS
  • Settings
  • Shadow Props
  • Share
  • StatusBarIOS
  • StyleSheet
  • Systrace
  • Text Style Props
  • TimePickerAndroid
  • ToastAndroid
  • Transforms
  • Vibration
  • View Style Props

Guidelines

• We'll prioritize improving high-impact content based on users per page per month. Right now, the pages with the most views are the guides in the basics section so we'll prioritize those.
• The getting started tutorial should be a full guide from first principles to getting started, building, linking and deploying an application. It should obviate the need for a getting started guide anywhere else.
• The documentation from a high-level should include all necessary details to build a performant high-quality application with React Native.
• Add live demos, screenshots or find other ways to engage with the content. This could also come in the form of a real example app, although we have not had the time to build one unfortunately. If the introduction was about building a real app and was a connected step-by-step guide, that would be ideal.
• If there is documentation that already exists in an official place (like Android documentation) elsewhere, link to it instead of recreating documentation. The website should be hyper focused on React Native itself. An example of this is linking to other guides on how to deploy an app to the app store, unless it requires specific knowledge because of React Native.

Finally, we are thinking of merging this repo back into the React Native repo to ensure API documentation will always stay up-to-date going forward. For now we'll keep using this repository for the purpose of this umbrella issue and we will attempt the merge later.