add bonus section for expo-dev-tools

Author: flexbox

challenges/data/01.md

@@ -67,6 +67,5 @@ The React Developer Tools extension for Chrome and Firefox lets you inspect a Re
 
 ## 👽 Bonus
 
-- [ ] To debug native code, network traffic and more, [you can use Flipper](https://fbflipper.com/).
 - [ ] [Reactotron](https://github.com/infinitered/reactotron) is another tool to monitor their application's state, network requests, and performance metrics.
 - [ ] To check if your app crashes, you can use a [crash reporting tool](https://weshipit.today/react-native-tools?type=Crash+reporting)

challenges/data/02.md

@@ -109,6 +109,8 @@ async function fetchStarshipsData() {
 
 ## 👽 Bonus
 
+### Custom Hooks
+
 In the previous challenge `useQuery`, `isPending` and `isError` lives on the same files. To have a more robust application, and separte the concerns of the data and the ui, we can wrap our queries into one custom hook `useStarships()`.
 
 - [ ] Create a new file `useStarships.ts` and paste the content bellow
@@ -137,5 +139,13 @@ Now you can write `useStarships()` anywhere in your Screen and React Query handl
 If you want to display some images on your `Card`, you can use this placeholder `https://picsum.photos/400/200` as a `source`.
 
 - [ ] Save this talk to your "Watch later" playlist: [Custom Hooks in React: The Ultimate UI Abstraction Layer](https://www.youtube.com/watch?v=J-g9ZJha8FE) from Tanner Linsley
+
+### Advanced
+
 - [ ] Display a nice animated placeholder during loading with [rn-placeholder](https://github.com/mfrachet/rn-placeholder)
 - [ ] Add a "Pull to Refresh" functionality to your FlatList with `onRefresh`
+
+### Debugging
+
+- [ ] Add [`expo-dev-tools`](https://docs.expo.dev/debugging/devtools-plugins/#expo-dev-tools-plugins) to your project
+- [ ] Add [`@dev-plugins/react-query`](https://docs.expo.dev/debugging/devtools-plugins/#react-query)

challenges/react-navigation/02.md

@@ -37,10 +37,14 @@ You can use these component to make it pretty:
 
 ## 👽 Bonus
 
+### Modal
+
 - [ ] Change the `screenOptions` to display your screen as a `modal`.
 - [ ] Add a "close modal" Button with an icon.
-- [ ] Add [`expo-dev-tools`](https://docs.expo.dev/debugging/devtools-plugins/#expo-dev-tools-plugins) to your project
 
+### Debugging
+
+- [ ] Add [`expo-dev-tools`](https://docs.expo.dev/debugging/devtools-plugins/#expo-dev-tools-plugins) to your project
 - [ ] Look with the `expo-dev-tools` the `route` and `params` of the screen.
 
 Start the project with and open the `expo-dev-tools` with `?` and `shift + m` in your terminal to open the menu and select `@dev-plugins/react-navigation`.