187 Ten Tap

[ademDurakovic]

Fixes #187

Fixes: Replaced the richTextEditor to use the new tenTap library.

Why: TenTap is a more active library with help.

What got changed: Library import was added the editor was initialized and JSX components were added like the textpad/

[teamomiamigo]

Overall, great addition to the file and in changing the text editor. Has made the code a little more simpler and cleaner.

[rcAsironman]

@ademDurakovic, you did a good job, but a few things should be improved in your work.

The Toolbar Alignment Issue: The toolbar is not aligned properly; it should be positioned right above the keyboard.

Your Output on Android:

Your Output on iOS:

Expected Output:

Theme Issue:
In dark mode, the editor should have a black background with white text. The opposite should apply for light mode.
Your Output on Android:

Your Output on iOS:

[ademDurakovic]

@ademDurakovic, you did a good job, but a few things should be improved in your work.

The Toolbar Alignment Issue: The toolbar is not aligned properly; it should be positioned right above the keyboard.

Your Output on Android:

Your Output on iOS:

Expected Output:

Theme Issue: In dark mode, the editor should have a black background with white text. The opposite should apply for light mode. Your Output on Android:

Your Output on iOS:

Here are how the new changes look:
Text is dynamically updated based on theme, and adjusted the toolbar.

[rcAsironman]

@ademDurakovic On Android, dark mode is not working as expected. The editor remains white while in dark mode. Please modify the code to set it to black.

[teamomiamigo]

Overall, great work on this, everything looks great and all the additions seem valid and correct! Great job!

[rcAsironman]

@ademDurakovic I like the changes you've made. But, I came across an issue: the toolbar is not aligned properly.

Issue:

On iOS 12, the toolbar is not showing. It should work on all devices.

[yashb196]

Overall Good Effort however when you enter EditNoteScreen you see this error on the console log

**### Warning: React has detected a change in the order of Hooks called by EditNoteScreen. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

Previous render Next render

1. useState useState

2. useState useState

3. useState useState

4. useState useState

5. useState useState

6. useState useState

7. useState useState

8. useState useState

9. useState useState

10. useRef useRef

11. useState useState

12. useState useState

13. useState useState

14. useState useState

15. useState useState

16. useState useState

17. useState useState

18. useState useState

19. useRef useRef

20. useState useState

21. useState useState

22. useState useState

23. useContext useContext

24. useState useState

25. useRef useRef

26. useRef useRef

27. useRef useRef

28. useRef useRef

29. useMemo useMemo

30. useMemo useMemo

31. useEffect useEffect

32. useEffect useEffect

33. useState useState

34. useState useState

35. useEffect useEffect

36. useEffect useEffect

37. useEffect useEffect

38. useState useState

39. useState useState

40. useRef useRef

41. useState useState

42. useEffect useEffect

43. useContext useContext

44. useContext useContext

45. useContext useContext

46. useContext useContext

47. useContext useContext

48. useContext useContext

49. useContext useContext

50. useContext useContext

51. useContext useContext

52. useContext useContext

53. useContext useContext

54. useContext useContext

55. undefined useContext
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    in EditNoteScreen (created by EditNote)
    in EditNote (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by CardContainer)
    in RCTView (created by View)
    in View (created by CardContainer)
    in RCTView (created by View)
    in View (created by CardContainer)
    in RCTView (created by View)
    in View
    in CardSheet (created by Card)
    in RCTView (created by View)
    in View (created by Animated(View))
    in Animated(View) (created by PanGestureHandler)
    in PanGestureHandler (created by PanGestureHandler)
    in PanGestureHandler (created by Card)
    in RCTView (created by View)
    in View (created by Animated(View))
    in Animated(View) (created by Card)
    in RCTView (created by View)
    in View (created by Card)
    in Card (created by CardContainer)
    in CardContainer (created by CardStack)
    in RCTView (created by View)
    in View (created by MaybeScreen)
    in MaybeScreen (created by CardStack)
    in RCTView (created by View)
    in View (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by CardStack)
    in RCTView (created by View)
    in View (created by Background)
    in Background (created by CardStack)
    in CardStack (created by HeaderShownContext)
    in RCTView (created by View)
    in View (created by SafeAreaProviderCompat)
    in SafeAreaProviderCompat (created by StackView)
    in RCTView (created by View)
    in View (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by StackView)
    in StackView (created by StackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by StackNavigator)
    in StackNavigator (created by HomeStack)
    in HomeStack (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by BottomTabView)
    in RCTView (created by View)
    in View (created by Screen)
    in RCTView (created by View)
    in View (created by Background)
    in Background (created by Screen)
    in Screen (created by BottomTabView)
    in RCTView (created by View)
    in View (created by ResourceSavingScene)
    in RCTView (created by View)
    in View (created by ResourceSavingScene)
    in ResourceSavingScene (created by MaybeScreen)
    in MaybeScreen (created by BottomTabView)
    in RCTView (created by View)
    in View (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by BottomTabView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaProviderCompat)
    in SafeAreaProviderCompat (created by BottomTabView)
    in BottomTabView (created by BottomTabNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by BottomTabNavigator)
    in BottomTabNavigator (created by AppNavigator)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by AppNavigator)
    in AppNavigator (created by App)
    in ThemeProvider (created by App)
    in Provider (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)**

    this will break the application I would ask you to have a look at this and fix it before merging

[rcAsironman]

@ademDurakovic On Android, two toolbars are being rendered. Please check iOS as well.