From Tacit Knowledge to Strategic Intelligence: Vibe Coding

From Artificial Intelligence to Augmented Intelligence: The Future of Vibe Coding in Software Development

The Synthetic Mind: Why Business Player Mindset Is the Future of Vibe Coding

From Ideas to Innovation: How AI Development Partners Accelerate Business Transformation

<h2>Icons</h2>
Icons are part of our culture, especially in the digital era, as they play a key role in UI, providing guidance and information to users interacting with your product, something essential when building consistent experiences through <a data-start="920" data-end="1035" class="decorated-link" rel="noopener" target="_new" href="https://www.effectussoftware.com/cross-platform-app-development-services">Cross-Platform App Development Services.</a>
Now, thanks to React Native dependencies, we are able to implement as many icons as desired or needed, and in most cases, you won&#8217;t even have to add any native code at all to use them. 
<h2>React Native vector icons</h2>
Here is a react native vector icons list that you might want to check out before you start: 
<ul>
<li style="font-weight: 400;" aria-level="1">Entypo by Daniel Bruce (411 icons)</li>
<li style="font-weight: 400;" aria-level="1">EvilIcons by Alexander Madyankin &amp; Roman Shamin (v1.10.1, 70 icons)</li>
<li style="font-weight: 400;" aria-level="1">Feather by Cole Bemis &amp; Contributors (v4.21.0, 279 icons)</li>
<li style="font-weight: 400;" aria-level="1">FontAwesome by Dave Gandy (v4.7.0, 675 icons)</li>
<li style="font-weight: 400;" aria-level="1">FontAwesome 5 by Fonticons, Inc. (v5.7.0, 1500 (free) 5082 (pro) icons)</li>
<li style="font-weight: 400;" aria-level="1">Fontisto by Kenan (v3.0.4, 615 icons)</li>
<li style="font-weight: 400;" aria-level="1">Foundation by ZURB, Inc. (v3.0, 283 icons)</li>
<li style="font-weight: 400;" aria-level="1">Ionicons by Ben Sperry (v4.2.4, 696 icons)</li>
<li style="font-weight: 400;" aria-level="1">MaterialIcons by Google, Inc. (v3.0.1, 932 icons)</li>
<li style="font-weight: 400;" aria-level="1">MaterialCommunityIcons by MaterialDesignIcons.com (v3.6.95, 3695 icons)</li>
<li style="font-weight: 400;" aria-level="1">Octicons by Github, Inc. (v8.4.1, 184 icons)</li>
<li style="font-weight: 400;" aria-level="1">Zocial by Sam Collins (v1.0, 100 icons)</li>
<li style="font-weight: 400;" aria-level="1">SimpleLineIcons by Sabbir &amp; Contributors (v2.4.1, 189 icons)</li>
<li style="font-weight: 400;" aria-level="1">AntDesign by AntFinance (297 icons)</li>
</ul>
Needless to say, there are some cool options for you to choose from. You may implement some popular bundle sets such as FontAwesome or GitHub, or any other of the listed above. React Native allows you to add any of them to your projects. 
Also, popular UI libraries like React Native Paper and React Native Elements use React Native Vector Icons, so it&#8217;s definitely a package worth checking out!
<h3>First things first</h3>
Using the icon prop react-native-vector-icons library, it will allow you to import icons quickly by simply following a couple of steps: 
<ol>
<li style="font-weight: 400;" aria-level="1">Create a new React Native project</li>
<li style="font-weight: 400;" aria-level="1">Install the Dependency (react-native-vector-icons)</li>
<li style="font-weight: 400;" aria-level="1">Install CocoaPods</li>
<li style="font-weight: 400;" aria-level="1">Importing Icon Files in Android</li>
<li style="font-weight: 400;" aria-level="1">Importing Icon Files in iOS</li>
<li style="font-weight: 400;" aria-level="1">Import icon component in your project and start using it</li>
</ol>
Once you&#8217;ve created your new project, you must install the react-native-vector-icons library and the dev dependency in order to start using the icon component. 
npm install react-native-vector-icons 
Once it&#8217;s done, the next step is to install CocoaPods for iOS, and afterward navigate back to your iOS project folder.
<h3>In an Android environment </h3>
Follow the next steps to import react-native vector icons in Android.
<ul>
<li style="font-weight: 400;" aria-level="1">Create assets/fonts directory in android/app/src/main</li>
<li style="font-weight: 400;" aria-level="1">The copy all the font files from node_modules/react-native-vector-icons/Fonts into it.</li>
</ul>
<h3> 
What about the IOs environment? </h3>
Importing the Icon files here is a bit more complex but pretty straightforward nonetheless.
<ul>
<li style="font-weight: 400;" aria-level="1">Once you&#8217;ve created a Fonts directory, you want to copy all the font files from node_modules/react-native-vector-icons/Fonts into it.</li>
<li style="font-weight: 400;" aria-level="1">Open YourProject -&gt; ios -&gt; YourProject.xcworkspace your project in Xcode.</li>
<li style="font-weight: 400;" aria-level="1">Now open options and select Add files to “YourProjectName”, select the Fonts directory you&#8217;ve created (and select Create Folder references beneath destination), and click add.</li>
<li style="font-weight: 400;" aria-level="1">Select YourProjectName on the left top, select its name on Targets and click on the info tab on the top menu to see Info.plist. </li>
<li style="font-weight: 400;" aria-level="1">Lastly, add both Fonts provided by the application and Font files under it. </li>
</ul>
The React-native-vector-icons dependency will provide two components:
1-Icon Component
The first one is used for creating icons. Prop “name” will render the icon in Android and IOs.
<div class="hcb_wrap">
<pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>&lt;Icon name="rocket" size={30} color="#900" /&gt;</code></pre>
</div>
As seen right above, props “size” and “color” are customizable. 
2-Icon.Button Component 
The Icon.Button Components grants you the opportunity to create buttons with an icon on its left side. 
<div class="hcb_wrap">
<pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>&lt;Icon.Button

  name="facebook"

  backgroundColor="#3b5998"

  onPress={this.loginWithFacebook}&gt;

  Login with Facebook

