Forem: themmyloluwaa

Algorithm to merge overlapping intervals found in a list. Python Solution

themmyloluwaa — Mon, 22 Feb 2021 04:09:25 +0000

Entry 3

Algorithm questions often come in various forms and this was one that came with a lot of confusion at first. My goal in writing this article is to provide my solution to solving this problem and to also show off my new found love in learning python and all of its dirtiness and sexiness. Don't mind me, straight to the point.

What's does an interval mean with regards to this problem?

An interval is an array that has a start and end value, e.g
interval1 = [4,6]
The start value is always lesser than the end value, so
[4,6] is valid but [5,2] is invalid.

So what is an overlapping interval?

An overlapping interval is a collection of intervals, whose previous interval contains an end value that is greater than or equal to the start value of the next interval in the collection.

Psst, I'm sorry if that confused you, but here's a code example

intervalCollection1 = [[1, 3], [2, 6], [8, 10], [15, 18]]
intervalCollection2 = [[1,4],[4,5]]

intervalCollection1 has at index 1 a start value that's less than the end value at index 0. intervalCollection2 also has at index 1 a start value that's equal to the end value of index 0.

Quick Note:

Before we proceed, one thing you must take note of when dealing with the values in nested arrays, changing the value of any item at an index also changes the value in the collection. This is because the intervals in the collections are stored not by value but by reference.

Test this out and see for yourself.

one = [1,2]
two = [one, [3,4]]

print("before changing one's values")
print(one,"two -> ", two)

one[0] = 21
one[1] = 22

print("after changing one's values")
print(one, "two -> ", two)

So onto the algorithm mate 🏴‍☠️☠️

First check that the collection's length is greater than 1, if it isn't return the collection.
Sort the collection of intervals
Store the current interval in a variable say a_var
Create a new collection to hold the values and add a_var into it.
Loop through the collection and store the next interval start and end values in two variables
Store the end value of a_var in a variable
Check that the end value of the a_var variable is greater than or equal to the start value of the next interval
if true, change the end value of the a_var to be the max of the current end interval
else change the value held in the a_var variable to be current iterate
push the a_var variable into the collection created.
Return the new collection created

CODE

class Solution:
    def merge(self, intervals: List[List[int]]) -> List[List[int]]:
        if len(intervals) <= 1:
            return intervals
        output = []
        intervals.sort();


        current = intervals[0]
        output.append(current)



        for i in range(len(intervals)):
            current2 = current[1];
            next1 = intervals[i][0]
            next2 = intervals[i][1]

            if current2 >= next1:
                current[1] = max(current2, next2)
            else:
                current = intervals[i]
                output.append(current)

        return output

Conclusion

What I've discovered with solving algorithm questions is that there's always something new to learn. With this question, it was learning what an interval array is and hopefully, when I see such questions or it's variations in an interview or during tasks assigned to me, I am confident enough to solve the challenge and of course, conquer it. A little birdy also told me this question has come up at an Uber interview, you never know when this might come in handy.

Searching a Rotated Sorted Array Javascript Solution.

themmyloluwaa — Mon, 15 Feb 2021 01:26:07 +0000

Entry #2

If you recall in my last post find the maximum consecutive ones, we implemented an efficient algorithm to find the longest sequence of consecutive ones in an array. The specification of the question confined us to using linear search to solve this challenge. But as efficient engineers, we found a way to improve the running time of this algorithm by some fraction. Please read the blog post.

Today we'd be attempting to solve another search related algorithm challenge. What's unique about this question is that we are not confined to using any particular search algorithm and so we have the autonomy of choosing any algorithm we feel may solve this challenge efficiently.

Domain problem

Given a rotated sorted array and a target value, find the index of the target value in the array. Return -1 if not found. All items are unique.

example

input: ([4,5,6,7,1,2,3] 4)
output: 0

If you'd like to jump straight to the solution, please click here

Solution

If you're like me, your first approach to solving this problem might be to jump straight into it.... tsk.. CALM DOWN!!.

If there's anything I've gained over the last couple of weeks attempting algorithm questions. Always understand the problem very very well before jumping right in.

