Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/iamnanjo/react-native-practical-work

An app for saving people's details into an SQLite database
https://github.com/iamnanjo/react-native-practical-work

Last synced: 3 days ago
JSON representation

An app for saving people's details into an SQLite database

Awesome Lists containing this project

README 

        
# Practical work - Arttu Kaipainen



## Assignment



Make a React Native application by which you can add person data having at least firstname, lastname and postal code into a FlatList (and devices database as well). There should also be buttons by which to order the data by firstname, lastname or postal code.



## Features



- 3 inputs for filling out the first name, last name and postal code.

  This information can be saved to an SQLite database on the device by pressing the `Add Person` button

  once none of the 3 inputs are empty (postal code has to be a number).



- The list of people can be sorted by using the 3 buttons above the list. Sorting order can be seen right next to the `Sorting` title (ASC or DESC meaning ascending or descending).

  This sorting is done in the SQLite database and if both values match it uses the rowid as the secondary column for sorting.



- People can also be removed from the list by holding the list item.



## Execution



I used TypeScript to speed up the development and I also separated the application to multiple different components so I will explain their purpose in this chapter.



### Person.ts



The TypeScript interface for saved people



### db.ts



Exports functions that manage (create, read, delete) saved data in the database (SQLite)



### App



The App component contains the app state, logic as well as the main application structure.



### ButtonBase



Just a basic button that runs the onPress function given as a prop once clicked. Contains the text from the text prop inside the button.



### ButtonSort



Almost the same as ButtonBase but smaller to allow 3 buttons next to each other. Also has an `active` prop to highlight the currently selected button.



### FlatListPersonItem



FlatList item that shows the details of the person (firstName lastName - postalCode)



Gets the item from props (passed by the data attribute on FlatList).



The item is a person's details as well as an onHold function because the data list is edited using Array.Map in the FlatList's data attribute.



### HorizontalLine



Just a simple horizontal line to separate sections of the app



### InputWithLabel



TextInput with a label on top of it. Updates state once editing ends using a useCallback hook



#### Props



- `label`: The content of the `Text` above the `TextInput` that explains what the input is for

- `getter`: Gets the initial value for the `TextInput`

- `setter`: setState function to update state

- `type`: Optional parameter that changes the keyboardType of the `TextInput` (phone-pad for postal code, default for others)



## Problems



The development of this application was quite simple for me as I had used

React quite a bit before and there are lots of similarities between React and React Native.



The most significant problem occurred when I wanted to make the FlatList scrollable.

I first tried doing this by wrapping the whole application in a ScrollView element but this resulted in an error since FlatList itself inherits properties from ScrollView.

After a while I found that having the inputs in the ListHeaderComponent would fix this problem as this allows the FlatList to handle scrolling throughout the entire application.



The next problem I ran into after that was that the scrolling was getting cut off and I could not figure out a good reason for that and found online that many other people have a similar problem.

Most people recommended using a bottom padding on the element or a `flex: 1` style on the container but none of that worked for me. Finally I realized that you can also add a ListFooterComponent to the FlatList which allows me to add a `View` element at the bottom of the list which acts as the padding.