&lt;/Icon.Button&gt;</code></pre>
</div>
In this case, we find many more props we can work with besides color and size; let’s take a look:
<ul>
<li style="font-weight: 400;" aria-level="1">iconstyle (we can set margins or a different color) suggested to avoid unstable behavior.</li>
<li style="font-weight: 400;" aria-level="1">backgroundColor</li>
<li style="font-weight: 400;" aria-level="1">borderRadius (set it to 0 to disable)</li>
<li style="font-weight: 400;" aria-level="1">onPress (call out for a specific function if needed)</li>
</ul>
<h3>More Vector Icons Types in React Native</h3>
Besides such, there are other types of vector icons React Native available, for instance:
1-Ionicons: after installing react-native-ionicons dependency, you’ll have to link the library. Then, install the pods. Lastly, open App.js in any code editor, and replace them with this <a href="https://aboutreact.com/react-native-ionicons/" target="_blank" rel="noopener">code. </a>
2-Social Icons: in order to use ScialIcons, first you need to install react-native-elements plus react-native-vector-icons. You can dive into further detail <a href="https://aboutreact.com/react-native-social-icon/" target="_blank" rel="noopener">here</a>.
3-React Native Card Views: it&#8217;s mandatory to install react-native-elements and later on react-native vector icons dependencies. On the other hand, you may want to check the Card component by react-native-paper, same procedure: first, install react-native-paper and next React Native vector icons. Revise these steps <a href="https://aboutreact.com/react-native-card-view/" target="_blank" rel="noopener">here</a>.
4-Vector Icon in Navigation Drawer/Sidebar: you can modify the Navigation Drawer or set your sidebar as it suits your needs. Make sure you have the node react-native init already installed, and go for installing react-native-cli command.
 As far as dependencies go, you’ll need to add react-navigation and other supporting dependencies. Follow <a href="https://aboutreact.com/custom-navigation-drawer-sidebar-with-image-and-icon-in-menu-options/" target="_blank" rel="noopener">this</a> step by step to pull this off. 
5-Vector Icon in Bottom Navigation: this is probably the more complex of them all: 
<ul>
<li style="font-weight: 400;" aria-level="1">start by adding react-navigation</li>
<li style="font-weight: 400;" aria-level="1">then, add other supporting libraries</li>
<li style="font-weight: 400;" aria-level="1">continue with MaterialCommunityIcons</li>
<li style="font-weight: 400;" aria-level="1">mandatoryreact-native-vector-icons, it&#8217;s mandatory. </li>
<li style="font-weight: 400;" aria-level="1">Of course, Stack Navigator if you care to go in-between screens. </li>
<li style="font-weight: 400;" aria-level="1">Lastly, don’t forget the pods! </li>
</ul>
Take a peek at this <a href="https://aboutreact.com/react-native-bottom-navigation/" target="_blank" rel="noopener">guide</a> for further instructions in order to avoid any important steps. 
<h3>Getting top-notch bundle icons</h3>
We have taken a glance at the advantages of using react-native vector icons, and rest assured that this is most likely just the beginning of new features yet to come that will allow developers a quick solution to improving product design.
Working with these vector icon libraries in React-Native will provide you with some top-notch bundle icons ready to get the most out of your app. 
Just make sure to follow the steps towards accomplishing your specific goal after deciding what type of vector icons you will be needing. You are just a few steps away from delivering a more appealing UI/UX to your future users—especially when combining icons with other elements like animations or <a data-start="1631" data-end="1749" class="decorated-link" rel="noopener" target="_new" href="https://www.effectussoftware.com/blog/react-native-video">building engaging UI with video components in React Native.</a>
<a href="https://effectussoftware.com/blog/mobile/">Read more on React Native</a>

