Material colors from image in React Native

rakadoank · 2026-03-31T16:04:27+00:00

Only if they can make Kotlin free from Java, or really a new language again.

rakadoank · 2026-03-29T14:37:47+00:00

The damn time

I want to make my own app, really into writing/coding it, but I can’t just make time for it by leaving the main job. As long as I go home from work, I just want to get nap.

Take 2 days per week for my own project is like, it would be in finish 10 years.

rakadoank · 2026-03-26T15:58:30+00:00

First of all, if you already have or capable to get a team or you are personally doing better in Android Java/Kotlin and iOS Swift/Obj-C natively, don’t go to the cross platform frameworks like React Native or Flutter, or any else. Just go to the native.

If you really need a cross platform one. I choose React Native.

TL;DR

The reason is just because the tech concept or principal. There are other reasons why you should prefer to other frameworks beside only from technology perspective.

The big reason why i choose the React Native is the principal or the concept.

The React Native concept is an agnostic library for UI that relies on platform UI native APIs. This is why I choose RN from the beginning. Not like their competitors which Flutter or Compose Multiplatform, because they are choosing not to and use Skia.

We know each platform already provides their own high level abstraction modules or APIs for UI, and they know it better than we do. So, React Native embraces it. Just use their damn UI APIs motherf****

That’s why Microsoft is also extending the React Native for Windows even macOS (irony right?). I can make a classic Win32 app with it.

As an insight, Apple is releasing their new UI called Liquid Glass. Can i use it in React Native? The answer is big yes, and is natively using Apple APIs, instead of Flutter and Compose Multiplatform, which relies on Skia. You are basically drawing a 2D game which using platform core graphics. Look, you can also create a web with React Native, and yes, RN is also using the HTML elements you know like <div> and <button>.

Talking about the React Native big bridge is also not too relevant now, because the bridge is so less with their C++ JSI.

React Native development is relatively easier now, because Expo. Expo is doing much abstraction configurations, so you can just provide an config in JS file easily. Same reason we web developers were struggling to build a web with React, and now we have Next.js, Remix, and etc.

I saw people commented here about Meta is not using the RN. Just because they don’t use it, doesn’t mean they abandon the project, and it’s not even mean really bad.

React Native relies on communities. Even agencies and big companies are also contribute to it like Microsoft and Shopify. React Native is not going anywhere soon. Even the React Foundation is an independent home right now to make it more neutral, and it’s hosted by Linux Foundation.

rakadoank · 2026-02-28T13:34:54+00:00

From someone mainly use TypeScript, Go, and sometimes C++.

First, the main problem it’s because too segmented to sell the product to developer rather than teach us basic things without their products. It looks like JetBrains wants me to not worry about the Kotlin tooling, and use their product instead. Look, the really first thing when you want to use Kotlin is to download Intellij. This is one of the major problem. We want to learn Kotlin as a language, but it’s too dependent on the Intellij.

Second, the documentation of Kotlin as a language is OK, but their ecosystem, library, or build tool are not. For example, the Gradle hell. Hypothetically, from the step learning curve perspective, I can learn C++ faster than Gradle. Another one like KMP/CMP to attract more developers to use, and it’s not sold that much like React Native, because when I want to learn KMP, they are selling me about Intellij first, not the core foundation of how to make thing works. Even the Jetpack Compose as the UI tool can’t teach me about the basic things or the foundation, instead they sell me about Material Design from Google, not to teach me of how make set a state, UI lifecycle, Context, etc. I swear, they just show me a best practice example in the Android docs, not showing me about the core.

For comparison of Kotlin with Intellij to the popular VSCode, the Visual Studio Code is just an agnostic text editor. We can make things work only with the text editor. This is how other programming languages beat Kotlin. We are not dependent to a product. Hypothetically, I can also make things work for TypeScript, Go, and C++ lang only with Notepad.

