Forem: absek

The Pirate Bay

absek — Tue, 02 Jun 2020 15:19:13 +0000

Most of us have probably wondered about how the torrenting site called The Pirate Bay originated or came into existence. The Pirate Bay, a popular file-sharing site originated in Sweden in 2003 by the think tank group called Piratbyran. In the early days of the pirate bay site, they provided access to entertainment media, digital content, and software applications. Originally, the company that gave birth to the Pirate Bay was against copyrighting. The purpose of the Pirate Bay network was not to gain any profit but to make the statement against the copyright regulations that they did not approve of.

In there early days, the Pirate Bay network was known for only music and movie sharing. But it was more than just the music or movie sharing site. Users can download anything ranging from recent movies or TV programs to any version of software application. They have a wide range of selections to choose from. The Pirate Bay network offered almost about anything possible to offer online in their prime days. The resources available in Pirate Bay contained the popular operating system installation files and even the cracks or keys to access the premium versions of the software. This made the Pirate Bay network very convenient and popular among the internet users across the globe.

The Pirate Bay network worked based on the BitTorrent principle. It emphasized decentralized sharing of files in which the files are distributed among the torrent user;s themselves. The network only keeps track of the location of each file. The original file is segmented into several chucks and distributed among the users of the Pirate Bay Network. The approach was later known as Bittorrenting. Using this mechanism was very advantageous for the company as well as the downloaders. It was easy for the pirate bay to maintain the servers whereas the users were getting the optimum download speed.

Downloading and Uploading in the Pirate Bay Network

Most of the users of the Pirate Bay and the torrent files use some kind of client software for example: uTorrent. These torrent clients have the ability to accumulate the available trackers of the torrent file and allow the seamless download. They also have features to add extra trackers if required to maximize the download rate. When it comes to torrent files, we cannot help but notice two terms which are seeders and leechers. Having knowledge about the seeders and leechers would help a lot in the downloads. The leechers are the once who download the torrent file and deny acting as one of the file sharer. However, seeders are the once who download the torrent file and share a chuck of distributed file in the Pirate Bay network. So while downloading any torrent file, it is necessary to take note of the seeders number. The higher the number, the higher the rate of download.

Downloading does not require any sort of registration. It is free and very simple. However, one needs to sign-up and sign-in to the Pirate Bay network to upload the file and make it available in the Pirate Bay network. The uploading requires the uploader to become a member of the Pirate Bay network. Though registration is required, uploading is as simple as downloading.

Lawsuits and Legal Issues.

The Pirate Bay Network grew its popularity as a free peer-to-peer file-sharing site. But, the conspiracies and lawsuits faced by this site was not less prevalent. Many legal complaints have been fought over illegal torrenting of files over copyright issues. Since the stuffs were available free to download in the torrent site, many companies in the entertainment business, software business lost their revenue in sales. In this uphill battle against the copyright lawsuits, the first of many was the raids to their server houses. The raid to their Stockholm server house caused the massive shutdown of their site which miraculously lasted only three days. This was followed by numerous investigations and raids. Many lawsuits were filed against the site. The companies like Hollywood and Google took on pirate bay network filing numerous lawsuits. Many artists raised their voices against illegal downloading because it was degrading their income as people preferred to download their art, singles and full albums for free instead of purchasing them. The creators of this site were convicted of copyright infringement and were sentenced to a year of prison as well as fined over 3.6 million.

There were originally 4 members in the Piratbyran. The group dissolved eventually after the fourth member died. The Pirate Bay site was banned in many countries by the government like Argentina and Australia. In many countries, the site was made inaccessible by the Internet Service Providers. The Pirate Bay team made a bold move by switching to cloud servers. This made the site more efficient and accessible with protection against bans. They even used Virtual Machines hosted by different providers to cut down on hardware and prevent their operations. The Pirate Bay network stayed up and running for a long time despite facing numerous downtimes. They were clever enough to fight the lawsuits and protect their operation by applying various solutions to their operating mechanism. With opposition being the entertainment business companies, tech companies, software companies, and artists, the Pirate Bay company found their support in millions of users that they serve the free resource to.

Even though the original Pirate Bay site is down, numerous other file sharing sites emerged following the footsteps of the Pirate Bay network. These sites are called mirrors to the original site. In case you want to visit the original site, you can navigate to it by tapping on https://thepiratesbay.com/.

The legacy of the most popular file-sharing site that had millions of traffic and download resources has been kept alive by these mirror sites. The mirrors sites did not disappoint in comparison to the original one.
They used the same BitTorrent principle along with a magnet link mechanism to provide the file sharing platform. You can access one of the mirror sites of The Pirate Bay here.

React Native Plant App UI #10 : Categories Section in Browse Screen

absek — Tue, 19 Nov 2019 05:39:23 +0000

This tutorial is the tenth part of our React Native Plant App tutorial series. In the previous part, we successfully implemented the Header and the Tabs section of the Browse screen. This tutorial is the continuation of the same tutorial from where we left off in the last part. So, it is recommended to go through the previous part in order to get insight and knowledge of the overall project.

In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below:

