DEV Community: Kevin Ilondo

Display images dynamically (from a variable) in React Native

Kevin Ilondo — Thu, 30 Sep 2021 20:25:18 +0000

You are probably working on a mobile and you want to design images that you got from an API or maybe the path to that image is stored using React Context API, but there is one problem: whenever you do this

const my_variable = '../assets/image.jpg';
<Image
source={require(my_variable)}
/>

You get an error.
The solution to this problem is to require the file in the variable like this

const my_variable = require('../assets/image.jpg');
<Image
source={my_variable}
/>

Doing this will definitely solve your problem and If you have any question regarding React Native or this specific post, feel free to ask, who knows, maybe other developers are going through the same problem and discussing certain issues here might help a lot of people.

8Bit style Retro mechanical keyboard
Noise canceling headphones with Alexa built-in

What my Android app taught me

Kevin Ilondo — Thu, 30 Sep 2021 20:17:59 +0000

I released an Android app early this year, and I'm going to write a small post about what this app really taught me.

I am not bragging or claiming that I am the best, I just want to share my experience as a developer hoping that it will help those who are also working hard out there to release apps or build side projects.

Simple and useful features are always better than complex and unnecessary features

As developers, we usually tend to overcomplicate things because we want to play around with the latest framework, or blow people's mind with amazing features that are probably not needed by the user.

No matter how stupid or 'simple' you think your app is, if you can, just release it

Yes the title says everything, I honestly never believed that my app was gonna get downloaded at all, but I felt like it was a good idea to release it on Android because it was not going to cost me a lot of money but also I thought that even though it was an app that wasn't fancy in terms of features, it could still be used by a couple of people and I remembered that I learned how to code because I believed that I would be helping people by creating useful softwares, so as long my app could help at least one person out there, why not release it? I did and it was downloaded 3000 times and got over 60 reviews in less than a year.

Conclusion

This post is just meant to motivate those who work on personal side projects for fun or for whatever reason they might have. If you believe that your app idea is something people can use to make their lives easier, release it, let the world play around with your work, we never know what you might learn in the process.

Real time group chat app built with PHP/Laravel, VueJs and Pusher

Kevin Ilondo — Mon, 03 May 2021 19:04:44 +0000

I built a group chat app using Laravel, I wanted to share it with the community to inspire those who are looking for side projects ideas.

link to the code: www.github.com/kevilondo/group-chat
link to the video: https://www.linkedin.com/posts/kevin-ilondo-002a411bb_programming-webdev-webapp-activity-6793932838757576704-Vh0Z

How I learned React JS and React Native by building fun project

Kevin Ilondo — Wed, 03 Mar 2021 14:55:19 +0000

I have always wanted to learn React, but I never had the motivation the learn it, well, let's say I easily got bored 😑, but I had this idea of apps that I wanted to build and I thought that was going to be the best way to learn more about React and React Native!

Referencer App

This app helps you cite a book, online article or any other source you used for your paper, using the Harvard referencing style. This app thought me how to use React Navigation, string manipulation, states, React hooks, etc
The name of the app is Referencer-Harvard Style

Super Hero Roster

This app gives you all the information you need about comic book characters. It uses an API called Superhero. Here is a link to the github repo, you are more than welcome to clone it and use it for learning purpose.

https://github.com/kevilondo/super-hero-roster

Quiz App for Naruto and Anime fans

I created this app to practice what I already learned so far with my previous apps, the only difference is that I built the API myself with PHP and Laravel. If you want to check it out,
The name of the app is Shinobi Quiz

I have learned a lot by building these apps, and I think this way of doing things is really good for those who are getting started in React and React Native development.

The moral of the story is, try to have fun while coding, build apps that might be useful to you, something you and/or your friends could use on a daily basis if possible. It will boost your confidence and help improve your coding skills.

Network Request Failed/Network Error in React Native using Laravel API and Android emulator

Kevin Ilondo — Fri, 11 Dec 2020 14:54:39 +0000

If you are currently working on an app with React Native and you are using Laravel as your backend, you have probably encountered this problem.
And this article will help you solve this problem with just ONE SIMPLE TRICK.

SOMETIMES THIS PROBLEM IS CAUSED BY HOW YOU START YOUR LARAVEL APP

We all know how to start a Laravel server with the simple php artisan serve command and that’s the problem.
By starting your Laravel app like that it creates a link for your app which is localhost:8000 (the port may be different for you, it might be 3000, 8080 or anything else but we will use 8000 for this tutorial).
When making an HTTP Request with React Native, there is some kind of conflict because your Android app is run on an emulator which uses localhost too, and instead of sending the request to the localhost on your computer, it sends the request to the phone itself but with a different port and that is why you are getting this error.

THE TRICK THAT HELPED ME

Microsoft Windows [Version 6.3.9600]
(c) 2013 Microsoft Corporation. All rights reserved.

D:\xampp\htdocs\projects\laravel\blog>php artisan serve --host 10.10.10.2 --port="8000"
Laravel development server started: http://10.10.10.2:8000

Just start the server by giving an IP address and a port
It’s just that simple! Start your app as usual but don’t forget to give an IP address and a port, this will help you solve the Network Request Failed error.

NOTE: Replace 10.10.10.2 with your own IP Address, this is just an example.

//with axios
await axios.post('http://10.10.10.2:8000/api/user/login', data, headers)
    .then(res => {
      console.log(res.data)
    })
//with Fetch
await fetch('http://10.10.10.2:8000/api/user/login', {
method: "POST",
headers: headers //put your headers,
body: body //put the body here
})

And on your mobile app, make sure to use the correct URL in your request.
Make sure that CORS is enabled in your backend to avoid errors related to CORS. Next time I will make make a detailed post about how to enable it and how to solve issues related to CORS.

CONCLUSION

Start your Laravel app and enter your IP address and a port
Use the URL in your HTTP Request.
That’s it, I hope this post was useful to you and happy coding!