facebook / react-native-website Goto Github PK

React Native v0.54 uses React v16.3, which deprecates various lifecycle methods including componentWillMount(). In the PanResponder docs, the recommended approach is to set up PanResponder methods in componentWillMount(). Could the docs now be updated with the recommended replacement approach?

Yoga has a new website, which includes a neat interactive playground: https://yogalayout.com/

We can link to the new site and let people know it's a good place to try things out if you have any layout-related questions.

It seems like the FlatList component is recommended in every version of the doc, even though it was only introduced from 0.43.

It would be better to provide a proper ListView docs for the version anterior to 0.43

I'm the maintainer of react-native-ART-doc, how can I contribute this part to API list?

On Url:

https://facebook.github.io/react-native/docs/geolocation.html

At line
ACCESS_FINE_LOCATION permission using the PermissionsAndroid API.

The link is invalid for PermissionAndroid API, it is leading to 404

On https://facebook.github.io/react-native/versions.html all the "Release notes" links point to this URL: https://facebook.github.io/react-native/-rc.0 which returns a 404.

On url
https://facebook.github.io/react-native/docs/sectionlist.html

At

If you don't need section support and want a simpler interface, use <FlatList>.

The Flatlist link is leading to 404 page.

There is a ton of example how to use the react native components but there is no doc how to package the code and deploy it. Mainly there is no doc about
react-native bundle

So please add doc for it or if anybody knows good resource for it then please share it

I want to add i18n zh-Hans version of react-native, but files in crowdin is empty

when i want to delete old version in version.json for 0.5 。 I delete three file， versioned_docs,versioned_sidebars,version.json in 0.5 about. but not work ,may i lost something delete?

At Navigating Between Screens page, links to React Navigation Getting Started Guide and Intro to Navigators are getting 404.

https://github.com/facebook/react-native-website/blob/master/docs/sectionlist.md shows several props like initialNumToRender, keyExtractor, etc

https://facebook.github.io/react-native/docs/sectionlist.html shows only stickySectionHeadersEnabled with a blank type and no description:

We currently allow readers to switch the website version. This lets them see the docs as a snapshot for a given React Native release. For example, what were the APIs for ScrollView back in 0.20 versus 0.50?

Our goal with the content in The Basics and Guides is to provide information that is relevant today, with the assumption that the user is on the latest release.

In order to make this work under our versioning infrastructure*, we've had to place this content in website/versioned_docs/version-0.5, e.g. the oldest public release. By doing so, we're always serving the freshest version of these guides, but we also add some friction as people will need to edit two files (those in docs/ as well as website/versioned_docs/version-0.5) to ensure the edits are not lost when a new release is cut.

We can easily fix this by adding a script that syncs edits made to these specific files. With that in place, we only need to tell our readers to edit the files in docs/ and to ignore anything in website/versioned_docs/.

The list of files that would need to be synced are (as gleaned from sidebars.json):

The Basics

• docs/getting-started.md
• docs/tutorial.md
• docs/props.md
• docs/state.md
• docs/style.md
• docs/height-and-width.md
• docs/flexbox.md
• docs/handling-text-input.md
• docs/handling-touches.md
• docs/using-a-scrollview.md
• docs/using-a-listview.md
• docs/network.md
• docs/more-resources.md

Guides

• docs/components-and-apis.md
• docs/platform-specific-code.md
• docs/navigation.md
• docs/images.md
• docs/animations.md
• docs/accessibility.md
• docs/improvingux.md
• docs/timers.md
• docs/debugging.md
• docs/performance.md
• docs/gesture-responder-system.md
• docs/javascript-environment.md
• docs/direct-manipulation.md
• docs/colors.md
• docs/integration-with-existing-apps.md
• docs/running-on-device.md
• docs/upgrading.md
• docs/troubleshooting.md

Guides (iOS)

• docs/native-modules-ios.md
• docs/native-components-ios.md
• docs/linking-libraries-ios.md
• docs/running-on-simulator-ios.md
• docs/communication-ios.md
• docs/building-for-apple-tv.md
• docs/app-extensions.md

Guides (Android)

• docs/native-modules-android.md
• docs/native-components-android.md
• docs/headless-js-android.md
• docs/signed-apk-android.md
• docs/android-building-from-source.md

Contributing

• docs/contributing.md
• docs/maintainers.md
• docs/testing.md
• docs/understanding-cli.md

• When versioning is enabled, as is the case for this site, the static site generator does not actually serve content from the docs/ folder. Instead, it will go through each sub-directory in website/versioned_docs until it finds the most recent version-* directory that contains the requested document. In this manner, we always serve the most recent version of the doc. Whenever a new version is cut, we check against docs/ and only copy over those files that have changed. This is why these evergreen files listed above are all placed in website/versioned_docs/version-0.5 even though they've all seen multiple edits since version 0.5 - they were manually placed there.

