React Native Starter – Flatlogic Blog https://flatlogic.com/blog Explore and learn everything about React, Angular, Vue, Bootstrap and React Native application templates Fri, 22 Mar 2024 10:53:18 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.1 Updated Version of React Native Starter https://flatlogic.com/blog/updated-version-of-react-native-starter/ Thu, 15 Jun 2023 10:44:56 +0000 https://flatlogic.com/blog/?p=14153 We're excited to announce that we just released an updated version 4.2 of React Native Starter from Flatlogic!

The post Updated Version of React Native Starter appeared first on Flatlogic Blog.

]]>
We’re excited to announce that we just released an updated version 4.2 of React Native Starter from Flatlogic!

What has changed?

✅ React Native updated to 0.71.10

✅ Core React Native libraries have been updated:

  •     “@react-native-async-storage/async-storage”: “^1.18.2”,
  •     “@react-native-community/cli”: “^11.3.1”,
  •     “@react-native-masked-view/masked-view”: “^0.2.9”,
  •     “@react-navigation/bottom-tabs”: “^6.5.7”,
  •     “@react-navigation/drawer”: “^6.6.2”,
  •     “@react-navigation/native”: “^6.1.6”,
  •     “@react-navigation/stack”: “^6.3.16”,
  •     “react-native-calendars”: “^1.1298.0”,
  •     “react-native-gesture-handler”: “^2.10.2”,
  •     “react-native-gifted-chat”: “^2.3.0”,
  •     “react-native-maps”: “^1.7.1”,
  •     “react-native-modal”: “^13.0.1”,
  •     “react-native-paper”: “^5.8.0”,
  •     “react-native-progress”: “^5.0.0”,
  •     “react-native-safe-area-context”: “^4.5.3”,
  •     “react-native-screens”: “^3.20.0”,
  •     “react-native-vector-icons”: “^9.2.0”,
  •     “react-native-walkthrough-tooltip”: “^1.5.0”,
  •     “redux-persist”: “^6.0.0”,
  •     “victory-native”: “^36.6.10”

✅ Update Dependencies

Summing Up

Experience improved performance, enhanced features, and smoother development with our updated React Native Starter. Get started today and build amazing cross-platform mobile apps effortlessly! If you face any difficulties setting up this or that template or admin dashboard, please feel free to leave us a message on our forumTwitter or Facebook. We will respond to your inquiry as quickly as possible!

The post Updated Version of React Native Starter appeared first on Flatlogic Blog.

]]>
React Native Starter is Updated (v3.3.0) https://flatlogic.com/blog/react-native-starter-is-updated-v3-3-0/ Mon, 20 Jul 2020 11:54:45 +0000 https://flatlogic.com/blog/?p=3235 Since React Native was updated to v0.63.0 by Facebook, we decided to release v3.3.0 of React Native Starter. MORE INFOGITHUB Podfile for IOS was updated @react-native-community/cli was added React Native...

The post React Native Starter is Updated (v3.3.0) appeared first on Flatlogic Blog.

]]>
Since React Native was updated to v0.63.0 by Facebook, we decided to release v3.3.0 of React Native Starter.

MORE INFO
GITHUB

  • Podfile for IOS was updated
  • @react-native-community/cli was added

How many types of mobile applications do exist? What is the difference between them? What is a template for mobile applications? Let’s figure it out right now.

Basically, there are three main types of mobile applications (apps): web apps, native apps, hybrid apps. 

2024 Research

Web apps are designed adaptive to mobile devices. It’s easy to manage such apps, nevertheless, it’s not convenient to launch them – you need to run a browser and type the URL into the address bar. You will not find any adaptive application in the app stores, because web apps can’t be submitted there.

Native apps are built using native programming languages. They are faster, and more intuitive than web apps. Furthermore, native apps can interact with the device utilities, such as geolocation, a camera roll, Bluetooth. At the same time, all these features of native apps tell us that native apps are more expensive than web apps.

Hybrid apps are defined as a combination of web and native apps, so hybrid apps incorporate the features of the first two mobile application types. Hybrid apps, like web apps, are cheaper, but slower and less interactive than native apps. It’s easy enough to build a hybrid app by means of HTML, CSS, JavaScript. Similar to native apps, hybrid apps have almost full access to devices utilities, they constitute themselves as a single app for all platforms, and they can be published in app stores.

Have you heard about app templates? These are multifunctional templates, which are already equipped with UI components. Due to such templates, you don’t have to build a mobile app from scratch spending a large amount of money on development. A more profitable way is to purchase a template and adapt it to your business needs.

React Native Starter is an example of a powerful mobile app template with a bunch of outstanding features, such as tons of ready-to-use-components, various UI elements and color schemes, modular architecture, simple customization. By the way, recently we have made a major update of React Native Starter. If you haven’t checked out our template yet, be sure to do so, because you will definitely love it.

