GSoC 2020 — Rocket.Chat.ReactNative Full-Screen Composer
The project I worked on at GSoC 2020 was a full-screen composer for Rocket.Chat mobile app. A full-screen composer is a larger text area that usually covers a large portion of the screen to provide a good user experience when typing large texts. The user who needs the full-screen composer wants to inform, teach something, warn, or even share an idea. That’s why most mobile apps with this type of composer are social networks like Twitter, Facebook, Linkedin, and Slack that is Chat app in the same way that Rocket.Chat mobile app.
What is a composer?
First of all, we need to know what a composer is. A composer is the text area, generally among buttons to the application’s functionalities to send messages or post something. This tool can be seen in chat apps or social networks where there is the necessity of input some text. For example, this is the current composer of Rocket.Chat mobile app.
Full-Screen composer
Full screen composer is a kind of composer, but this composer can cover the whole screen making the process of writing large texts more easy and fast. The user can see all text and format that it is written. Here is the main proposal of the project, The new Full-Screen composer in Rocket.Chat mobile app.
Approaches to reach a Full-Screen composer
react-native-reanimated combined with react-native-gesture-handler was my first approach to implement a full-screen composer. This library is an excellent tool for a smooth transition between the main composer and the full-screen composer. With this library, I could control the velocity of the animation, the transition, and the whole animation directions.
I used an Animated View to put the large text area. To open and close the full-screen composer, I used a swipe gesture and a button to open and close this full-screen composer. But I found difficulty because the first idea was to open the full composer from the main composer. To do this, we needed to sync the position of the two composers. This was a problem to keep our layout responsive so I went to another approach.
react-native-modal was my second approach and more successful. This library can be used with the same behavior as the react-native-reanimated in this case. This behavior is an Animated View that grows from bottom to top to cover the whole screen and contains our large text area and the buttons for actions under it. This library has an easy way to control the animation and transition between the composers.
From here, I had a better idea of what I needed to do. After talking to my GSoC mentors, We decided to open/close the full-screen composer, just using buttons. Then we faced some challenges and problems and started to improve our full-screen composer.
Sharing data between composers
The main data that we need to share between composers is the text that the user is typing. To pass this text between composers, we use a class property to store the text inside of the class and the same function to update this text. To provide the user the effect of transition, we start the property text with an empty string this.text = “” and use it as the default value to both composers.
Problems encountered on the way
The main problem that I needed to deal with in this project was to keep the reference to the right composer. On Android, we use the react-native-keyboard-input to show the user the emoji keyboard. To do this, the library needs a ref of our current composer. When this reference was wrong, the composer had an unexpected behavior like empty spaces on the screen or even the emoji keyboard in the wrong place, and the emojis don’t update in the composer.
Storybook
Another tool that Rocket.Chat mobile app uses is the storybook, A library to list and make unit tests of the components. To avoid the regression of tests, I implemented the storybook to the main composer and full-screen composer components.
Other works
During the GSoC period, I started working hard on the Full-Screen composer, but after finishing the project and submitting a pull request to review, I began to work on other app priorities. I fixed some bugs and created new features to the app, I have some works under review and some works are in production. In short, these are some of my jobs:
- Created a list of history servers that the user connected before. This feature makes a more comfortable process of login frequently used servers for the user.
- Added a Bio and Nickname fields to the user profile in the app.
- A new feature to clear cookies of webview when logged from OAuth, to avoid saving data and enter to the app if the user doesn’t want to do it.
- Created a view to improve the list of the message’s reactions.
- Created the possibility to close the banner on top of a room view.
In total, I made around 20 contributions to Rocket.Chat mobile app, I will leave the complete list of pull requests at the end.
Conclusion
Reaching the end of the GSoC period, We have a full-screen composer to the Rocket.Chat mobile app with a smooth transition and good performance using react-native-modals, We did some experiments of new layouts to both composers, but we decided to keep the current design. The pull request of the Full-Screen composer still under review.
This project waits for review, but we have great results in the implementation and aggregate an excellent tool for the users. It’s a pleasure to be part of this.
The Rocket.Chat company provided me with experiences in addition to creating code as an improvement in my communication, my organization, confidence to show my work to different people who could teach me a lot
This project was my first step in a big open source project, and after this period of GSoC, I want to keep being an active contributor to open source.
Important Links
Pull Request for the Full-Screen Composer
Libraries mentioned
My other works
