Create your own “Startup Name Generator” app using React Native

Coding your own simple side projects makes you learn tech faster!

Madhav Bahl
Nov 10, 2019 · 13 min read

According to me, the best way of learning new frameworks or technologies is to get a hands on experience simultaneously. People generally ask me how do I start learning new technologies, the answer is — I read the official docs, see several examples on GitHub, if I still don’t undersand, then maybe a couple of YouTube videos, and then I start making a side project on my own, and then explore the tech simultaneously.
Lately, I was exploring React Native, and inspired by this pen, I thought of making a startup name generator app.

So as you have guessed through the topic, in this blog, we will be making our own simple “Startup Name Generator” app using React Native.

The GitHub Repository

In case you wish to see the code directly instead of reading the blog, you can go to this GitHub repo (Do give it a star ⭐)

App Preview

Before starting off, I’ll brief you with what will we be building today. So as the title says, we will be building a “Startup Name Generator”, I got inspired to make it after coming across this codepen.

The basic idea is, the user will enter keywords and we will suggest some startup names to the user. The UI will look something like this —

So let’s get started :D

Getting Started

To get started, we have 2 options
1. Expo-cli: Provides a ton of default configurations which makes it super easy to get started and focus on the main app logic
2. React-native-cli: It’s the default CLI to generate a react native project but requires a little extra work to add in some common features to get started.

Hence, we will be making use of expo-cli to get started. Use the following command to create a project template

npx expo-cli init <app name>

In our case,

npx expo-cli init startup_name

After this, you will be asked the type of template you wish to select, just choose the blank template (since we will be removing all the App.js code)

Then you will be asked to name your app, I’ll name it StartupName you are free to choose the name according to your own free will.

Then it will install the dependencies, which might take some 5–10 minutes, so you can go for coffee in the meantime :)

Installing the Dependencies

This is a simple project and does not involve many dependencies. I will install react-navigation and react-navigation-stack to implement the Stack Navigation (which is used for navigating between screens).

But why? There’s just one screen, isn’t it?