React Native Vector Icons: Set the Tone for your App

When a company decides to create a mobile app, the easiest way to save time (and time is money) and get an effective, attractive, and easy-to-develop app is to select a cross-platform technology that allows you to create for Android and iOS with the same codebase. Currently, there are many tools that can help you with that purpose: React Native, Flutter, Cordova, Ionic, and a long etcetera.
Choosing the right technology is key, and working with experienced teams offering <a data-start="392" data-end="507" class="decorated-link" rel="noopener" target="_new" href="https://www.effectussoftware.com/cross-platform-app-development-services">Cross-Platform App Development Service  </a>can help ensure you select the best framework based on your product goals, timeline, and scalability needs.
Nevertheless, to simplify our analysis of the right tool for building your mobile app, we will focus on two of the most popular options: Flutter and React Native. 
We will compare these two frameworks based on popularity, learning curve, architecture, and available documentation, without bias or personal beliefs. But before getting into the technical field, let&#8217;s take a general overlook of these tools. 
<h3>A general approach to Flutter vs React Native.</h3>
<h3><a href="https://flutter.dev/" target="_blank" rel="noopener">Flutter</a>: </h3>
Google published this popular framework in 2018. To develop an application with Flutter, we use Dart, an Object-Oriented Language.
Google provides an advanced software development kit (SDK) to help developers build apps for multiple devices and platforms. The Google Ads app, the Hamilton Broadway Musical app, Alibaba, eBay, and other apps have been built with Flutter.
 You can agree with us: those companies are two titans of the IT industry, competing to create the best multi-platform framework. This makes the decision hard, as both tools are well-known and offer excellent support.
<h3> 
<a href="https://reactnative.dev/" target="_blank" rel="noopener">React Native</a>: </h3>
It was created by Facebook in 2015, and it uses the very well-known language, JavaScript. This framework was one of the repositories on GitHub, with the highest number of contributors in 2018.
It is now supported by companies like Microsoft, Expo, Callstack, among others. Very renowned organizations had selected React Native as their framework to develop not only mobile apps but also desktop, VR, and web apps. 
Some of those are Tesla, Instagram, Facebook, and Pinterest. You can take a look at our recently written blog post about our top 12 applications created using React Native.
<h2>Popularity </h2>
In comparison with Flutter, React Native is older, has a bigger community, and has more users. This is a positive thing, given the support you can receive. Currently, Flutter is growing rapidly, as is its community. Both technologies are highly popular and very well approved by developers.
Our humble opinion is that, even when Flutter has been growing faster, React Native enjoys the popularity that it indirectly inherits from React web. 
<h2>Performance</h2>
At this point, Flutter is clearly superior because of its architecture.  
React Native’s architecture uses a bridge to communicate JavaScript with the native modules, making itself slightly slower than native apps. We can clearly see this at the app&#8217;s highest performance point when the response ratio should be at its best, just like with games. 
With a regular mobile app, the performance will be great using both tools, and we won’t notice a big difference. This is a significant point in favor of Flutter.
<h2>Learning Curve </h2>
Using any of these tools is very easy once you understand the language. On the one hand, React Native uses JavaScript.  This language is an “old fox” in the web industry, known for being a bit tricky for beginners, but it used to be one of the primary languages taught in colleges.
On the other hand, Dart is the language to develop Flutter’s applications. It’s very intimidating for newbies, and it’s similar to Java or C#. Google is doing its best to help developers from other Object-Oriented Programming languages transition into Dart seamlessly. 
We can conclude that React Native has a flatter learning curve and is less expensive than Flutter. 
<h2>Architecture</h2>
As we’ve said before, React Native’s architecture splits the code into Native and JavaScript components through a bridge that enables communication with native modules. And this is very helpful when you want to use native components to provide users with a native look and feel.
It is not possible to use those native components without help from another library. However, Flutter’s architecture results in a fast option, thanks to Dart&#8217;s framework, Skia C++ engine.
<h2>Documentation</h2>
Flutter has rich documentation and offers detailed guides, graphics, and video tutorials that make it easy to use. 
However, React Native’s documentation is geared toward experienced web developers familiar with JavaScript. This is a negative point for React Native! But thanks to their time in the industry, this is not a problem for the community. You can find non-official documentation and tutorials without any problem.
<h2>Conclusion &#8211; Flutter or React Native?</h2>
It is tough to decide between these two frameworks, as they both have pros and cons. In our opinion, the Flutter vs React Native challenge is complete nonsense. Selecting a tool and using it for everything is like using a hammer to cut a tree.
In every case, you should do a thorough analysis. When you need a high-speed app without a native look and feel, Flutter is a good option. But if you are ok with a native-like performance, React Native is the best choice.
If you’re curious about how this plays out in practice, exploring <a data-start="905" data-end="1031" class="decorated-link" rel="noopener" target="_new" href="https://www.effectussoftware.com/blog/the-humane-space-react-native-effectus">a real-world React Native app development case </a>can give you a clearer picture of how React Native performs in real products.
Another notable point is the number of Engineers with experience in React Native. Thanks to the short gap between React Web and React Native, it is really easy for React Engineers to learn this framework.
We currently have teams working on awesome React Native apps, delivering excellent results and happy customers. If you have an idea or want to grow your product, contact us, and we will schedule a meeting!
<a href="https://effectussoftware.com/blog/react-native-vs-nativescript/">More on React Native</a>

