1_safavjgr68qpqcredtocya_0.png

Creating React Native App and adding Dependencies like DatePicker

Thursday, September 6, 2018

React Native is a framework that uses the same design principles as the React Framework and lets you code in JavaScript to easily create mobile applications that work on all smartphone devices. Whether it's IOS, Android or a Windows phone.

For this introduction no experience of the React framework is needed. Just basic knowledge of JavaScript and you will be fine.

Basic setup

We won’t be explaining how to install react native in this blogpost. Since it is slightly different for each Operating system. You can use the links provided to easily install react native.

Windows           :  https://www.youtube.com/watch?v=v3cJwBh5e10
Mac                    : https://www.youtube.com/watch?v=do8OttBpHEU
Ubuntu              :  https://www.youtube.com/watch?v=ZHNXkE8kLqc
 

After this basic setup our screen should look like this:


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Reacts life cycle

React has 2 ways of saving data. Props and State. Props will be used for data that will stay the same during the entire life cyle of the page. We will use State when the data needs to change.  They will be created in the constructor of our Class.

Our starting project has 1 function. Render (). This function will be used to create our different components to show items such as Text, Buttons, Images and eventually our DatePicker.

The complete lifecycle of a React Native page is as follows:

  • The Constructor is initialized before the Component (Our class in App.js) is mounted and our initial props and state are set.
  • Our Render () function is called It will setup all our components.

  • The Component Class is mounted, making it available for interaction with the user


 

Implementing DataPicker Dependency

For this project we will be making a small app that will allows us to pick a Date. This date will then be shown to us on the screen. This is just an exercise to help get you more familiar with adding new dependencies to your application, while also teaching you the basics of React Native.

First, we need to install the DatePicker dependency. This dependency will allow us to make layouts on our first page. In our command shell we write:

 npm install react-native-datepicker --save

Note: the official documentation for this dependency can be found on GitHub: https://github.com/xgfe/react-native-datepicker

After installing this dependency it will be added to our list of dependencies in the package.json and after we run npm install it will be added to our node modules, making it useable for our application.

We will start implementing our DatePicker app by removing 2 <Text></Text> components and changing the text of our other Text Component to a good title and increasing the font so it looks like a real header.

<Text style={styles.title}>My DatePicker</Text>

Our const styles (the way we can change our style) becomes:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title:{
    fontSize: 40,
    fontWeight: 'bold',
  },
});

Your application should look something like this:


 

 

 

 

 

 

 

 

 

Before we can add our DatePicker component we have to import it. Every Component you use needs to imported for it to work.

 import DatePicker from 'react-native-datepicker';

Now we create a new state variable that we will put our new Date into. We can later reuse the variable in the application.

constructor(props){
      super(props)
      this.state = {myDate : "3000-01-01"}
    }

First we initialize the constructor and we inherit the properties of our parent class. In this case Reacts component class.  After this we initialize our state values. We set our date as January First in the year 3000. Every time we make changes to this state. It will automatically update the View. Now we can create our DatePicker component in the render function It will be placed in the <View> Component right under title. This will create a fancy date box that we can click on to select our date.

<DatePicker
        style={{width: 200}}
        date={this.state.myDate}
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
      />

We have created a DatePicker component and added properties to this new Component. Every component in React native has certain properties that can be altered. In this example we can change the way our dates are formatted. To finish up our application we will add a new function to set our new state and output to the user what the new date is. Right above our render function we create a new function called updateState(date) {}. It will receive the date we select in our DatePicker component and assign it to our myDate variable in the state.

  updateState(date){
    console.log(date);
    this.setState({myDate : date});
    alert("The new Selected Date is : " + this.state.myDate);
  }

We only have to add 1 more attribute to our DatePicker and we are done. Under the cancelBtnText attribute add:

 onDateChange={(date) => {this.updateState(date)}}

Our Application should look like this :

As you can see every time we update the Date. It will automatically change in our DatePicker field. This is because we set the state in our updateState function.

The Full source code is available on Bitbucket:

https://bitbucket.org/JuvoLWieers/reactnative-datepicker-example/src/mas...

Sources

 

Lennert