Modernize code examples in the direct manipulation section

[steveluscher]

The examples in the Direct Manipulation section look to have fallen victim to a rogue codemod; they are currently a mix of functional and class syntax that doesn't actually work.

In this PR I do too many things (sorry):

• fix indentation (2 spaces everywhere)
• remove styles that don't aid in the understanding of the concept of direct manipulation
• convert everything from class to functional/hooks syntax
• repair the opacity example by dimming the button onPressIn instead of onPress
• use conventional ref forwarding to achieve the desired effect in the example where we show how to forward the effect of setNativeProps from a wrapper component to a child component

T74535407

[react-native-bot]

Deploy preview for react-native ready!

Built with commit 833a924

https://deploy-preview-2189--react-native.netlify.app

Changes to docs/ are reflected in the next "master" version.

Thank you for your contributions.

_{How to Contribute • Documentation Sources}

[Simek]

@steveluscher thank you so much for improving those examples and updating the related sentences, great work! Also the changes description is very informative, thank you for that too! 🙂

Review comment: I have added missing useRef import (https://deploy-preview-2189--react-native.netlify.app/docs/next/direct-manipulation#setnativeprops-to-clear-textinput-value) and pass the examples code through the Prettier (currently JSX in MD files is not correctly formatted when running yarn prettier script from this repository).

[steveluscher]

Thanks for the catch and the cleanup! 🎉