- [React Native Plant App UI #1: Getting Started](https://dev.to/absek/react-native-plant-app-ui-1-getting-started-516i-temp-slug-4395585)
- [React Native Plant App UI #2: Implementing Custom Components](https://dev.to/absek/react-native-plant-app-ui-2-implementing-custom-components-1j63-temp-slug-9774652)
- [Building React Native Plant App UI #3: Implementing Welcome Screen](https://kriss.io/react-native-plant-app-ui-3-implementing-welcome-screen/)
- [React Native Plant App UI #4: Illustration Slider and Animated Steps](https://kriss.io/react-native-plant-app-ui-4-illustration-slider-and-animated-steps/)
- [React Native Plant App UI #5: Terms of Service Modal](https://dev.to/absek/react-native-plant-app-ui-5-terms-of-service-modal-4g5m)
- [Building React Native Plant App UI #6: Login Screen](https://dev.to/absek/react-native-plant-app-ui-6-login-screen-405h)
- [React Native Plant App UI #7: Forgot Password Screen](https://dev.to/absek/react-native-plant-app-ui-7-forgot-password-screen-3d)
- [React Native Plant App UI #8: Sign Up Screen](https://dev.to/absek/react-native-plant-app-ui-8-sign-up-screen-1m23)
- [Building React Native Plant App UI #9: Implementing Browse Screen](https://dev.to/absek/react-native-plant-app-ui-9-implementing-browse-screen-4dp7)

As mentioned in the previous parts, the inspiration for this tutorial series came from the Mobile App Templates that provide a wide variety of mobile application templates written in React Native and powered by universal features and design. These app templates allow us to implement our own apps and even start our own startups. And, this tenth part is also the continuation of coding implementations and designs from the Youtube video tutorial by React UI Kitfor the Plant App. The video tutorial delivers the coding implementation of the overall app very thoroughly. However, there is no verbal guidance for coding and implementation. Hence, this tutorial series is the implementation of the same coding style and designs in the form of the article.

Overview

In this tenth part of this tutorial series, we are going to implement the Categories section of the Browse screen. The Categories section will contain cards and badge images which will represent the collection of specific products. The idea is to start by implementing a single category and then add multiple categories. Of course, we are going to style them properly as well as integrate mock data into them.

So, let us begin!!

Implementing Categories Section

Here, we are going to start implementing the categories section. The Categories section will represent the collection of different plant products under different categories. In order to implement the categories section, let us import the necessary components first in the Browse.js file:

import { Button, Block, Text, Card, Badge} from '../components';

Now, in the render() function, we are going to implement the template for the categories section just below the Block component for the Tabs section. For that, we need to use the code from the following code snippet:

render(){
        const { profile, navigation } = this.props;
        const tabs = ['Products', 'Inspirations', 'Shop'];
        return (
        <Block>
            <Block flex={false} row center space="between" style={styles.header}>
                <Text h1 bold>Browse</Text>
                <Button>
                    <Image source={profile.avatar} style={styles.avatar}/>
                </Button>
            </Block>
            <Block flex={false} row style={styles.tabs}>
                {tabs.map(tab => this.renderTab(tab))}
            </Block>
            <ScrollView 
              showsVerticalScrollIndicator={false}
              style={{paddingVertial: theme.sizes.base * 2}}
            >
              <TouchableOpacity onPress={()=> navigation.navigate('Explore', category)}>
                <Card center middle shadow>
                  <Badge>
                    <Image source={require('../assets/icons/plants.png')}/>
                  </Badge>
                  <Text>Plants</Text>
                  <Text gray caption>123 products</Text>
                </Card>
              </TouchableOpacity>
            </ScrollView>
        </Block>

    );
}

Here, we have added the ScrollView component which wraps the TouchableOpacity component. The ScrollView component has showsVerticalScrollIndicator prop set to false which will hide the verticle scroll bar on the screen. TouchableOpacity component wraps the Card component which in turn wraps a Badge component and some Text components. The TouchableOpacity component has the onPress event in which the navigation to the Explore screen is set. The Badge component wraps the Image component with the source from the assets folder.

Hence, we will get the following result in the emulator screen: As we can see, we have got one category in the Categories section. Now, we need to style it properly as well as add multiple categories.

Adding Dimensions

Now, we are going to use the Dimensions component from the react-native package in order to get the full width of the app screen. For that, we need to import the Dimensions component into our Browse screen:

import { StyleSheet, Image, TouchableOpacity, ScrollView, Dimensions } from 'react-native';

Next, we need to define the constant called width and set it to the Dimensions component get() function with the full-width property:

const { width } = Dimensions.get('window');

Now, we are going to style the above category using this width property. For that, we need to use the code from the following code snippet:

<ScrollView 
  showsVerticalScrollIndicator={false}
  style={{paddingVertial: theme.sizes.base * 2}}
>
  <TouchableOpacity onPress={()=> navigation.navigate('Explore', category)}>
    <Card center middle shadow style={styles.category}>
      <Badge>
        <Image source={require('../assets/icons/plants.png')}/>
      </Badge>
      <Text>Plants</Text>
      <Text gray caption>123 products</Text>
    </Card>
  </TouchableOpacity>
</ScrollView>

Here, we have added the style prop to the Card component which is provided in the code snippet below:

category: {
   // this should be dynamic based on screen width
   minWidth: (width - (theme.sizes.padding * 2.4) - theme.sizes.base) / 2,
   maxWidth: (width - (theme.sizes.padding * 2.4) - theme.sizes.base) / 2,
   maxHeight: (width - (theme.sizes.padding * 2.4) - theme.sizes.base) / 2,
 }

Hence, we will get the following result in the emulator screen: As we can see, we have got the proper category card in the categories section. Now, we need to add the multiple category card in the categories section with the same style configurations.

Adding mock categories data

Here, we are going to add the mock categories data from the mock.js file of the ‘./constants/’ folder. As we have already imported the mocks data, we do not need to import it again. But we need to define new categories data as a prop, just like the profile data. For that, we need to use the code from the following code snippet:

Browse.defaultProps = {
    profile : mocks.profile,
    categories : mocks.categories
}

Here, we have set the categories data from the mocks module to the default categories prop for the Browse screen. Now, we need to define this prop inside the render() function as shown in the code snippet below:

render(){
    const { profile, navigation, categories } = this.props;
    .......................

Now, in the categories section template in the render() function, we need to add the data from the categories prop. Since categories prop is in array format, we are going to iterate through each item in the categories array using map() array function. Hence, we will get the category card for each section. For that, we need to use the code from the following code snippet:

<ScrollView 
  showsVerticalScrollIndicator={false}
  style={{paddingVertial: theme.sizes.base * 2}}
>
  {categories.map(category => (
    <TouchableOpacity key={category.id} onPress={()=> navigation.navigate('Explore', category)}>
      <Card center middle shadow style={styles.category}>
        <Badge>
          <Image source={require('../assets/icons/plants.png')}/>
        </Badge>
        <Text>Plants</Text>
        <Text gray caption>123 products</Text>
      </Card>
    </TouchableOpacity>
  ))}

</ScrollView>

Here, we have used the categories array with the map() function just inside of the ScrollView component. Now, the TouchableOpacity component bears the key prop for each category card and identifies them uniquely.

Hence, we will get the following result in the emulator screen: As we can see, we have got the list of category cards in the categories section. But, all appears horizontally which does not look appealing. So, we need to configure some styles to it.

Configuring Styles

Here, we are going to add some style props to our components which make up a template for the categories section. For that, we need to use the code from the following code snippet:

<ScrollView 
  showsVerticalScrollIndicator={false}
  style={{paddingVertial: theme.sizes.base * 2}}
>
  <Block flex={false} row space="between" style={styles.categories}>
    {categories.map(category => (
      <TouchableOpacity
        key={category.name}
        onPress={() => navigation.navigate('Explore', { category })}
      >
        <Card center middle shadow style={styles.category}>
          <Badge margin={[0, 0, 15]} size={50} color="rgba(41,216,143,0.20)">
            <Image source={require('../assets/icons/plants.png')}/>
          </Badge>
          <Text medium height={20}>Plants</Text>
          <Text gray caption>123 products</Text>
        </Card>
      </TouchableOpacity>
    ))}
  </Block>

</ScrollView>

Here, we have added an extra Block component wrapping the categories map() array. This Block component is integrated with some style props. We have also added some style props to the inner components like Badge and Text. The required style is provided in the code snippet below:

categories: {
  flexWrap: 'wrap',
  paddingHorizontal: theme.sizes.base * 2,
  marginBottom: theme.sizes.base * 3.5,
},

Hence, we will get the following result in the emulator screen: As we can see, we have got the category cards in the categories section side by side in the grid style. But, all the category cards appear the same with the same image and text. It is because we have not integrated the data from the categories array prop inside the map() function.

Configuring data from categories array

This step is pretty simple, we are just going to integrate the data from the categories array prop inside the template returned by the map() function. For that, we need to use the code from the following code snippet:

<ScrollView 
  showsVerticalScrollIndicator={false}
  style={{paddingVertial: theme.sizes.base * 2}}
>
  <Block flex={false} row space="between" style={styles.categories}>
    {categories.map(category => (
      <TouchableOpacity
        key={category.name}
        onPress={() => navigation.navigate('Explore', { category })}
      >
        <Card center middle shadow style={styles.category}>
          <Badge margin={[0, 0, 15]} size={50} color="rgba(41,216,143,0.20)">
            <Image source={category.image} />
          </Badge>
          <Text medium height={20}>{category.name}</Text>
          <Text gray caption>{category.count} products</Text>
        </Card>
      </TouchableOpacity>
    ))}
  </Block>

</ScrollView>

Here, we have integrated the image source and texts from for categories array prop.

Hence, we will get the following result in our emulator screen: As we can see, we have got the category cards with different product information in the categories section.

With this, we have completed the implementation of the Categories section in our Browse screen. And, we have also come to the end of this part of the tutorial.

Finally, we have successfully completed the implementation of overall UI sections of the Browse screen in our React Native Plant UI App.

Conclusion

This tutorial is the tenth part of the React Native Plant App UI tutorial series. In this part, we continued from where we left off in the ninth part of this tutorial series. In this part of the tutorial, we learned to make use of Card and Block components from our predefined custom components in order to implement the categories section. We also learned how to make use of the Dimensions component to style the categories card and order them in grid style. Lastly, we integrated the mock data of categories into our categories section in order to complete the overall UI of the Browse screen.

In the next part of this tutorial series, we are going to start implementing the Settings screen in our React Native Plant UI App.

The post React Native Plant App UI #9 : Categories Section in Browse Screen appeared first on Kriss.

Disclosure

This post includes affiliate links; I may receive compensation if you purchase
products or services from different links provided in this article.

React Native Plant App UI #8 : Sign Up Screen

absek — Sun, 17 Nov 2019 05:39:03 +0000

This tutorial is the eighth part of our React Native Plant App tutorial series. In the previous part, we successfully implemented the different UI sections of the Forgot Password Screen. This tutorial is the continuation of the same tutorial from where we left off in the last part. So, it is recommended to go through the previous part in order to get insight and knowledge of the overall project.

In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below:

- [React Native Plant App UI #1: Getting Started](https://dev.to/absek/react-native-plant-app-ui-1-getting-started-516i-temp-slug-4395585)
- [React Native Plant App UI #2: Implementing Custom Components](https://dev.to/absek/react-native-plant-app-ui-2-implementing-custom-components-1j63-temp-slug-9774652)
- [Building React Native Plant App UI #3: Implementing Welcome Screen](https://kriss.io/react-native-plant-app-ui-3-implementing-welcome-screen/)
- [React Native Plant App UI #4: Illustration Slider and Animated Steps](https://kriss.io/react-native-plant-app-ui-4-illustration-slider-and-animated-steps/)
- [React Native Plant App UI #5: Terms of Service Modal](https://dev.to/absek/react-native-plant-app-ui-5-terms-of-service-modal-4g5m)
- [Building React Native Plant App UI #6: Login Screen](https://dev.to/absek/react-native-plant-app-ui-6-login-screen-405h)
- [React Native Plant App UI #7: Forgot Password Screen](https://dev.to/absek/react-native-plant-app-ui-7-forgot-password-screen-3d)

As stated in the previous parts, the tutorial series was inspired by the React Native App Templates that provide a wide variety of mobile application templates written in React Native and powered by universal features and design. These app templates allow us to implement our own apps and even start our own startups. And, this eighth part is also the continuation of coding implementations and designs from the Youtube video tutorial by React UI Kitfor the Plant App. The video tutorial delivers the coding implementation of the overall app very thoroughly. However, there is no verbal guidance for coding and implementation. Hence, this tutorial series is the implementation of the same coding style and designs in the form of the article. Thus, the learners can go through each step and take their time understanding the implementations.

Overview

In this eighth part of this tutorial series, we are going to implement the Sign-Up Screen with different UI sections. The Sign-Up screen will be more or less similar to the Login Screen or Forgot Password as well. The UI sections are very much similar to that of the Login Screen. This screen will contain comparatively more input fields which is the only difference in terms of UI of different screens. We will also implement the error handling as well as the loading state at the end.

So, let us begin!!

Implementing Sign-Up Screen

We have already set up the simple React Native template in the Signup.js screen file. And, we have also set up the navigation configuration from the Login screen to the Sign-Up screen. Here, we are going to implement the different UI sections of the Sign-Up Screen. This screen is more or less similar to Login Screen. So, we are going to copy some of the codes from our Login screen to the Sign-Up screen. First, we are going to import the necessary components as shown in the code snippet below:

import { Alert, ActivityIndicator, Keyboard, KeyboardAvoidingView, StyleSheet } from 'react-native';
import { Button, Block, Input, Text } from '../components';
import { theme } from '../constants';

Here, we have imported the required components to build this screen from the react-native package. Then, we have also imported with the predefined custom components from our ‘./components/’ folder. The theme module is also imported from the ‘./constants/’. Now, we are going to define and initialize the required state variables as shown in the code snippet below:

state = {
    email: null,
    username: null,
    password: null,
    errors: [],
    loading: false,
  }

Here, we have defined the email, username, password state variables and is set to the null value, errors array and loading state as false.

Adding Header and Input Section

Note that we need to remember to remove the navigationOptions config as well. Here, we are going to add the header section as well as the input field. This screen will contain three input fields for entering the email, username, and password. The styles of the input field will be similar to that in the Login screen. Now, in order to implement these sections, we need to make use of the code from the following code snippet in the render() function of Signup.js file:

render(){
    return (
      <KeyboardAvoidingView style={styles.signup} behavior="padding">
        <Block padding={[0, theme.sizes.base * 2]}>
          <Text h1 bold>Sign Up</Text>
          <Block middle>
          <Input
              email
              label="Email"
              style={[styles.input]}
              defaultValue={this.state.email}
              onChangeText={text => this.setState({ email: text })}
            />
            <Input
              label="Username"
              style={[styles.input]}
              defaultValue={this.state.username}
              onChangeText={text => this.setState({ username: text })}
            />
            <Input
              secure
              label="Password"
              style={[styles.input]}
              defaultValue={this.state.password}
              onChangeText={text => this.setState({ password: text })}
            />
          </Block>
        </Block>
      </KeyboardAvoidingView>

    );
  }

Here, we have used the KeyboardAvoidingView as the parent component. This component helps to shift the content inside it shift above the keyboard when the actual keyboard is triggered in the app. Then, we have the Block component wrapping the Text component and another child Block component. The child Block component wraps the Input component for our email, username, and password entries. The Input component has some props from the label and defaultValue. We receive the value of email, username, and password by changing the there state values in the onChangeText event. There are some styles configured to the components as well which is provided in the code snippet below:

signup: {
  flex: 1,
  justifyContent: 'center',
},
input: {
  borderRadius: 0,
  borderWidth: 0,
  borderBottomColor: theme.colors.gray2,
  borderBottomWidth: StyleSheet.hairlineWidth,
},
hasErrors: {
  borderBottomColor: theme.colors.accent,
}

Hence, we will get the following result in our emulator screen: As we can see, we have got the Header as well as the input fields in our Sign-Up screen. And, when the keyboard is triggered by tapping on any input fields, all the Input components are shifted up to avoid blockage from the inputs from the keyboard.

Adding Buttons

In this step, we are going to add buttons to the Sign-Up screen. We are going to add two buttons. One is the Sign-Up button and another is navigation back to the Login Screen button. This button will be placed below the input fields. In order to add buttons, we need to use the code from the following code snippet:

<Block middle>
    <Input
        email
        label="Email"
        style={[styles.input]}
        defaultValue={this.state.email}
        onChangeText={text => this.setState({ email: text })}
      />
      <Input
        label="Username"
        style={[styles.input]}
        defaultValue={this.state.username}
        onChangeText={text => this.setState({ username: text })}
      />
      <Input
        secure
        label="Password"
        style={[styles.input]}
        defaultValue={this.state.password}
        onChangeText={text => this.setState({ password: text })}
      />
      <Button gradient onPress={() => this.handleSignUp()}>
        {loading ?
          <ActivityIndicator size="small" color="white" /> :
          <Text bold white center>Sign Up</Text>
        }
      </Button>
      <Button onPress={() => navigation.navigate('Welcome ')}>
        <Text gray caption center style={{ textDecorationLine: 'underline' }}>
          Back to Login
        </Text>
      </Button>
    </Block>

Here, we have used the Button component. The Button component with some style props wraps the Text component in order to display text inside the button. The Back to Login button has the navigation configured to its onPress event. Hence, we will get the following result in our emulator screen: As we can see, we have the required buttons on the Sign-Up screen. Taping on the Back to Login button enables us to navigate back to the Login screen.

Configuring the Sign-Up button

As we might have seen that, we have called the handleSignUp() function in the onPress event of the Sign-Up button. But, we still have not defined any sort of function named handleSignUp(). Here, we are going to defined and configure the handleSignUp()function. Now, in the handleSignUp() function, we need to check the email, username, and password for errors. We are also going to configure the loading state by changing the states of the loading state before and after the successful signing up. For that, we need to use the code from the following code snippet:

handleSignUp() {
    const { navigation } = this.props;
    const { email, username, password } = this.state;
    const errors = [];
    Keyboard.dismiss();
    this.setState({ loading: true });
    // check with backend API or with some static data
    if (!email) errors.push('email');
    if (!username) errors.push('username');
    if (!password) errors.push('password');
    this.setState({ errors, loading: false });
    if (!errors.length) {
      Alert.alert(
        'Success!',
        'Your account has been created',
        [
          {
            text: 'Continue', onPress: () => {
              navigation.navigate('Browse')
            }
          }
        ],
        { cancelable: false }
      )
    }
  }

Here, we have also used the dismiss() function of the Keyboard component in order to hide the keyboard when we press the Sign-Up button. Then, on the basis of the value of the email, username and password, we have pushed the errors in the errors array. Then, on the basis of the length of errors array we have shown in the sign-up success alert.

Handling errors

Now, we need to show some sort of style change when the wrong email is entered. First, we need to import the state variables in the render() function as shown in the code snippet below:

render() {
    const { navigation } = this.props;
    const { loading, errors } = this.state;
    const hasErrors = key => errors.includes(key) ? styles.hasErrors : null;

Here, we have imported the loading and errors states. Then, we have defined a new function called hasErrors() and it returns the value depending on the key value of the errors state array. Now, we are going to change the style of the input field in order to show the error. For that, we need to use code from the following code snippet:

<Input
  email
  label="Email"
  error={hasErrors('email')}
  style={[styles.input, hasErrors('email')]}
  defaultValue={this.state.email}
  onChangeText={text => this.setState({ email: text })}
/>
<Input
  label="Username"
  error={hasErrors('username')}
  style={[styles.input, hasErrors('username')]}
  defaultValue={this.state.username}
  onChangeText={text => this.setState({ username: text })}
/>
<Input
  secure
  label="Password"
  error={hasErrors('password')}
  style={[styles.input, hasErrors('password')]}
  defaultValue={this.state.password}
  onChangeText={text => this.setState({ password: text })}
/>

Here, we have added the error prop to the Input components which call the hasError() function with specific parameters Then, we have also added the error style which is provided in the code snippet below:

hasErrors: {
    borderBottomColor: theme.colors.accent,
  }

Hence, we will get the following result in the emulator screen: As we can see, when we enter all the inputs correctly, the sign-up success alert is shown on the screen.

And when we tap the ‘Continue’ button on the alert message, we should navigate to the Browse screen. But, navigation to Browse screen does not work because we have not removed the comment from the Browse screen in the index.js file of the ‘./navigation/’ folder. And we have not implemented it as well.

Now, we need to test the errors which are shown in the emulator simulation below:

As we can see, if we do not enter any of the input, we get the error style in the respective input field.

We can set the setTimeout function in order to display the loading state just as in the Login screen. In the real scenario, when we are requesting some data from the server, it will automatically show up. With this, we have come to the end of this part of the tutorial.

Finally, we have successfully completed the implementation of the Sign-Up Screen in our React Native Plant UI App.

Conclusion

This tutorial is the eighth part of the React Native Plant App UI tutorial series. In this part, we continued from where we left off in the seventh part of this tutorial series. In this part of the tutorial, we got stepwise guidance on how to use different custom components to implement the overall UI of the Sign-Up screen. This Screen implementation is similar to that of the Login Screen from our previous tutorial part. Lastly, we also learned how to handle the errors and show the success alert messages.

In the next part of this tutorial series, we are going to start implementing different UI sections of our Browse screen.

The post React Native Plant App UI #8 : Sign Up Screen appeared first on Kriss.

Disclosure

This post includes affiliate links; I may receive compensation if you purchase
products or services from different links provided in this article.

React Native Plant App UI #7 : Forgot Password Screen

absek — Sat, 16 Nov 2019 13:58:26 +0000

This tutorial is the seventh part of our React Native Plant App tutorial series. In the previous part, we successfully implemented the Login Screen as well as configured the default custom header for each screen in the stack navigator. This tutorial is the continuation of the same tutorial from where we left off in the last part. So, it is recommended to go through the previous part in order to get insight and knowledge of the overall project.

In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below:

- [React Native Plant App UI #1: Getting Started](https://dev.to/absek/react-native-plant-app-ui-1-getting-started-516i-temp-slug-4395585)
- [React Native Plant App UI #2: Implementing Custom Components](https://dev.to/absek/react-native-plant-app-ui-2-implementing-custom-components-1j63-temp-slug-9774652)
- [Building React Native Plant App UI #3: Implementing Welcome Screen](https://kriss.io/react-native-plant-app-ui-3-implementing-welcome-screen/)
- [React Native Plant App UI #4: Illustration Slider and Animated Steps](https://kriss.io/react-native-plant-app-ui-4-illustration-slider-and-animated-steps/)
- [React Native Plant App UI #5: Terms of Service Modal](https://dev.to/absek/react-native-plant-app-ui-5-terms-of-service-modal-4g5m)
- [Building React Native Plant App UI #6: Login Screen](https://dev.to/absek/react-native-plant-app-ui-6-login-screen-405h)

As mentioned in the previous parts, the inspiration to work on this tutorial series came from React Native App Templates that provide a wide variety of mobile application templates written in React Native and powered by universal features and design. These app templates allow us to implement our own apps and even start our own startups. And, this seventh part is also the continuation of coding implementations and designs from the Youtube video tutorial by React UI Kitfor the Plant App. The video tutorial delivers the coding implementation of the overall app very thoroughly. However, there is no verbal guidance for coding and implementation. Hence, this tutorial series is the implementation of the same coding style and designs in the form of the article. Thus, the learners can go through each step and take their time understanding the implementations.

Overview

In this sixth part of this tutorial series, we are going to implement the Forgot Password Screen with different UI sections. The Forgot Password screen will be more or less similar to the Login Screen. There is not much change in anything. In fact, this screen is easier to implement as it will have only one input field and buttons. We will also implement the error handling as well as the loading state at the end.

So, let us begin!!

Adding Navigation to Forgot Password Screen

Here, we are going to add the navigation to Forgot Password Screen from our Login Screen. *But first, we need to uncomment the Forgot screen in index.js file of ‘./navigation/’ folder. * Now, we are going to add the navigation configuration in order to navigate to the Forgot Password Screen in our Login.js file:

<Button onPress={() => navigation.navigate('Forgot')}>
    <Text gray caption center style={{ textDecorationLine: 'underline' }}>
      Forgot your password?
    </Text>
  </Button>

Here, we have used the navigate function provided by navigation prop with ‘Forgot’ parameter.

Adding Simple React Native Template to Forgot.js file

Since our Forgot.js file is empty and cannot be recognized as a react native file, we need to add the react-native template to it. The simple template for the Forgot screen is provided in the code snippet below:

import React from 'react';
import { StyleSheet } from 'react-native';
import { Button, Block, Text } from '../components';
export default class Forgot extends React.Component {
  render(){
    return (
      <Block middle>
        <Text>Forgot Password Screen</Text>
      </Block>

    );
  }

}
const styles = StyleSheet.create({
});

Here, we have already imported some required components from our predefined custom components and created a simple template.

Hence, we will get the following result in our emulator screen:

As we can see, we have successfully configured the navigation to Forgot Password screen. And, there is the presence of custom default back button in our Forgot Password screen as well.

Implementing Forgot Password Screen

Here, we are going to implement the different UI sections of the Forgot Password Screen. This screen is more or less similar to Login Screen. So, we are going to copy some of the codes from our Login screen to Forgot Password Screen. First, we are going to import the necessary components as shown in the code snippet below:

import { Alert, ActivityIndicator, Keyboard, KeyboardAvoidingView, StyleSheet } from 'react-native';
import { Button, Block, Input, Text } from '../components';
import { theme } from '../constants';

Then, we are going to define the valid email as a constant as shown in the code snippet below:

const VALID\_EMAIL = "kriss@kriss.com";

Now, we are going to define and initialize the required state variables as shown in the code snippet below:

state = {
    email: VALID_EMAIL,
    errors: [],
    loading: false,
  }

Here, we have defined the email state set to valid email value, errors array and loading state as false.

Adding Header and Input Section

Here, we are going to add the header section as well as the input field. This screen will only contain one input field which is for entering the email. The style of the input field will be similar to that in the Login screen. Now, in order to implement these sections, we need to make use of the code from the following code snippet in the render() function of Forgot.js file:

render(){
    return (
        <KeyboardAvoidingView style={styles.forgot} behavior="padding">
        <Block padding={[0, theme.sizes.base * 2]}>
          <Text h1 bold>Forgot</Text>
          <Block middle>
            <Input
              label="Email"
              style={[styles.input]}
              defaultValue={this.state.email}
              onChangeText={text => this.setState({ email: text })}
            />
          </Block>
        </Block>
      </KeyboardAvoidingView>

    );
  }

Here, we have used the KeyboardAvoidingView as the parent component. This component helps to shift the content inside it shift above the keyboard when the actual keyboard is triggered in the app. Then, we have the Block component wrapping the Text component and another child Block component. The child Block component wraps the Input component for our email entry. The Input component has some props from the label and defaultValue. We receive the value of email by changing the email state value in the onChangeText event.

There are some styles configured to the components as well which is provided in the code snippet below:

forgot: {
   flex: 1,
   justifyContent: 'center',
 },
 input: {
   borderRadius: 0,
   borderWidth: 0,
   borderBottomColor: theme.colors.gray2,
   borderBottomWidth: StyleSheet.hairlineWidth,
 },

Hence, we will get the following result in our emulator screen:

As we can see, we have got the Header as well as the input field with a valid email in our Forgot password screen.

Adding Buttons

In this step, we are going to add buttons to the Forgot Password screen. We are going to add two buttons. One is the Forgot button and another is navigation back to the Login Screen button. This button will be placed below the input fields. In order to add buttons, we need to use the code from the following code snippet:

<Block middle>
     <Input
       label="Email"
       style={[styles.input]}
       defaultValue={this.state.email}
       onChangeText={text => this.setState({ email: text })}
     />
     <Button gradient onPress={() => this.handleForgot()}>
       {loading ?
         <ActivityIndicator size="small" color="white" /> :
         <Text bold white center>Forgot</Text>
       }
     </Button>
     <Button onPress={() => navigation.navigate('Login')}>
       <Text gray caption center style={{ textDecorationLine: 'underline' }}>
         Back to Login
       </Text>
     </Button>
   </Block>

Hence, we will get the following result in our emulator screen:

As we can see, we have the required buttons in the Forgot Password screen. Taping on the Back to Login button enables us to navigate back to the Login screen.

Configuring the Login button

As we might have seen that, we have called the handleForgot() function in the onPress event of the Forgot button. But, we still have not defined any sort of function named handleForgot(). Here, we are going to defined and configure the handleForgot() function. Now, in the handleLogin() function, we need to configure the valid email and invalid email with errors. We are also going to configure the loading state by changing the states of the loading state before and after the successful sending of an email. For that, we need to use the code from the following code snippet:

handleForgot() {
    const { navigation } = this.props;
    const { email } = this.state;
    const errors = [];
    Keyboard.dismiss();
    this.setState({ loading: true });
    // check with backend API or with some static data
    if (email !== VALID_EMAIL) {
      errors.push('email');
    }
    this.setState({ errors, loading: false });
    if (!errors.length) {
      Alert.alert(
        'Password sent!',
        'Please check you email.',
        [
          {
            text: 'OK', onPress: () => {
              navigation.navigate('Login')
            }
          }
        ],
        { cancelable: false }
      )
    } else {
      Alert.alert(
        'Error',
        'Please check you Email address.',
        [
          { text: 'Try again', }
        ],
        { cancelable: false }
      )
    }
  }

Here, we have also used the dismiss() function of the Keyboard component in order to hide the keyboard when we press the Forgot button. Then, on the basis of the length of the email, we have shown the respective alerts.

Handling errors

Now, we need to show some sort of message or style change when the wrong email is entered. First, we need to import the state variables in the render() function as shown in the code snippet below:

render(){
    const { navigation } = this.props;
    const { loading, errors } = this.state;
    const hasErrors = key => errors.includes(key) ? styles.hasErrors : null;

<Input
    label="Email"
    error={hasErrors('email')}
    style={[styles.input, hasErrors('email')]}
    defaultValue={this.state.email}
    onChangeText={text => this.setState({ email: text })}
  />

Here, we have added the error prop to the Input the component which calls the hasError() function with specific parameters Then, we have also added the error style which is provided in the code snippet below:

hasErrors: {
    borderBottomColor: theme.colors.accent,
  }

Hence, we will get the following result in the emulator screen:

As we can see, when the email address is valid the success alert is shown on the screen. And when we tap the ‘OK’ button on the alert message, we are navigated back to the Login screen.

Now, we need to test the Forgot Password with invalid email which is shown in the emulator simulation below:

As we can see, if we enter the invalid email, we get the error message alert.

Finally, we have successfully completed the implementation of the Forgot Password Screen in our React Native Plant UI App.

Conclusion

This tutorial is the seventh part of the React Native Plant App UI tutorial series. In this part, we continued from where we left off in the sixth part of this tutorial series. In this part of the tutorial, we got stepwise guidance on how to use different custom components to implement the overall UI of the Forgot Password screen. This Screen implementation is similar to that of the Login Screen from our previous tutorial part. Lastly, we also learned how to handle the errors and show success and error alert messages.

In the next part of this tutorial series, we are going to implement the overall UI of the SignUp screen in the Signup.js file.

The post React Native Plant App UI #7 : Forgot Password Screen appeared first on Kriss.

Disclosure

This post includes affiliate links; I may receive compensation if you purchase
products or services from different links provided in this article.

React Native Plant App UI #5 : Terms of Service Modal

absek — Thu, 14 Nov 2019 00:31:07 +0000

This tutorial is the fifth part of our React Native Plant App tutorial series. In the previous part, we successfully implemented the Illustrations section with the image slider and Steps section with animated Delimiter dots. This tutorial is the continuation of the same tutorial from where we left off in the last part. So, it is recommended to go through the previous part in order to get insight and knowledge of the overall project.

As mentioned in the previous parts, the inspiration to work on this tutorial series came from React Native App Templates that provide a wide variety of mobile application templates written in React Native and powered by universal features and design. These app templates allow us to implement our own apps and even start our own startups. And, this fifth part is also the continuation of coding implementations and designs from the Youtube video tutorial by React UI Kitfor the Plant App. The video tutorial delivers the coding implementation of the overall app very thoroughly. However, there is no verbal guidance for coding and implementation. Hence, this tutorial series is the implementation of the same coding style and designs in the form of the article. Thus, the learners can go through each step and take their time understanding the implementations.

Overview

In this fifth part of this tutorial series, we are going to implement the Terms of Service(TOS) section in the form of a Modal view. This TOS section will contain the terms and services of the app as in the actual app. The implementation of this section will also complete our overall implementation of the Welcome screen. The idea is to start by implementing the Modal view when clicking the ‘Terms of service’ button at the bottom of the welcome screen. Then, we will add the content inside the modal view and make it scrollable as well. Then, we will implement the button to close the modal as well as configure the closing of the modal through the device back button.

So, let us begin!!

Implementing the TOS section

Here, we are going to implement the TOS section in our Welcome screen. This is the last UI section in our Welcome screen which will appear in the form of Modal. We have already added the ‘Terms of Services’ button at the bottom of the Welcome screen. So, when we click on that button, the Modal showing all the Terms of Services should appear. But first, we need to import the Modal component from the react-native package as shown in the code snippet below:

import { StyleSheet, FlatList, Image, Dimensions, Animated, Modal } from 'react-native';

Then, we need to define the state variable called showTerms in order to handle the opening and closing of our Modal. The initialization of the state variable is shown in the code snippet below:

state = {
    showTerms : false,
  }

Defining a Separate Function

Now, as we have separated out different UI sections of the Welcome screen as a function. We are going to implement this TOS section in the function as well. The function will return the template for the Modal component. The function is called renderTermServices() and its implementation is provided in the code snippet below:

renderTermsServices(){
    return(
      <Modal  animationType="slide" visible={this.state.showTerms}>
        <Text>Modal</Text>
      </Modal>
    )
  }

Here, the renderTermsServices() function returns the Modal component. The Modal component wraps the Text component. The Modal component is configured with some props. the animationType prop is set to slide so that there is the sliding effect while opening and closing modal. And the visible prop handles the opening and closing of the modal on the basis of showTerms boolean value.

Now, we need to change the state of showTerms variable to true show that the modal opens. We are going to do that in the Terms of service button of the Welcome screen available in the render() function:

 <Block middle flex={0.5} margin={[0, theme.sizes.padding * 2]}>
    <Button gradient onPress={() => this.props.navigation.navigate('Login')}>
      <Text center semibold white>Login</Text>
    </Button>
    <Button shadow onPress={() => this.props.navigation.navigate('SignUp')}>
      <Text center semibold>Signup</Text>
    </Button>
    <Button onPress={() => this.setState({ showTerms: true })}>
      <Text center caption gray>Terms of service</Text>
    </Button>
  </Block>
  {this.renderTermsServices()}
</Block>

Here, in the onPress event of the Button component representing Terms of service, we have changed the state of the showTerms variable to true. Then, we have also called the renderTermsServices() function below the Block wrapping the Button components.

Hence, we will get the following result in our emulator screen:

As we can see, when we clock the Terms of service button, the modal appears sliding from the bottom. But the modal view has nothing except a text.

So now, we are going to add the content to our Modal view.

Adding Content to Modal

Here, we are going to add the Modal content header as well as the contents. The content we are going to add will represent the Terms of service from the actual all. Altogether there are ten terms that will be displayed in the Modal view. Hence, in order to add the content to the Modal, we need to use the code from the following code snippet:

<Modal  animationType="slide" visible={this.state.showTerms}>
  <Block padding={[theme.sizes.padding * 2, theme.sizes.padding]} space="between">
    <Text h2 light>Terms of Service</Text>
      <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        1. Your use of the Service is at your sole risk. The service is provided on an "as is" and "as available" basis.  
      </Text>
      <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        2. Support for Expo services is only available in English, via e-mail.
      </Text>
      <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        3. You understand that Expo uses third-party vendors and hosting partners to provide the necessary hardware, software, networking, storage, and related technology required to run the Service.
      </Text>
      <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        4. You must not modify, adapt or hack the Service or modify another website so as to falsely imply that it is associated with the Service, Expo, or any other Expo service. 
      </Text>
      <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        5. You may use the Expo Pages static hosting service solely as permitted and intended to host your organization pages, personal pages, or project pages, and for no other purpose. You may not use Expo Pages in violation of Expo's trademark or other rights or in violation of applicable law. Expo reserves the right at all times to reclaim any Expo subdomain without liability to you.
      </Text>
      <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        6. You agree not to reproduce, duplicate, copy, sell, resell or exploit any portion of the Service, use of the Service, or access to the Service without the express written permission by Expo.
      </Text>
      <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        7. We may, but have no obligation to, remove Content and Accounts containing Content that we determine in our sole discretion are unlawful, offensive, threatening, libelous, defamatory, pornographic, obscene or otherwise objectionable or violates any party's intellectual property or these Terms of Service.
      </Text>
      <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        8. Verbal, physical, written or other abuse (including threats of abuse or retribution) of any Expo customer, employee, member, or officer will result in immediate account termination.
      </Text>
      <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        9. You understand that the technical processing and transmission of the Service, including your Content, may be transferred unencrypted and involve (a) transmissions over various networks; and (b) changes to conform and adapt to technical requirements of connecting networks or devices.
      </Text>
      <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        10. You must not upload, post, host, or transmit unsolicited e-mail, SMSs, or "spam" messages.
      </Text>
  </Block>
</Modal>

Here, the Modal component wraps a Block component with styling props. Then, the Block component wraps a bunch of Text components which is used to display the Modal content header as well as ten terms as points. All the Text components have the same styling props except the one which encloses the header text.

Note that these Block and Text components are from our predefined custom components; not from the react-native package.

Hence, we will get the following result in our emulator screen:

As we can see, we have got the TOS section header as well as the list of terms while opening the modal. But, we cannot view all the terms of the list because they are not scrollable. Due to this, we can only view the portion of the terms list which the app screen can accommodate.

Now, we need to be able to scroll the list in order to view all the points on the list.

Making Terms List Scrollable

Here, we are going to make the terms list that we added in our previous step scrollable. For that, we need to wrap all the Text component representing the terms list inside the ScrollView component. The overall implementation is provided in the code snippet below:

 <Modal  animationType="slide" visible={this.state.showTerms}>
    <Block padding={[theme.sizes.padding * 2, theme.sizes.padding]} space="between">
      <Text h2 light>Terms of Service</Text>
      <ScrollView style={{ marginVertical: theme.sizes.padding }}>
....................................
      ............................
      </ScrollView>
    </Block>
  </Modal>

Here, we have added the ScrollView component wrapping all the Text components representing the Terms list. The ScrollView component is also configured with some inline styles.

Hence, we will get the following result in our emulator screen:

As we can see, our Terms List in the Modal component is now scrollable.

Adding Button to Modal

Here, we are going to add a button to the Modal which can be used to close the modal. The button will be placed at the bottom of the Modal. For that, we need to use the code from the following code snippet in the renderTermsServices() function:

<Modal  animationType="slide" visible={this.state.showTerms}>
      <Block padding={[theme.sizes.padding * 2, theme.sizes.padding]} space="between">
        <Text h2 light>Terms of Service</Text>
        <ScrollView style={{ marginVertical: theme.sizes.padding }}>
        ....................................
        .......................................
        </ScrollView>
        <Block middle padding={[theme.sizes.base / 2, 0]}>
            <Button gradient onPress={() => this.setState({ showTerms: false })}>
              <Text center white>I understand</Text>
            </Button>
         </Block>
      </Block>
    </Modal>

Here, we have added a Block component with some style props to below the ScrollView component inside the Modal component. The Block component wraps the Button component with a gradient texture style. The Button component, in turn, wraps the Text component with some text. In the onPress event of the Button component, we have changed the state of showTerms state variable to false using setState function. This will cause the Modal component to close when we press this button.

Hence, we will get the following result in our emulator screen:

As we can see, we have got the button at the bottom of the Modal. Hence, when we press on the button the Modal closes.

Closing the Modal from Device Back Button

Here, we are going to trigger the closing of the Modal while pressing the back button on our mobile device. For that, we have to make use of the onRequestClose event in our Modal component. The onRequestClose callback is called when the user presses the hardware back button on Android or the menu button on Apple TV. We have to integrate this callback in our Modal component as shown in the code snippet below:

<Modal  animationType="slide" visible={this.state.showTerms} onRequestClose={() => this.setState({ showTerms: false })}>
    <Block padding={[theme.sizes.padding * 2, theme.sizes.padding]} space="between">
      <Text h2 light>Terms of Service</Text>
      <ScrollView style={{ marginVertical: theme.sizes.padding }}>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          1. Your use of the Service is at your sole risk. The service is provided on an "as is" and "as available" basis.  
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          2. Support for Expo services is only available in English, via e-mail.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          3. You understand that Expo uses third-party vendors and hosting partners to provide the necessary hardware, software, networking, storage, and related technology required to run the Service.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          4. You must not modify, adapt or hack the Service or modify another website so as to falsely imply that it is associated with the Service, Expo, or any other Expo service. 
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          5. You may use the Expo Pages static hosting service solely as permitted and intended to host your organization pages, personal pages, or project pages, and for no other purpose. You may not use Expo Pages in violation of Expo's trademark or other rights or in violation of applicable law. Expo reserves the right at all times to reclaim any Expo subdomain without liability to you.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          6. You agree not to reproduce, duplicate, copy, sell, resell or exploit any portion of the Service, use of the Service, or access to the Service without the express written permission by Expo.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          7. We may, but have no obligation to, remove Content and Accounts containing Content that we determine in our sole discretion are unlawful, offensive, threatening, libelous, defamatory, pornographic, obscene or otherwise objectionable or violates any party's intellectual property or these Terms of Service.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          8. Verbal, physical, written or other abuse (including threats of abuse or retribution) of any Expo customer, employee, member, or officer will result in immediate account termination.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          9. You understand that the technical processing and transmission of the Service, including your Content, may be transferred unencrypted and involve (a) transmissions over various networks; and (b) changes to conform and adapt to technical requirements of connecting networks or devices.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          10. You must not upload, post, host, or transmit unsolicited e-mail, SMSs, or "spam" messages.
        </Text>
      </ScrollView>
      <Block middle padding={[theme.sizes.base / 2, 0]}>
        <Button gradient onPress={() => this.setState({ showTerms: false })}>
          <Text center white>I understand</Text>
        </Button>
      </Block>
    </Block>
  </Modal>

Here, we have changed the showTerms state variable to false in the onRequestClose event of Modal component. We have also provided the whole template of the modal.

Hence, we will get the following result in our emulator screen:

As we can see, the Modal closes when we tap on the back button of the mobile device. With this, we have come to the end of this part of our tutorial.

Finally, we have successfully implemented all the UI sections of the Welcome screen in our React Native Plant App.

Conclusion

This tutorial is the fifth part of the React Native Plant App UI tutorial series. In this part, we continued from where we left off in the fourth part of this tutorial series. In this part of the tutorial, we learned how to implement a modal using Modal component provided by the react-native package. We also learned how to add content to the Modal body as well as make it Scrollable. Then, we also learned how to add a button to modal and configure it as a closing mechanism. Lastly, we also got insight on how to make the device back or home button trigger the closing of Modal.

In the next part of this tutorial series, we are going to implement the overall UI of the Login Screen in the Login.js file.

The post React Native Plant App UI #5 : Terms of Service Modal appeared first on Kriss.

Disclosure

This post includes affiliate links; I may receive compensation if you purchase
products or services from different links provided in this article.

How to use Nexmo verify API and Message API in React native

absek — Sun, 27 Oct 2019 09:59:57 +0000

In this tutorial, we are going to implement the verification process in our React Native application. For the verification process, we are going to use Nexmo to verify API and message API with React Native. Nexmo is a platform that provides full-service verification service. They help to deploy a scalable verification solution without compromising the user experience. this tutorial inspired by React Native Social Chat App Template

Currently, the user can register and use the app instantly. Now, we are going to add a verification page after the user successfully registers. First, we are going to create a Nexmp app for verification and message API. Then, we are going to create a verification server by using codesandbox. Finally, we will configure these verification APIs and server to our React Native app logic and test the result.

Prepare the Nexmo App

First, we are going to create a Nexmo app and configure it. To create a Nexmo app we need to go to the Nexmo developer dashboard and log in. If we don’t have an account then we need to register into the Nexmo platform which is pretty easy. We can see the Nexmo login interface below through which we can register as well as log in.

After successful registration and login into the Nexmo platform, we will be redirected to Nexmo dashboard as shown in the screenshot below:

In the drawer menu of the dashboard, we can see the “Messages and Dispatch” option which can be collapsed into the additional sub-menu options.

Among the options, we need to click on ‘Create an application’ option in order to create a Nexmo app. Then, we need to provide an application name i.e. ‘nexmo test app’ here. After that, we can see the ‘Generate public/private key pair’ button at the bottom in the screenshot below. We need to click on it to generate a key that provides us with a private key in order to use it for connecting to the Nexmo server. Then, we need to save that private key into our local directory in order to use later while creating our server. The key file here is named as jwtRS256.key.

Configurations of Nexmo app

Now, we need to fill webhook URL to receive status from Nexmo server as shown in the screenshot below:

Next, we need to click on ‘Create application’ on the bottom right-hand side which will provide us with a Nexmo app named ‘nexmo test app’ as shown in the code snippet below:

As we can see in the screenshot above, we have successfully created the Nexmo app with all the required configurations. Now, we create the server in codesandbox which handles the verification messages API with the key that we generated.

Creating a Server

For verification purposes, we need to create a server that handles the sending and checking of the OTP code. In this tutorial, we are going to demonstrate the implementation of the server by using codesandbox.

First, we need to go to codesandboxwhich is an online editor or IDE for coding and creating demos. Here, we need to login to the codesandbox account using our GitHub account. Then, we need to go to our dashboard and create a sandbox by clicking on ‘Create Sandbox’ which opens up a dialog as shown in the screenshot below:

From the dialog shown in the above screenshot, choose ‘Node’ as configuration. Then, it will load the template for Node.js server with all the files already configured as shown in the editor screenshot below:

Setting up Dependencies

Now, we can see that there is a ‘Dependencies’ dropdown option on the left-hand side menu. It has a option to add the required dependencies to our Node project. So, we need to click on ‘Add Dependency’ button in the Dependencies dropdown which will open up a dialog with a number of dependencies list as shown in the screenshot below:

On the dependences dialog shown above, there is an input field at the top to search for the required dependencies. So, we just need to type the name of the dependency that is required, which will appear in the list below the input and then click on the dependency to install them into our project. The list of packages or dependencies to search and install are given in the screenshot below:

Remember to install all the packages shown in the above screenshot.

Next, we need to add the private key that we generated in our Nexmo app and downloaded to our local directory as jwtRS256.keyinto our Node project as shown in the screenshot below:

To add the key file, we just need to click on the ‘file’ icon option in the ‘src’ file header options, navigate to the directory where we downloaded the key and then, double-click on the key file to add.

Now, its time to do some coding.

Imports and Configurations

First, we are going to import and initialize all the dependencies as shown in the code snippet below:

const express = require("express");
var bodyParser = require("body-parser");
const app = express();
const Nexmo = require("nexmo");
const cors = require("cors");
const path = require("path");

Next, we need to add Nexmo app credentials to the Codesandbox environment variable. In order to do this, we need to go to the sandbox ‘Server control panel’, there we will see the place to add the secret keys at the bottom. Now, we need to add the keys with name and value as shown in the screenshot below:

After adding the keys, we can now use the Node environment variable into our codesandbox Node project.

Now, we are going to initialize the Nexmo app into our Node project using Nexmo() class which takes apiKey, apiSecret, applicationId, privateKeyas parameters. These parameters are initialized with the value from the environment variable and the key that we set up earlier as shown in the code snippet below:

const nexmo = new Nexmo(
             { apiKey: process.env.apiKey, 
               apiSecret: process.env.apiSecret, 
               applicationId: process.env.applicationId, 
               privateKey: path.join(__dirname, "jwtRS256.key") 
             }
);

Checking OTP code

Now, we initialize other core configurations into our project. We had initialized an expresspackage into the appvariable which provides a use() method. We are going to define the cors() method inside the app.use()method in order to receive the cross-site requests. Then, we are going to define a port as 3000 which is going to listen to all the incoming requests. Then, we are going to parse those incoming request using bodyParserwith json() method to parse the request data into JSON format. The code to implement all these configurations is given in the code snippet below:

app.use(cors());
const port = 3000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

Next, we need to create a function to handle the sending of OTP. The express package defined in appvariable provides us with post method to receive the send verification code request and respond accordingly. The request will consist of country code as callingCodeand phone number as phoneNumberwhich will send to the Nexmo app to verify. The implementation of the function to send the OTP request to Nexmo app is provided in the code snippet below:

The function in the above code snippet receives the country code and phone number from our app then sends a request by calling the nexmo verify API to send SMS and request_id back to the app in order to check OTP.

Now, we need to define another function to check the OTP code. Here, in this function, we will receive the country code, phone number, and verification_id and use Nexmo verify API to check the OTP.

If the verification is a success, we call Nexmo message API to send a welcome message to our app. The code for the function to check the OTP code is provided in the code snippet below:

app.put("/check_verify_code", (req, res) => { 
   // console.log(req.body); 
   let phone_number = req.body.callingCode + req.body.phoneNumber; 
   let verifyRequestId = req.body.verfication_id; 
   let code = req.body.code; 

   nexmo.verify.check( { request_id: verifyRequestId, code: code }, (err, result) => { 
      if (err) { 
        return res.status(500).json({ error: err }); 
      } else { 
        const message = { 
          content: { type: "text", text: "Welcome to Chat App" } 
        }; 
       nexmo.channel.send( 
                  { type: "sms", number: phone_number }, 
                  { type: "sms", number: "Chat App" }, 
                  message, 
                  (err, data) => { 
                     console.log(err); 
                   }, 
                  { 
                    useBasicAuth: true 
                  } 
       ); 
       return res.send(result); 
       } 
     } 
  ); 
});

Finally, we have successfully implemented the server to send OTP and verify the OTP code.

Creating React Native application

Now, we are going to create an app using React Native to implement the OTP verification process. The idea is to create a phone input to enter the phone number and then an OTP code verification check on the same screen. Here, we need to add logic to switch between the phone number form and OTP code verification form on the same screen. When the phone number is entered, the phone number input form should disappear and the OTP code entry form should appear. The boilerplate template to get started is already available in the GitHub for you.

So, let’s begin!!

Setting up React Native boilerplate template

Here, a ready to use boilerplate React Native app template is provided with a home and register screen already implement to help us get started easily with the app implementation part of this tutorial. To download this boilerplate into our local directory, we need Git to be installed into our system. Then, simply copy the following code and paste it into your command prompt with the desired location to download this GitHub repository into your local directory.

git clone https://github.com/krissnawat/nexmo\_tutorial

Now, we will have the react-native boilerplate template to help us get started with the app implementation. Now, navigate to project directory and run the command yarn or npm installto install all the required dependencies. Then, we need to run the following command to run the app project into our iOS simulator:

react-native run-ios

The screenshot below shows the project directory structure with all the components that are already provided in the app template project.

Now, we need to add a new component file named OTP.js in the component directory as shown in the screenshot below:

Creating Phone Input Form

In this step, we are going to create a phone number input form to receive the phone from the user. We are going to implement this form in the OTP.js file that we created earlier.

First of all, we need to import all the components necessary to implement this form from the react-native package. The required components to imported are provided in the code snippet below:

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View
} from "react-native";

Next, we are going to define a color constant named brandColor into our OTP.js file as shown in the code snippet below:

const brandColor = "#103D5F";

Next, we need to create a class named PhoneInputwhich extends to Component module. Then, we need to create a view for the form with two main components TextInput for the input field and TouchableOpacity in order to make the clickable button to submit the phone number. The code for this is provided in the code snippet below:

export default class PhoneInput extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.header}>Phoene Input</Text>
        <View style={{ flexDirection: "row" }}>
          <TextInput
            ref={"textInput"}
            name="phoneNumber"
            type={"TextInput"}
            underlineColorAndroid={"transparent"}
            autoCapitalize={"none"}
            autoCorrect={false}
            placeholder={"Phone Number"}
            style={[styles.textInput]}
            returnKeyType="go"
            autoFocus
          />
        </View>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>send OTP</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Then, we need to add some styles to our components. The style codes are given implement using the Stylesheet component which is given below with all the required styles:

const styles = StyleSheet.create({ 
  container: { flex: 1, margin: 20 }, 
  header: { textAlign: "center", marginTop: 60, fontSize: 22, margin: 20, color: "#4A4A4A" }, 
  textInput: { padding: 0, margin: 0, flex: 1, fontSize: 20, color: brandColor }, 
  button: { 
   marginTop: 20, 
   height: 50, 
   backgroundColor: brandColor, 
   alignItems: "center", 
   justifyContent: "center",
   borderRadius: 5 
  }, 
  buttonText: { 
   color: "#fff", 
   fontFamily: "Helvetica", 
   fontSize: 16, 
   fontWeight: "bold"
  } 
});

Hence, we get the following result in our iOS emulator:

The Logic to Switch Form Style

Here, we are going to implement a logic to switch the form from phone number input to OTP input. The idea is to switch the form from phone input to OTP input after we send the phone number to receive the OTP code. Here, we are going to use the state to handle the switching of the forms when the user enters the phone number and submits it to receive the OTP code. The state variable used here is enterCode as shown in the code snippet below:

constructor(props) { 
  super(props); 
  this.state = { 
     enterCode: false 
  }; 
}```



Hence, we use `enterCode` state to decide whether to display phone input or OTP input.

Next, we use this `enterCode` state as a condition to toggle the form name and placeholder style as shown in the code snippet below:



```javascript
<View style={{ flexDirection: "row" }}> 
  <TextInput ref={"textInput"} 
             name={this.state.enterCode ? "code" : "phoneNumber"} 
             type={"TextInput"} underlineColorAndroid={"transparent"} 
             autoCapitalize={"none"} 
             autoCorrect={false} 
             placeholder={this.state.enterCode ? "_ _ _ _" : "Phone Number"} 
             style={[styles.textInput, textStyle]} 
             returnKeyType="go" 
             maxLength={this.state.enterCode ? 6 : 20} 
             autoFocus /> 
</View>

Now, in the render() method, we define the toggle variables based on enterCode state as shown in the code snippet below:

headerText to handle the toggling of the form title name.
buttonText variable to handle the toggling of the button text.
textStyle variable to handle the toggling of input style.

Then, we bind these toggle variables to the components as shown in the code snippet below:

render() { 
  let headerText = `What's your ${ this.state.enterCode ? "verification code" : "phone number" }?`; 
  let buttonText = this.state.enterCode ? "Verify confirmation code" : "Send confirmation code"; 
  let textStyle = this.state.enterCode ? { height: 50, textAlign: "center", fontSize: 40, fontWeight: "bold", fontFamily: "Courier" } : {};

Now, we need to create a function to handle the sending of phone number and receiving of OTP code. Here, we simply implement this function named getSubmitAction() to change the enterCode state in order to test the toggling of input forms as shown in the code snippet below:

_getSubmitAction = () => { 
    this.setState({
      enterCode: !this.state.enterCode
    }); 
};

Now, we need to bind the function to onpress event of the TouchableOpacity component so that whenever we press the button, the getSubmitAction()function is triggered to change the enterCode state as shown in the code snippet below:

<TouchableOpacity style={styles.button} onPress={this._getSubmitAction}>
          <Text style={styles.buttonText}>{buttonText}</Text>
</TouchableOpacity>

Hence, we will see the following result in our emulator:

As we can see in the emulator simulation above, we have successfully implemented the logic to switch the form from phone input to OTP input.

Implementing function to send OTP

In this step, we are going to implement a function to request the OTP verification code after we submit the phone number.

First, we need to install three packages which are frisbee , react-native-form , and react-native-loading-spinner-overlay. We can simply run the following command into our project directory to install all three packages:

yarn add frisbee react-native-form react-native-loading-spinner-overlay

Then, we need to import all these packages to our OTP.js file as shown in the code snippet below:

import Frisbee from "frisbee";
import Spinner from "react-native-loading-spinner-overlay";
import Form from "react-native-form";

Frisbee package: In order to perform the HTTP requests.
Spinner package: In order to display the loading indicator.
Form package: In order to get data from the form.

Implementing Frisbee Instance

Here, we are going to initialize the Frisbee instance to perform the HTTP request to our codesandbox server. The baseURI is set from the URL from the codesandbox server. The initialization of Frisbee instance with URL and header configuration is provided in the code snippet below:

const api = new Frisbee({
  baseURI: "https://qeo3m.sse.codesandbox.io",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json"
  }
});

Then, we need to add more states i.e. spinner and country to handle to snipper and country code as shown in the code snippet below:

constructor(props) {
   super(props); 
   this.state = { 
      enterCode: false, 
      spinner: false, 
     country: { cca2: "TH", callingCode: "66"}
 }; 
}

Now, we need to get the form values i.e. either a phone or OTP code depending upon the enterCode state. To get the form values, we are going to use the Form package as shown in the code snippet below:

<Form ref={"form"} style={styles.form}>
  <View style={{ flexDirection: "row" }}> 
     <TextInput ref={"textInput"} 
                name={this.state.enterCode ? "code" : "phoneNumber"} 
                type={"TextInput"} underlineColorAndroid={"transparent"}
                autoCapitalize={"none"}
                autoCorrect={false} 
                placeholder={this.state.enterCode ? "_ _ _ _" : "Phone Number"} 
                style={[styles.textInput, textStyle]} 
                returnKeyType="go" 
                maxLength={this.state.enterCode ? 6 : 20}
                autoFocus /> 
    </View> 
    <TouchableOpacity style={styles.button} onPress= {this._getSubmitAction}> 
          <Text style={styles.buttonText}>{buttonText}</Text> 
    </TouchableOpacity> </Form> 
    <Spinner visible={this.state.spinner} textContent={"One moment..."} textStyle={{ color: "#fff" }} /> 
  </View>

Here, we use ref to define the form name which is used to get value from the input. Then, we are going to add the loading spinner.

Perform HTTP request

Now, since we can get the phone number input from the phone number input form, we perform the HTTP request to the server by implementing the getCode() function. The code to implement the function getCode to send the verification code request is provided in the code snippet below:

_getCode = () => {
this.setState({ spinner: true });
setTimeout(async () => {
      try {
        const res = await api.post("/send_verify_code", {
          body: {
            ...this.refs.form.getValues()
          }
        });
        if (res.err) throw res.err;
        this.setState({
          spinner: false,
          enterCode: true,
          verification: res.body
        });
        this.refs.form.refs.textInput.setNativeProps({ text: "" });
       setTimeout(() => {
          Alert.alert("Sent!", "We've sent you a verification code", [
            {
              text: "OK",
              onPress: () => this.refs.form.refs.textInput.focus()
            }
          ]);
        }, 100);
      } catch (err) {
        console.log(err);
        setTimeout(() => {
          Alert.alert("Oops!", err.message);
        }, 100);
      }
    }, 100);
  };

The code in the getCode function is defined below in line-wise fashion:

2nd line: This line sets the spinner state to true in order to show the snipper when we send the OTP code request.
4th line: Here, we set a timeout function in order to show the loading spinner for some period of time until the request ends.
6–11th line: Here, we send the HTTP request to an endpoint that we created on the server
14- 16th line: Here, we switch the form to the OTP form and hide spinner. Then, we set the verification_id that we received from the server to the state.
19th line: Then, we clear the form while switching to the OTP check form.
21–28th line: Here, we trigger an alert to display the status.
29–36th line: Here, we handle the display alert, when the error is thrown.

Then, we trigger the getSubmitAction function which in turn triggers the getCode function as shown in the code snippet below:

_getSubmitAction = () => {
  this._getCode();
};

Hence, we get the following result in our emulator:

As we can see in the emulator simulation above, we have successfully sent the phone to receive the OTP verification code and trigger an alert.

Now, Before we implement the OTP code checking, we want to implement a country code picker to help users fill their country code.

Adding country picker

Here, we are going to add the country picker in our phone number input form so that users can pick their country code easily.

First, we are going to install the react-native-country-picker-modal package by simple using the command below in our project directory:

yarn add react-native-country-picker-modal

Then, we need to import the package to our app in OTP.js file as shown in the code snippet below:

import CountryPicker from "react-native-country-picker-modal";

Configuring function

Next, we are going to implement a function renderCountryPicker that returns the CountryPicker component shown in the code snippet below:

_renderCountryPicker = () => {
    if (this.state.enterCode) return <View />;
   return (
      <CountryPicker
        ref={"countryPicker"}
        closeable
        style={styles.countryPicker}
        onChange={this._changeCountry}
        cca2={this.state.country.cca2}
        styles={countryPickerCustomStyles}
        translation="eng"
      />
    );
  };

_renderCallingCode = () => {
    if (this.state.enterCode) return <View />;
    return (
      <View style={styles.callingCodeView}>
        <Text style={styles.callingCodeText}>
          +{this.state.country.callingCode}
        </Text>
      </View>
    );
  };

In the 6th line, we need to add ref initialized to “countryPicker” to create a mark which provides access to element like before.

Then in 8th line, we need to add the following styles to the element as shown in the code snippet above.

const styles = StyleSheet.create({
  countryPicker: { alignItems: "center", justifyContent: "center" },
   .......

Now, we are going to implement a function that handles the change of country named changeCountry() bound to onchange event of CountryPicker component; shown inline 8. When this changeCountry() function is triggered, the country state changes and there is a focus on our form component. The code for this function is provided in the code snippet below:

_changeCountry = country => { 
    this.setState({ country });
    this.refs.form.refs.textInput.focus(); 
};

Then, in line 10, we need to add cca2 code to state country .

Next, we need to implement a function called renderCallingCode() which is used to display calling code besides the form. Here, we are going to use enterCode state, in order to determine the showing and hiding of the OTP code check form.

Finally, we add the function renderCountryPicker() and renderCallinCode() inside the Form component as highlighted in the code snippet below:

return (
      <View style={styles.container}>
        <Text style={styles.header}>{headerText}</Text>
<Form ref={"form"} style={styles.form}>
          <View style={{ flexDirection: "row" }}>
{this._renderCountryPicker()}
{this._renderCallingCode()}

As a result, we get the country code picker on our phone number input form as shown in the emulator simulation below:

Fetching code from Server

Next, we need to attach calling code i.e. country state to the request body inside getCode() function as highlighted in the code snippet below:

_getCode = () => {
    this.setState({ spinner: true });
    setTimeout(async () => {
      try {
        const res = await api.post("/send_verify_code", {
          body: {
            ...this.refs.form.getValues(),
             ...this.state.country
          }
        });
        if (res.err) throw res.err;
........

Lastly, we need to add a text footer in order to explain the policy. Here, we are going to use enterCode state condition to toggle between the return text to display in the footer inside the renderFooter() function as shown in the code snippet below:

_renderFooter = () => {
    if (this.state.enterCode)
      return (
        <View>
          <Text style={styles.wrongNumberText} onPress={this._tryAgain}>
            Enter the wrong number or need a new code?
          </Text>
        </View>
      );
     return (
      <View>
        <Text style={styles.disclaimerText}>
          By tapping "Send confirmation code" above, we will send you an SMS to
          confirm your phone number. Message &amp; data rates may apply.
        </Text>
      </View>
    );
  };

Then, we need to add the renderFooter() function to main input form as shown in the code snippet below:

<TouchableOpacity
    style={styles.button}
    onPress={this._getSubmitAction}
  >
    <Text style={styles.buttonText}>{buttonText}</Text>
  </TouchableOpacity>
  {this._renderFooter()}
</Form>

As a result, we can see the beautiful form with the country code selection and the phone number input in the screenshot below:

Implementing a Function to verify the OTP code

In this step, we are going to implement a function to check the OTP verification code.

Here, we are going to create a verifyCode() function which is to be triggered when we execute the verify code button. The overall code to implement the verifyCode() function is provided in the code snippet below:

_verifyCode = () => {
    this.setState({ spinner: true });
    setTimeout(async () => {
      try {
        const res = await api.put("check_verify_code", {
          body: {
            verfication_id: this.state.verification,
            ...this.refs.form.getValues(),
            ...this.state.country
          }
        });
       if (res.err) throw res.err;
        this.refs.form.refs.textInput.blur();
        this.setState({ spinner: false });
        setTimeout(() => {
          Alert.alert(
            "Success!",
            "You have successfully verified your phone number"
          );
          return this.props.navigation.navigate("MainChat", {
            username: this.props.navigation.getParam("username")
          });
        }, 100);
      } catch (err) {
        this.setState({ spinner: false });
        setTimeout(() => {
          Alert.alert("Oops!", err.message);
        }, 100);
      }
    }, 100);
  };

The explanation of the most important code sections in the above code snippet is provided below:

In 8th line, we have added the verification_id that equals to the username in the server.
In the 24th line, after the successful verification of the received OTP code, we are redirecting the user to the Main app screen.

Then, in order to call the verifyCode() function we come back to getSubmitAction() function that we defined earlier. And by using enterCode state as a condition, we add a toggle between two functions as shown in the code snippet below:

_getSubmitAction= () => {
  this.state.enterCode ? this._verifyCode() : this._getCode();
};

As a result, we get the following result in our emulator:

As we can see in the emulator simulation above, we have implemented the sending of a phone number to receive the OTP verification code from the server and then, verify the OTP verification code successfully. This completes our implementation of the OTP verification process using Nexmo app API, message API and Codesandbox server in React Native app successfully.

Conclusion

Well, this has been a heck of a long tutorial. In this tutorial, we got to learn many important features used during OTP verification. Here, we learned how to use Nexmo verify API and message API in the NodeJS server while using React native as frontend. We got step by step guide on how to create a Nexmo app and how to use the configuration from Nexmo app into our codesandbox Node server. Then, we also got guidance on how to create an HTTP request in React Native to request the Node server and also handle the response. We also learned how to add a country code picker to pick the country code while sending the phone number to the server to request for OTP code. Finally, we successfully implemented an OTP verification process.

The post How to use Nexmo verify API and Message API in React native appeared first on Kriss.

Disclosure

This post includes affiliate links; I may receive compensation if you purchase
products or services from different links provided in this article.

Food Delivery App UI Clone in React Native #1 : Splash Screen Integration

absek — Sat, 26 Oct 2019 13:40:07 +0000

This is the first part of our implementation of the React Native Food Delivery app UI Clone tutorial series. This tutorial series was inspired by the React native Food Delivery App template which provides an amazing Food Delivery app starter template written in React Native with many delicious features. Hence, anyone can make their own food delivery app for any restaurant with this beautiful food delivery restaurant app template. In any Food Delivery app, there must be the features for menu, food orders, reservations, etc. In this tutorial series, we will try to replicate the UI from the Food Delivery App template. In this part, we are going to implement the splash screen in the React Native app using the latest version of React Native and required plugins.

Overview

In this part, we are going to implement the Splash Screen using the latest version of React Native and plugins. Major steps in this tutorial are going to take place in Xcode as we need to configure the iOS part of the app for displaying the Splash Screen. The idea is to add the required splash screen icons and configure the native iOS app directory in the Xcode. We are going to make use of the react-native-splash-screen package in the React Native part as well as the iOS part to display the splash screen transition. Most of the work takes place in Xcode for configuring the splash screen and only some minor part is for the react-native side.

If we realize, there is already a default splash screen from react native project. But we are going to implement our own splash screen with our own logo icon for our React Native Food Delivery App App UI clone project. For now, we have just put some text on the splash screen which is displayed in the emulator simulation below:

Downloading Required Logo

For this tutorial series, we have the Scooter logo icon which we are going to integrate into the splash screen. The download link for the logo is provided below:

Scooter free vector icons designed by Freepik

Download this free icon in SVG, PSD, PNG, EPS format or as webfonts. Flaticon, the largest database of free vector icons.

Installing Splash Screen package

Here, we are going to install the react-native-splash-screen package into our project. The react-native-splash-screen package provides us with a splash screen API for react-native which can programmatically hide and show the splash screen. This package works for both iOS as well as Android platforms. All the configuration for the React Native part as well as the native part is provided in the documentation. Now, to install the package, we need to use the following command:

>>>yarn add react-native-splash-screen

Now, we need to link this package if it is not linked automatically. If the installation does not work, we can check the documentation for manual configuration.

Now, we need to update the pod. For that, we need to go to the iOS folder and run the following commands:

>>>cd ios 
>>>pod update

Configuring Splash Screen in Xcode

In this step, we are going to configure the app in Xcode in order to integrate the splash screen. First, we need to open our project on Xcode as shown in the screenshot below:

Next, we need to add our app logo icon to the ‘Images.xcassets’ folder. For that, we need to navigation to ‘Images.xcassets’ folder and create New Image Set as shown in the screenshot below:

Then, we need to rename the new image set as SplashScreen. Next, we need to add our app logo images to the SplashScreen image set as shown in the screenshot below:

Now, we need to open ‘LaunchScreen.xib’ file where we can find our default splash screen as shown in the screenshot below:

As we can see, all the default setups are shown in the right configuration panel of Xcode.

Now, we need to remove the default text and navigate to the ‘View” tab of the panel. Here, we are going to change the background color to brown as shown in the screenshot below:

Next, we need to add our app logo by clicking on the Image View button in the image as shown in the screenshot below:

Now, we will have the UIImageView as shown in the screenshot below:

Next, we need to add the SplashScreen image set to the Image View tab of the right panel. The SplashScreen image is to be added to the Image field as shown in the screenshot below:

Hence, we will get our app logo into our UIImageView. Now, we can shape the size of the logo from the above screen. Therefore, we have successfully completed the styling of the splash screen.

Next, we need to add the react-native-splash-screen package to the Xcode.

Activating splash screen in Xcode

Here, we are going to integrate the react-native-splash-screen into our Xcode ios project. For that, we need to go to:

node_modules ➜ react-native-splash-screen ➜ ios

Then, we need to add SplashScreen.xcodeprojfile to it as shown in the screenshot below:

Next, we need to go to: Build Settings → Search Paths → Header Search Paths of the Xcode and add the following path:

$(SRCROOT)/../node_modules/react-native-splash-screen/ios

The visual representation of this step is highlighted in the screenshot below:

Lastly, we need to import the react-native-splash-screen package into the Appdelegate.m file and activate the splash screen. Here, the package is imported as “RNSplashScreen.h“. Now, to trigger the splash screen, we need to add [RNSplashScreen show] at the position as shown in the code snippet screenshot below:

Now, if we re-run the project in our iOS emulator, we will get the following result:

As we can see, the splash screen appears when we launch the app. But, it stays there and does not hide automatically to display the app screen. So, our next step is to hide the splash screen when the react native app screen is mounted.

Hiding the Splash Screen

In this step, we are going to hide the splash screen after the react native app screen successfully mounts. For that, we need to go back to the App.js file of our React Native project and make use of the react-native-splash-screen package. First, we need to import the react-native-splash-screen package as a SplashScreen module in our App.js file as shown in the code snippet below:

import SplashScreen from 'react-native-splash-screen';

Then, we need to call the hide() function provided by SplashScreen module inside the componentDidMount function as shown in the code snippet below:

export default class App extends React.Component {
  componentDidMount() {
    // do stuff while splash screen is shown
    // After having done stuff (such as async tasks) hide the splash screen
    SplashScreen.hide();
  }

This will help to hide the splash screen as soon as the app screen mounts.

Now, if we re-run our project in the emulator, we will get the following result:

As we can see, the splash screen appears when we launch the app and then successfully hides after the component is mounted.

Finally, we have successfully completed the integration of the Splash Screen in our implementation of the Food Delivery App UI clone in React Native.

Conclusion

This tutorial is the first part of the React Native Food Delivery app UI clone tutorial series. Here, we learned how to add the logo icon as an image set to the required folder in the Xcode in order to integrate the splash screen. Then, we got the step by step guide on how to configure the iOS part in the Xcode in order to display the splash screen. Lastly, we also learned how to make use of the react-native-splash-screen package in both the React Native part as well as the native iOS part in XCode for showing and hiding the splash screen.

Note that the tutorial for the configuration of the splash screen in the Android platform is available in a separate tutorial article. We can follow the steps in that tutorial in other to implement the same splash screen for the Android platform.

Moreover, in the upcoming parts, we will build some cool walkthrough screens that introduce our app to the users.

The post Food Delivery App UI Clone in React Native #1 : Splash Screen Integration appeared first on Kriss.

Disclosure

This post includes affiliate links; I may receive compensation if you purchase
products or services from different links provided in this article.

React Native Shopify App UI Clone #1 : Implementing Splash Screen

absek — Sat, 26 Oct 2019 12:49:34 +0000

This tutorial is the first part of our implementation of the React Native Shopify app UI Clone tutorial series. The inspiration for this tutorial series came from the React Native Shopify template which provides dynamic and powerful ready to deploy Shopify starter template. Hence, anyone can use the template to build eCommerce startups or sell the application templates. Shopify is a popular eCommerce type app that allows its users to create an online store and sell their products to the customers. So in this tutorial series, we will try to replicate its UI as close to it as possible. In this part, we are going to implement the splash screen in the React Native app using the latest version of React Native and required plugins.

Overview

In this part, we are going to implement the Splash Screen using the latest version of React Native and plugins. Most of the phases in this tutorial are going to take place in Xcode as we need to configure the iOS part of the app for displaying the Splash Screen. The idea is to add the required splash screen icons and configure the native iOS app directory in the Xcode. We are going to make use of the react-native-splash-screen package in the React Native part as well as the iOS part to display the splash screen accurately. Most of the work takes place in Xcode for configuring the splash screen and only some minor part is for the react-native side.

If we realize, there is already a default splash screen from react native project. But we are going to implement our own splash screen with a Shopify logo icon for our React Native Shopify App UI clone project. For now, we have just put some text on the splash screen which is displayed in the emulator simulation below:

Downloading Required Logo

For this tutorial series, we have the Shopify logo icon which we are going to place in the splash screen. The download link for the logo is provided below:

Shopify free vector icons designed by Freepik

Free vector icon. Download thousands of free icons of business and finance in SVG, PSD, PNG, EPS format or as ICON FONT

Installing Splash Screen package

Here, we are going to install the react-native-splash-screen package into our project. The react-native-splash-screen package facilitates the splash screen API for react-native which can handle the hide and show the splash screen. This package works both on iOS as well as Android. All the configuration for the React Native part as well as the native part is provided in the documentation. Now, to install the package, we need to use the following command:

>>>yarn add react-native-splash-screen

If the installation does not work, we can check the documentation for manual configuration.

Now, we need to update the pod. For that, we need to go to the iOS folder and run the following commands:

>>>cd ios 
>>>pod update

Configuring Splash Screen in Xcode

In this step, we are going to configure the app in Xcode to implement the splash screen. First, we need to open our project on Xcode as shown in the screenshot below:

Next, we need to add our app logo to the ‘Images.xcassets’ folder. For that, we need to navigation to ‘Images.xcassets’ folder and create New Image Set as shown in the screenshot below:

Then, we need to rename the new image set as SplashScreen. Next, we need to add our app logo images to the SplashScreen image set as shown in the screenshot below:

Now, we need to open ‘LaunchScreen.xib’ file where we can find our default splash screen as shown in the screenshot below:

As we can see, all the default setups are shown in the right configuration panel of Xcode.

Now, we need to remove the default text and navigate to the ‘View” tab of the panel. Here, we are going to change the background color to light green as shown in the screenshot below:

Next, we need to add our app logo by clicking on a Image View button in the image as shown in the screenshot below:

Now, we will have the UIImageView as shown in the screenshot below:

Next, we need to add the SplashScreen image set to the Image View tab of the right panel. The SplashScreen image is to be added to the Image field as shown in the screenshot below:

Hence, we will get our Shopify logo into our UIImageView. Now, we have successfully completed the styling of the splash screen.

Next, we need to add the react-native-splash-screen package to the Xcode.

Activating splash screen for iOS in Xcode

Here, we are going to integrate the react-native-splash-screen into our Xcode ios project. For that, we need to go to:

node_modules ➜ react-native-splash-screen ➜ ios

Then, we need to add SplashScreen.xcodeprojfile to it as shown in the screenshot below:

Next, we need to go to Build Settings → Search Paths → Header Search Paths of the Xcode and add the following path:

$(SRCROOT)/../node_modules/react-native-splash-screen/ios

The visual representation of this step is shown in the screenshot below with arrows. We can following the arrow diagrams to find the exact place to enter the above path.

Now, if we re-run the project in our iOS emulator, we will get the following result:

Hiding the Splash Screen

import SplashScreen from 'react-native-splash-screen';

Then, we need to call the hide() function provided by SplashScreen module inside the componentDidMount() function as shown in the code snippet below:

export default class App extends React.Component {
  componentDidMount() {
    // do stuff while splash screen is shown
    // After having done stuff (such as async tasks) hide the splash screen
    SplashScreen.hide();
  }

This will help to hide the splash screen as soon as the app screen mounts.

Now, if we re-run our project in the emulator, we will get the following result:

Animated GIF – Find & Share on GIPHY

Discover & share this Animated GIF with everyone you know. GIPHY is how you search, share, discover, and create GIFs.

As we can see, the splash screen appears when we launch the app and then successfully hides after the component is mounted.

Finally, we have successfully completed the implementation of the Splash Screen in our React Native Shopify app UI clone.

Conclusion

This tutorial is the first part of the React Native Shopify app UI clone tutorial series. Here, we learned how to add the logo as an image set to the required folder in the Xcode in order to implement the splash screen. Then, we got the step by step guide on how to configure the iOS part in the Xcode in order to display the splash screen. Lastly, we also learned how to make use of the react-native-splash-screen package in both the React Native part as well as the native iOS part in XCode for showing and hiding the splash screen.

Moreover, in the upcoming parts, we will build some cool walkthrough screens that introduce our app to the users.

The post React Native Shopify App UI Clone #1 : Implementing Splash Screen appeared first on Kriss.

Disclosure

This post includes affiliate links; I may receive compensation if you purchase
products or services from different links provided in this article.

React Native Car Parking Finder App UI Clone #4 : Map Markers

absek — Fri, 25 Oct 2019 16:46:54 +0000

This tutorial is the fourth part of our React Native Car Parking App UI clone series. In the last part, we successfully implemented the car parking spots section. In this part of the tutorial series, we are going to continue from where we left off in the last part. So, it is recommended to go through the previous parts of this tutorial series in order to get the full insight and development of the project.

As mentioned in the previous parts, the inspiration of this tutorial came from the Store Locator App template that provides us with an amazing, fully-coded starter kit written in React Native that anyone can use to build their own store locator React Native application or initiate their own startup. And, this fourth part is also the continuation of coding implementations and designs from the YouTube video tutorial by React UI Kit for the Camping Spots Finder App clone. The video tutorial uses a fast coding style to deliver the overall tutorial to the viewers which may be difficult to grasp for any developer especially the beginners. This tutorial gives step by step guidance on the implementation of each UI section. Hence, the readers can relax and take time to implement the UI.

Overview

In this fourth part of the tutorial series, we are going to add the custom Map Marker which will represent the car parking spot locations on the map. The idea is to integrate the Marker component provided by MapView component into the MapView in order to show the default location markers. Then, we are going to customize the markers in order to make it as in the actual app. Lastly, we are going to add the active style to each map marker.

So, let us begin!!

Changing `SrollView` to `FlatList`

Firstly, we are going to make an extra change to our ScrollView in renderParkings() method. Here, we are going to change the ScrollView into FlatList in order to change our parking spot cards in the parking section into the list. By changing it into FlatList, we will get all the advantages offered by FlatList component as well as can include the ScrollView props into the FlatList component. The coding implementation for this is provided in the code snippet below:

renderParkings(){
      return(
        <FlatList
          horizontal
          pagingEnabled
          scrollEnabled
          showsHorizontalScrollIndicator={false}
          scrollEventThrottle={16}
          snapToAlignment="center"
          style={styles.parkings}
          data={parkingsSpots}
          keyExtractor={(item, index) => `${item.id}`}
          renderItem={({ item }) => this.renderParking(item)}
        />
      )
}

Here, we have replaced the ScrollView with FlatList component. Most of the required props that we integrated to the ScrollView for a smooth swiping transition are also incorporated in the FlatList component. The extra props that we have added are the data for the parkingsSpots , keyExtractor in order to identify each item in the list uniquely and renderItem which will return the template. FlatList loops through each element of our parkingsSpots array and return the list view which can be customized as a template in the renderItem prop.

Note that, we should not forget to import the FlatList component from the react-native package.

Now, we are also going to add a react hook called componentWillMount(), which will change the state of our hours state to 1 as shown in the code snippet below:

componentWillMount() {
    const hours = {};
    parkingsSpots.map(parking => {hours[parking.id] = 1});
    this.setState({ hours });
  }

Now, we should get the same result as we did before with ScrollView. Hence, if we re-run the emulator, we will get the following result in our emulator screen:

Adding the Map Markers

Here, we are going to add the Map Marker to our MapView component. For this, we will need to add some additional coordinate data to our parkingsSpots array data as provided in the code snippet below:

The post React Native Car Parking Finder App UI Clone #4 : Map Markers appeared first on Kriss.

Disclosure

This post includes affiliate links; I may receive compensation if you purchase
products or services from different links provided in this article.

React Native Car Parking Finder App UI Clone #3 : Parking Spot Cards

absek — Thu, 24 Oct 2019 11:49:23 +0000

This tutorial is the third part of our React Native Car Parking App UI clone series. In the previous part, we successfully implemented the scrolling transition of car parking spots. In this tutorial, we are going to continue from where we left off in the last part. So, it is recommended to go through the previous part in order to get the full insight into the project.

As stated in the previous parts, the tutorial series was inspired by the Store Locator App template that provides us with a dynamic, fully-coded starter kit written in React Native that anyone can use to build their own store locator React Native application or initiate their own startup. And, this second part is also the continuation of coding implementations and designs from the Youtube video tutorial by React UI Kit for the Camping Spots Finder App clone. The video tutorial uses the fast coding technique to implement this UI clone which may be difficult to grasp for any developer especially the beginners. This written tutorial provides the step by step implementation which will be easier to understand and implement.

Overview

In this third part of this tutorial series, we are going to add additional information to our parking spot cards of the parking section in the map screen as well as style it correctly. The idea is to integrate the car parking spot data into the parking spot card that we implemented with the scrolling transition in the last tutorial. Then, we are going to add some components and button styles to the card as well in order for it to look appealing. We are also going to use vector icons and style them properly.

So, let us begin!!

Adding Car Parking Spot Info

Here, we are going to add some additional car parking spot information to our parking spot card in the parking section. We are also going to style it in order for it to look appealing. Now, we are going to use some additional data from parkingSpots array and use it in the renderParking() method as shown in the code snippet below:

renderParking(item){
      return(
          <View key={`parking-${item.id}`} style={styles.parking}>
            <View style={{flex : 1, flexDirection : 'column'}}>
              <Text>x {item.spots} {item.title}</Text>
            </View>
            <View style={{flex : 1}}>
              <Text>${item.price}</Text>
              <Text>{item.rating}</Text>
            </View>
          </View>
      )
  }

Here, we have the parent View component wrapping two child View components. The first child View component has some inline styles with spots and title information. And, the second View component has price and rating information. The required style is provided in the code snippet below:

parking : {
    flexDirection : 'row',
    backgroundColor : 'white',
    borderRadius : 6,
    padding : 24,
    marginHorizontal: 24,
    width : width - ( 24 * 2 )
  }

Hence, we will get the following result in our emulator screen:

As we can see, some additional parking spot information has appeared on the parking spot card. But, we need to add more information from our parkingSpots array.

Adding Time Value for Parking Spot Cards

Here, we are going to add the time value for each parking spot cards. For that, we need to define a state called hours as shown in the code snippet below:

state = {
    hours: {},
}

Disclosure

This post includes affiliate links; I may receive compensation if you purchase
products or services from different links provided in this article.

Car Parking Finder App UI Clone in React Native #2: Scrolling/Swiping Transition

absek — Wed, 23 Oct 2019 02:37:22 +0000

This tutorial is the second part of our React Native Car Parking App UI clone series. In the previous part, we successfully implemented the MapView section as well as separated different UI sections for the map screen. This tutorial is the continuation of the same tutorial from where we left off in the last part. So, it is recommended to go through the previous part in order to establish the basis and get insight into the overall project.

As mentioned in the previous part, the motivation to implement this UI clone series came from the Store Locator App template that provides us with a dynamic, fully-coded starter kit written in React Native that anyone can use to build their own store locator React Native application or initiate their own startup. And, this second part is also the continuation of coding implementations and designs from the Youtube video tutorial by React UI Kit for the Camping Spots Finder App clone. The video tutorial provides overall guidance using fast coding which may be difficult to grasp for any developer especially the beginners. This written tutorial provides the step by step implementation which will be easier to understand and implement.

Overview

In this second part of this tutorial series, we are going to make some configurations to the parking section that we separated in the previous part of this tutorial. The idea is to define some mock car parking spot data and integrate that data into the parking section as a card view. Then, we are going to implement scrolling animations to swipe each parking spot card to the left. Here, we are going to make the scrolling or swiping transition as smooth as possible.

So, let us begin!!

Defining Mock Data

Here, we are going to define the mock data array which will contain the parking spot information as key-value pair in the object. Hence, we are going to initialize an array of objects in the Map.js file. So, we are going to initialize an array constant called parkingSpots with some parking spot data as shown in the code snippet below:

const parkingsSpots = [
    {
      id: 1,
      title: 'Parking 1',
      price: 5,
      rating: 4.2,
      spots: 20,
      free: 10
    },
    {
      id: 2,
      title: 'Parking 2',
      price: 7,
      rating: 3.8,
      spots: 25,
      free: 20
    },
    {
      id: 3,
      title: 'Parking 3',
      price: 10,
      rating: 4.9,
      spots: 50,
      free: 25
    },
  ];

Each data has an id, title, price, rating, the total number of parking spots as spots and total free parking spots as free.

Now, we are going to integrate this data into our parking section by using it in our renderParkings() and renderParking() functions that we have defined in the earlier part of the tutorial. Here in the renderParkings() method, we are going to use map() array function in order to iterate through each item in the parkingSpots array. Then, the map() function will call the renderParking() function by sending a parameter which is an item of the parkingSpots array as shown in the code snippet below:

renderParkings(){
      return(
          <ScrollView horizontal contentContainerStyle={styles.parkings}>
              {parkingsSpots.map((parking) => this.renderParking(parking))}
          </ScrollView>
      )
  }

Now, the renderParking() method is going to receive an item of parkingSpots array as a parameter. Then, we are going to use the parameter item in order to return the template with parking spot data as shown in the code snippet below:

renderParking(item){
      return(
          <View key={`parking-${item.id}`} style={styles.parking}>
              <Text>{item.title}</Text>
          </View>
      )
  }

Here, we have used the item id as a key in order to identify each View component of a particular parking spot uniquely. Then, for now, we have just used the title information from the parking data.

Hence, we will get the following result in our emulator screen:

As we can see, we have got three parking spots data in the parking section.

Disclosure

This post includes affiliate links; I may receive compensation if you purchase
products or services from different links provided in this article.

Building Car Parking Finder App UI Clone in React Native # 1: Map View

absek — Tue, 22 Oct 2019 02:33:47 +0000

This Car Parking Finder App UI clone tutorial series was inspired by the Store Locator App template that provides us with a dynamic, fully-coded starter kit written in React Native that anyone can use to build their own store locator React Native application or initiate their own startup.

This tutorial replicates the coding implementations and designs from the Youtube video tutorial by React UI Kit for the Car Parking Finder App UI Clone. The video tutorial is delivered using speed coding with quick implementations which may be difficult for any developer to comprehend. Therefore, the video tutorial is not made for beginners as it does not explain any details of the code. So in order to make things easier and clearer, this tutorial series breaks down the video into different sections. It also provides step by step guide to implement each UI section of the app. This will make things easier for anyone especially the beginners.

Overview

In this first part of this tutorial series, we are going to implement the map view as well as divide the map view screen into different UI sections for upcoming tutorial parts. This first part basically lays out the foundation for upcoming parts of this tutorial series so that it will become easier later on. Here, the idea is to start with a new React Native starter project using expo. Then, we will begin by implementing the map view. After that, we will divide the UI sections of the map screen.

So, let us begin!!

_ Note that, in this tutorial, we are going to use the EXPO as the React Native project development tool. So first, we are going to create a boilerplate React Native application using expo client. _

Creating Starter React Native project

First and foremost, since we are going to use the expo as a development engine, we need to install it into our system. To install expo globally into our system, we need to have Node Package Manager(NPM) installed first. Then, we need to run the following command:

npm install -g expo

Now, we need to create a boilerplate react native application using expo. In order to do this, we need to run following command in the desired project directory:

expo init \<project\_name\> // project name==\> carParking

After running the above command, we will be asked to choose the template for the boilerplate app. Here, we are going to choose the *blank * template. The blank template provides a very minimal app template as clean as an empty canvas. The selection screenshot is provided below:

As we can see, we choose the blank template and hit enter. Then, we need to enter the project name and after that, the boilerplate react native app is configured into our directory.

Now, we need to enter the project directory and then run the command:

expo start

Then, we will get the following boilerplate app in our emulator screen:

As we can see, we have got the starter template running in the emulator. The screen is not configured with too many styles and layout designs. Just a simple white screen with text in the middle.

Configuring project files and folders

Now, in the project folder, we need to create a new directory named ‘screens’. In the ‘./screens/’ directory, we need to create a new JavaScript file called Map.js. The overall project folder structure is provided in the screenshot below:

Now, we need to make the Map.js as a react native screen component. For that, we need to copy the code from the following code snippet and paste in the Map.js file:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class Map extends React.Component {
  render(){
    return (
      <View style={styles.container}>
        <Text>Map</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Here, we have imported the React component from the ‘react’ package in order to configure the file as a react file. We have imported some necessary components from the react-native package as well. Then, we have defined a class named Map which extends to Component module of the React component. In the render() function, we have configured a bare minimal template that has a View component wrapping Text component. Then, we have defined some styles using the StyleSheet component.

Now, we need to import the Map component screen into our App.js file. For that, we need to add the following code to our App.js file:

import Map from './screens/Map'

Now, we need to replace the code inside the render() method of App.js file with Map component as shown in the code snippet below:

render(){
    return (
      <Map />
    );
  }

As a result, we will get the same screen as earlier in the emulator.

Here, we can remove styles from the App.js file as well. Now, we are only going to work on the Map.js file for the Map view screen.

The post React Native Car Parking Finder App UI Clone #1 : Map View appeared first on Kriss.

Disclosure

This post includes affiliate links; I may receive compensation if you purchase
products or services from different links provided in this article.