Flutter vs React Native: The New Kid on the Block or The Well-Known Player?

Easy Tutorial: CodePush-ify your React Native App

Why is UX onboarding optimization key to success?



Technology has reached the most hidden corners of the world, and every day more and more applications are developed to address their current needs.



As there are many applications, it is customary to find more than one that offers the same functionalities. To differentiate itself from the others, it is essential to emphasize some aspect to stand out.&nbsp;



The prospect&#8217;s first contact with the application is key to their conversion into a regular user. Studies have revealed that over <a href="https://uplandsoftware.com/localytics/resources/blog/21-percent-of-users-abandon-apps-after-one-use/#:~:text=App%20abandonment%20is%20on%20the,after%20one%20session%20is%20alarming." target="_blank" rel="noopener">21% of users abandon an app after a </a>single use. The most common causes for their bailout are the following:



<ul class="wp-block-list">
<li>Complex user experience with the user interface</li>



<li>Having expectations that aren&#8217;t met</li>



<li>Not seeing enough value after the first or second use</li>



<li>Technical flaws or bugs that make the user experience frustrating or annoying</li>
</ul>



Creating an intuitive onboarding experience requires thoughtful research, usability testing, and user-centered design principles—the foundation of our <a href="https://www.effectussoftware.com/ux-ui-design-and-development-services?utm_source=chatgpt.com" target="_blank" rel="noreferrer noopener">UX/UI Design and Development Services</a>, where we help businesses design digital products that improve engagement, retention, and long-term user satisfaction.



<h2 class="wp-block-heading">Tips for UX onboarding optimization</h2>



To reduce the chances of these things happening and eliminate any hesitancy about the application&#8217;s functionality, we advise implementing the following tips:



<h3 class="wp-block-heading">1. Make the first impact memorable</h3>



Create a &#8220;wow moment.&#8221; It is believed that attention spans last between 5 and 8 seconds, which means that that&#8217;s the amount of time we have to hook our users. There are plenty of ways to grab a user&#8217;s attention, but we prefer animations or short, catchy videos. 



An animation can be utilized to communicate the app&#8217;s purpose, how it works, or the problem it solves.



<h3 class="wp-block-heading">2. Learn by Doing</h3>



Learning by doing is known to be one of the most effective methods for retaining and understanding underlying concepts. Most of the best onboarding flows use this approach since it eliminates some of the most common doubts users have. 



An example of how to carry this out is to develop a screen with brief instructions that users can skip or complete to move on. The screen should not be overloaded with information or explanations. If you need a lot of text and illustrations to explain something, we recommend you rethink your UI and UX to simplify things. 



<h3 class="wp-block-heading">3. Make onboarding optional</h3>



Not all of our users are the same, so it is imperative to contemplate all possible use cases.&nbsp;



While some are more familiar with technology and applications and might already know what specific features are supposed to do, others may have no clue and want to learn more about them. To keep all users happy, we suggest making walkthroughs optional, so they can quit at any step of the process. One of the most common practices is including a &#8220;skip&#8221; button. 



<h3 class="wp-block-heading">4. Use Progressive Hints</h3>



The user should always know where they are standing and should have an idea of what&#8217;s coming ahead. To make this happen, you can include progressive visual hints or progress bars. These tell the user what has already been completed, what&#8217;s happening in the present, and what&#8217;s coming up next. These hints should be strategically placed and include an option to disable them. Guiding the user the first time is a straightforward way to reduce confusion and improve their experience, thereby optimizing UX onboarding. 



<h2 class="wp-block-heading">Onboardings we love</h2>



<h4 class="wp-block-heading">Linkedin</h4>



The LinkedIn app has a progressive onboarding flow that guides you through setting up your profile.<img loading="lazy" decoding="async" width="1024" height="672" class="alignnone wp-image-289 size-full" src="https://effectussoftware.com/blog/wp-content/uploads/2020/09/linkedin.png" alt="Linkedin Onboarding Optimization" srcset="https://blog.effectussoftware.com/wp-content/uploads/2020/09/linkedin.png 1024w, https://blog.effectussoftware.com/wp-content/uploads/2020/09/linkedin-300x197.png 300w, https://blog.effectussoftware.com/wp-content/uploads/2020/09/linkedin-768x504.png 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" />



Tinder



The app onboarding lets the user discover the app&#8217;s main features within seconds by showing existing use cases. 



<h4 class="wp-block-heading">Foursquare</h4>



This onboarding lets users use the app without signing up. This removes one of the most common pain points of apps. The app later shows messages in between to guide the user.



<h2 class="wp-block-heading">Conclusion</h2>



The user&#8217;s long-term relationship with the app is one of the hardest things for developers to achieve. First impressions matter, and they matter A LOT. UX onboarding optimization allows us to communicate brand relevance, introduce the main problems your product is solving, and explain some of the main functionalities. Creating an effective mobile app onboarding flow is key to keeping users engaged beyond the launch screen. Start applying the tips we&#8217;ve shared and see how your users will remain loyal.



<a href="http://www.effectussoftware.com/blog">Continue reading</a>

4 Ultimate Keys for UX Onboarding Optimization

Culture is very important in a Software Engineering Company broadly because it can make or break a business.



The company’s ability to achieve its goals and maintain productivity levels, as well as employee satisfaction, depends largely on its culture. This becomes even more important when organizations scale through <a href="https://www.effectussoftware.com/it-staff-augmentation-services?utm_source=chatgpt.com" target="_blank" rel="noreferrer noopener">IT Staff Augmentation Services</a>, where cultural alignment, collaboration, and shared ownership are essential for integrating external engineers into existing product teams. Regardless of its importance, it’s amazing how it’s completely overlooked or left unattended.



But…



<h2 class="wp-block-heading">What do we refer to exactly when we talk about a software engineering company’s culture?</h2>



Initially, it might seem quite abstract and somewhat difficult to define. The thing is, to start defining it, we must not conflate culture with other aspects of the software engineering company. Culture is not about office perks like free fruit or a meditation space. It does not equate to the company’s values either. A company’s culture, as Horowitz defines it, is about three things: the collective behavior of everyone in the organization, what people do when they’re not given a direction, and the organization’s way of doing things.



Company culture is a reflection of the leadership and work environment within it. The reason is that if it’s healthy, it can catapult a person’s career; if it’s bad, it may have a profoundly negative impact on the person’s learning and growth as a software engineer.



<h2 class="wp-block-heading">Is it crucial for the software engineering company’s success?</h2>



A company’s success depends on several aspects. A healthy culture can definitely help organizations achieve their goals and is crucial to their continued success. 



People in a healthy culture recognize that each role involved in developing a product is complex and requires specialized skills, preparation, determination, and knowledge to be effective. So, healthy cultures succeed with teams of people who have all the necessary skills to get the job done well.



People in a healthy culture are realistic about what they can achieve and know exactly what their role involves. They rely on data from previous experience to make sensible choices and commitments to other team members. They prefer to undercommit and overdeliver; their organization is crucial to the company’s success. 



<h2 class="wp-block-heading">Is there such a thing as a “bad” software engineering company culture?</h2>



Totally. A culture without a set of shared values, goals, or principles could be considered a bad culture. When people have different priorities or don’t see eye to eye on matters that are extremely relevant to the company’s success, such as project priorities, goals, and expectations, working together can become a nightmare.  



The culture provides a foundation for the decisions people make and the actions they take. If people are consistent in their decisions and actions, they’ll reinforce their culture. If decisions and actions are chaotic and inconsistent, those decisions would still be characteristic of the culture, but they do steer the wheel towards an unhealthy and unpredictable environment.



<h2 class="wp-block-heading">Ok, so…. What is a “healthy” software engineering company culture?</h2>



Let’s describe it by defining its <a href="https://blog.kevineikenberry.com/leadership-supervisory-skills/build-greater-team-member-commitment/" target="_blank" rel="noopener">three essential components of commitment</a> to the company:



<ol class="wp-block-list">
<li>A personal commitment. Each developer must be committed to creating high-quality products by performing effective practices.</li>



<li>An organizational commitment: Managers at all levels must provide the best possible environment in which software quality and on-time delivery are the main goals, and that allows each team member to achieve them successfully.</li>



<li>A team commitment: All members, as part of a whole, are committed to continuously improving their performance, thereby continuously improving the products they create.</li>
</ol>



These three commitments imply that team members should dedicate a certain amount of their effort not just to project work but also to learning how to work with each other, to training the skills they already have, and to the continuous improvement of their software development processes.



In a healthy culture, people share their knowledge and know their limits.&nbsp;



Mutual trust, generosity, and respect are characteristics of a healthy culture in a software engineering company. A free and open exchange of knowledge and ideas is most certainly a booster towards accomplishing the company’s goals. 



<h2 class="wp-block-heading">How can organizations start to improve their engineering culture?&nbsp;</h2>



Company members must start thinking about the characteristics of their culture. A good way to start is to create a shortlist of items that are fundamental when they work together to build software.



It is important that everyone in the organization has the opportunity to participate in this discussion. It is highly likely that not everyone agrees with every proposed principle. Nevertheless, in the end, most of the organization’s members should buy into some set of shared concepts. Everyone is affected by the culture, so it’s empowering when every member gets a say in shaping it.



Discussing and establishing shared principles, values, and attitudes is important for aligning team members. It supports decision-making, promotes consistency, and enables an organization to achieve its goals.



<a href="http://effectussoftware.com/blog">Continue reading our blog</a>

Why is Culture so Important in a Software Engineering Company?

<h2 class="wp-block-heading">What is the App Center?</h2>



App Center is a Microsoft tool that automates a mobile application’s lifecycle. It also includes different services to build, distribute, test, and even obtain reports of crashes in the cloud. As part of modern <a href="https://www.effectussoftware.com/custom-mobile-app-development-services">Custom Mobile App Development Services</a>, tools like App Center streamline CI/CD workflows, reduce manual deployment tasks, and enable engineering teams to ship high-quality mobile applications faster and more reliably.



This document’s main objective is to guide you through the necessary steps to deploy your code in an automated manner. This will let you automatically deploy when you push certain branches to your repository. 



<h3 class="wp-block-heading">Steps to deploy</h3>



Below is a detailed explanation of the steps required to deploy an application to both the Play Store and the App Store.



&nbsp;In the first place, you will need an existing application in the app center in order to carry out the different configurations. In this case, one will be created for Android and one for iOS.


<div class="wp-block-image">
<figure class="aligncenter"><img loading="lazy" decoding="async" width="998" height="232" src="https://effectussoftware.com/blog/wp-content/uploads/2020/04/Captura-de-Pantalla-2020-04-23-a-las-20.27.56.png" alt="apps" class="wp-image-255" srcset="https://blog.effectussoftware.com/wp-content/uploads/2020/04/Captura-de-Pantalla-2020-04-23-a-las-20.27.56.png 998w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/Captura-de-Pantalla-2020-04-23-a-las-20.27.56-300x70.png 300w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/Captura-de-Pantalla-2020-04-23-a-las-20.27.56-768x179.png 768w" sizes="auto, (max-width: 998px) 100vw, 998px" /></figure>
</div>






&nbsp;



After selecting &#8220;Add new app&#8221; the following screen will appear:


<div class="wp-block-image">
<figure class="aligncenter"><img loading="lazy" decoding="async" width="632" height="722" src="https://effectussoftware.com/blog/wp-content/uploads/2020/04/Captura-de-Pantalla-2020-04-23-a-las-20.27.42.png" alt="Add new app" class="wp-image-254" srcset="https://blog.effectussoftware.com/wp-content/uploads/2020/04/Captura-de-Pantalla-2020-04-23-a-las-20.27.42.png 632w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/Captura-de-Pantalla-2020-04-23-a-las-20.27.42-263x300.png 263w" sizes="auto, (max-width: 632px) 100vw, 632px" /></figure>
</div>






We need to: type in the name of the application, select the Release Type between the Production, Beta, and Store options, select the operating system for which it will be developed (in this case, we are going to create one for Android and another for iOS) and then choose the platform on which the project is developed. Finally, select &#8220;Add new app&#8221;.



Once the application is created in the App Center, the steps to deploy in the different stores are explained in detail. It is important to note that the first step explained in the document (Build) is not required for deployment, but it is recommended to automate the process.



<h3 class="wp-block-heading">Build</h3>



This section illustrates the necessary settings to Build your project in the App Center for both Android and iOS. The first thing you must do is to link the app to the project’s repository. To do so, go to the Build section and select the service where it is located. In our case, we will be using Bitbucket.


<div class="wp-block-image">
<figure class="aligncenter"><img loading="lazy" decoding="async" width="576" height="396" src="https://effectussoftware.com/blog/wp-content/uploads/2020/04/Captura-de-Pantalla-2020-04-23-a-las-20.27.34.png" alt="select a service" class="wp-image-253" srcset="https://blog.effectussoftware.com/wp-content/uploads/2020/04/Captura-de-Pantalla-2020-04-23-a-las-20.27.34.png 576w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/Captura-de-Pantalla-2020-04-23-a-las-20.27.34-300x206.png 300w" sizes="auto, (max-width: 576px) 100vw, 576px" /></figure>
</div>






After this, select the branch where you want to configure the Build and then press &#8220;Configure Build&#8221;.