You might also like these articles:

The post React Native Starter is Updated (v3.3.0) appeared first on Flatlogic Blog.

]]>
Why I Don’t Want to Use React Native With Expo https://flatlogic.com/blog/why-i-don-t-want-to-use-react-native-with-expo/ Mon, 16 Mar 2020 09:47:12 +0000 https://flatlogic.com/blog/?p=2125 We continue our set of articles about eliminating extra dependencies in the code.

The post Why I Don’t Want to Use React Native With Expo appeared first on Flatlogic Blog.

]]>
We continue our set of articles about eliminating extra dependencies in the code. You may find out more about our first article about removing jQuery here

The main character of our article is Expo today. This is a set of tools every React developer knows. It’s an instrument that makes your developers’ life much easier when you develop apps for iOS and Android. Expo is about Over The Air updates without deployment on Google Play and Apple Store and sharing the app with the others without .apk or .ipa files. Expo is a toolchain that helps and guides you almost in every possible problem while developing. And finally, Expo is an extra-dependency we have got rid of in our product. You can read about it here.  

A Fast Review of Expo

You can build applications with Expo in two ways: managed and bare workflow. Managed workflow is an Expo itself with all its advantages: Over The Air updates, build service, no need to use Xcode or Android Studio, Expo push notification service, etc. The bare workflow is when you use Expo SDK like a set of libraries (ExpoKit) that gives you access to the underlying native APIs.

You can start using this approach by ejecting Expo from your app with the “expo eject” command (if you have already used Expo in development) or by running the “expo init” command to get started with Expo. In bare workflow, you get access to every APIs that Expo SDK contains, but you still have to work with Xcode and/or Android studio. If you don’t use Expo in development either with managed workflow, or the bare workflow you work with Vanilla React Native. But when Expo is ejected from the project that has contained Expo before, you still keep working with ExpoKit, because the functions in your project are based on the instrument from the kit. 

These are key terms and you need to understand them clearly. For more information visit official documentation. Meanwhile, we are going on…

Meet the Well-known Limitations of Expo

Let just speak about the limitations of the Expo. But first of all, we want to emphasize that the developers of Expo took a prudent approach to write the documentation for Expo with included limitations of it. Therefore warned means armed. 2024 Research

In the documentation, there are a bunch of cases in which Expo fails. So we have an officially issued list of Expo problems. Let’s check out this list and figure out what problems we face here. 

  • Not all iOS and Android APIs are available yet – Bluetooth, In-App Purchases are the most painful. This is not so much a problem as a severe limitation. If in your requirements list Bluetooth or In-App Purchases include, forget about managed workflow.   
  • Your app needs background code execution – one of the most discussed and problematic topics. That is about the situation when the app works in the background, not if it was killed or swiped. Play audio, handle push-notifications in the background are in development for several years. That also cuts off a part of potential apps.    
  • The simplest app size with “Hello, world” is 25 MB – this is the most frightening thing for new developers since even the simple chat app will take more than 70 MB of the space when unwrapped. That is because you have to store all Expo SDK modules in managed workflow even when they are not in us.
  • You can’t add custom native code to an Expo project – Expo doesn’t support custom native code in projects with Managed workflow. If you want to use third-party libraries or just to adjust the native code (Objective-C or Java) you are not able to do that with Expo. Expo SDK offers a large set of native modules for the most developers need – try to find one that fits your project. But if you have some specific uncommon needs, Expo may not help you. And here the explanation of the big size of Expo SDK comes – to provide developers with necessary functionality when they are not able to manipulate the native code or add third-party libraries, the solution (Expo) has to contain as many possible tools as it can hold. 
  • The only supported push notification service goes from Expo – it’s called Expo Push Notification service/API. Not a big problem while you are comfy with the service. 
  • Expo supports Android 5+ and iOS 10+ OS versions – just a matter of the audience. According to the law of the vital few if Expo covers 80% of the audience there is no need to abandon Expo just because a part of your potential users are used to their old smartphones.
  • There can be a delay for build’s production – since Expo provides developers with free standalone built service, which cluster is a finite, shared resource, builds can sometimes be queued. It’s allowed to buy Priority plan with prioritized build infrastructure for developers who dislike waiting. We don’t consider that fact a problem, rather the consequence of the opportunities Expo offers. Server costs money, business user helps cover that cost for getting the priority in using it. Priority plan is less expensive anyway than holding your own server.         

Except for the limitation listed above, you can meet additional surprises like:

  • Every app that was built with Expo includes the whole bunch of SDKs it Expo contains – do you know which of them are active in your app? There was a problem in 2017 when Expo apps that don’t use Facebook libraries keep them active. For what reason: accidentally or to collect personal data? We don’t know. The problem was solved and Expo developers have disabled Facebook libraries in apps that don’t use it. But the question about the security of your data remains open. 
  • Slow background image rendering – even tiny 2k icons sometimes take several seconds to load. If an app has a huge amount of images in one go, it takes time to load the app. The possible solution to it is caching crucial assets when the app starts.

What Points From That List Became Crucial for Us? 

Lack of native modules. Imagine that you buy a template and figure out that you have problems with in-app purchases function just because the developers of the template have used Expo. That is can be a big trouble. 

Inability to add custom code for expansion of the functionality of the project. That is the most limiting and annoying thing about Expo. The only way to adjust the code is by ejecting Expo and built the project within the bare workflow (or just in Vanilla if you get rid of all ExpoKit’s dependencies). And we assure you that ejecting is a very painful process. 

Since our products are oriented on developers from different spheres with various needs, it is essential for our products to be flexible and provide opportunities, not limitations.

However, there is always a possibility to hack the system and overcome the constraints. If you are one of such developers, google “expo and raw react-native together”, and try your luck. Those who seek always find the opportunity to achieve their wishes. 

Did We Make the Right Decision? 

Since we made React Native Starter for the usage of other developers, they will be the best judges of our decisions. And today this is one of the most popular React Native Starter kits on GitHub with 1.2 k stars and we got a lot of positive feedback about our product and RNS turned to be a great kit in several successful cases like the one with AirBnB-like app. So we think yes, we made the right decision but if you want you can check it on yourself here

Thanks for reading 

About Flatlogic

At Flatlogic we develop admin dashboard templates and React Native templates. We are listed among the Top 20 Web Development companies from Belarus and Lithuania. During the last 6 years, we have successfully completed more than 50 big projects for small startups and large enterprises. As a team, we always have a deep desire to help our clients.

You might also like these articles:

The post Why I Don’t Want to Use React Native With Expo appeared first on Flatlogic Blog.

]]>
How to Create React Native AirBnb-like App https://flatlogic.com/blog/how-to-create-react-native-airbnb-like-app/ Wed, 05 Feb 2020 14:08:31 +0000 https://flatlogic.com/blog/?p=1967 Everybody who has traveled to other countries encountered the issue of apartment renting. One of the most well-known services for this is Airbnb. It is an online platform for arranging...

The post How to Create React Native AirBnb-like App appeared first on Flatlogic Blog.

]]>
Everybody who has traveled to other countries encountered the issue of apartment renting. One of the most well-known services for this is Airbnb. It is an online platform for arranging or offering lodging, which gained great popularity thanks to the wide variety of properties, diverse filter by price, languages of the host, date, location, and, of course, protection of guests and hosts. But it’s hard for one app to cover the whole world, and here our story of two developers begins. 

Challenge

Apartments in Israel are very expensive. Residents and students rent through Facebook groups. The number of these groups is enormous and the number of members there is higher than 1 million people. But can you imagine how hard it is to find a place to stay with all these groups… You can’t pick dates or any options for the search, all you can choose is a town. And you have to monitor several groups every day where there is irrelevant information or advertisement along with apartment posts you are looking for. Furthermore, there is no guarantee that the property in the post will be as advertised.

Solution

The solution is to develop an Airbnb-like app for local needs. Since Airbnb hasn’t brought together hosts and guests in Israelis in the past and hosts have kept making posts in Facebook groups, ignoring an opportunity to make posts in mobile apps, a new solution must meet that local specificity. And here Subaba appears. 

Subaba is an app based on top of React Native Starter kit that compiles information about apartment offers from numerous groups. It allows monitoring all posts in one place and looking through them. 

Technically, it performs web scraping of Facebook, then structures information with AI, and displays the result to users with an opportunity to filter by date/countries or other apartment descriptions. 

Technology Stack

Backend: Python, Node.js, MongoDB

Frontend: React Native, React Admin

+ React Native Starter

How to Create React Native AirBnb-like App
2024 Research

Key features:

  • Opportunity to create your sublet (in a couple of minutes with little necessary information).
  • Option to find apartments by date and location (thanks to a special filter by date/city and a calendar page).
  • Filter by dates, price, amenities.
  • Advance filter by shared room or the entire apartment.
  • Affordable prices (apartments, sublets, and rooms are 18% cheaper than one on AirBnB).
  • Search through all sublets.
  • Tracking liked apartments to compare them later.
  • Social login via Facebook.
  • An apartments list and apartment cards with high-quality photos and description.
  • Among other features are online chat, swipe cards, minimalistic and clear design, high-speed thanks to code quality and absence of excessive dependencies in the code.
How to Create React Native AirBnb-like App

About Developers

The team consists of 2 people. One uses React Native, Node.js, another uses React Native, Python, Node.js. The app is officially released at Google and Apple stores, it is updated several times a month. The idea of an app is simple and reflected in the main statement on a website: “We parse Facebook so you don’t have to!” And this is not the endpoint for Subaba since developers have the intention to parse publicly available information from other sites about lodging in Israelis. The current version of an app is also not the last: developers want to expand functions in the future and the nearest update will include push notifications.  

Why Use a Template?

Because using a ready-made solution saves time, money, and nerves during the process of development (you can read more here). You can customize your template as heavily as you need with ready-to-use pages and elements and integrate it with almost any solution. The usefulness of templates is invaluable. The best way to understand it is to try. Templates weren’t something new for Subaba’s developers, they used them for admin panels in previous projects. 

The main selection criteria were template popularity on GitHub and the level of support. React Native Starter was the most popular starter kit among other kits and developed by the Flatlogic team (top web developer in Belarus and Lithuania). One of the developers didn’t know the React Native when he cloned the RNS repo, but since RNS is well documented and has a clear modular structure without excessive redundancies in the code it didn’t take a long time to customize it. In the end, the main difficulties were not in frontend but AI configurations. 

About React Native Starter

React Native Starter (RNS) is a powerful React Native template for building mobile apps. It allows developers to focus on key features of the app like AI configuration for Subaba. RNS is a functional starter kit with great and thoughtful design from UX/UI experts, qualified code, and a great variety of functions for your business needs. It was tested several times by the developers and has gained great popularity on GitHub with 1.1 k stars.

React Native Starter offers a lot of built-in components like sidebar, navigation, and form elements. One of the key advantages that helped Subaba’s developers is that RNS can be easily integrated with different content providers like WordPress, YouTube, and (in our case) Facebook. The code has minimum extra dependencies, built without Expo and with the UI-testing ready environment. Thanks to modular architecture and an entire intuitive programming framework you will get an easily customizable template, so even developers with pure experience in React Native technology can launch the app with necessary functionality in a short time. 

And Subaba has become a great example of the implementation of React Native Starter. It isn’t every day a good alternative to the Airbnb app appears. Yeah, Subaba is a local app and the volume of its transaction can’t be compared with the volume of the world-famous app, but still. Could you imagine that two developers without huge experience in React Native built an app that got ahead of AirBnB in some country? We couldn’t imagine it either. Just one good starter kit like React Native Starter and one good idea can bring unexpected results! 

So what is the future of Subaba?

Developers want to become a #1 rental center in Israelis. Facebook is not the only option to collect data from, they plan to collect info from other popular sites.

You might also like these articles:

The post How to Create React Native AirBnb-like App appeared first on Flatlogic Blog.

]]>
How to Make Your First React Native App https://flatlogic.com/blog/how-to-make-your-first-app/ Tue, 08 Oct 2019 10:52:18 +0000 https://flatlogic.com/blog/?p=1508 We will go through the process of creating a new mobile app, take a look at the architecture patterns and try to understand how to make your initial code clean, scalable and beautiful.

The post How to Make Your First React Native App appeared first on Flatlogic Blog.

]]>
A couple of very common queries that comes up in a developer’s mind is how do they correctly design new apps, along with how do they begin with the selected technology stack. So, you will learn exactly how to create a brand-new mobile application using React Native Starter, as well as see the design patterns and attempt to comprehend how ensure your primary code is clean, as well as scalable.

What’s React Native Starter?

Firstly, here’s some info on React Native Starter. Anyone who creates apps normally faces the same old issues. This includes needing to know the proper technology stack to pick, the way to add in navigation properly, as well as knowing the way to manage their application’s data, etc. The average developer uses over forty hours merely figuring out the architecture. That doesn’t even include the app components or precise pages.

With React Native Starter, these issues are addressed through delivering developers a scalable, versatile and strong starter kit for their app projects. This kit includes Redux integration to manage the data, along with react-navigation, which provides screen transitions, etc., thus your team saves as much as 20 thousand dollars.

Beginning a Brand-New App Project Using React Native Starter

The prerequisites required:

To use this tutorial, you must be knowledgeable about React and JavaScript. Even though you may not have prior experience using React, it’s possible to follow. During this lesson, you’ll learn about basic concepts of React.

Select the development tools. Any mix of platforms and editors can be used; however, I recommend you begin with the following: 

  • Visual Studio Code: an example of the best existing editors.
  • React Native Tools for VSCode: This is a plugin for Visual Studio Code to be used with React native development which gives users helpful shortcuts, plus lets them debug code straight from the VSCode environment.
  • Reactotron: This is a desktop application used to inspect React Native and React.js projects.

