Using Github Copilot With React Native
Written by: Tripti Kumar, Engineer Manager, TribalScale
📫 Subscribe to receive our content here.
💬 Have any questions about our development capabilities? Click here to chat with one of our experts!
Hey guys, I’m sure it’s quite apparent from my previous blogs that I am an iOS developer. This time, I tried to use Github Copilot with React Native. Note that I have had the opportunity to acquaint myself with few RN(React Native) basics during the last year. But I wouldn’t consider myself efficient enough to create a stand-alone RN app by myself 🤓.
For this blog, I am assuming you would have the same knowledge too. If you’re still new I would recommend learning the React Native function component lifecycle.
The IDEA
The first idea that popped into my head was to create a playground which reads data from a web API and displays them into a scrollable view.
The Implementation
Setup
I used Visual Studio Code for this purpose. I created a new Javascript file.
File -> New File -> In the search bar enter any name of your choice (CoPilot.js) -> File created.
After setting up my VS Code, I headed to the Github Copilot website and made an account with 30-days free-trial. On VS Code you would see an Extensions tab. You can install the Github Copilot extension from there.
You can find more details in the documentation.
Coding
The first step was to test the AI Power of Copilot 💪🏻. So I asked Copilot to generate a piece of code to create a scrollable view to get images from an API.
Pros:
1. It auto-suggested the UI components like title and description label, which I think is quite impressive!
2. All the code looks well-defined. There are some very helpful properties for a newbie like me which Copilot is including into the code. I can modify them as and when required.
Cons:
1. None as of now.
Since I want to implement my own API to fetch the images, I am now going to ask Copilot to parse the API for me. Here’s the API I wanted to implement: https://picsum.photos/v2/list
Now I have to integrate my API results with my scrollView which is quite easy to do. I’ll delete the code for the view which was added in the scrollView earlier. Instead, after the above loop ends, I’ll add this view to my scrollView and voila! Final output would be something like this:
Pros:
- Easy and descriptive code.
Cons:
- No error handling in API implementation.
- Since I am new to RN, so not sure if TDD is being followed here or not.
Conclusion
Overall, this seems like a very useful tool. As an iOS dev, I can see few use cases for myself:
- If I am working on iOS part of a RN app and there’s a requirement to modify something in the RN code. I wouldn’t need to learn RN completely.
- If I want to learn RN by creating a small app, but I don’t have enough knowledge or time to get started.
- If I want to start working on RN, but I want a second opinion.
- If I am already working, but wouldn’t like to spend time over-creating simple functions like sorting, parsing an API, etc.
- If I am creating a PoC app.
There are many great utilities to this tool, but it depends on how we use it. Like any AI tool, it has the cons of potentially making errors and can be used as a crutch and atrophy your skills.
Let me know your thoughts about it and/or feel free to ask any questions…
Tripti is a curious techie and a philomath, working at TribalScale as an Agile Software Engineer. A big fan of “How I can” rather than an “If I can” mindset. She spends her time caring for plants and pets, doing yoga and meditation, and volunteering for Isha Foundation.
TribalScale is a global innovation firm that helps enterprises adapt and thrive in the digital era. We transform teams and processes, build best-in-class digital products, and create disruptive startups. Learn more about us on our website. Connect with us on Twitter, LinkedIn & Facebook!
