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 }

[amandeepmittal]

Hi @rachelnabors,

One question, sorry for my naivety, if I am converting a class example into functional example (just converting the snack from class to function) do I keep both the snacks? Also, do I explicitly mention <block class="functional syntax" /> in each snack?

[rachelnabors]

(I)f I am converting a class example into functional example (just converting the snack from class to function) do I keep both the snacks?

Yes!

Also, do I explicitly mention <block class="functional syntax" /> in each snack?

It's probably best for you to copy the code block under "Convert existing example code to use function components and Hooks," then replace // Class Example goes here with the former, class-based example. Then replace // Function Example goes here with a function/Hooks example.

Please correct me if I misunderstood your question!

[amandeepmittal]

Thank you so much. I understood the point of the whole code block. I should have read the class name on the top that says toggler. 😅 It clearly says what it does.

I have updated my PR according to the code block.

[rachelnabors]

@amandeepmittal Did you follow steps 3 and 4, too? ;)

[DaniAkash]

@rachelnabors Just created a PR for the DatePickerIOS 🗓. I basically rewrote the existing class component into a functional component with hooks. But It clearly has a lot of props, does the Snack have to cover all the props or basic functionality is enough?

[rachelnabors]

You know, DatePickerIOS is actually in the process of being deprecated! It sneaked into the table somehow (tsk tsk!). I just removed it. I'm accepting your PR regardless, but go pour your energy into another component who will be sticking around!

[amandeepmittal]

@rachelnabors do you have copy-paste version of the matrix table? Also should quote the matrix here or in the PR?

[DaniAkash]

You know, DatePickerIOS is actually in the process of being deprecated! It sneaked into the table somehow (tsk tsk!). I just removed it. I'm accepting your PR regardless, but go pour your energy into another component who will be sticking around!

It did well for a test subject 😜 will pick up something more vital next...

[rachelnabors]

@rachelnabors do you have copy-paste version of the matrix table? Also should quote the matrix here or in the PR?

@amandeepmittal, are you not able to edit the original post? I tried to put checkboxes in there but couldn't make them work inside tables! Thanks for bearing with me!

[amandeepmittal]

@rachelnabors do you have copy-paste version of the matrix table? Also should quote the matrix here or in the PR?

@amandeepmittal, are you not able to edit the original post? I tried to put checkboxes in there but couldn't make them work inside tables! Thanks for bearing with me!

Nope. Can't edit your original post here. No worries. Thank you getting back to me so quickly.

[rachelnabors]

Hmm. Gonna have to think of a way for people to claim each task..

[amandeepmittal]

Hmm. Gonna have to think of a way for people to claim each task..

Can we do this in a gist and link it here? Just a suggestion 🤷‍♂️

[rachelnabors]

I added checkboxes :) Just tick one for each task you claim. I'll update them to bold checks when the PRs are merged!

[jeremy-deutsch]

I’d like to claim the Animated API up-to-date; how do I check off one of those boxes? Maybe it just doesn’t work since I’m on mobile

[DaniAkash]

I’d like to claim the Animated API up-to-date; how do I check off one of those boxes? Maybe it just doesn’t work since I’m on mobile

I'd like to pick this one up too. Given the size of the API, can we share this between us?

[rachelnabors]