Answer — Yes, as of now there’s just one screen, but in future, I plan to add some more screens (like clicking on a proposed startup name takes the user to another screen where he can see the list of available domains.

We will install these dependencies after running the app template provided by expo-cli.

Coming back, once the expo-cli init is done, you must be seeing something like this —

Now, the things are set up for us, we can proceed with the app. Go to the project root directory by typing this command,

cd startup_name

Now just to test everything went fine, we will run the app once by typing yarn start or npm start

Doing this should open up expo dev tools o your browser, which would look something like this.

Some more installations, please bear with me :(

Once you see this page on your web browser, it means you are good to go, now you need to install the expo app from the play store.

You can find it easily, just search “expo” on the play store, and install it. After you are done installing the app, connect your mobile to your PC, and scan the QR code through the expo app and voila, you will be able to run the app.

Once you scan the QR Code, you will probably see this screen (might change in future) —

If you are wondering, what is this screen, this is basically the App.js file rendered on the screen. In your App.js file, you must see the code similar to this —

If you have some experience with react, you can easily understand this, basically, here, “App” is the main component which returns a <Text> component wrapped in <View> Component.

And using the react-native StyleSheet, we create the style sheet where we put in our styles of the <View> container.

Don’t worry, we will remove all this code and start from scratch!

The installations aren’t over yet :3

Don’t worry, just two more things, as I told you above, react-navigation and react-navigation-stack will be needed (not now, but in the future when we add multiple screens, so it’s a good thing to set things up from now itself!)

Run this command to install these two dependencies —

npm install --save react-navigation react-navigation-stack

Wait for some time and you are done.

Side Note* Installing these two dependencies messes things up sometimes, I don’t know why, if you start getting some weird error after installing these two, just run npm install once again and it should work fine.

No, we still aren’t done yet. The Stack Navigator somehow does not work without react-native-gesture-handler and react-native-reanimated, so yeah, we got two more things to install :(

npx expo-cli install react-native-gesture-handler react-native-reanimated

The installation might take a couple of minutes, and then finally you will be good to go!

Finally We Code!

So now we are done with the installation of our dependencies, let’s run our app once just to be sure everything went well, and then we will move on to the code. To run the app, run this command —

npm start
#or
yarn start

So you’ll see this screen once again -

Scan the QR-Code and you should be able to run the app properly and see the same screen we saw earlier.

Now, let’s code the app —

1. Coding the entry point of our app — App.js

Since we are using the Stack Navigator, we will create a stack navigator object which will define what will be our home screen and various other configuration, which we will pass on to the createAppContainer

Here’s the code for our App.js, yeah, remove all that code inside App.js which came within the templpate that expo-cli provied us with.

Understanding the code step by step…

  1. Importing the createStackNavigator and createAppContainer
import  { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack'

2. Importing various screens which we need to display. Since there is only one screen to display (HomeScreen), we will just import that. Note that we haven’t made that file yet, we will make it in the next section.

import HomeScreen from './src/screens/HomeScreen';

3. using the createStackNavigator

createStackNavigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.

For more information, refer to the official documentation.

const navigator = createStackNavigator ({
Home: HomeScreen
}, {
initialRouteName: 'Home',
defaultNavigationOptions: {
title: 'Startup Name Generator',
headerStyle: {
backgroundColor: '#4990e2',
},
headerTintColor: '#fff',
}
});

Here, the first argument is the object in which we mention various screens we wish to display, and the next argument is the object where we provide various configurations like which will be the initial screen (in this case, ‘Home’)

4. Export:

export default createAppContainer(navigator);

2. Making the HomeScreen

Before starting the code, let’s understand the project's directory structure. It’s not a rule to follow it, and different people follow different structures, I follow this one.

Create an src folder, and inside it, place all the screens inside screens directory, components inside components directory, libraries inside lib, and util functions inside utils and so on…

Now, since we have to make the Home Screen, make the file HomeScreen.js inside ./src/screens/HomeScreen.js. It should look something like this —

Now that we have the HomeScreen.js file, we are good to go.

The App Logic

Before we proceed any further, we have to figure out one major thing, how are we going to generate the startup names from the given keywords?

Either we can go for writing code for generating the names, and all that tough stuff, or we can use this amazing library by Rico Sta. Cruz to generate startup names,

So all you need to do is, install the library using

npm install --save-exact @rstacruz/startup-name-generator

Aaaand, it’s done :)

Thanks to this guy, it’s pretty simple to use, here’s an example —

const name = require('@rstacruz/startup-name-generator')

name('cloud')
//=> ['Cloudary', 'Purecloud', 'Cloudlayer', 'Echocloud',
// 'Cloudloop', 'Activecloud', 'Cloudspark', 'Cloudable', ...]

So the app logic is pretty much done :D

Please note that in my GitHub repository which I have mentioned at the top, instead of installing it using npm install, I have manually downloaded the file and placed it inside ./src/lib/startup_name_generator.js, which is pretty much the same thing.

The basic structure for any screen/component —

Any React Native screen or component from a high-level view would look something like this —

1. IMPORT STATEMENTS2. MAIN COMPONENT3. STYLESHEET4. EXPORT STATEMENT

So let’s get started!

Here’s the code for HomeScreen.js file:

Okay, I know it’s very big, but it’s super easy, so calm down :)

As we discussed above, every screen or component can be divided into 4 parts, so to understand this code for HomeScreen.js, we will divide it into 4 parts.

Dividing the HomeScreen into 4 parts

1. The Import Statements

This one’s easy to understand, basically we import React and the useState hook from the react library and various components (View, Text, TextInput, StyleSheet etc.) from react-native library

Please note that I am not going deep into what exactly is a Component or what is a hook, so if you are a complete beginner, you might want to check out the official documentation to check out what exactly are these things.

So here’s what I have imported into the HomeScreen component —

import React, { useState } from 'react';
import { View, Text, StyleSheet, TextInput, FlatList } from 'react-native';
import SearchBar from './../components/SearchBar';
import SearchResult from './../components/SearchResult';

So the first two lines include the import statements in which we include some pre-defined things which react and react native provides us, and in the next two lines we include 2 custom components (Which we will make in the next sections)

The two custom components which we are going to make —
1. SearchBar — which will appear at the top in which a user can enter his keywords for the startup name
2. SearchResult — This will show one result of the proposed startup name. As you might have guessed, this component is one element of the list of names we are going to show, and we will use to render ’n’ SearchResult components using the FlatList component provided by react native.

One more import…

Don’t forget to import the main app logic haha.

const name = require ('./lib/startup-name-generator');

2. The HomeScreen component

Here’s the code for the HomeScreen, which is basically a functional component —

Let’s try to understand the code. You might have guessed that I am using two pieces of states here,
1. keywordsString: to store the keystrokes of the user inside the search bar
2. results: to store the results (the proposed startup names — Array)

Now, there’s a function to generate startup names, and it’s simple to understand —

generateStartupNames = () => {
let startupNames = name(keywordsString);
setResults(startupNames);
}

We basically use the name() provided by the startup_name_generator library to generate the array of names.

Now comes our main component which we return, this includes two <Text> components which display the headlines, followed by the <SearchBar /> Component, which we will make in the next section, then comes the <FlatList/> Component which takes in the array of proposed startup names as the data and for each name, renders a <SearchResult /> Component, which we will make in the upcoming section.

Please also note that inside the <SearchBar /> component, we pass onTermChange and onTermSubmit functions as props,
1. onTermChange — To get the text and update the keywordsString at each keystroke,
2. onTermSubmit — To get the final keywords, and call the generateStartupNames() function.

3. The StyleSheet

This part is pretty much self-explanatory since I have used very basic styling for this app —

const styles = StyleSheet.create({
containerStyle: {
marginHorizontal: 15,
flex: 1
}, heading: {
fontSize: 20,
fontWeight: 'bold',
marginTop: 10,
}
});

I don’t think I need to explain this part explicitly, and the only thing that remains in our HomeScreen component is the —

4. The Export Statement

Yeah, finally, the huge HomeScreen component is done!

export default HomeScreen;

Okay, I know this section became veryyy long, I promise that next sections won’t be this long, we are almost done with our app :)

3. Making the SearchBar Component

So in the previous section, the HomeScreen, we have added a SearchBar component, which we will make in this section.

First of all, as you might have guessed, we need to create a SearchBar.js file inside our src/components/ directory.

Here’s the code for the SearchBar component —

Alright, this one is pretyyyy simple, read the code and try to divide it into the 4 parts I talked about in the above section.

I hope you were able to do it, if not, don’t worry, I’ll tell you.

1. The import statements

This is a simple stateless functional component, so we just import some basic things —

import React from 'react';
import { View, TextInput, StyleSheet } from 'react-native'

<TextInput />, as the name suggests, is used to input the text.

2. The main component

The code is pretty readable and easy to understand, let’s have a look —

const SearchBar = ({ term, onTermChange, onTermSubmit }) => {
return (
<View style={styles.backgroundStyle}>
<TextInput
autoCapitalize="none"
autoCorrect={false}
placeholder="Search"
style={styles.inputStyle}
value={term}
onChangeText={newTerm => onTermChange(newTerm)}
onEndEditing={() => onTermSubmit()}
/>
</View>
);
};

So as you might have noticed, it’s a simple text input, where we have set auto-capitalize and auto-correct as false, placeholder as “Search”, we use onChangeText to update the state variable keywordsString by passing on the new text to the onTermChange function which we get as a part of props, we do a similar thing to call onTermSubmit once the user ends typing, using onEndEditing.

3. The StyleSheet

Again, I think there is no need to discuss about the style, read it and you will understand, and still, if you have any doubts, just mail me, I’ll be glad to help :)