You’ll also be required to install XCode if you need an iOS application.

2024 Research

Beginning Your Project

Let’s say you want to build a mobile form of a WordPress blog and you want to use RNS.

React Native Starter comes complete with several themes to choose from and you can use any of them you like from this list:

Themes

When these themes were built, the crew was attempting to envelop as much of the market’s volume as they could. You will discover any kind of designing trend contained within RNS. When it comes to the brand-new blog application you want to create, you need to pick from a dark version. The following are examples of those screens:

Themes

Firstly, we need to clone RNS code and go to the repo:

git clone https://github.com/flatlogic/react-native-starter-full.git
cd react-native-starter-full

At the start, React Native Starter is provided a default theme (which is great too), however, you want to pick one that’s dark. The documentation says that it’s merely required for the subsequent command to run for changing a theme:

$THEME_NAME=dark bash ./change-theme.sh

Then your app turns dark. So, how would it appear with all the screens that are included? To see, run the following two console commands:

yarn install
yarn run:ios

You have to wait until the build is done, then you will be able to see the app in a simulator. Here is the initial application ready.

Fine-Tuning a Project

Next, you must fine tune the app you just created so it meets your application type. Firstly, you’ll be required to determine what pages are needed within the application. The pages list for the blog you are creating is:

  • The Login screen.
  • The articles list.
  • The single article page.
  • The profile page.

Every page is contained within RNS, consequently let’s alter the specified template. All you have to do is alter the navigation. Open up the current navigation page (src/modules/navigation/MainTabNavigator.js) and you will notice what is included and what’s using every page within the navigator.

Themes

However, we merely need two pages for the navigator tab: a posts list along with a profile page. So, we can alter it like so: 

Themes

Now there are two screens for the tab navigator. After that, to have two additional screens (the Login along with a Post screen) you must alter the top-level navigator: (src/modules/navigation/RootNavigation.js): Then the navigation is done. All needed screens are there.

Themes

Subsequent Steps

Subsequent actions are more precise to whatever the goals are for the application, however since RNS is so flexible, you can do this quickly without very much trouble. You merely must hook RNS to the endpoints of the blog via altering the module container’s code.

Conclusion

So as you see, beginning a brand-new application using React Native Starter is quite simple. You can develop the boilerplate code for a precise app in under 60 minutes, and it doesn’t take a lot of work  or advanced knowledge in designing. That is the reason React Native Starter is tops when it comes to options to begin a brand-new mobile app project!

The post How to Make Your First React Native App appeared first on Flatlogic Blog.

]]>
React Native App Generator on Product Hunt https://flatlogic.com/blog/react-native-app-generator-on-product-hunt/ Wed, 19 Jun 2019 13:10:53 +0000 https://flatlogic.com/blog/?p=1002 Today we are launching React Native App Generator on Product Hunt. For years and years, we are striving to cut development time, we were creating both web and mobile templates...

The post React Native App Generator on Product Hunt appeared first on Flatlogic Blog.

]]>
Today we are launching React Native App Generator on Product Hunt. For years and years, we are striving to cut development time, we were creating both web and mobile templates that saved thousands of dollars for our clients. And here we are making a huge leap forward. We are creating a generator that configures a React Native boilerplate for your project.

React Native App

Go to the React Native Apps Generator page!

You can check out the beta version of this generator. You can also watch a video on a Product Hunt page. It’s just a quick guide on how to use this tool. Please note that the project is currently at a beta stage. You can leave your email and we will notify you as soon as we are ready. 

React Native App

Watch a Video Tutorial!

The generator includes visual editor. You need to choose the color theme and components needed. React Native App Generator auto-generates all the necessary code for components you have chosen. And after that, you can connect it with your backend and database if you have one.  

The post React Native App Generator on Product Hunt appeared first on Flatlogic Blog.

]]>
React Native Starter Update. New Color Themes Added https://flatlogic.com/blog/react-native-starter-update-various-color-schemes-added/ Fri, 24 May 2019 14:43:31 +0000 https://flatlogic.com/blog/?p=904 We know that you all want to make your applications unique and remarkable. But sometimes you need to have your app done as quick as possible or you need a...

The post React Native Starter Update. New Color Themes Added appeared first on Flatlogic Blog.

]]>
We know that you all want to make your applications unique and remarkable. But sometimes you need to have your app done as quick as possible or you need a prototype that will represent your idea, has a professional look and impressive modern design. And that when using a  Starter Kit might be a good idea.

We try to gather as much information from our clients as possible. That includes the requests about design. And in particular, we received lots of requests about different color themes.

Our designer Natalie Ermolenka created two various themes of the React Native Starter from the start of our project. And now she designed four more using the most influential design trends of 2019.

React Native Starter

There is no doubt that to make a good impression with your app you have only a few seconds to grab users attention. The screenshots and the description should be eye-catching and memorable.

The outdated look can lower your conversion and engagement. If you use React Native Starter then we feel the responsibility to give you professional advice on what will work in your app design and what is not.

Gradients and duotones

Over the past few years, we can trace the evolution in the use of gradients and duotones. This multipurpose trend is so long-playing because it will work almost on any type of design. So the good news is that this trend is going to last for a few years more. The gradient is used for the sake of adding a burst of color, the use of a good highlight of the specific content and for creating a captivating background.

Natural and smooth lines

The use of natural and smooth lines gives us a feeling of comfort. The organic shape adds depth to the layout because they are naturally imperfect. We try to make it imperfect so it can appear humanistic and could break up the monotony.

Thumb-friendly navigation

One of the most popular UX design trends is thumb-friendly navigation. Your user holds a cup of coffee in one hand and in the other he shops for Christmas gifts. So the main task of the UX designer is to make all UI elements thumb-accessible. Navigation on large screens can be a phone killer. 2024 Research

Vibrant colors

The use of a vibrant color palette is a dazzling eye-catching trend which ads a splash of color and brightens up a composition. It is the best attention-getter and we should say that it takes a bit of exercise to get bright colors to work together. Using this trend we made a pretty simple layout that really pops in.

We want to thank all of you who sent us letters, made commits on GitHub, left comments in our social media. Without you, we wouldn’t have all the necessary information to make our product better. When we started React Native Starter we were relying only on our needs. We were just accumulating our experience in creating mobile apps. But for the past months, we managed to have so many useful insights and ideas for the future. We promise you that in a couple of weeks you will receive much more huge updates and exciting news from us.

The post React Native Starter Update. New Color Themes Added appeared first on Flatlogic Blog.

]]>
The Biggest React Native Starter Update So Far https://flatlogic.com/blog/the-biggest-react-native-starter-update-so-far/ Wed, 03 Apr 2019 10:44:26 +0000 https://flatlogic.com/blog/?p=517 We made a number of significant changes in React Native Starter. In fact, we made a completely new React Native Starter from scratch. It is possible that a few years...

The post The Biggest React Native Starter Update So Far appeared first on Flatlogic Blog.

]]>
We made a number of significant changes in React Native Starter. In fact, we made a completely new React Native Starter from scratch. It is possible that a few years from now we will look at our work and develop new ideas and make core changes in our product. We believe this is the only way to follow best practices and changes in React Native itself. Revisions of architecture and functionality helped us drastically cut development time of future mobile apps. We believe that speed is the most important criteria in this case. Almost every change that we made was either making the process of customization faster or reducing the number of bugs in your future mobile apps.

React Native Starter

In this article, we want to share some thoughts about the decisions we made creating the second version of React Native Starter. And of course, we appreciate your comments, emails and commits on GitHub. We want to thank all of you who sent any kind of feedback on the first version of React Native Starter. It was very meaningful and informative, and what is more important thought-provoking.

Removed Expo and transitioned to native projects

This decision was made because of lots of restrictions that expo adds to your projects. One of our primary goals with RNS is to provide as much scalable solution as possible. The previous version of our starter kit has been built using Expo framework and it was creating some restrictions for our users. Just a few examples: application builds were large (25+ MB with a plain project), lack of native modules, poor support of offline-features and much more. Also, we believe that our starter kit can be used in a complex application where you might need to adjust the native code (Objective-C or Java) and you wouldn’t be able to do it using Expo. We received a lot of feedback from you, our users, and decided to get rid of Expo in the new release. And because of this change, 2.0 version doesn’t have the backward capability with the first one.

Added Plop generator for easy development

Another important goal for us is to speed up the development process as much as possible without affecting quality. And Plop is one of our main improvements in this area. First of all, you probably already know that our starter kit has a modular architecture (if you don’t, please read more in our documentation). And after you downloaded our kit, you want to add your custom modules and components. With our Plop config, you’re able to generate all the required files and imports simply by running a single command. Just type plop in your command line, answer a few questions and you’ll have a new module or component ready to go! Magic, huh? 2024 Research

Added support for unit testing with Jest and Enzyme

Everybody loves tests! Well, you should 🙂 With our starter kit, we want to help you to deliver as stable code as possible. We’ve added 2 options to write tests: unit testing with Jest/Enzyme toolbox and e2e tests with detox. Let’s talks a little bit about the first one. Jest and Enzyme are the libraries that can make unit testing of a mobile app possible. These libraries can help you test your components and functions by writing simple and elegant unit tests. Enzyme adds support for snapshot testing (read more here).

Added support for e2e testing with Detox

E2e refers to end to end testing which means that application is tested by checking all the layers, interfaces, etc. separately to make sure that these tests show a comprehensive UX image. You can write tests for user stories. For example, you write a test for the login process, it contains the following steps:

  • Open an app.
  • Enter email.
  • Enter password.
  • Click the login button.
  • Verify that the main screen is visible.

You write these tests using detox jest-wrapper, your app is opened in any simulator and tested against all your stories. It helps to catch a lot of user-interface issues during development!

New modular architecture that will help you speed up the applications development

The Starter Kit architecture is designed to support scalable, modular applications. Built around Redux, it makes it simple to reason about your application’s state, and as a result to write maintainable error-free programs.

Please, check our docs for more insights on our documentation.

In conclusion

So what is next? First of all, we will study the feedback of the community on the matter. We understand that there is going to be more changes in the future and we want to make up our mind and process all data. Second, we want to collect some examples of mobile apps that were made on top of our product. We really interested, what mobile applications you managed to create with our React Native Starter v.2. So keep up with our news, because there is going to be several compelling case studies. We believe that this case studies can be truly instructive in several respects.

The post The Biggest React Native Starter Update So Far appeared first on Flatlogic Blog.

]]>
Top 5 React Native Starter Kits https://flatlogic.com/blog/top-5-react-native-starter-kits/ Mon, 11 Feb 2019 09:04:28 +0000 https://flatlogic.com/blog/?p=402 React Native allows us to create a boilerplate that have been crafted for both platforms. The ability to create an app both for Android and iOS gives us one competitive...

The post Top 5 React Native Starter Kits appeared first on Flatlogic Blog.

]]>
React Native allows us to create a boilerplate that have been crafted for both platforms. The ability to create an app both for Android and iOS gives us one competitive advantage – we can have our development process as fast as it can be.

Starter Kits are usually opinionated about development practices and also tooling. Sometimes it is one-size-fits-all, and sometimes the possibility of customization and integration with some services is more important. You can learn from this code, take inspiration. This option especially effective for those who are new to React Native, but not to web development or programming in general. To learn as fast as possible it is very effective study  best practices in pre-built apps or starter kits. After all, the code does not lie, only comments sometimes do.

React Native cogently reduced the amount of time and efforts to build a mobile application. In production mode, you can seamlessly update your app. What is more and in development, there is an opportunity to share your work with someone.

In this article, I want to spread the world the best React Native Starters that I could find on the internet. One can grab one of them and easily bootstrap its own application and jump into the mobile development world.

React Native Starter

react native starter kit

Rating: *****

The architecture of this starter kit is designed to create scalable applications. Build according to the best practices of React Native it supports modular applications. It was crafted with the help of Redux library, Babel, React, Flow and ECMAScript which is definitely a big plus. In the demo, we can see that we can build a customizable calendar in our application. Also, we can see that there is three grid styles that we can use, product page, charts, a gallery in Instagram-style, user-profile, chat and messages, and login or registration screen. This starter kit is perfect for the eCommerce applications and have a lifetime update and support. The design itself is clean, modern and eye-catching. It is using such trends as color gradients and simple curves.

2024 Research

Ignite

React Native Starter Kit

Rating: ****

Default boilerplate is installing in a matter of seconds. In fact, Ignite is more like a generator for React Native. It has lots of plugins or you can start one on your own. Ignite has no runtime because it is a developer tool, you don’t have to find a way to upgrade, it is not a library, you don’t depend on it. It also has one interesting bonus. It has its own community of React Native coders. Ignite works perfectly on macOS, Windows and even on Linux. You can easily generate a starter app as well as a single opinionated component. It has API doc testing, convenience screens, component examples,  generators CLI, and lots of usage examples.

Pepperoni

React Native Starter Kit

Rating ***

Pepperoni has many ready-to-use building blocks which helps you to create a mobile app with common features. It uses Redux library, Auth0 for user management, login, and authentication. Push notifications, cloud-ready backend, and group messaging are definitely a plus for this starter kit. But Pepperoni is not a one-size-fits-all starter and you probably will need lots of customization to meet your needs. This project shares some features with another one called Snowflake, which at this moment definitely is more mature. Yet Pepperoni has a modern architecture which helps you build your own to speed the development process of cross-platform mobile application.

React Native Ting App

React Native Starter Kit

Rating ****

Ting App has all necessary UI elements and it is fully customizable. Nine ready-to-use screens such as login, sign up, chat, profile etc. It is doesn’t include any back-end, it was made as a UI theme. So it doesn’t wire up with API calls, but it definitely provides you with all basic collection of components for the development of your own app. You can build a high-quality mobile app with a fusion of ES6. It is well documented, packed with Flow, React Navigation and Native Base. Native Base is the most adaptable UI component for React Native. Knowing that we can use the broad collection of components that a ready to be customized. Because of its flexibility, Ting is perfect for hospitality applications and it can be customized practically in any way. Flat and smooth UX and well-performance UI  is a big plus.

React Native Starter by Ueno

React Native Starter Kit

Rating ****

This starter kit was built by professionals. It allows you to deploy solid apps saving time and effort. It has opinionated dependencies, unit and integration tests and react starter navigation 2. It doesn’t have ready-to-use screens, UI components and UX in general. But it very easy to start, practically doesn’t need anything to start developing. You don’t need environment variables. Just clone this starter to your folder and you will be able to create your own screens and components with this clean and high-quality code.

If you liked this post you may also want to read:

The post Top 5 React Native Starter Kits appeared first on Flatlogic Blog.

]]>
5 Tips to Build a Mobile App Using App Templates https://flatlogic.com/blog/the-smartest-way-to-build-your-mobile-app/ Thu, 04 Oct 2018 15:47:28 +0000 https://flatlogic.com/blog/?p=188 How to build a mobile app? Check 5 basic tips for mobile development here.

The post 5 Tips to Build a Mobile App Using App Templates appeared first on Flatlogic Blog.

]]>
Table of content:
  • Introduction
  • Basic tips for building a mobile app faster
  • Wrapping up
  • Suggested Articles

    Introduction

    Building a mobile app from scratch is definitely a time-consuming task. We tend to expect a lot from an application: fast load, satisfaction during an interaction, and ease of use. Well, there is no doubt that the mobile era is here. According to The Communications Market Report, the number of mobile users is even greater than the number of desktop users. And these statistics are showing us that without an app, you may be losing a truly big and important segment of the market. The segment that just prefers to do business that way.

The Fastest Way to Build Your Mobile App

1. Do not reinvent the wheel

Seriously. It is a fact that there were hundreds of people who had the same problems. If you are not an expert in creating mobile apps then app template created by industry experts will reduce your developing time anyway. Mobile app template is a starter project that bootstraps coding process. It can kick-start the app development with just a few lines of code. Especially when it comes to the templates that are made according to the latest UX and UI trends. Nowadays, the difference between apps is just the quality of its user experience (UX).

2. Build a prototype as fast as you can

Time is money. Development, design, business analysis, and testing that is just one of the main steps of the huge process of creating an application. And in the end, you can have an awful situation when customers just don’t want your app. Sometimes it happens. I think you should be prepared for this kind of situation. That is why you may need to get to the market fast with a prototype. Don’t waste your time and money waiting for a complete app with all the features. Build only with the essential proposition of the app and you will find out soon if the users are ready to buy. Once they do, you will get a lot of important feedback from your paying customers. You might need to make several apps to be successful to keep ahead of the competitors. If you buy one template for several apps, you’ll save lots of money.

3. Focus only on one key feature in your app

Finally creating your own app is great, but if you are thinking that this is the only app you will ever need, then you might be just expecting too much from it. Applications are most effective when they really focus on a specific aspect of a problem or a task and use only one or two key features. And the only way to know exactly which one is to get real customer feedback.
2024 Research

4. Collect feedback for future improvements

Stay alert and continuously improve your app. Know your audience, listen to your audience, and track the things that may be important to the final users. Responding to customer comments will high up trustworthiness to your product and engagement levels. Your mobile app will surely become better if you are eager to get any feedback from outside and take it into account.

5. Build the same app for iOS and Android

Is this even possible to get your prototype faster? Yes, there is a technology from Facebook called React Native. It is very popular nowadays, and thousands of apps are already using it. Big names like Facebook, Airbnb, Uber, and many other companies are building their latest apps using React Native.

As you might know, it has been gaining in popularity only for one reason: it allows developers to write the same code across different mobile operating systems, it can save you time and therefore money for development. This means that you no longer have to build two separate apps: one for iOS and another for Android.

We’ve created a React Native Starter kit that bootstraps the development of your mobile application and follows the latest industry best practices in React Native.

Wrapping up

The research has shown that the world mobile app market is expected to grow to $63 billion by 2020. That’s why building a mobile app is not a luxury, but a necessity for every modern business. Usually, mobile apps generate some additional revenues for a company in two main ways: first of all, because most people always carry a mobile device, applications encourage repeat orders from customers on the go. The main convenience and simplicity of the apps versus going to a web app or a website make it easier for people to buy. And secondly, a company can gain from a new advertising revenue stream through apps. Smartphones allow customers to read basic information, make a choice, and purchase without needing to talk to anyone or make any calls.

Suggested Articles

The post 5 Tips to Build a Mobile App Using App Templates appeared first on Flatlogic Blog.

]]>