<div class="wp-block-image">
<figure class="aligncenter"><img loading="lazy" decoding="async" width="566" height="350" src="https://effectussoftware.com/blog/wp-content/uploads/2020/04/Captura-de-Pantalla-2020-04-23-a-las-20.27.26.png" alt="Configuration" class="wp-image-252" srcset="https://blog.effectussoftware.com/wp-content/uploads/2020/04/Captura-de-Pantalla-2020-04-23-a-las-20.27.26.png 566w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/Captura-de-Pantalla-2020-04-23-a-las-20.27.26-300x186.png 300w" sizes="auto, (max-width: 566px) 100vw, 566px" /></figure>
</div>






&nbsp;



<h3 class="wp-block-heading">Configuration options</h3>



Build frequency: this option allows you to configure the build automatically each time a change is made on the selected branch or allows you to build your project manually.



Automatically increment build number (version code, for Android): This option automatically increments the build number. The last build number taken into account for increases corresponds to the build number in the App Center, not the one in the store.



This means you need to be extra careful when enabling this option if you already have a deployed version.



Distribute builds: enabling this option allows the app to be distributed to the store or to the collaborators assigned to the app after the build has been generated. To see how to do this, please go to the distribute section.


<div class="wp-block-image">
<figure class="aligncenter"><img loading="lazy" decoding="async" width="572" height="262" src="https://effectussoftware.com/blog/wp-content/uploads/2020/04/Captura-de-Pantalla-2020-04-23-a-las-20.26.22.png" alt="destribute builds" class="wp-image-251" srcset="https://blog.effectussoftware.com/wp-content/uploads/2020/04/Captura-de-Pantalla-2020-04-23-a-las-20.26.22.png 572w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/Captura-de-Pantalla-2020-04-23-a-las-20.26.22-300x137.png 300w" sizes="auto, (max-width: 572px) 100vw, 572px" /></figure>
</div>






Build scripts: This option lets us run custom scripts at specific points in the build process. The stages at which these scripts can be run are post-clone, pre-build, and post-build.



Post-clone: It runs immediately after the project is cloned. To run post-clone, add the script on the same level as appcenter-post-clone.sh.



Pre-build: It is executed before building begins. For apps developed in React Native, it is run before generating the source maps. To run pre-build, add the script to the project on the same level as appcenter-pre-build.sh.



Post-build: It is executed after the project build finishes and all corresponding files have been generated. To run post-build, add the script to the project on the same level as appcenter-post-build.sh.



Here you can upload source maps to a Bugsnag account to obtain reports on crashes that occur when using the corresponding build.



Below is an example of a possible post-build to upload the source maps to Bugsnag after the build is complete:


<div class="wp-block-image">
<figure class="aligncenter"><img loading="lazy" decoding="async" width="1370" height="100" src="https://effectussoftware.com/blog/wp-content/uploads/2020/04/complete-build-1.png" alt="complete build" class="wp-image-249" srcset="https://blog.effectussoftware.com/wp-content/uploads/2020/04/complete-build-1.png 1370w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/complete-build-1-300x22.png 300w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/complete-build-1-1024x75.png 1024w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/complete-build-1-768x56.png 768w" sizes="auto, (max-width: 1370px) 100vw, 1370px" /></figure>
</div>

<div class="wp-block-image">
<figure class="aligncenter"><img loading="lazy" decoding="async" width="998" height="884" src="https://effectussoftware.com/blog/wp-content/uploads/2020/04/complete-build-2.png" alt="" class="wp-image-250" srcset="https://blog.effectussoftware.com/wp-content/uploads/2020/04/complete-build-2.png 998w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/complete-build-2-300x266.png 300w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/complete-build-2-768x680.png 768w" sizes="auto, (max-width: 998px) 100vw, 998px" /></figure>
</div>






&nbsp;



<h3 class="wp-block-heading">iOS</h3>



Sign builds: You need to have this option enabled to run the app on a real device.


<div class="wp-block-image">
<figure class="aligncenter"><img loading="lazy" decoding="async" width="864" height="572" src="https://effectussoftware.com/blog/wp-content/uploads/2020/04/sign-builds.png" alt="Sign builds" class="wp-image-248" srcset="https://blog.effectussoftware.com/wp-content/uploads/2020/04/sign-builds.png 864w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/sign-builds-300x199.png 300w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/sign-builds-768x508.png 768w" sizes="auto, (max-width: 864px) 100vw, 864px" /></figure>
</div>


 
For this, a Provisioning Profile and a Certificate must be uploaded. Both must be created for distribution if you want to upload the build to the App Store or Testflight.



They can be obtained from the following <a href="https://developer.apple.com/account/resources/certificates/list" target="_blank" rel="noopener">link</a>.



<h2 class="wp-block-heading">Distribute</h2>



To distribute the app across different stores, we need to connect our account to the store where we want to deploy. It is necessary to have a first version uploaded to both Android and iOS in order to distribute it through the App Center. For this, we are going to Distribute -> Stores -> Connect to Store.



<h3 class="wp-block-heading">iOS</h3>