In your rush to solve this problem, you might want to use a linear search implementation to solve this. Yes, you would definitely get the answer, but imagine you had input with a capacity of over 1000000, the running time of your algorithm becomes O(n). So you might be asking how do we solve this problem and improve the running time of our algorithm? The answer is with another popular search algorithm but before we dive into the specifics, let's understand the problem.

We know for sure that the array would always be sorted.
We can also infer that for some given input, the left and right side may be less than the item found in the midpoint of the array.
-- ([10,11,12,13,2,3,4,5]): 10-12 is less than 13 and 2-5 is less than 13.

-- [9,1,2,3,4,5,6,7,8]: 9 is greater than 4 but other items are not greater than 4. 5-8 is greater than 4.

Think of this problem as though you were given two sorted arrays, and you were told to make the array with the highest values first and lowest values second. For the second example above, [1...8], [9]. Array with item 9 is greater than all values in first input so it comes first.

Moving on, because we know the array would always be sorted, we can also conclude that some part of the subarray would always be sorted we just need to find out the starting and endpoint of the subarray.

([10,11,12,13,2,3,4,5])- first subarray [10,11,12,13] second [2,3,4,5].

Tackling the beast.

Now that we understand the problem, it's time to think of an efficient way to solve the challenge. One very good search algorithm that works well when we have sorted items is the popular binary search. We can use binary search to solve this challenge which would improve our running time from O(n) to O(logn). But given that the array isn't completely sorted, our solution must take into consideration working with the sorted part of the inputs, i.e sorted subarrays. Let's get into attack formation.

SIDENOTE

Before you proceed, you may be wondering why I am not using Javascript array built-in methods like findIndex to solve this. My personal opinion is that as Javascript, we take for granted the superpowers javascript equips us with. As Engineers, we must not only know how to use these superpowers, we must also understand how they work or how the concepts that govern them work. This ensures that we can easily transfer the understanding to other Engineers or Junior Engineers and also efficiently solve problems with these concepts in other languages that don't equip us with Tony Stark Iron man suit. Lastly, the interviewer isn't only assessing your understanding of the language, but also your approach to solving problems. Going all out and solving this without the javascript superpowers gives you an opportunity to show the interviewer your approach to solving problems. You could now take it up a notch buy also stating that the problem could also be solved using an array built-in method like findIndex. So onward we proceed.

Steps

define two variables e.g (left and right), left initialized to 0 and right initialized to index of the last item in the array (array length - 1).
find the midpoint of the array by adding left and right and dividing it by 2. Round it down to a whole number.
If the item at the midpoint is equal to the target value, return midpoint value.
Else if the item at the midpoint is greater than the first item in the array, it means the first sorted subarray is between left and midpoint.

4.1. Then if the target value is greater than equal to the left item and less than equal to the midpoint, it means our target value is between left and midpoint, set right to midpoint - 1. Else if it isn't, set left to midpoint + 1.

Else the item at the midpoint is less than the first item in the array, meaning the second subarray holds the midpoint of the input.

5.1. If the target is greater than equal to the midpoint item but less than equal to the right item, it means the target value is between the midpoint and right so set left to midpoint + 1; Else if it isn't, set right to midpoint - 1;

Repeat starting from step 2 until left is greater than right.

7 . Return -1

const rotatedSortedArraySearch = (nums, target) => {
  let left = 0;
  let right = nums.length - 1;

  while (left <= right) {
    let mid = Math.floor((right + left) / 2);

    if (nums[mid] === target) {
      console.log(mid);
      return mid;
    } else if (nums[mid] >= nums[left]) {
      if (target >= nums[left] && target <= nums[mid]) {
        right = mid - 1;
      } else {
        left = mid + 1;
      }
    } else {
      if (target >= nums[mid] && target <= nums[right]) {
        left = mid + 1;
      } else {
        right = mid - 1;
      }
    }
  }
  console.log(-1);
  return -1;
};

//test cases
rotatedSortedArraySearch([9, 1, 2, 3, 4, 5, 6, 7, 8], 12);
rotatedSortedArraySearch([9, 1, 2, 3, 4, 5, 6, 7, 8], 9);
rotatedSortedArraySearch([], 1);

Conclusion

This was a very tricky problem for me. How would you have solved this problem? Could I do it better? I'd like to hear from you.

Algorithm to find the maximum consecutive ones (Java and Javascript )

themmyloluwaa — Mon, 08 Feb 2021 09:25:50 +0000

In my effort to develop into an Engineer companies want on their engineering team, one of the areas I am devoting time and effort to is improving my problem-solving skills (algorithms). Contrary to the popular belief, algorithms are still very much relevant in the world today and while I am a proponent of it not being a true interview measure of a successful hire or candidate, I believe having good knowledge of solving problems efficiently is an investment an engineer/developer should make.

So here's my first entry of the year.

Domain problem: find the maximum consecutive ones in an array.

If you'd like to jump straight to the solution, please click here

Before I dive into the implementation, let's get a good scenario where you might need to solve such a problem at work.

Say you're working in an ed-tech company and you're working on a feature to display the total amount of fees paid per monthly payment mode sorted based on a student's 4 years study; i.e, your return value is the total amount of the year with the highest monthly payment mode. For example, say a student's payment history is stored in the database like this

[{
id:1,
payment_type:'monthly',
success:true,
amount: 1234567.89
//...et.c
{
id:2,
payment_type:'weekly',
success:true,
amount: 24681012.89
//...et.c
}
}]

Now imagine a student in their final year who has used monthly payment mode 80% of the time (say 100,000 db records). You also can't expect that the data being returned is going to be sorted based on the year the payment was made. How could you write an algorithm that does the job efficiently? That's what we'd be solving.

I challenge you to try this out after completely reading and understanding my solution to the domain problem.

solution