Why don't you both split the load? I'll put your names down for the different tasks (since the checkboxes aren't working!). How do you want to split it?

[mitulsavani]

Hi there, I would like to claim for View Style Prop

[jeremy-deutsch]

@rachelnabors I could document the API for Animated.Value/Animated.ValueXY, and leave the rest of Animated to @DaniAkash

[rachelnabors]

@mitulsavani You got it! Don't forget to reference this issue in your PR!

[nonewcode]

@rachelnabors feel free to assign <SectionList /> to me!

[alvessteve]

@rachelnabors I'll take the ImageBackground :)

[ice-chillios]

@rachelnabors I'll take TouchableHighlight :)

[ronnycoding]

@rachelnabors here goes my first PR, https://github.com/facebook/react-native-website/pull/1590

[Darking360]

@rachelnabors Can I take Modal? Thank you :heart:

[ronnycoding]

@rachelnabors I can take Image Style Props ? Thanks 👍

[kaioduarte]

@rachelnabors Can I take Switch? Thanks!

[ice-chillios]

@rachelnabors I'll take Button next :)

[amandeepmittal]

@rachelnabors I'll work on View to add snack and functional component example.

[rachelnabors]

Thanks for volunteering, everyone! I've updated the matrix with all your commitments. For anyone who hasn't got a component or API to work on, we still have plenty left! Jump on in!

[kaioduarte]

@rachelnabors I did also a small adjustment in Picker and TouchableOpacity components examples. :grin:

[DaniAkash]

@jeremy-deutsch cool I'm up for the task ✌️

[lfoliveir4]

@rachelnabors

Hello! I am super interested and making this contribution. As I understand it, is it necessary to make an example with hooks and classes referring to the API?

Example: Let's go up and get the Pixel Ratio Do I have to do the example in the snack using Classes and hooks? Right?

If not, please let me know!

I'm waiting!

[DaniAkash]

@rachelnabors Just pushed out an example for the Alert component. Clipboard, Dimensions, Keyboard & LayoutAnimations are next!

Also will be picking up the Animated API which will be quite a challenging task! 😁

[DaniAkash]

I'm unable to get the Clipboard working on the Expo web player. Could use some help with https://github.com/facebook/react-native-website/pull/1599

[ahmdtalat]

Hello FOA navigating the table is quite tedious, can you please make it a little bit easier. I would like to work on the Keyboard.

[DaniAkash]

Hello FOA navigating the table is quite tedious, can you please make it a little bit easier. I would like to work on the Keyboard.

@ahmdtalaat I'll be leaving the Keyboard in your care 👍 Picking up LayoutAnimations next! ✏️

[DaniAkash]

@rachelnabors it'd be great if you can create a PR column to the Components and APIs update progress table and list the PRs raised related to the component. It'll greatly help the PRs to be peer-reviewed and tracked neatly ✏️

[ronnycoding]

@rachelnabors Can I take VirtualizedList?

[brunokiafuka]

@rachelnabors, I took the clipboard API.

[DaniAkash]

@rachelnabors, I took the clipboard API.

@brunokiafuka There's already a PR open for this API - https://github.com/facebook/react-native-website/pull/1599

[brunokiafuka]

@rachelnabors, I took the clipboard API.

@brunokiafuka There's already a PR open for this API - #1599

Sorry @DaniAkash, I've missed that

[DaniAkash]

@rachelnabors, I took the clipboard API.

@brunokiafuka There's already a PR open for this API - #1599

Sorry @DaniAkash, I've missed that

@brunokiafuka I can use your help in it 👍 it is WIP

[hugobytes]

@rachelnabors feel free to assign LayoutAnimation Snack example and Hooks example to me!

[DaniAkash]

@rachelnabors feel free to assign LayoutAnimation Snack example and Hooks example to me!

@hugobytes I'm almost done with the LayoutAnimation. Will be sending a PR soon.

[nnajiabraham]

Hi @rachelnabors will be taking the KeyboardAvoidingView. I will be working on Example uses Snack and Example uses function components and Hooks for that componenet

[tsawan]

Hi @rachelnabors, I will be taking the Text and working on Example uses function components and Hooks.

[nnajiabraham]

@ronnyiscoding Are you working on the VirtualizedList precisely on Example uses Snack and Example uses function components and Hooks for that component, if not can I take it from you?

[ronnycoding]

@ronnyiscoding Are you working on the VirtualizedList precisely on Example uses Snack and Example uses function components and Hooks for that component, if not can I take it from you?

ok, it is fine.

[nnajiabraham]

Ok then @rachelnabors I'll be taking VirtualizedList from @ronnyiscoding precisely on Example uses Snack and Example uses function components and Hooks

[ronnycoding]

Ok then @rachelnabors I'll be taking VirtualizedList from @ronnyiscoding precisely on Example uses Snack and Example uses function components and Hooks

@nnajiabraham I mentioned you in this PR https://github.com/facebook/react-native-website/pull/1607