In this case, App Store Connect will be selected, and then we will proceed to authentication. Once authenticated, the app previously created in iTunes Connect is selected.


<div class="wp-block-image">
<figure class="aligncenter"><img loading="lazy" decoding="async" width="620" height="476" src="https://effectussoftware.com/blog/wp-content/uploads/2020/04/connect-assign-app.png" alt="connect assign app" class="wp-image-247" srcset="https://blog.effectussoftware.com/wp-content/uploads/2020/04/connect-assign-app.png 620w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/connect-assign-app-300x230.png 300w" sizes="auto, (max-width: 620px) 100vw, 620px" /></figure>
</div>






&nbsp;



Once connected to the store, we go to the Releases section in Distribute and select the one we want to upload.


<div class="wp-block-image">
<figure class="aligncenter"><img loading="lazy" decoding="async" width="1370" height="546" src="https://effectussoftware.com/blog/wp-content/uploads/2020/04/Release.png" alt="Release " class="wp-image-246" srcset="https://blog.effectussoftware.com/wp-content/uploads/2020/04/Release.png 1370w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/Release-300x120.png 300w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/Release-1024x408.png 1024w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/Release-768x306.png 768w" sizes="auto, (max-width: 1370px) 100vw, 1370px" /></figure>
</div>






&nbsp;



Then we select Store, and option 1:&nbsp; Production if you want to upload it to the App Store or option 2: App Store Connect Users if you want to upload it to iTunes Connect.


<div class="wp-block-image">
<figure class="aligncenter"><img loading="lazy" decoding="async" width="710" height="760" src="https://effectussoftware.com/blog/wp-content/uploads/2020/04/publish-testflight.png" alt="Publish to testflight" class="wp-image-245" srcset="https://blog.effectussoftware.com/wp-content/uploads/2020/04/publish-testflight.png 710w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/publish-testflight-280x300.png 280w" sizes="auto, (max-width: 710px) 100vw, 710px" /></figure>
</div>


 
Select “Next” until reaching Review and then select “Publish”.



<h3 class="wp-block-heading">Android</h3>



In this case, Google Play will be selected and then we will proceed to authentication. In order to do this, you need a security code that must be requested to the creator of the Google Play account to which the applications are deployed.



To obtain this code, we need to create a Google service account that lets us interact with the Google API without using our own credentials.


<div class="wp-block-image">
<figure class="aligncenter"><img loading="lazy" decoding="async" width="878" height="996" src="https://effectussoftware.com/blog/wp-content/uploads/2020/04/Captura-de-Pantalla-2020-04-23-a-las-20.16.23.png" alt="authentication" class="wp-image-244" srcset="https://blog.effectussoftware.com/wp-content/uploads/2020/04/Captura-de-Pantalla-2020-04-23-a-las-20.16.23.png 878w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/Captura-de-Pantalla-2020-04-23-a-las-20.16.23-264x300.png 264w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/Captura-de-Pantalla-2020-04-23-a-las-20.16.23-768x871.png 768w" sizes="auto, (max-width: 878px) 100vw, 878px" /></figure>
</div>






Then we type in the App Package Name and press Assign.


<div class="wp-block-image">
<figure class="aligncenter"><img loading="lazy" decoding="async" width="904" height="1032" src="https://effectussoftware.com/blog/wp-content/uploads/2020/04/connect-to-store.png" alt="connect to store" class="wp-image-243" srcset="https://blog.effectussoftware.com/wp-content/uploads/2020/04/connect-to-store.png 904w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/connect-to-store-263x300.png 263w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/connect-to-store-897x1024.png 897w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/connect-to-store-768x877.png 768w" sizes="auto, (max-width: 904px) 100vw, 904px" /></figure>
</div>






Once the app is linked to the Google account, it can be deployed to the Play Store. What needs to be done is similar to what we did for iOS. First, we must select the Release we want to upload, then indicate whether to deploy as Alpha, Beta, or Production.


<div class="wp-block-image">
<figure class="aligncenter"><img loading="lazy" decoding="async" width="836" height="948" src="https://effectussoftware.com/blog/wp-content/uploads/2020/04/Publish-to-store.png" alt="publish to store" class="wp-image-242" srcset="https://blog.effectussoftware.com/wp-content/uploads/2020/04/Publish-to-store.png 836w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/Publish-to-store-265x300.png 265w, https://blog.effectussoftware.com/wp-content/uploads/2020/04/Publish-to-store-768x871.png 768w" sizes="auto, (max-width: 836px) 100vw, 836px" /></figure>
</div>






We then proceed to press the “Next” button until reaching Review and then we press “Publish”.



<a href="http://effectussoftware.com/blog">Continue reading our blog.</a>

Knowledge grows when shared

All blog posts

Knowledge grows when shared

All blog posts

Hit subscribe to stay in the loop!

Hit subscribe
to
stay in the loop!