Migration Guide - Embrace the Vikalp Way!​

Moving to React Native Vikalp Elements is designed to be a seamless transition. Follow these straightforward steps to bring new life to your UI.

Migration Guide​

Refer the migration guide to migrate from v3 to v4.

📑 Project Details​

• Organization: React Native Elements

• Project: Migrating Hooks, Tests & APIs

• Mentors: Jeremy Hamilton, Pranshu Chittora, Dhruvdutt

• Student: Arpit Bhalla

🚀 Overview​

The Google Summer of Code 2021 has been a fantastic and cheerful learning experience for me over the past few months. I have learned a lot from the community, especially how to organize commits and write readable code. React Native Elements is an amazing community to work with, as mentors are really helpful and experienced. I had started contributing to React Native Elements from March 2021 and till now, I have 40+ commits (10,803 additions and 13,826 deletions) merged. Over the past few months, I had great exposure writing maintainable code, communicating with the mentors, etc. I had completed some of my work in the coding period started as some issues mentioned in my proposal had a high priority for the release.

Automatically generate documentation out of React/React Native Component

This summer, I was pleased to get selected for Google Summer of Code'21 under the organization React Native vElements. Working under the organization, my project was to generate documentation automatically out of the UI components and present it in the Docusaurus website.

This is a guide to generate documentation of the UI components automatically.

Initially when this workflow was not present, the entire documentation of the website was done by editing the docs manually by going to the docs directory under website and editing the markdown manually. Now, we have come with a flow where developers and contributors can focus more on logic than on writing markdown.

Workflow​

To do this we have created scripts which would parse the components and generate documentation out of it.

This is a 2 step process:

1. We take use of react-docgen-typescript which takes the input of the files for which we want to generate the documentation automatically. This gives in JSON as output. This JSON consists of all the details of the props including type, name, description and defaultValue and well as description of the components.

2. As we use Docusaurus for our documentation website, the pages of the documentation should be in the format of Markdown. Therefore, there should be process where we can change the JSON data, which we get from react-docgen-typescript to a suitable Markdown format. For this we use, json2md which takes in the data and convert it to suitable markdown string. This is stored in the directory and is shown on the website.

There have been a lot of changes and improvements coming through the pipeline recently with react-native-elements. So in preparing for a version 3, there are some planned deprecations that will be added into version 2.3 and then removed in version 3.

The reason for these changes is that react-native-elements regularly gets requests for new features and enhancements quite frequently. The fast and easy method of adding these new features is usually to add another prop into the component that then injects some change into a child component. Unfortunately, this ends up leading to the components having a lot of props, lots of conditional code, and additional code complexity. The solution going forward and into version 3 will be to break down large components into smaller pieces so that it is easier to inject your own code without having to wait for an additional prop to be added.

As we continue to build up to version 3, this post will continue to be updated with new step-by-step directions on how to upgrade your code to work around these changes. The RNE team thanks you for your patience, and we hope that you see the value in the upcoming changes.

React Native vElements has UI elements that are easy to use & really customizable. It also has theming, platform specific search bars, React Native Web support, and much more.

It's finally here! Let's put our hands together and welcome React Native vElements 1.0 🎉

This release is centered around making RNE components that everyone loves more intuitive to use & stable. This is not to say that all the work is done, but this is definitely a giant leap in the right direction and one that we have been working on for over a year.

I want like to say thank you to our users for using RNE and giving us feedback through issues on the repo and also the contributors who have the taken time to contribute and help improve RNE together. Finally, I'd like to say a big thanks to Kyle Roach and Xavier Villelégier without whom this project would not have been as awesome as it is today!!

This blog post is meant to serve as a migration guide for upgrading to react-native-elements: "^1.0.0" from 0.19.1 and also a way to document and share all the breaking changes, new features and other improvements in this release. For those updating from 1.0.0-beta7 you can view those release notes here.

The wait is over!! Get excited, cause we certainly are. 14K 🌟 and counting...

Installation​

First, install the library using your favorite package manager: yarn add react-native-elements

Also if you are using an older version, just update the react-native-elements version in package.json to ^1.0.0