Define a variable to store the count of 1s found
Define another variable to hold the max of 1s found (this is needed as encountering a value apart from 1 would need count to be reinitialized. If we don't have a variable to hold the maximum value of the previous 1, our algorithm would be reporting false positives).
Loop through the records, if the current value is 1, increment count by 1.
If the current value is not 1, store the maximum value between count and max in max; initialize count back to 0;

Bonus (performance improvement)

if the current value of max is greater than or equal to the length of our input data divided by 2. Return max as no further step is needed because the total length of items left is lesser than or equal to max.

CODE

Javascript

const maxNoOfConsecutiveOnes = (arr) => {
  let count = 0;
  let max = 0;
  const halfLength = arr.length  / 2;

  for (let value of arr) {
    if (value === 1) {
      count++;
    } else {
      max = Math.max(count, max);
      if (max >= halfLength) {
        return max;
      }
      count = 0;
    }
  }

  return Math.max(count, max);
};

JAVA

class Solution {
    public int findMaxConsecutiveOnes(int[] nums) {
        int count = 0;
        int max = 0;
        int halfLength = nums.length / 2;

        for(int i: nums) {
            if(i == 1){
                count++;
            }else {
               max = Math.max(count,max);
                if(max >= halfLength ){
                    return max;
                }
                count = 0;
            }
        }

        return Math.max(count,max);
    }
}

Conclusion

We've seen how to implement an algorithm to return the maximum consecutive ones found in a given array of input. The time taken for this algorithm to run is given by O(n). This is more efficient than nesting loops.

Over to you young padawan, can you write an algorithm to solve the case scenario I describe? It's quite trickier than this solution but it follows the same concepts. I'd be in the comment section reading. Did you notice a mistake? Is there something I could improve on? Please do not hesitate to let me know in the comments too.

Cheers to learning and growing into world-class engineers.

Find The Length of the Longest Substring Without Repeating Characters - Javascript Solution

themmyloluwaa — Wed, 08 Apr 2020 23:50:36 +0000

A common interview question and although I haven't come across it in any of the interviews I have done, I have met developers who have. This is my attempt to explain the solution and how it could be solved using Javascript.

To solve the problem, we must first understand it. The question says to find the length of the longest substring without repeating characters.
So if we have "abcabcabcc", the substring that isn't repeated is "abc" because the moment we move to the next character after "c", we hit another "a" and remember, we already have hit a previous a.
So, okay, we understand now, right? Once we hit a repeated character, we should return the length of the characters before we hit the repeated one. I'm sorry to disappoint you, that's not the question. If the question asked to return the length of the first substring without repeating characters, voila, our solution above can work, but let's look at another example.
Say we have "abcabcdefghi". Now we can see that we have a different set of substrings that are not repeating. "cdefghi" are not repeating, so our answer is 7.

One way we could solve it is to have a double loop that compares the values in the substring against each other, but in almost all cases, having a loop inside a loop means bad algorithm and has a O(n^2). So how can we solve this without using a double loop?

Solution.

What are our assumptions?

We can have an empty string as input
Our input's length can be 1
How do we go from O(n^2) to O(n)?

Pseudocode

Check the length of our input, if it's empty or not a string return 0, If it's length is 1, return 1;
Have a variable that tracks the start index of the current character in our input
Have a variable that holds our length.
Create a hashTable or map that holds the current character, and it's index in the input
Loop through the input, if the current index is in the hashTable and its index is greater than or equal to the variable holding the start index, change the start index to the index after the current iteration. this will be made clear in our logic
Add the current character to the hashtable
Update the length
End the loop and return the length.

var lengthOfLongestSubstring = function(s) {

    if(!!!s.length || typeof s !== 'string' ) return 0; //if our string is empty or it's not a 
                                string, return 0
    if(s.length  == 1) return 1;//if the length is 1, return 1;

  let hashTable = {}; //our hashTable to hold our characters and index;
 let longestSubstringLength = 0; //length of longest substring
 let start = 0; //start index
 let length = s.length; //length of the array.

//convert our strings to an array;
  const strings = s.split('');


//iterate over the array
  for(let i = 0; i < length; i++) {
//if the character exist and the value of the character is greater or equal to our start index
      if(hashTable[strings[i]] !==undefined && hashTable[strings[i]] >= start) {
//change the value of start to one higher than the value of our current character 
          start = hashTable[strings[i]] + 1
      }
//add the current index and it's value to the hashTable
      hashTable[strings[i]] = i;
//find the length of the longest substring by comparing the value with the value of the current index minus the start value plus 1
      longestSubstringLength = Math.max(longestSubstringLength, (i-start + 1))
  }

/return the longestSubstringLength as our final answer
return longestSubstringLength;
}

Conclusion

With our solution above, we are ensuring we only loop once, we are also ensuring we don't have to loop if our input is not a string or if it's length is one. Is this the best solution? Certainly not, there are other ways to solve this problem. Do you have a better solution? Is there something I could improve in my logic, do you have any advice for me? Please feel free to leave a comment, I look forward to your feedback.

React-Native Custom Tab Component | ReactNative-Navigation.

themmyloluwaa — Fri, 06 Mar 2020 10:00:36 +0000

Update I wrote about working with React Navigation 5 and covered all available navigations. Check it out here

About a month 🎵🎵🎵🎵 ago, I started to learn react native and wanted to build a small project that taught me the basics of react native and some key app features like navigation, styling, and every sweet feature react-native had to offer.

So here I was, a curious, passionate learner that I am, having come from a react background, I felt confident that react native should be an easy peasy kind of technology to learn. Little did I know that I was setting up myself for planetary devastation 💥💥💥💥💥💥💥.

I had built all my components, views, texts, styles, and everything nice. It was time to tie everything together by integrating navigation into my superpower puffed app.

While they are many packages out there that enable you to add navigation to your react native app, I decided to opt-in for the most popular package out there, which is react-navigation. React navigation comes with a built-in tab navigation feature, stack navigation, switch navigation, and also drawer navigation. These types of navigations enable you to build and add dynamic navigation features to your project.

I was ecstatic to find this fantastic package by the expo team and the react-native community. Still, sooner than later, my excitement turned into days of frustration as I tried to figure out how to implement navigation that's similar to twitter's profile page navigation.

The Solution

React navigation also has built-in support for you to create your custom navigation, and this was my approach to building the navigation I needed to finish up my super excellent mobile application.

While there's a dedicated documentation page and some articles on the web about building your custom navigation, I couldn't find the solution to my use case and so here's me writing this out there to the world for someone who needs to create their custom navigation for their superpower puff girls app 😎😎😎😎😎.

What do we need

Expo CLI version 36.0 latest
Visual studio but you could use any text editor of your choice
react navigation
And durrhh your apron cause we about to cook some magical apps.

Getting started

This project already assumes you are familiar with starting a project in expo. Please refer to the documentation to learn how to initialize a react-native app in expo.

Once you have initialized it, install the react native navigation packages, react-navigation-tabs, react-native-gesture-handler, react-native-reanimated, react-native-screens, react-native-safe-area-context, @react-native-community/masked-view.
For this article, we would be building only the navigation header of this image.

It is also important to note that this tutorial does not take into account the animation gestures or features that react-native has, please dive into the react native animation section in the docs

Navigate to your Custom Header folder, in there, create three folders, components to hold our components, screen to hold our screens and navigation to hold our navigations.

In your components folder, create a new file called Header.js. This is where we'd be creating our custom react native navigation header.

Navigate to your header.js file and add the following lines of code.

import React from "react";

import { View, Text, StyleSheet } from "react-native";

const Header = props => {
  return (
    <View style={styles.containerHeader}>
      <View style={styles.textContainer}>
        <Text style={styles.textWhite}>Holi</Text>
        <Text style={styles.textWhite}>1,004 tweets</Text>
      </View>
      <View style={styles.tabContainer}>
        <View>
          <Text>Tweets</Text>
        </View>
        <View>
          <Text>Tweets & Replies</Text>
        </View>
        <View>
          <Text>Media</Text>
        </View>
        <View>
          <Text>Likes</Text>
        </View>
      </View>
    </View>
  );
};

Add the following styles to it. For this tutorial, we would be making use of a background color for our background for the header component we just created. I use black, but feel free to chose anyone you want, and don't forget to export the function.

const styles = StyleSheet.create({
  containerHeader: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center"
  },
  textContainer: {
    marginTop: 70
  },
  textWhite: {
    color: "black",
    marginVertical: 10
  },
  tabContainer: {
    backgroundColor: "white",
    width: "100%",
    flexDirection: "row",
    justifyContent: "space-between",
    paddingHorizontal: 10,
    height: "20%",
    alignItems: "center",
    marginTop: 10,
    height: 40
  }
});
export default Header;

