Component to Add or Edit a word

Part ɪɪ: React-Native UI │Story 11: Component to Add or Edit a word to vocabulary collection

GIT : Repo | Feature/Story branch| PR

In the previous few posts of the series, we got the redux setup for our react-native app, got react-navigation working, and connected the UserSignIn component to redux to save logged in user details in redux store that we then use to show user’s profile pic and email in a common header component for the app.

In this post, we would create ‘Add a word’ screen with a simple form for user to add a word to his/her vocabulary collection. For now, we will keep the form static. We don’t have our app connected with API yet, on click of Submit button we would simply show an alert box for now.

We would also use this same component to edit/update a word, because when updating a word, we would basically need the same form, only this time the fields would be pre-populated. So let’s name our component as AddEditWord.

Screen component to Add or Edit a word

1 . 📂 Create a folder AddEditWord under src/screens
2 . 📄 Create a file AddEditWord.js, under src/screens/AddEditWord👇

👆 It’s pretty straightforward component code:
– In componentDidLoad, we first check if the prop wordToEdit is not empty then it means this component is going to be used for updating an existing word; in this case we initialize the state variables to the respective properties of the wordToEdit object to pre-populate the field elements with the corresponding values. If the prop wordToEdit is empty, then we can assume that the component is going to be used for adding a word.

– In the render method, we have the form elements with a submit button. The form title and the submit button text is set based on whether the component is used for editing an existing word or to create a new word.

– On press of submit button, we call a function postWord. First we check if the required fields word and meaning are not blank, else we toast an error message. Here, make a note that we have left the calls to redux dispatch actions commented as to-dos. This is something we would add once we have required redux actions ready and component is connected to redux. For now, we simply display an alert box and then take user back to Home screen.

3 . 📄 Create a file styles.js, under src/screens/AddEditWord 👇

4 . Update index.js under src/screens folder to export the above created screen component 👇

5 . Update our app’s StackNavigator to have AddEditWord as a screen 👇

👆 line # 8, we added AddEditWord screen to the app’s stack navigator.

6 . In the AddEditWord component, we are using native-base’s toast component. This component requires the app’s topmost component to be wrapped inside <Root> from native-base.
So, update App.js 👇

👆 line # 11-13, we wrapped our topmost navigation container component AppNavigationContainer inside native-base’s <Root>

7 . Next, add a FAB button to the Home Screen. On press of this FAB, navigate to Add Word screen. Update src/screens/Home/Home.js as below 👇:

👆 line # 29–37 : we added a FAB button, on press of this FAB, we call a local function onFabClick. In onFabClick, we simply navigate to AddWord screen.

Run the app:

App with Add A Word screen on iOS and Android 👆

👏 Perfect, our Add/Edit A Word screen is looking good. Later when we would have the app connected to database using API and displaying real/live data, we would see how the same component could be used to edit a word.

In the next post, we would start preparing for making http/ajax calls to our serverless API from UI by installing Amplify SDK.

← Prev:Header Component ┈🏠┈ Next:Amplify SDK→