Hello every one, today in this article we are going to talk about how can we create our own external object and we will import it inside our project. Now lets get started…

First I have to talk about what is accordion and what it does ?

Sometimes there will be so many components on our screen and it will be hard to find what we are looking for. In this time groupping and hiding what we are not looking for the components is the best. We can do this with accordion component. In this project example we are going to build an accordion that will have the ability opening and closing like an accordion. So we can hide and unhide the unnecessary components from the screen. Now lets get started to code our accordion external framework.

I have created a framework folder and file like in the below image :

Under the project folder I have created the frameworks folder to keep other frameworks and under it Accordion folder. In here I have created just an index file. We are going to write our java script codes in this file.

Now we are ready. First we need to import libraries we will use. Basically I have imported below libraries.

Now we need to EXPORT our class.

After this we need to create our constractor and wrtie codes that we will need. Below section I have a constractor and a function to make toggle process. Let me explain this in the code. We need to write these code block inside default class and before render() function.

Our functions are ready tu use. Now we need to call this function from a button or something like that. Let me design a screen to do this.

As you can see above there are properties name like this.props… . With these keywords we will pass our datas. We are going to set the title and the components will be grouped by the accordion. Here the examples : this.props.title and this.props.children. After the title section now we need to place our children objects. These objects will send by the main class. You can edit your own StyleSheet classes. I will not pu that here. Now we are ready to use this component in MainClass. I will use this component in App.js file. I will place it under a View component. In here I will share the code and explain it later part by part.

Now let me start to explain App.js file :

First we need to import our Accordion framework. Below code section will import our external library:

After including now we are ready to use this library. Below code section has an example of accordion.

Basically it will be showed like below :

That’s all in this article.

Have a nice coding.

Burak Hamdi TUFAN


Please enter your comment!
Please enter your name here