Import your header.js file in the entry of your app, the App.js file, and include the following styles. For styling purposes, our app container has a background color of #eef;

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import Header from "./components/Header";

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Header />
      </View>
      <View style={styles.childContainer}>
        <Text style={{ fontSize: 30 }}>I am badass 🐐🐐🐐</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#eef",
    flexDirection: "column"
  },
  childContainer: {
    justifyContent: "center",
    alignItems: "center",
    marginVertical: 100
  },
  header: {
    backgroundColor: "cyan",
    width: "100%",
    height: "15%"
  }
});

Here's how our app looks so far.

From here, we can proceed to implement our navigation feature into our super excellent cool application.

Navigate to your screen folder and create the tweet screen, tweets & replies screen, media screen, and likes screen. For this tutorial, we have a basic view with one text component. Copy and paste this code into each file.

import React from "react";
import { View, Text } from "react-native";

Class Tweets extends React.Component {
  render() {
    return (
       <View
        style={{ justifyContent: "center", alignItems: "center", height: 400 }}
      >
        <Text>I am the Tweets screen 🐐🐐🐐🐐🐐🐐</Text>
      </View>
    );
  }
}

export default Tweets;

Do this for all files created in the screen folder and rename them to the screen they are to represent.

Navigate to your navigation folder and create an index.js file. Import your required packages and each screen you already created in the screen folder.

import { createAppContainer } from "react-navigation";
import { createMaterialTopTabNavigator } from "react-navigation-tabs";
import Tweets from "../screens/Tweets";
import TweetNReplies from "../screens/TweetNReplies";
import Media from "../screens/Media";
import Likes from "../screens/Likes";
import Header from "../components/Header";

const TabNavigator = createMaterialTopTabNavigator(
  {
    Tweets: {
      screen: Tweets
    },
    TweetsNReplies: {
      screen: TweetNReplies
    },
    Media: {
      screen: Media
    },
    Likes: {
      screen: Likes
    }
  },
  {
    tabBarComponent: Header,
    tabBarOptions: {
      activeTintColor: "#1BA1F3",
      inactiveTintColor: "#000"
    },
    initialRouteName: "Tweets"
  }
);

const Navigation = createAppContainer(TabNavigator);

export default Navigation;

From the react-navigation documentation, Containers are responsible for managing your app state and linking your top-level navigator to the app environment..

We import both createAppContainer and also createMaterialTopTabNavigator. createMaterialTopTabNavigator is what is responsible for helping us create our header navigations for our app. The createMaterialTopTabNavigator takes in different navigation options. Please check the documentation for a full list of all the options.
For the purpose of this tutorial, we're making use of three major options. We override the default navigation with our custom navigation header by using the tabBarComponent option. We set our default actual tint color and inactive tint color using the tabBarOptions and our initial route name to be the Tweets screen that we previously defined.

We then proceed to wrap our created tabNavigator with the createAppContainer and assign it to a variable called Navigation. Export the Navigation constant and import it in the root directory of your application. Our App.js file.

Replace the code inside your app.js file and header.js file, respectively, with the following code. This will also affect the styling of our app.

import React from "react";
import { StyleSheet, View } from "react-native";
import Navigation from "./navigation/index";
export default function App() {
  return (
    <View style={styles.container}>
      <Navigation />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#eef",
    flexDirection: "column"
  },
  childContainer: {
    justifyContent: "center",
    alignItems: "center"
  },
  header: {
    backgroundColor: "cyan",
    width: "100%"
  }
});

header.js

import React from "react";

import { View, Text, StyleSheet } from "react-native";

const Header = props => {
  return (
    <View style={styles.containerHeader}>
      <View style={styles.textContainer}>
        <Text style={styles.textWhite}>Holi</Text>
        <Text style={styles.textWhite}>1,004 tweets</Text>
      </View>
      <View style={styles.tabContainer}>
        <View>
          <Text>Tweets</Text>
        </View>
        <View>
          <Text>Tweets & Replies</Text>
        </View>
        <View>
          <Text>Media</Text>
        </View>
        <View>
          <Text>Likes</Text>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  containerHeader: {
    flexDirection: "column",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: "cyan",
    height: 150
  },
  textContainer: {
    marginVertical: 30,
    paddingTop: 30
  },
  textWhite: {
    color: "black"
  },
  tabContainer: {
    backgroundColor: "white",
    width: "100%",
    flexDirection: "row",
    justifyContent: "space-between",
    paddingHorizontal: 10,
    alignItems: "center",
    height: 40
  }
});
export default Header;

Our super excellent duper app has this look.

The next step is to convert our header component to a functioning react-native tab bar component. Through the createAppContainer, we have access to the props and options that come with the react-navigation-tabs package.
Console logging props in our header.js file would reveal all the props available to the component.

To transform our component to a functioning tab bar, we need the following props;

navigationState: holds the state of the navigations. It also contains our route details.

navigation: an object that contains different methods like navigate, goBack, et.c.

activeTintColor: the colour of our screen navigator when active.

inactiveTintColor: the colour of our screen navigators when inactive.

Replace the code in your header.js file. We'd work through everything we did shortly.

import React from "react";

import { View, Text, StyleSheet, TouchableWithoutFeedback } from "react-native";