I was confused when clicking the Edit button that I was being taken into the versioned_docs/version-X.XX folder.

I'm assuming this is incorrect, based on this quote from README.md:

Do not edit the auto-generated files within 'versioned_docs/' or 'versioned_sidebars/' unless you are sure it is necessary. Edits made to older versions will not be propagated to newer versions of the docs.

I followed the instructions

Then run the following commands to create a new React Native project called "AwesomeProject":
create-react-native-app AwesomeProject

cd AwesomeProject
npm start

However it didn't work because there was no mention of watchman (in this page specifically)
Is it possible to add that?
https://facebook.github.io/react-native/docs/getting-started.html

Scroll to the bottom of http://facebook.github.io/react-native/docs/animated.html - there's a few empty prop types.

In the blog's atom feed, links to articles are broken.
They point to, e.g.,

• /blog/2018/01/18/implementing-twitters-app-loading-animation-in-react-native.html (which redirects to https://code.facebook.com)
• instead of /react-native/blog/2018/01/18/implementing-twitters-app-loading-animation-in-react-native.html

Lets add a notification that it will be inherited from activity theme. See https://stackoverflow.com/questions/6468602/what-is-default-color-for-text-in-textview/33176972

I noticed a lot of images are not displayed correctly because the link doesn't exist, for example almost every image in Performance points to /docs/assets/ while the images are in /website/static/img.

The naming sounds weird to me (I think it should be in /docs/assets being ...assets of the documentation) so before sending a PR to fix I wanted to know which folder should they be in?

Ping @hramos as it seems you attempted to fix the links in 42162ef.

Hello

I would like to translate the React Native Docs in Italian.

I can submit the contributions on Github as I am one of the contributors of Utopian.io

Is there any guide or repository for it?

I look forward to understand how to get started.

Any help appreciated

Thank you

Best Regards
Michael Asumcinei

The hyperlink with caption Create React Native App (line 156) is broken here at
https://github.com/facebook/react-native-website/blob/master/docs/getting-started.md

• other channels link is fails in How to contribute page.

Screen shot on How to contribute page

There are many props (like ListEmptyComponent) in flatlist.md file, but the web page just show one prop (numColumns). Something broken?

The file ResponderEventPlugin.js is nowhere to be found in the source code of react-native although it is referenced by name 33 times in 6 files. ResponderEventPlugin can be found inside of Libraries\Renderer\ReactNativeRenderer-prod.js though.

Having had a look at ReactNativeRenderer-prod.js I realised that there are neither details nor documentation inside of this file. Thus, I would propose to completely remove this sentence.

#125

Link in Easing.back() docs is broken
https://facebook.github.io/react-native/docs/easing.html#back

This issue is most likely present because the latest master changes haven't been deployed, perhaps. All / most images related issues have been fixed in #70, as far as I understand.

For the docs/getting-started.md is it an idea to document the best or minimal version of at least NodeJS for React Native?

So in current docs, we have a section about React Navigation but because there is a change in react-navigation documentation website some of the links in the docs are broken.

Can I go ahead and make the necessary change in the current docs ? or just leave it like that for the time being.

Prior to the repo split, whenever the website was built, a script would grab the contents of docs/contributing.md and insert them into CONTRIBUTING.md in the root of the facebook/react-native repo.

This allowed us to easily link to nicely-rendered contribution docs on the web while still having an offline, easy to find, copy in the repo itself. GitHub will also highlight any CONTRIBUTING.md file in a repo when a new issue or PR is opened.

This file is not being actively edited, so it's fine to just manually sync them across both repos for now. If someone wants to take a stab at keeping them in sync, feel free to do so.

Warning: You might consider taking a similar approach to how we deploy the website, where we commit directly to the gh-pages branch on the facebook/react-native repo. It's fine to do that for a non-master branch, because those are GitHub-only, but master is just a copy of whatever Facebook stores on the internal repo. We cannot commit directly to master, as doing so (even if we had the necessary permissions) would get the two repos out of sync. This is why we have tooling in place that grabs patches from PRs and applies them internally before syncing them out, instead of allowing regular merges on git.

https://facebook.github.io/react-native/docs/timers.html

It's common for people to ask something like: "hey I did setInterval(() => /* get location */, 1000) but it doesn't do anything when i background the app, what do i need to do?" -- we should explain that it isn't so simple, and link to the headlessjs doc as well as information about ios and android background execution models. It might even be worth having another section about this that we just link to from timers

From the Networking page:

By default, iOS will block any request that's not encrypted using SSL. If you need to fetch from a cleartext URL (one that begins with http) you will first need to add an App Transport Security exception. If you know ahead of time what domains you will need access to, it is more secure to add exceptions just for those domains; if the domains are not known until runtime you can disable ATS completely. Note however that from January 2017, Apple's App Store review will require reasonable justification for disabling ATS. See Apple's documentation for more information.

The part about disabling it completely has a link, but how to add an exception for specific domains is not. Linking to a resource that explains how to do this would be useful, particularly for users of create-react-native-app, which seems to hide things like the info.plist file mentioned in this article that appears if you google it.

Hey! Great docs.

The link referenced to ref-callback in the Direct-Manipulation section is broken.

Here's a link to the code, and the broken link.

Thanks!

Hi,

Trying to build a first RN custom module, the ios guide Is very comprehensive but I was wondering if there is some sort of template repo that I could use to bootstrap my native module, if it doesn't exist I'm happy to start working on it.

Thanks :)

