🍾🎉🎈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 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

```

<block class="classical syntax" />

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

// Class Example goes here

```

<block class="endBlock syntax" />
```

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.

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 Component Docs Drive #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 imports
• Sort imports alphabetically
• Remember to use semicolons (especially after exports)
• 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 : ActivityIndicator: add snackplayer/functional component with hooks #1590, ImageStyleProps : docs: add Image Style Props examples #1602 }
• @dsznajder = { Button : Button: Update code snippet and example #1592, TouchableHighlight : TouchableHighlight: Update API and Snack to functional component. #1591 }
• @lfoliveir4 = { FlatList : null}
• @amandeepmittal = { Image : Image & View: add snack examples to use functional components #1582, View : Image & View: add snack examples to use functional components #1582, Share : update Share doc with functional component example #1674 }
• @nnajiabraham = { KeyboardAvoidingView : null, VirtualizedList : [VirtualizedList Props and Methods Update #1579 #1742, Added snack example for virtualized list #1579 #1632], AppRegistry : AppRegistry API and docs update #1579 #1740 }
• @Darking360 = { Modal : docs: Modal updated API and examples #1605 }
• @kaioduarte = { Picker : Picker: update Snack example #1595, Switch : Switch: update Snack example #1594, TouchableOpacity : TouchableOpacity: update Snack example #1596, ShadowProps: add Shadow Props example #1664, Text Style Props : Text Style Props: add Snack Example #1710 }
• @espipj = { StatusBar : Docs: StatusBar example updated using Expo and Hooks #1624, TouchableNativeFeedback : TouchableNativeFeedback: Added Snack example using Hooks and Function… #1646, ToastAndroid : ToastAndroid: Ported the examples into Snack, using hooks in the advanced usage #1614, DrawerLayoutAndroid : Docs: DrawerLayoutAndroid #1683, Layout Props : Docs: LayoutProps #1750 }
• @DaniAkash = { Alert : 🍿 Added Snack Examples for the Alert 🚨 module #1597, Dimensions : Dimensions 📐 - updated Docs 📑 & new snack examples ✨ #1671, Animated : 💃🏽 Animated & PanResponder 👨🏽‍🎤 Snack Examples 👯‍♀️ #1691, LayoutAnimation : 🎶 LayoutAnimation 🕺🏽 - Added Snack Examples #1721, BackHandler : 🔙 Updated BackHandler Docs with snack examples 🤾🏽‍♂️ #1685, Transforms : 🔷🔹 Transforms 🔸🔶 - Added Snack Examples ▫️◻️⬜️ #1613, PanResponder : 💃🏽 Animated & PanResponder 👨🏽‍🎤 Snack Examples 👯‍♀️ #1691 }
• @mitulsavani = { View Style Props : View Style Props: Added Snack Example 🍿 #1612 }
• @mdabrowka = { AccessibilityInfo : Refactor AccessibilityInfo Example into React Hooks #1629 }
• @lcelso = { StyleSheet : Update Exampe stylesheet #1626 }
• @alvessteve = { ImageBackground : [#1579] update ImageBackground component doc #1598 }
• @tsawan = { Text : added functional component examples with hooks #1623, AppState : updated example to use functional components and hooks #1666 }
• @Naturalclar = { TextInput : docs: remove unused prop from TextInput docs #1584 }
• @Simek = { ActionSheetIOS : add Snack example for ActionSheetIOS #1680, PixelRatio : add Snack example to PixelRatio page #1687, Easing : add Snack example to Easing page #1682, Settings : add Snack example to the Settings page #1700 }
• @mohamedsgap = { AppState : Update 'AppState' with 'memoryWarning' event #1695, Vibration : Update 'Vibration' with function/class component toggler #1707, Systrace : Update 'Systrace' API #1749 }
• @kakukakug = { TouchableWithoutFeedback : TouchableWithoutFeedback: example code in a Snack player #1686 }
• @ahmdtalat = { Keyboard : added Keyboard API example using function components & hooks #1619 }
• @gedeagas = { Animated : WIP: Update Animated.md to add proper docs about start(), stop(), and reset() #1702, Flatlist : [Update FlatList removeClippedSubviews default props documentation #1705, Adding FlatList getNativeScrollRef() methods #1729], PermissionsAndroid : Adding PermissionAndroid Snack Example. #1720, SectionList : [Updating SectionList API #1754, Updating SectionList Snack Examples with Functional and Class Based Component  #1717] }
• @danilobrinu = { InteractionManager : InteractionManager: Add Snack examples, function components and hooks #1712, Linking : Linking: Add Snack examples, function components and hooks #1751 }