const Header = props => {
  const {
    navigationState,
    navigation,
    activeTintColor,
    inactiveTintColor
  } = props;
  const activeTabIndex = navigation.state.index;

  return (
    <View style={styles.containerHeader}>
      <View style={styles.textContainer}>
        <Text style={styles.textWhite}>Holi</Text>
        <Text style={styles.textWhite}>1,004 tweets</Text>
      </View>
      <View style={styles.tabContainer}>
        {navigationState.routes.map((route, index) => {
          const isRouteActive = index === activeTabIndex;
          const tintColor = isRouteActive ? activeTintColor : inactiveTintColor;

          return (
            <TouchableWithoutFeedback
              onPress={() => navigation.navigate(route.routeName)}
              key={route.routeName}
            >
              <View>
                <Text
                  style={{
                    fontSize: 17,
                    textTransform: "uppercase",
                    color: `${tintColor}`,
                    fontWeight: `${isRouteActive ? "bold" : "normal"}`
                  }}
                >
                  {route.routeName}
                </Text>
              </View>
            </TouchableWithoutFeedback>
          );
        })}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  containerHeader: {
    flexDirection: "column",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: "cyan",
    height: 150
  },
  textContainer: {
    marginVertical: 30,
    paddingTop: 30
  },
  textWhite: {
    color: "black"
  },
  tabContainer: {
    backgroundColor: "white",
    width: "100%",
    flexDirection: "row",
    justifyContent: "space-between",
    paddingHorizontal: 10,
    alignItems: "center",
    height: 40
  }
});
export default Header;

Explanation

We first extract navigationState, navigation object, activeTintColor and inactiveTintColor from the props. We then proceed to store the index of our tab that's active in a constant called activeTabIndex. To ensure that the tabs are clickable, we import the TouchableWithoutFeedback component from react-native.

On the navigationState props is an array of our routes. We map this array and first check if the index of the current item in the array is equal to the activeTabIndex constant previously defined. We store this value in a constant called isRouteActive.

We store the tintColor of our tabs depending on if they are active or not by using the isRouteActive value defined earlier.

we then return our tab wrapped around TouchableWithoutFeedback and give it an onPress event to navigate to the desired tab by using the navigate method on the navigation object and pass our routeName to it as the value.

We set our tab title style by using the tintColor variable and isRouteActive variable and then render our routeName contained in the individual mapped route as the value in between the text component.

The result of our code above with a few modifications to the style is this.

Conclusion

We are done with our beautiful app, there are a lot of modifications that could improve our app, one is replacing the N in between TweetsNReplies with &. I leave this to you great problem solver to figure out. Another improvement is to move the mapped navigation routes into its separate file. This will improve readability and make our codebase neat. There's still a lot of improvements and features that can be implemented, like adding a back icon to navigate to the previous tab and all but you get the idea.

There's also a lot of details I didn't cover, tutorials and articles are not a replacement for documentation of the package or language, please dive into the documentation for all the details and things not covered.

Thank you for sticking this long with me, and please feel free to point our any correction, improvements, suggestions, contributions, or solution to the easter egg problem I mentioned above. See ya later.

From Viruses to Bugs.. My developer Journey

themmyloluwaa — Mon, 02 Sep 2019 09:31:07 +0000

I started out as a curious mind who didn't want to waste his one year mandatory service to his country.
With nothing but a curious naive mind who wanted to build his own product or startup...(silly me), I have grown into a developer who is confident in his lack of knowledge and who has a desire to learn and keep on learning. So here's a very brief summary of how I went from zero ability to employable ability.

I studied microbiology and graduated top of my class, but in this four years, I wrote my first code in Java, the university made it compulsory to take a course in IT and as an avid gamer, i thought to myself, why not learn how to make your own games, lol.......(😭😭😭) silly me again. I might probably explore this more later in life.

After graduating university, I started to brainstorm on ideas that could solve problems, you know the way Bill, Mark and Jobs started out. The few developers i knew were either not passionate with the idea or i couldn't afford them, not even if i sold my kidney (😂😂😂)...

So i took it as a challenge, or let's call it perfect timing, the hotels.ng remote internship and andela + google scholarship program opened and I applied. I dropped out of the hotels.ng internship as i couldn't cope with the demands, it was too advanced for beginners. I went ahead to complete the andela scholarship (rushed it) just to get the certificate.

I called a meeting between me myself and I and we all agreed such learning strategy would in no way build me into an in demand world class developer.