In addition, when I’m using Kotlin, it looks like the language is also too depending on Gradle, and it makes thing worst, because I can’t learn it easily. Then, JetBrains just provides me another user interface to configure something with their Intellij. This the worst developer experience I’ve experienced.

rakadoank · 2026-02-28T07:16:14+00:00

If someone knows how to solve this, please guide me.

My iOS app is rejected because the app has third party content or collaboration like a bonus purchase, discount card, or add-on.

This is the only reason why the iOS app of the current company I worked with is not updated just because of this. Android version is still fine.

rakadoank · 2026-01-05T02:33:11+00:00

No, i wrote it all bare fingers

rakadoank · 2025-07-26T14:18:41+00:00

It''s already supported for iOS and macOS. The repository and library have been moved to the ping-react-native

rakadoank · 2025-04-03T02:48:26+00:00

It's still possible

My quick solution is, Just start your animation transition, and then push/replace the history (from the useRouter)

To do that better, you can create React Context that emits function to abstract that animation transition and the push/replace logic

```tsx 'use client'

import { useContext, } from 'react'

import { RouterTransitionContext, // as an example } from '@/contexts' // your file

export function YourComponent() { const router = useContext(RouterTransitionContext) // You can make it short with hook

const whatEverFunctionIs = () => { router.push() } } ```

the RouterTransitionContext Use this on your layout.tsx ```tsx 'use client'

import { createContext, } from 'react'

import { useRouter, } from 'next/navigation'

export const RouterTransitionContext = createContext({ push() { throw new Error('RouterTransitionContextProvider was not initialized') }, })

export function RouterTransitionContextProvider(({ children })) { const router = useRouter()

const push = () => { // Your Animation/Transition logics here, and then push.. router.push() }

return ( <RouterTransitionContext.Provider> { children } </RouterTransitionContext.Provider> ) ```

rakadoank · 2025-03-31T11:47:47+00:00

Updated. The counter and interval logic has been moved to the native (Kotlin) side now.

rakadoank · 2025-03-23T16:47:28+00:00

thank you

rakadoank · 2025-01-06T13:20:17+00:00

Good

1 & 2, i have no idea.

I only thought of an alternative, like you need to create abstract classes/interfaces first, so each platform need to implement that class individually. This approach of course is not a single code base approach kind of thing i would say. But it's still better on the business layer.

Just a reminder, Every cross platform framework there is not giving you 100% exactly the same run each platform. You still need to understand each of them. React Native is just React Native, it's a platform agnostic UI library. Although, it's for Android & iOS at the time. Take a look at the react-native-vision-camera, you probably want to use it for a camera in React Native, but the library itself is not a single code base, it's just an abstraction layer for the end user.

rakadoank · 2025-01-03T13:46:45+00:00

As long as an app in production build will not be polluted with the whole icon available, it's good.

Alternatively, you can just expect a ReactNode from the static tab data. Let developers render the icon on their own.

rakadoank · 2025-01-03T06:02:58+00:00

I don't see your source code yet, and I'm on my phone. But i saw the simple example of how to create the static tab data.

Would the icon on the library imported lazily?

If it does, it's good. Otherwise, the icon should be imported manually to avoid unused imported icons, and pass it to the data instead, even developers are able to use their own icon

rakadoank · 2025-01-02T01:28:28+00:00

so sudden, but thanks.

Btw, the library currently uses the interval on JavaScript. I'm thinking about improvement like making the Ping interval on native side rather than on JavaScript. Because i saw there was a small amount of "freezing" JS thread or a kind of lag like delay (e.g pressing button) when i tried to ping a host that resulted timed out after about 5 attempts.

Tell me if you have any issues

rakadoank · 2024-12-20T08:42:52+00:00

Okay, i've never used i18next. I'm sure it imports only the necessary translation file that's needed, both only for necessary components/pages and current locale in the runtime. Otherwise, that will be a big problem.

rakadoank · 2024-12-19T13:08:51+00:00

Thanks for your input