The saveImageWithTag method is broken on CameraRoll Docs pages.
Start from v0.45.

@frantic wrote in facebook/react-native#14979

As discussed with @brentvatne and other during ChainReact '17, it would be great to have a section in the docs that lists mobile-specific important UX details.

This is a rough checklist:

• hitSlop
• tab bar
  • tab selected tab to pop
  • if empty stack, scroll to top
• touchable with ripple
• keyboard:
  • autofocus and return key
  • space under keyboard and dismissing
  • keyboard type, capitalization and autocorrect
• animated with useNativeDriver
  • only some properties supported -- no layout properties. use
    transforms whenever you can rather than width/height/margin,
    so you can take advantage of this
• nativedriver for animated.event in scroll view or it'll be janky
• loading states
  • onPressIn trick for preloading
  • placeholder elements
  • using data that you already have to partially render
  • loading state for image: what do you see when it's not there? maybe
    grey placeholder, maybe gradient, maybe activity indicator, maybe
    low-res version
• deferring rendering expensive (eg: maps) when possible
• status bar color, size
• fading in network images
• cancellable gestures
• meaningful animations -- shared transitions for example
• respect battery state
• prompt before asking permissions
• portrait / landscape: lock if you don't support
• android back button: navigation library can do some things but not all
  for you, need to consider where else users expect it to work
• compress images properly, provide 2x/3x
• sometimes text should be selectable
• ellipsize truncated text
• respect network status
• splash screen (white flash)
• maybe don't add an inline submit button to your form (use keyboard submit or add to navbar!)
• iphonex safe areas

There's a link to the old React Documentation in Handling Text Input.

The broken link is React docs on controlled components:

The link open the following url:

The first method of AppState should be the getter of currentState.

When I visit https://facebook.github.io/react-native/docs/flexbox.html , around 15-20 seconds after the page loads, the simulators error with TypeError: Cannot read property 'undefined' of undefined, even though nothing has changed in the text box. I'm running osx 10.12.6 with Chrome Version 63.0.3239.132 (Official Build) (64-bit).

Each prop title has a link/button to the left of it:

This link/button only appears when you hover over the text representing the prop name. Consequently, you cannot click on the link/button because it disappears when you attempt to hover over it in order to click it.

Adam Comella
Microsoft Corp.

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

yes

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 6.11.0
Yarn: 1.3.2
npm: 5.4.2
Watchman: 4.7.0
Xcode: Xcode 8.3.3 Build version 8E3004b
Android Studio: 2.3 AI-162.4069837
Chrome - 63.0.3239.84
Firefox - 57.0

Packages: (wanted => installed)
react-native: 0.48.1 => 0.48.1
react: 16.0.0-alpha.12 => 16.0.0-alpha.12

Target Platform: iOS (10.3)

Steps to Reproduce

(Write your steps here:)

1. Open Website https://facebook.github.io/react-native/
2. Search for Switch component using the search bar
3. Modal drop down appears with appropriate search results
4. Select Switch component
5. Inside Switch component docs, search for Button component.
6. Nothing happens.

But,
7. Go back again to home page i.e https://facebook.github.io/react-native/
8. Search for Button, it shows all search results again.

Expected Behavior

When you search for Button component inside Switch Component docs, a Modal dropdown must appear with all the search results

(Write what you thought would happen.)

Actual Behavior

Nothing happens! the search bar does nothing.

(Write what happened. Add screenshots!)

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

Fix F8 app tutorial url link

Haven't modified any code - this is what pops up after a few seconds on the tutorial for me. Looks like this happens on all other pages, too.

In the documentation for the View component the style attribute is pretty much empty.

I reported this 7 months ago when it first started happening in version .43-.44 but it was close because the docs were moved to this project.

It would be great if this could get fixed soon, to help out all the people using the versions of react-native that are not fully documented.

A bit ironic, but yeah, no videos play for me. https://facebook.github.io/react-native/docs/improvingux.html

On https://facebook.github.io/react-native/docs/scrollview.html page at

<ScrollView> vs <FlatList> - which one to use?

FlatList link redirect to a 404 - Page not found error (https://facebook.github.io/react-native/flatlist.md)