DEV Community: Nomanoff

How to create a SplashScreen in React Native (iOS/Android)

Nomanoff — Fri, 13 Oct 2023 08:45:35 +0000

For this tutorial I am going to be using a third-party library called react-native-bootsplash

Install the library: yarn add react-native-bootsplash

1.1. for iOS installation go to ios/ directory and run pod install

2.You can use the following command to generate the splash screen with the specified options:

npx react-native generate-bootsplash app/assets/my_app_logo.png \
  --background=#FFFFFF \
  --logo-width=150 \
  --assets-output=app/assets \
  --platforms=android,ios,web \
  --flavor=main

In this command:

app/assets/my_app_logo.png is the path to your logo file.
--background=#FFFFFF sets the background color to white (#FFFFFF).
--logo-width=150 specifies the logo width as 150 pixels.
--assets-output=app/assets specifies the output directory for generated assets.
--platforms=android,ios,web generates assets for Android, iOS, and web.
--flavor=main is the Android flavor build variant (where your resource directory is).

After running this command, the "react-native-bootsplash" tool will generate the necessary assets and configurations for your splash screen. Make sure to verify that the generated assets are placed in the appropriate folders within your project, especially in the Android and iOS directories.

iOS further installation:

iOS Integration for React Native Splash Screen

3.1 Open the AppDelegate.mm file in your iOS project located in the ios/YourProjectName directory.

3.2 Import the "RNBootSplash" header at the top of the AppDelegate.mm file:

   #import "RNBootSplash.h"

3.3 Add the following code before the @end of the AppDelegate.mm file:

- (UIView *)createRootViewWithBridge:(RCTBridge *)bridge
                          moduleName:(NSString *)moduleName
                           initProps:(NSDictionary *)initProps {
  UIView *rootView = [super createRootViewWithBridge:bridge
                                          moduleName:moduleName
                                           initProps:initProps];

  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView]; // Initialize the splash screen

  return rootView;
}

now after that there will be a file generated called: Bootsplash.storyboard find it in your finder and drag and drop it in your xcode projects right where the AppDelegate.mm file

Create folder references:

Set BootSplash.storyboard as Launch Screen File:

Android: follow these instructions: Android installation guide

Once it is done, you can import BootSplash from react-native-bootsplash and use it like bolow if you are using React Navigation:

<NavigationContainer
      onReady={() => {
        BootSplash.hide();
      }}>
      <AuthNavigator />
    </NavigationContainer>

I hope it was useful!

Recovering a Lost Keystore File for Android App Signing

Nomanoff — Mon, 06 Feb 2023 02:17:17 +0000

Losing your keystore file can be a nightmare for any mobile developer. That's exactly what happened to me when I deleted my React Native project from my Mac and cloned it back from GitHub. To my horror, the my-upload-key.keystore file, which I used to sign and publish my app on the play store, was missing. I tried generating a new one, but the play store rejected it, saying it didn't match the previous build key. I was stuck and didn't know what to do next.

I had a few options to consider, but I couldn't create a new .keystore file as that would take too much time and I didn't have a backup 🤦‍♂️. My last option was to find a way to restore my .keystore file. After a lot of searching and grinding, I discovered that I had been keeping a .jks file somewhere in my mac 😅, and I found out that it could be used to restore the .keystore file.

Converting a .jks file to .keystore is a straightforward process that can be done using the keytool command in the terminal or command line. First, navigate to the folder where the .jks file is located using the cd command. Then, run the keytool command with the necessary arguments to convert the .jks file to a .keystore file.

keytool -importkeystore -srckeystore upload-keystore.jks -destkeystore my-upload-key.keystore -srcstoretype JKS -deststoretype PKCS12

Note that, in this command, you need to replace "upload-keystore.jks" with the name of your .jks file, and "my-upload-key.keystore" with the desired name of your new .keystore file. The command will prompt you to enter the password for the .jks file, and then it will generate the new .keystore file. If you don't know the password and the name you can view it from your android/gradle.properties file. This is because when you first set up your React Native project you must have generated it. It will look something like this:

MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore
MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
MYAPP_UPLOAD_STORE_PASSWORD=*****
MYAPP_UPLOAD_KEY_PASSWORD=*****

After generating the new .keystore file, I was able to successfully build my app and publish it on the Google Play Store 🎉.

In conclusion, if you ever face a similar situation, don't panic. Instead, check if you have any .jks files that could be used to restore your .keystore file. This simple solution saved me a lot of time and hassle, and I hope it helps you too!

how to udpate iTerm theme

Nomanoff — Fri, 03 Feb 2023 08:52:08 +0000

First dowload iterm2

brew install --cask iterm2

https://iterm2.com/index.html

Oh My Zsh

install with curl

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Powerlevel9k / Powerlevel10k

https://gist.github.com/kevin-smets/8568070

and then edit ~/.zshrc and set ZSH_THEME="powerlevel10k/powerlevel10k". To open the the ~/.zshrc write nano ~/.zshrc it should open it and edit and save the file and open a new tabe and it will start the wizard

and can use one of these colors there like I use dracula

https://iterm2colorschemes.com/

If it didn't work then follow this link https://gist.github.com/kevin-smets/8568070

Good luck!

Open the React Native debugger on Android without shaking.

Nomanoff — Wed, 07 Dec 2022 04:07:14 +0000

So, I am sitting in a class with a bunch of students and I wanna try to code my app. However, every time I want to debug I have to shake the phone which is weird during class time so I had to research how to open the debugger without shaking.

Here is how:

First, make sure you have the adb tool installed on your computer. If you don't have it, you can download and install it as part of the Android SDK (see https://developer.android.com/studio/command-line/adb for more information).
Connect your Android device to your computer using a USB cable.
Open a terminal or command prompt on your computer, and navigate to the directory where the adb tool is installed (usually something like C:\Users\username\AppData\Local\Android\Sdk\platform-tools on Windows, or ~/Library/Android/sdk/platform-tools on macOS).
In the terminal or command prompt, run the following command to list the connected devices:

adb devices

This command should output a list of the connected devices, including your Android device. The output should look something like this:

List of devices attached
emulator-5554   device
5e51b22d    device

In the terminal or command prompt, run the following command to open the debugger on your device:

adb -s 5e51b22d shell input keyevent 82

Replace 5e51b22d with the actual device ID of your Android device from the output of the adb devices command. This command will send a key event to the device with the code 82, which is the code for the "menu" key. On most Android devices, this will open the debugger tool.