Setbacks............

Electricity: This is a major difficulty for code newbies or developers generally in my country Nigeria. I always had to find the nearest hub that could accommodate me in order to have access to light and this was no easy distance to trek.
Data: Another difficulty faced by developers. While the web is full with unlimited learning resources, access to these resources like YouTube contents, online free courses or even taking courses on udemy and other learning platforms involved investing a considerable large amount of money into internet subscription. Apart from the cost, you had no guarantee on the speed of your internet connection, I always had to hang my phones on the window and had four different sim cards of network providers and a lot of switching between sims just to be productive.
Lack of a mentor or guide: I pretty much started learning on my own and often found myself stuck most times for days or struggled with concepts at that time. While this may be a very good thing for some devs, I find that having a mentor/guide helps make the process of learning easy. Someone you feel very much accountable and someone who helps directs you on the content to focus on and not to focus on because i made this mistake. I just accumulated tutorials and courses that to be honest, wasn't needed.
Faulty Laptop: During the early stage of learning, my laptop finally gave up the ghost, and efforts to resurrect it all proved futile. For a month all i could do was read some very few blog posts and all. I got lucky and a friend borrowed me a slow hp compaq 6910p windows 7 laptop. I used that till i left the state to go home and decided it was time to get myself a laptop worthy of development. Sadly enough I got scammed of the money (1000+ usd) by the seller and i was back to square one for four months. I didn't do much but along the line, I met a very close childhood friend/senior who i discovered had left medicine to become a developer and boy o boy, he is great at it. I got lucky again after months of depression and reaching out to people in the developer community if anyone could at least loan me money to get a laptop. While no one responded to any of my messages, another friend repaired hers and loan me to use which i am currently still making use of. After that, I focused all the energy and depression into making up for the months I couldn't learn.

Gems who have contributed to my growth

1- Segun Ola: The childhood friend who I talked about previously? yea thats him. I am really surprised he's not yet spoken at tech conferences, man is a genius at what he does. Changed my whole perspective on CSS and accessibility to be honest.

2- Prosper Otemuyiwa: Mentor from a distance, man has been instrumental in my growth without him even knowing. One of Africa's greatest developer exports. Developer influence, giveaway god and overall baby boy developer mentor. Man donated a udemy course into my life and it has really helped me become a better developer today.

3- Pascal Obbap: Pascal was my colleague at the university we worked as a graduate assistant during the one year mandatory service. Our relationship has grown from just colleagues to a guy I admire a lot. Very smart and intelligent, always ready and available to answer my annoying questions. A real community builder and developer advocate.

A lot of people have in one way or the other helped me become better and I am super grateful to have come across them.

Advice to upcoming Devs

1- Be consistent
2- Be patient with yourself, you are not dumb
3- Take your time too, they'd always be a job waiting for you
4- Reach out to people when you are stuck
5- Have an open mind that seeks to learn
6- Be very very helpful
7- Practice, practice, practice, code code code.
8- Watch tutorials but also build build build
9- Practice problem solving too, don't just know the language, know how to use it to solve problems

Today i started work as a full time front-end developer and I am grateful for everyone who has contributed towards making that happen. It is the ideal work environment i could have dreamed of, i would be working with React, React native, php and node.
While I may not be able to do so much for the developer community in my country at the moment, I feel it's important to light another person's life just the way my life got light from the gems above. I would be contributing an amount of my pay towards course giveaway, internet subscriptions, answering questions, explaining concepts or contributing to a cause just to see other people grow.

I still have a lot to learn, so so much and though it scares me, but I do look forward to the challenges that lay ahead. I am also very open to opportunities that helps me grow and help people out.

I would also be writing more, and releasing more content that is focused on explaining concepts that shouldn't honestly be complicated to help other newbie or devs understand better and become world class devs. Please do follow back and feel free to reach out anytime.

PS>>> This is my first official post as a developer, I am very certain you would see things I could improve on, please do not hesitate to point this out in the comment section or shoot me a follow and dm on twitter @themmyloluwaaa and I promise to follow back and reply as soon as I can.