Component Docs Drive

[rachelnabors]

🍾🎉🎈Thank you everyone! We are mission complete!🍾🎉🎈

We have a lot of component and API docs that need updating! The good news is that updating these docs can be a fun way to become more familiar with React Native’s core code while contributing to docs that help thousands of learners around the world! If this looks intimidating, we have you covered! There’s a handy guide below that should help you out :)

What needs updating?

• Update the API to reflect the props and methods reflected in core
• Ensure example code is 1) in a Snack player and 2) uses function components and Hooks:
  • Add example code if it is missing
  • Update example code to use function components and React Hooks
  • Put example code in an embedded Snack player

How to contribute?

1. First, select a component or API from the table below.
2. Choose a single update to make:
   1. Update the API
   2. Add missing example code
   3. Convert existing example code to use function components and React Hooks
   4. Embed any existing example code in a Snack player
3. Comment below on what component/API you want to take on and which fix; I'll update the matrix with your name
4. Submit your PR tagged with this issue

When your PR is merged, we’ll convert your name into a checkmark, indicating completion!

Update the API to reflect the props and methods reflected in core

This part requires a little investigating! Check react-native/Libraries/YourComponent and react-native/Libraries/Components/YourComponent for your component or API’s list of props. Sometimes they can be hidden, like the LayoutProps API is in react-native/Libraries/StyleSheet/StyleSheetTypes.js.

Pro tip: If you get stuck, search for “YourComponent.js” or search the “YourComponent” with a prop or method already listed.

Add missing example code

If there is no example code, add a new example using function components and Hooks. Embed your code with a Snack player like so:

```SnackPlayer name=Component/API%20Example

// Example code goes here

### Convert existing example code to use function components and Hooks

If there’s a class component example already, use this [handy guide on converting class components to function components and Hooks](https://scotch.io/bar-talk/convert-class-components-to-functional-components-in-a-react-project-solution-to-code-challenge-14) to make a function component example. Then use the following code snippet to keep both function and class component examples (please remove the first and final ` ``` `—markdown formating trouble!): 

<div class="toggler">
  <ul role="tablist" class="toggle-syntax">
    <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
      Function Component Example
    </li>
    <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
      Class Component Example
    </li>
  </ul>
</div>

<block class="functional syntax" />

```SnackPlayer name=Component/API%20Function%20Component%20Example

// Function Component Example goes here

// Class Example goes here

If there isn’t a class component example or there was already a function component example, just use the following code to embed just a function component example.

Embed any example code with a Snack player

```SnackPlayer name=Component/API%20Example

// Example code goes here

### Submit your PR!

Follow the repo's setup instructions [here](https://github.com/facebook/react-native-website). 

> **Remember** your doc changes will be under facebook.github.io/react-native/docs/**next/**yourcomponent, _not_ facebook.github.io/react-native/docs/yourcomponent

1. Work on master docs (docs/*.md), **not versioned ones** (website/versioned_docs/version-0.*/*.md)
2. Tag your PR with this issue #1579 so it gets properly recognized

### Code Tips