Alternatively, instead of using the adb tool, you can also use the React Native Debugger app (https://github.com/jhen0409/react-native-debugger) to open the debugger on your device. This app provides a button that you can press to open the debugger, so you don't have to use the adb tool or shake the phone.

I hope this helps! Thanks!

Bye, bye 10FastFingers! Hello, Monkeytype!

Nomanoff — Tue, 15 Nov 2022 14:07:35 +0000

As a developer, I have a special passion for touch-typing(- the practice or skill of typing using all one's fingers and without looking at the keys). I believe that being able to type faster improves one's productivity, especially if you write code a lot. I have been practicing touch-typing since 2019. When I saw students at my university typing so fast without looking at their keyboards I was amazed and really wanted to be able to do it myself. Initially, I started with keybr.com which helped me learn to type without looking at my keyboard.

Learning to type fast is such a slow process. You need to be patient and consistent. It took me a lot of practice just to memorize the locations of letters on the keyboard. But I tried to be consistent and practiced whenever I could.

And then, I found out about 10fastfingers.com which defines itself as a website for testing & improving one's typing speed through free typing games.

I stayed at 10fastfingers longer. I used to practice almost every day so much that my roommate used to complain about the keyboard noise I was making (Because I used to practice on a cheap and loud keyboard). After getting so many complaints from my roommate, I convinced myself to buy Magic Keyboard by dear Apple so that I wouldn't make too much noise. Plus, it was my dream keyboard too.

I was(still am) a member of 10fastfingers for more than two years. During this time I have taken 2,550 tests while typing almost 135,000 words. I wasn't very consistent but when I was, boy, I was spending hours and hours taking typing tests. My highest score was 81 WPM (words per minute) which is not that impressive but for me, it really is. Below are some of my stats:

I really loved 10fastfingers and will continue using it (occasionally). However, it is time to change.

For the past 3 months, I have been using Monkeytype which is also a touch-typing website featuring many test modes but much much better. It is really fun. The website is clean and fast. The UI is also very pleasant to look at. It gives more flexibility for users than 10fastfingers. Possible to set 15, 30, and 60 (also 120) seconds for a test. Customizable word types and characters. Surprisingly, it is open-source. I highly recommend it ✅.

So far I have taken more than 500 tests spending 5 hours on the website. I am almost addicted to it. Here are some of my stats so far:

In conclusion, I will continue to improve my typing skills and waste more and more time on Monkeytype.

Thanks for reading thus far. Since you made it here have a joke: "Dear Math, grow up and solve your own problems." See you on the next one 😎.

TikTok foydalanuvchilari uchun ogohlantirish ⚠️

Nomanoff — Wed, 24 Aug 2022 13:19:00 +0000

TikTok-ning ilova ichidagi brauzeri parollar va kredit kartalarni o'z ichiga olishi mumkin bo'lgan barcha tugmalar va klaviatura kiritishlarini kuzatish uchun kodni kiritadi. Bu nima degani? Ya'ni siz TikTokning o'zini "in-app" brauzeridan foydalangan holda amalga oshirgan barcha harakatlaringizni TikTok o'ziga saqlab qoladi.

TikTok iOS ilovasida istalgan havolani ochganingizda, u ularning ilova ichidagi brauzerida ochiladi. Veb-sayt bilan o'zaro aloqada bo'lganingizda, TikTok barcha klaviatura yozuvlariga (jumladan, parollar, kredit karta ma'lumotlari va h.k.) va ekrandagi har bir teginishga, masalan, qaysi tugmalar va havolalarni bosishingizga obuna, ya'ni, kuzatib boradi.

Quyida, TikTok app tomonidan bajariladigan barcha JavaScript buyruqlar ro'yxati:

Ushbu topilmalar inappbrowser.com yordamida aniqlangan va bir necha OTMlarda rossa aylangan. Forbes.com xabariga ko'ra, TikTok rasmiyi ushbu topilmalarga izoh qoldirgan. Ya'ni, ular bu JavaScript codelarini foydalanuvchilarning foydasi uchun yozishgan va ular ushbu malumotlarni hech qanday yomon maqsadda ishlatishmasligi ni aytgan.

Shaxsan men bunga ishonmayman va bu bayonot rost bo'lganda ham kelajakda bu malumotlar ishlatilmasligiga hech kim kafolat bera olmaydi deb o'ylayman.

inappbrowser.com asoschisi nafaqat TikTok balki boshqa mashxur ilovalar haqida ham ajoyib maqolalar yozgan. Masalan Instagram, Facebook va hk. Ingliz tilini biladigan qiziqsa o'qib ko'rishingiz mumkin:

Link:
iOS Privacy: Instagram and Facebook can track anything you do on any website in their in-app browser

How to add Redux Toolkit into React Native

Nomanoff — Wed, 27 Jul 2022 05:04:18 +0000

In this post I wanna share how to add Redux Toolkit into an existing React Native project.

Redux Toolkit is available as a package. Just open your project folder with terminal and use below commands:

If you are using NPM:

# NPM
npm install @reduxjs/toolkit

or YARN:

# Yarn
yarn add @reduxjs/toolkit

Now, inside your project folder create a folder named redux which will have a file called store.js:

This is how I created the folder structure. This isn't a convention or anything. It is just my preference.

Inside store.js write the following:

import {configureStore} from '@reduxjs/toolkit';

export const store = configureStore({
  reducer: {},
});

We also need to create a folder for our redux slices. slices folder will hold your redux toolkit reducers.

For the sake of this post I created a sample userSlice reducer which sets an id of a user.

import {createSlice} from '@reduxjs/toolkit';

const initialState = {
  id: null,
};

// Setting up user slice (redux-toolkit)
// All the magic happens here, lol.
export const userSlice = createSlice({
  name: 'user',
  initialState,
  // The `reducers` field lets us define reducers and generate associated actions
  reducers: {
    setUserId: (state, action) => {
      state.id = action.payload;
    },
  },
});

export const {setUserId} = userSlice.actions;

// The function below is called a selector and allows us to select a value from
// the stateSelectors can also be defined inline where they're used instead of
// in the slice file. For example: `useSelector((state: RootState) => state.counter./// value)`
export const selectUser = state => state.user;

export default userSlice.reducer;

Now, we need to import and add the userSlice to the redux store which is inside store.js file:

import {configureStore} from '@reduxjs/toolkit';
import userSlice from './slices/userSlice';

export const store = configureStore({
  reducer: {
    user: userSlice,
  },
});

Redux store is done ✅. Let's add this store to our app, shall we? But before that we need to add react-redux library to be able to use redux inside our React Native app.

# If you use npm:
npm install react-redux

# Or if you use Yarn:
yarn add react-redux

After installing react-redux, we need to link our redux store to our React Native. For that you have to add the following code to your App.js file:

import * as React from 'react';
import {Text, SafeAreaView} from 'react-native';
import {Provider} from 'react-redux';

import {store} from './utils/redux/store';

function App() {
  return (
    <Provider store={store}>
      <SafeAreaView>
        <Text>Hello World</Text>
      </SafeAreaView>
    </Provider>
  );
}

export default App;

Congratulations 👏! You have successfully linked the redux store to your React Native app 🔥.

Now, you can read more about how to use your reducer (or slice in redux-toolkit) at the Redux Toolkit docs which I will leave a link.

Redux Toolkit Quick Start link

Thanks for reading! If you have any questions leave in the comments.

How to change React Native app name (iOS / Android)

Nomanoff — Tue, 26 Jul 2022 10:03:00 +0000

In the example below I have a sample app that I named owler_franchise in the setup process.

Now I want to change that to Owler Franchise.

iOS

For iOS, go to ios folder and find the folder named after your project name.
In my case I called it owler_franchise. Inside that folder find the Info.plist file.

Inside Info.plist file replace the value after <key>CFBundleDisplayName</key> to your app name.

For my example, I changed it to Owler Franchise.

That's it for iOS 👍.

Android

For Android: Go to the following folder in order: android > app > src > main > res > values and open strings.xml file, replace the <string name="app_name"> tag's value.

Again, in my example, I changed it to Owler Franchise:

That's it for Android too ✅.

Thanks for reading!

If you like this post, then follow me on twitter. You will be bombarded with coding memes 😁.

My twitter page 👉 @nmnjnv

Web Dasturlashda Matematika (Part 2)

Nomanoff — Sat, 28 May 2022 09:27:24 +0000

Birinchi postimiz Arifmetika 🧮, ya'ni, Web dasturlashda arifmetikaning qaysi mavzularini o'rganish haqida bo'lgan edi 👉 link. Ushbu post esa Geometriya haqida.

Geometriya

Geometriya - matematikaning nuqtalar, chiziqlar, sirtlar, qattiq jismlar va yuqori o'lchamli analoglarning xossalari va munosabatlari bilan bog'liq bo'lgan bo'limi.

Muhim bo'lgan mavzular 📌:

✧ 2-D shakllar ✧
❍ To'g'ri chiziq
❍ uchburchak
❍ To'rtburchak
❍ kvadrat

...

❍ Doira
❍ ellips
❍ Egri chiziq

✧ 3D shakllar ✧
❍ kuboid
❍ Sfera
❍ Silindr
❍ Konus

✧ Transformatsiya ✧
❍ Masshtab
❍ Aylantirish
❍ Egrilik

Asosan nima uchun kerak bo'ladi 🤔

➀ Shakllar grafik dizaynlarda va UIlarda qo'llaniladi. ✅

➁ Shaklni o'zgartirish juda tez loyihalashda muhim ahamiyatga ega. Bu animatsiyada ham juda muhim.

➂ CSS yozishda geometriya juda ham muhim hisoblanadi. Geometriyada olgan bilimingiz Websaytda joylashgan shakillarni boshqara olishingiz va ularni istalgan ko'rinishda ifodalashingizda juda kerakli bo'ladi.

Geometriya, ayniqsa, frontend dasturchilari uchun foydali. Shuning uchun agarda siz frontda(frontend dasturchi) yoki UIda (dizayner) da ishlamoqchi bo'lsangiz Geometriyaga befarq bo'lmang.

Web Dasturlashda Matematika (Part 1)

Nomanoff — Sat, 21 May 2022 04:54:34 +0000

"Dasturchi bo'lish uchun qay darajada matematikani bilishim kerak?" - savoliga javob tariqasida ushbu post(lar)ni yozishni istadim. Bu postlar matematikadagi qaysi mavzular Web dasturlash yo'nalishida ko'proq kerak bo'lishiga oydinlik kiritib berish maqsadida yozib boriladi.

Birinchi postimiz Arifmetika 🧮, ya'ni, Web dasturlashda arifmetikaning qaysi mavzularini o'rganish haqida bo'ladi ✅

Arifmetika o'zi nima? Arifmetika - bu matematikaning "sonlarni o'rganish" bilan shug'ullanadigan bo'limi.

Arifmetikaning barcha dasturlash yo'nalishlarida o'ta muhim mavzulari:

Qo'shish
Ayirish
Ko'paytirish
Bo'lish
Modul
Eksponentsiya
Logarifm
>, <, =>, <=, = va hk.

Bular, shubhasiz, kodning aksariyat qismida talab qilinadigan eng asosiy operatsiyalardir. Bularni bilish nafaqat Web dasturchi uchun balki barcha dasturchilar uchun muhimdir.

Arifmetikadagi yana qaysi mavzular kerakli deb o'ylaysiz? Izohlardi yozib qoldiring!

P.S. Keyingi postlarda matematikaning boshqa mavzularini web dasturlashdagi o'rni haqida yozib boraman إن شاء الل

"Programs are meant to be read by humans and for computers to execute, right?"

Nomanoff — Sun, 13 Feb 2022 02:00:36 +0000

So I am on codewars (a coding practice site for programmers) solving coding challenges for fun and then I come across a question that is a little bit harder than usual 🤨.

I tried multiple solutions, ate some snacks 🍿, had a bathroom break 🚽 (which played a significant role in solving the question later), read some blogs 💻, googled (totally normal 😅), but the tests were still failing 😬.

Eventually, maybe 30 mins later, I finally solved the problem 💪. I submitted my answer which was around 10 lines (lines don't matter but still). Then, I saw the best answer from the community that solved the problem in just one line 👀. ONE LINE 😳. With pure math 🧮. I was mind-blown 🤯.

Even though it was a correct answer and had many upvotes, many people (me included) have pointed it out that it was hard to read and understand for mainstream developers. For me, this is normal. I don't feel bad about my skills in cases like this, however, for beginners it might be a little upsetting that they couldn't come up with such solutions. To those who are feeling like that, I would say, don't feel frustrated. This is totally normal. One line or 10 lines, it does not matter. What matters is that the code you wrote works, readable and understandable. This is my opinion.

What is your take in this case? At the end of the day, programs are meant to be read by humans and only for computers to execute, right?

Anyway, to give you an idea how insane the answer was just read the comments 😅:

Emoji Inside Markdown?

Nomanoff — Sat, 26 Dec 2020 05:01:27 +0000

When I was looking for emoji short-codes for markdown e.g. smiley 😃 , I found some emoji cheat-sheets that were not searchable and easy to use. You would have to scroll through an entire page, select the code text with the cursor and then copy to use it inside markdowns. Too much work, right?.

Why can't I have a single-page website just to search and copy emojis? So, a brother of mine suggested: Why don't you yourself make a small website just for these shortcodes which should be simple, searchable, and easy to copy-paste anywhere?

I took his advice seriously and built this open-source website called emojis.ninja with React.js which got a lot of upvotes on react.js community. Here you can Search and Copy any emoji short-code with just One CLICK and use anywhere inside Markdown environments.

Bookmark it and feel free to contribute here: Project repo

Thanks for reading!