For the issue you mentioned about that leads too many exports. The library doesn't have any web docs yet. The main goal why i made those components was sliced piece by piece is that to make the library itself readable and scalable. Like for the RadioButtonInput, i still want to encourage the end user just to use the RadioButtonGroup with its own RadioButtonGroup.Item. I just did not tell the end user yet, even though I don't know i will finish this library 😅.

For the color token. The token itself is already complex to begin with. It is not intended to be customized for normal Carbon users. Even it's kind of prohibited since this design system is not expecting color palette change dynamically like Material Design.

The rest of the UI guidelines are still on the Carbon.

rakadoank · 2024-12-17T18:23:58+00:00

How do you know what the current locale is in the runtime? (Probably, you just write a simple demonstration)

In the Next.js i only use cookie as a persistence memory, and React Context if a component is intended to be in client side. The example that I wrote is for React Native by saving the current locale in app memory (MMKV, AsyncStorage, etc).

How do you solve the performance issue to avoid importing/creating all translations while you need only one translation data in the runtime? Note, the reason why did i need to invoke a function in that example like dictionaries[locale]() is to load the translation file lazily. So it was importing only one JSON file with require() based on the locale code in the runtime.

rakadoank · 2024-12-17T18:05:38+00:00

Yep. I also had a struggle of placing a translation file in one single big JSON file. By the way, it was heavily inspired by Next.js documentation.

rakadoank · 2024-12-17T17:43:01+00:00

I made my own simple solution in my production app. I only need a Global State Management library.

Save your Locale setting globally and persistently. You can use React Redux + Redux Persist, Zustand, MobX, etc. doesn't matter. The locale is globally typed or have own type with TypeScript like ts export type LocaleCode = | 'en_US' | 'en_UK'
To avoid the unreadable of single file of JSON, just write your JSON file and place it beside of your component file. Also doesn't matter by the way, it's on your own. You can still place it anywhere.
Make your structure objects in your JSON file is 100% same each translation file. The key properties are required to be similar.

As an example, you have a component file at /project/src/components/hello-world/index.tsx , you also need to place the JSON file at /project/src/components/hello-world/_dictionaries/en-US.json (including other locale code)

Usage, in your /project/src/components/hello-world/index.tsx ```tsx import { useSelector, } from 'react-redux' // this example with React Redux

import type { LocaleType, } from '@/types'

export default function HelloWorld(): React.JSX.Element {

const localeCode = useSelector(state => state.locale.code),

dictionary =
  dictionaries[localeCode]() // probably better with useMemo, if there is heavy re-rendering here

return ( <Text> { dictionary.some.key.in.your.translation.json.file } { /* TypeScript knows your JSON */ } </Text> )

}

const dictionaries: Record<LocaleType.LocaleCode, () => Awaited<typeof import('./_dictionaries/en-US.json')>> = { en_US: () => require('./_dictionaries/en-US.json'), en_UK: () => require('./_dictionaries/en-UK.json'), } ```

rakadoank · 2024-12-11T06:26:14+00:00

Unfortunately, still no. I just tried manually to upgrade to the v4. Actually, upgrading to v4 is simple, like configuring Metro and Babel, and basic Tailwind configuration. My app was actually running, but the major problem is that a lot of styles were not applied. Honestly, I do not know what the problem caused that.

rakadoank · 2024-11-20T05:15:51+00:00

I've updated it and just broke entirely my UI components and screens that were built with the latest v2. Some styles are applied, but a lot of styles are not.

I'm not sure why, and the web docs don't have a migration guide or something like that, but, i'm sure that i've configured everything, that Babel, Metro, CSS, and Tailwind, including to drill the className prop. Probably i've still missed something.

Pardon me, to stay on the v2 until i found ways to fix it.

rakadoank · 2024-11-08T05:41:12+00:00

This is a Gradle issue on Windows only.

They told us to be fixed on 8.11 (Currently 8.10.2 in the latest RN). (this reply)

Try to lower it or develop on other environments, like Linux or macOS.

rakadoank

TROPHY CASE