* Extract styles to `StyleSheet` outside of component and at bottom of sample
* Use arrow functions instead of anonymous functions
* Do not leave unused `import`s 
* Sort `import`s alphabetically
* Remember to use semicolons (especially after `export`s)
* Name your Snack "<Component/API>%20Example"
* If the API or component is platform specific, specify which platforms for the Snack player to show like so: ` ```SnackPlayer name=AndroidOnlyAPI&supportedPlatforms=web,android`
* If the API or component has platform specific parts, use `supportedPlatforms` 

Before committing...

* Run `yarn prettier` to ensure your code is made pretty before committing.
* Also `cd website` and `yarn start` to generate any changes to sidebars

## Docs Drive Leaderboard

**🍾🎉🎈Thank you to all these wonderful folks!🍾🎉🎈**

These are the people and their contributions to the docs!

* @ronnyiscoding = { ActivityIndicator : #1590, ImageStyleProps : #1602 }
* @dsznajder = { Button : #1592, TouchableHighlight : #1591 }
* @lfoliveir4 = { FlatList : null}
* @amandeepmittal = { Image : #1582, View : #1582, Share : #1674 }
* @nnajiabraham = { KeyboardAvoidingView : null, VirtualizedList : [#1742, #1632], AppRegistry : #1740 }
* @Darking360 = { Modal : #1605 }
* @kaioduarte = { Picker : #1595, Switch : #1594, TouchableOpacity : #1596, ShadowProps: #1664, Text Style Props : #1710 }
* @espipj = { StatusBar : #1624, TouchableNativeFeedback : #1646, ToastAndroid : #1614, DrawerLayoutAndroid : #1683, Layout Props : #1750 }
* @DaniAkash = { Alert : #1597, Dimensions : #1671, Animated : #1691, LayoutAnimation : #1721, BackHandler : #1685, Transforms : #1613, PanResponder : #1691 }
* @mitulsavani = { View Style Props : #1612 }
* @mdabrowka = { AccessibilityInfo : #1629 }
* @lcelso = { StyleSheet : #1626 }
* @alvessteve = { ImageBackground : #1598 }
* @tsawan = { Text : #1623, AppState : #1666 }
* @Naturalclar = { TextInput : #1584 } 
* @simek = { ActionSheetIOS : #1680, PixelRatio : #1687, Easing : #1682, Settings : #1700 }
* @mohamedsgap = { AppState : #1695, Vibration : #1707, Systrace : #1749 }
* @kakukakug = { TouchableWithoutFeedback : #1686 }
* @ahmdtalat = { Keyboard : #1619 }
* @gedeagas = { Animated : #1702, Flatlist : [#1705, #1729], PermissionsAndroid : #1720, SectionList : [#1754, #1717] }
* @danilobrinu = { InteractionManager : #1712, Linking : #1751 }

[rachelnabors]

@simek Changes to versioned docs have to happen in /website/versioned_docs//. Add the .md with the content you want to edit for that version. More information on how to do that is here: https://docusaurus.io/docs/en/next/versioning

Are you on Discord or Twitter? Perhaps there or in a new issue would be the best place to coordinate, as this channel is for people updating the docs and we could confuse them with conversation about versioning files :)

[Simek]

@rachelnabors Sorry for bringing up this topic here. I have some basic knowledge about versioning in Docasurus but in my opinion the right process depends on final effect you want to archive. We can continue this discussion on the Discord, since I'm not a frequent user of my Twitter account. My Discord handle is Simek#2069.

[kakukakug]

Hi @rachelnabors, I Want to contribute React Native! please can you assign me for TouchableWithoutFeedback: Modify the example to use snacks.

[tsawan]

@rachelnabors I've just checked and the following component examples are already using functional components and hooks so no further action is required.

• InputAccessoryView
• RefreshControl
• SafeAreaView
• ScrollView

[tsawan]

@rachelnabors I've also checked that almost all of the remaining APIs don't need any work for "Examples uses functional components and hooks". So these can be marked as Done or NA.

[rachelnabors]

@kakukakug You're on it!

@tsawan Thanks for checking on all those! I've removed those four components from the matrix. I'm happy to tick off the APIs—but could you be more specific than "almost all?" Who's missing yet?

[ahmdtalat]

Hello guys, I'm working on the Keyboard API, I added hooks example and snacks, but how to check if the API is up to date? #1619

[rachelnabors]

@ahmdtalat Check out the "Update the API to reflect the props and methods reflected in core" section!

[tsawan]

@rachelnabors following APIs don't need anything for "Examples uses functional components and hooks": ActionSheetIOS, Easing, InteractionManager, Settings, Systrace. I am not too sure about BackHandler API, so you may want to check this.

[rachelnabors]

@tsawan Hmm, they may have function components in their example code, but they still need big example Snacks that use them as well. So they stay up!

[lfoliveir4]

Matrix is updated! Thanks everyone!

@lfoliveir4 just pick another one and get to it! Flatlist is in the queue. There area lot of PRs to merge. Thank you for your patience!

@rachelnabors So I just have to wait for PR? Can I contribute with another API if I have it available?

[nonewcode]

Will get to SectionList this weekend, apologies for the delay!

[rachelnabors]

So I just have to wait for PR? Can I contribute with another API if I have it available?

@lfoliveir4 You sure can :) Don't wait on my PRs. Sometimes there's feedback, but it's rare that that should stop you from tackling a new task!

@codecog Oh thank you so much!

[rachelnabors]

Folks! We're hoping to freeze the docs in 2-3 weeks.

Your contributions are making this a great new edition of the React Native docs! Thank you so much for your hard individual efforts, from the tiniest example update to whole new pages!

If you have the bandwidth, taking on those APIs are going to help push us over the edge to completeness. If you've updated a component already, I know you have what it takes to tackle and API. Hit me up here, on Twitter, or Discord if you run into any trouble!

Let's do this!

[rachelnabors]

Oh snap! We are so close to finishing all the Core Components!

• @kakukakug, we're counting on you for TouchableWithoutFeedback
• @ronnyiscoding, can you check VirtualizedList to see if it's API is up to date?
• We need a volunteer for DrawerLayoutAndroid! Any takers?

[espipj]

If not worked/assigned yet I could take DrawerLayoutAndroid @rachelnabors

[ahmdtalat]

@rachelnabors Hello Rachel, I've updated the keyboard API and now I think it's done, check the changes. :) #1619

[rachelnabors]

@espipj It's all yours!

Matrix is updated!

[lcelso]

@rachelnabors and @Simek

How do i find you on discord?

[mohamedsgap]

Hey @rachelnabors I gonna check if the 'AppState' API is up to date or not! and I gonna update it if it needs.

[rachelnabors]

@lcelso I'm 'R "Nearest" Nabors#7453' on Discord

@mohamedsgap THANK YOU! Please report back here if it needed updating or not so I can update the matrix!

[DaniAkash]

@rachelnabors Just added examples for Animated & PanResponder. If there are any specific animations you think I need to cover, let me know 😁

[mohamedsgap]

Hey @rachelnabors I've just checked the core code of 'AppState' and I think it's up to date but there is an event in core code called 'memoryWarning' didn't mention in the events' reference in the doc, do you need me to fill a PR for it? I'm ready ;)

[rachelnabors]

Yes please, @mohamedsgap! That would be an API in need of updating! Please PR <3

[rachelnabors]

@espipj, @codecog, @ronnyiscoding: How are your components doing? We are waiting on your three components to close out the updated components docs! We're so close! Don't stop now!

Everyone else: the matrix is up to date. We've still got some APIs in need of examples and updates! If you have the time to commit to working on one, it really helps the docs!

[dbritto-dev]

@rachelnabors how I can help ?

[mohamedsgap]

Hi @rachelnabors, very excited to contribute more, so I gonna add an example uses Snack for 'Vibration' API, stay tuned for the PR ;)

[Simek]

@mohamedsgap Vibration API has been updated in 5fcd97d80e58cfadc81ff0bdc67b3c53fe177e61.

[rachelnabors]

@mohamedsgap Actually, the example is still in class components. If you could add a function component exampe and a class/function component toggler I can remove it from the matrix! Won't you please? I'd have less to worry about!

[rachelnabors]

@danilobrinu Good to hear your enthusiasm! Read that post up top and claim an API to update down here!

[dbritto-dev]

@rachelnabors I want to take the Settings :)

[Simek]

@danilobrinu I have PR in stash for the Settings but there is an issue with API that need to be resolved first: facebook/react-native#28213

[dbritto-dev]

@Simek ohh Ok

[rachelnabors]

I updated the matrix, thanks @simek!

[mohamedsgap]

Okay @rachelnabors I will update the entire 'Vibration' API, then I gonna create PR for it asap :)

[rachelnabors]

We still have three APIs in need of owners!

• PermissionsAndroid and InteractionManager need their examples wrapped in a Snack player
• Systrace needs an example

Who wants to volunteer?

[rachelnabors]

@espipj, @codecog, @ronnyiscoding, @jeremy-deutsch, @DaniAkash, @nnajiabraham, @ahmdtalat, @miganga, @lcelso, @Browndini, @Simek, @kaioduarte, @mohamedsgap:

Thank you all for contributing your hours to this effort so far! I've merged all but a few PRs, and your components and APIs are the last ones we need to complete this effort!

If you have over-committed (who hasn't?) and cannot find the time to work on your adopted component/API before next Friday, please post below so I can release the component/API for someone else to take on <3

Any components without PRs by next Friday will be released for someone else to take on.

You've done a great job so far! The docs are rocking for all your help! I could not be prouder!

[dbritto-dev]

@rachelnabors can you give one of those :D ? I'm open to help

[rachelnabors]

Sure, @danilobrinu! I give you InteractionManager!

[dbritto-dev]

@rachelnabors thanks :)

[ahmdtalat]

@rachelnabors Does the Keyboard component need extra work? my PR is merged.

[rachelnabors]

@ahmdtalat You did contribute an example! But did you also check to see if the API needed updating?

[dbritto-dev]

@rachelnabors I run the yarn start command but I don't see my changes in the page. I see the page is refreshed everytime I do some change but I don't see my changes. How should works ?

[ahmdtalat]

@rachelnabors my last commit was about updating the API. https://github.com/facebook/react-native-website/pull/1619/commits/27ec6e8df4d0dc0e1969d90f61d9e4ff6e37542b

[mohamedsgap]

@danilobrinu Hi Danilo, to see your changes on Docs you should, put 'next/yourComponentName' in the URL, to learn more please, take a look at contribution guides.

@ahmdtalat Hey Ahmed, Make sure that you check the core code of 'Keyboard' API component, if there any change in the core code, you need to mention it in doc as an API reference.

[dbritto-dev]

@mohamedsgap thanks

[ahmdtalat]

@mohamedsgap I did if I'm not mistaken. this the new function I added to the docs:

static scheduleLayoutAnimation(event)

Useful for syncing TextInput (or other keyboard accessory view) size of position changes with keyboard movements.

[mohamedsgap]

@ahmdtalat If you already mentioned it in the doc as an API reference, that’s good and tell Rachel to update the matrix, if not please update it, and if u need any help, just ping me ✌️🙂

[rachelnabors]

@danilobrinu are you looking at http://localhost:3000/react-native/docs/next/YOURPAGE ?

@ahmdtalat Then you're good to go! I'll remove it from the matrix! Thank you!

[dbritto-dev]

@rachelnabors yes, is my bad (typo mistake) hehehe sorry.