const styles = StyleSheet.create({
backgroundStyle: {
marginTop: 10,
backgroundColor: '#f0eeee',
height: 50,
borderRadius: 5,
flexDirection: 'row',
marginBottom: 10
}, inputStyle: {
fontSize: 18,
flex: 1,
padding: 10
}
});

4. The export statement

Let’s not forget to export our SearchBar component.

export default SearchBar;

Alright, it’s the time to move to our final component for today, the SearchResult component

3. Making the SearchResult Component

This is our final component for this side project, and probably the easiest one. Just a reminder that this component displays a single startup name, and we use this component inside the renderItem method of the FlatList component.

Again, we save this component in the src/components/ directory. Here’s the code for this component —

This is the simplest component where we are just displaying the name of the startup, with some basic styling, so I’am leaving this as a homework for you to understand this code.

Don’t forget to have a look at the style, that’s the main component here —

const styles = StyleSheet.create({ 
nameContainer: {
flex: 1,
margin: 5,
backgroundColor: '#ddd',
height: 64,
alignItems: 'center',
justifyContent: 'center'
}, startupName: {
fontSize: 16,
fontWeight: 'bold'
}
});

And that’s it, let’s run our app.

5. Let’s run the app :D

To run the app, again the command remains the same, npm start or yarn start. Again, the expo dev tools wiill open and you will have to scan the QR-Code.

Now you should be able to run the app and see somthing like this —

That was our simple application, hope you had fun building it :)


Hope you found the article helpful 😁

Feel free to reach out to me anytime if you want to discuss something :D

I would be more than happy if you send your feedbacks, suggestions or ask queries. Moreover, I love to make new friends and we can be friends, just drop me a mail.

Thanks a lot for reading till end. You can contact me in case if you need any assistance:
Email: theleanprogrammer@gmail.com
Web:
http://madhavbahl.tech/
Github:
https://github.com/MadhavBahlMD
LinkedIn:
https://www.linkedin.com/in/madhavbahl/

The Startup

Medium's largest active publication, followed by +588K people. Follow to join our community.

Madhav Bahl

Written by

The Lean Programmer | Tech Blogger | Aiming to make youth well versed with tech | Self-help and Productivity Blogger | On a journey to find the meaning of life

The Startup

Medium's largest active publication, followed by +588K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade