Forem: Elozino Ovedhe

Kotlin Classes: A Comprehensive Guide

Elozino Ovedhe — Sun, 22 Feb 2026 18:48:21 +0000

Introduction

Classes are one of the fundamental building blocks of object-oriented programming in Kotlin. They allow you to encapsulate data and behavior into reusable, organized structures. Kotlin's approach to classes is modern and pragmatic, offering several variations to suit different programming needs.

What Are Kotlin Classes?

A Kotlin class is a blueprint for creating objects that combine properties (data) and functions (behavior) into a single unit. Classes enable you to model real-world entities and abstract concepts in your code, making it more organized, maintainable, and reusable.

Basic Class Syntax

class Person {
    var name: String = ""
    var age: Int = 0

    fun greet() {
        println("Hello, my name is $name")
    }
}

Kotlin Classes: A Comprehensive Guide

Introduction

What Are Kotlin Classes?

Basic Class Syntax

class Person {
    var name: String = ""
    var age: Int = 0

    fun greet() {
        println("Hello, my name is $name")
    }
}

Types of Kotlin Classes

1. Regular Classes

Regular classes are the standard way to define a class in Kotlin. They can have properties, methods, constructors, and inheritance.

Characteristics:

Can be instantiated multiple times
Support inheritance
Can have mutable and immutable properties
Full flexibility in implementation

Example:

class Car(val brand: String, var speed: Int = 0) {
    fun accelerate() {
        speed += 10
    }

    fun displayInfo() {
        println("Brand: $brand, Speed: $speed")
    }
}

val myCar = Car("Toyota", 50)
myCar.accelerate()
myCar.displayInfo()

Use Cases:

Creating entities that need to maintain state
Building complex objects with multiple responsibilities
Implementing inheritance hierarchies
General-purpose object modeling

2. Data Classes

Data classes are optimized for holding data. Kotlin automatically generates useful methods like equals(), hashCode(), toString(), and copy().

Characteristics:

Automatically generate equals(), hashCode(), and toString()
Provide a copy() function for creating modified copies
Implement componentN() functions for destructuring
Require at least one property in the primary constructor
Properties must be declared with val or var

Example:

data class User(val id: Int, val name: String, val email: String)

val user1 = User(1, "Alice", "alice@example.com")
val user2 = user1.copy(name = "Bob")

println(user1)  // User(id=1, name=Alice, email=alice@example.com)
println(user1 == user2)  // false (different names)

val (id, name, email) = user1  // Destructuring

Use Cases:

Representing data transfer objects (DTOs)
Creating immutable data containers
Working with API responses
Database models
Configuration objects

3. Sealed Classes

Sealed classes restrict which classes can inherit from them. They're useful for representing restricted class hierarchies.

Characteristics:

All subclasses must be defined in the same file (or same package in Kotlin 1.0)
Cannot be instantiated directly
Provide exhaustive when expressions
Useful for type-safe hierarchies

Example:

sealed class Result {
    data class Success(val data: String) : Result()
    data class Error(val exception: Exception) : Result()
    object Loading : Result()
}

fun handleResult(result: Result) {
    when (result) {
        is Result.Success -> println("Success: ${result.data}")
        is Result.Error -> println("Error: ${result.exception.message}")
        is Result.Loading -> println("Loading...")
    }
}

Use Cases:

Representing algebraic data types
Creating type-safe result wrappers
Handling different states in state machines
API response modeling with known variants
Pattern matching scenarios

4. Enum Classes

Enum classes represent a fixed set of constants. Each enum constant is an instance of the enum class.

Characteristics:

Define a fixed set of values
Each constant is an object of the enum type
Can have properties and methods
Support when expressions naturally
Implement Comparable by default

Example:

enum class Direction(val angle: Int) {
    NORTH(0),
    EAST(90),
    SOUTH(180),
    WEST(270);

    fun opposite(): Direction = when (this) {
        NORTH -> SOUTH
        EAST -> WEST
        SOUTH -> NORTH
        WEST -> EAST
    }
}

val direction = Direction.NORTH
println(direction.angle)  // 0
println(direction.opposite())  // SOUTH

Use Cases:

Representing fixed sets of options
State management with predefined states
Direction, color, or priority constants
Configuration options
Type-safe alternatives to string constants

5. Object Declarations (Singletons)

Object declarations create a singleton; a class with only one instance that exists for the lifetime of the application.

Characteristics:

Thread-safe singleton implementation
Lazy initialization
Only one instance exists
No constructor parameters
Can inherit from classes and implement interfaces

Example:

object DatabaseConnection {
    private val connection = "Connected to DB"

    fun query(sql: String): String {
        return "Executing: $sql on $connection"
    }
}

println(DatabaseConnection.query("SELECT * FROM users"))

Use Cases:

Database connections
Logger instances
Configuration managers
Utility functions
Shared resources

6. Companion Objects

Companion objects allow you to define members that belong to the class itself rather than to instances.

Characteristics:

One per class
Members are accessed like static members in Java
Can implement interfaces
Can have a name (though usually anonymous)

Example:

class MyClass {
    companion object {
        const val CONSTANT = "Hello"

        fun create(): MyClass = MyClass()
    }
}

println(MyClass.CONSTANT)
val instance = MyClass.create()

Use Cases:

Factory methods
Constants related to the class
Shared utility functions
Static-like behavior

7. Inner Classes

Inner classes are nested classes that have access to the outer class's members.

Characteristics:

Can access outer class members
Require an instance of the outer class
Increase memory usage due to implicit reference
Use inner keyword

Example:

class Outer {
    private val name = "Outer"

    inner class Inner {
        fun display() {
            println("Accessing outer: $name")
        }
    }
}

val outer = Outer()
val inner = outer.Inner()
inner.display()

Use Cases:

Callbacks and event handlers
Nested UI components
Logical grouping of related classes
Access to outer class state

Key Differences Summary

Feature	Regular	Data	Sealed	Enum	Object	Companion
Instantiation	Multiple	Multiple	Via subclasses	Fixed constants	Single	N/A
Auto Methods	No	Yes	No	No	No	No
Inheritance	Yes	Yes	Restricted	No	Yes	N/A
Constructor	Yes	Yes	Yes	Yes	No	No
Use Case	General	Data holding	Type-safe hierarchies	Constants	Singletons	Static-like

Best Practices

Use data classes for objects primarily holding data
Use sealed classes when you have a restricted set of subclasses
Use enums for fixed sets of constants
Use objects for singletons and utility functions
Prefer immutability by using val instead of var
Use companion objects instead of static members
Keep classes focused with a single responsibility

Conclusion

Kotlin provides multiple class types, each optimized for specific scenarios. Understanding when to use each type leads to cleaner, more maintainable code. Regular classes offer flexibility, data classes simplify data handling, sealed classes provide type safety, enums represent constants, and objects/companions handle singleton and static-like patterns. Choose the right tool for your specific use case to write idiomatic Kotlin code.

Types of Kotlin Classes

1. Regular Classes

Regular classes are the standard way to define a class in Kotlin. They can have properties, methods, constructors, and inheritance.

Characteristics:

Can be instantiated multiple times
Support inheritance
Can have mutable and immutable properties
Full flexibility in implementation

Example:

class Car(val brand: String, var speed: Int = 0) {
    fun accelerate() {
        speed += 10
    }

    fun displayInfo() {
        println("Brand: $brand, Speed: $speed")
    }
}

val myCar = Car("Toyota", 50)
myCar.accelerate()
myCar.displayInfo()

Use Cases:

Creating entities that need to maintain state
Building complex objects with multiple responsibilities
Implementing inheritance hierarchies
General-purpose object modeling

2. Data Classes

Data classes are optimized for holding data. Kotlin automatically generates useful methods like equals(), hashCode(), toString(), and copy().

Characteristics:

Automatically generate equals(), hashCode(), and toString()
Provide a copy() function for creating modified copies
Implement componentN() functions for destructuring
Require at least one property in the primary constructor
Properties must be declared with val or var

Example:

data class User(val id: Int, val name: String, val email: String)

val user1 = User(1, "Alice", "alice@example.com")
val user2 = user1.copy(name = "Bob")

println(user1)  // User(id=1, name=Alice, email=alice@example.com)
println(user1 == user2)  // false (different names)

val (id, name, email) = user1  // Destructuring

Use Cases:

Representing data transfer objects (DTOs)
Creating immutable data containers (For holding states)
Working with API responses
Database models
Configuration objects

3. Sealed Classes

Sealed classes restrict which classes can inherit from them. They're useful for representing restricted class hierarchies.

Characteristics:

All subclasses must be defined in the same file (or same package in Kotlin 1.0)
Cannot be instantiated directly
Provide exhaustive when expressions
Useful for type-safe hierarchies

Example:

sealed class Result {
    data class Success(val data: String) : Result()
    data class Error(val exception: Exception) : Result()
    object Loading : Result()
}

fun handleResult(result: Result) {
    when (result) {
        is Result.Success -> println("Success: ${result.data}")
        is Result.Error -> println("Error: ${result.exception.message}")
        is Result.Loading -> println("Loading...")
    }
}

Use Cases:

Representing algebraic data types
Creating type-safe result wrappers
Handling different states in state machines
API response modeling with known variants
Pattern matching scenarios

4. Enum Classes

Enum classes represent a fixed set of constants. Each enum constant is an instance of the enum class.

Characteristics:

Define a fixed set of values
Each constant is an object of the enum type
Can have properties and methods
Support when expressions naturally
Implement Comparable by default

Example:

enum class Direction(val angle: Int) {
    NORTH(0),
    EAST(90),
    SOUTH(180),
    WEST(270);

    fun opposite(): Direction = when (this) {
        NORTH -> SOUTH
        EAST -> WEST
        SOUTH -> NORTH
        WEST -> EAST
    }
}

val direction = Direction.NORTH
println(direction.angle)  // 0
println(direction.opposite())  // SOUTH

Use Cases:

Representing fixed sets of options
State management with predefined states
Direction, color, or priority constants
Configuration options
Type-safe alternatives to string constants

5. Object Declarations (Singletons)

Object declarations create a singleton; a class with only one instance that exists for the lifetime of the application.

Characteristics:

Thread-safe singleton implementation
Lazy initialization
Only one instance exists
No constructor parameters
Can inherit from classes and implement interfaces

Example:

object DatabaseConnection {
    private val connection = "Connected to DB"

    fun query(sql: String): String {
        return "Executing: $sql on $connection"
    }
}

println(DatabaseConnection.query("SELECT * FROM users"))

Use Cases:

Database connections
Logger instances
Configuration managers
Utility functions
Shared resources

6. Companion Objects

Companion objects allow you to define members that belong to the class itself rather than to instances.

Characteristics:

One per class
Members are accessed like static members in Java
Can implement interfaces
Can have a name (though usually anonymous)

Example:

class MyClass {
    companion object {
        const val CONSTANT = "Hello"

        fun create(): MyClass = MyClass()
    }
}

println(MyClass.CONSTANT)
val instance = MyClass.create()

Use Cases:

Factory methods
Constants related to the class
Shared utility functions
Static-like behavior

7. Inner Classes

Inner classes are nested classes that have access to the outer class's members.

Characteristics:

Can access outer class members
Require an instance of the outer class
Increase memory usage due to implicit reference
Use inner keyword

Example:

class Outer {
    private val name = "Outer"

    inner class Inner {
        fun display() {
            println("Accessing outer: $name")
        }
    }
}

val outer = Outer()
val inner = outer.Inner()
inner.display()

Use Cases:

Callbacks and event handlers
Nested UI components
Logical grouping of related classes
Access to outer class state

8. Abstract Classes

An abstract class in Kotlin is a class that cannot be instantiated directly. Instead, it serves as a blueprint or template that other classes must inherit from and implement.

Characteristics:

Cannot be instantiated: You can't create an object directly from an abstract class; you must create a subclass that extends it.
Can contain abstract members: Abstract classes can have abstract properties and functions that subclasses must implement:
Can have concrete members: Abstract classes can also have regular properties and functions with implementations (like sleep() above), which subclasses inherit automatically.
Enforces a contract: Abstract classes ensure that all subclasses implement required functionality, making your code more structured and predictable.

Example:

abstract class Animal {
    abstract val name: String  // Subclasses must provide this
    abstract fun makeSound()   // Subclasses must implement this

    fun sleep() {              // Regular function (optional to override)
        println("$name is sleeping")
    }
}

class Dog(override val name: String) : Animal() {
    override fun makeSound() {
        println("Woof!")
    }
}

val dog = Dog("Buddy")
dog.makeSound()  // Woof!
dog.sleep()      // Buddy is sleeping

Use cases:

When you want to define common behavior for related classes
When you need to enforce that subclasses implement certain methods
When you want to share code among closely related classes

Key Differences Summary

Feature	Regular	Data	Sealed	Enum	Object	Companion	Abstract
Instantiation	Multiple	Multiple	Via subclasses	Fixed constants	Single	N/A	Via subclasses
Auto Methods	No	Yes	No	No	No	No	No
Inheritance	Yes	Yes	Restricted	No	Yes	N/A	Yes
Constructor	Yes	Yes	Yes	Yes	No	No	Yes
Use Case	General	Data holding	Type-safe hierarchies	Constants	Singletons	Static-like	Define blueprints

Best Practices

Use data classes for objects primarily holding data
Use sealed classes when you have a restricted set of subclasses
Use enums for fixed sets of constants
Use objects for singletons and utility functions
Prefer immutability by using val instead of var
Use companion objects instead of static members
Keep classes focused with a single responsibility

Conclusion

Setup CI/CD in React Native using GitHub Actions

Elozino Ovedhe — Wed, 14 May 2025 19:29:10 +0000

Continuous Integration and Continuous Deployment (CI/CD) is an integral part of any mobile application development that wants to scale. In this guide, I'll walk you through the process of setting up a CI/CD pipeline for your React Native Project using GitHub Actions.

name: Mobile Build

on:
  push:
    branches:
      - 'main'

jobs:
  android-build:
    name: Android Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Set up JDK 17
        uses: actions/setup-java@v4
        with:
          java-version: '17'
          distribution: 'temurin'
          cache: 'gradle'

      - name: Validate Gradle wrapper
        uses: gradle/wrapper-validation-action@v1
        with:
          min-wrapper-count: 1
          allow-snapshots: false

      - name: Fix Gradle wrapper permissions
        run: |
          chmod +x android/gradlew

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18.x'
          cache: 'yarn'

      - name: Install dependencies
        run: |
          yarn install --frozen-lockfile

      - name: Build Android Application
        run: |
          cd android
          ./gradlew assembleRelease --no-daemon --warning-mode all

      - name: Upload APK artifact
        uses: actions/upload-artifact@v4
        with:
          name: app-release-android
          path: android/app/build/outputs/apk/release/*.apk
          retention-days: 7

  ios-build:
    name: iOS Build
    runs-on: macos-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18.x'
          cache: 'yarn'

      - name: Install dependencies
        run: |
          yarn install --frozen-lockfile

      - name: Install CocoaPods
        run: |
          sudo gem install cocoapods
          cd ios && pod install --repo-update && cd ..

      - name: Select Xcode Version
        run: |
            sudo xcode-select -s /Applications/Xcode.app/Contents/Developer

      - name: Set up code signing
        env:
          APPLE_DEVELOPER_TEAM_ID: ${{ secrets.APPLE_DEVELOPER_TEAM_ID }}
          MATCH_PASSWORD: ${{ secrets.MATCH_PASSWORD }}
        run: |
            cd ios
            # Update the project to use the team ID
            # using sed to update the project file
            sed -i "" "s/DEVELOPMENT_TEAM = \"\";/DEVELOPMENT_TEAM = \"$APPLE_DEVELOPER_TEAM_ID\";/g" [YourAppName].xcodeproj/project.pbxproj

      - name: Build iOS Application
        run: |
          cd ios
          xcodebuild clean archive \
            -workspace [YourAppName].xcworkspace \
            -scheme [YourAppName] \
            -configuration Release \
            -archivePath $PWD/build/[YourAppName].xcarchive \
            CODE_SIGN_IDENTITY="iPhone Distribution" \
            DEVELOPMENT_TEAM=${{ secrets.APPLE_DEVELOPER_TEAM_ID }}

      - name: Export iOS IPA
        run: |
          cd ios
          xcodebuild -exportArchive \
            -archivePath $PWD/build/[YourAppName].xcarchive \
            -exportOptionsPlist $PWD/ExportOptions.plist \
            -exportPath $PWD/build \
            -allowProvisioningUpdates

      - name: Upload IPA artifact
        uses: actions/upload-artifact@v4
        with:
          name: app-release-ios
          path: ios/build/*.ipa
          retention-days: 7

PS: Replace [YourAppName] with your actual app name

How to Add a Splash Screen in React Native - Fixing Android Build Issues with react-native-splash-screen

Elozino Ovedhe — Wed, 14 May 2025 19:02:39 +0000

When it comes to splash screens in React Native, a number of libraries exist—but react-native-splash-screen by crazyboy continues to stand the test of time. While other tools get the job done, this library remains a favorite for one key reason: it's battle-tested and dependable.

Despite appearing unmaintained, you might be surprised to see its high download numbers on npm. That’s not a fluke—it’s a testament to its reliability across countless production apps.

So why do build errors still happen? Especially on Android?
Well, the Android team tends to move at lightning speed, frequently introducing breaking changes in the name of performance and security. This naturally causes some friction with older or less actively maintained libraries.

On iOS, things generally work smoothly as described in the readme. Android, however, can be trickier.

This guide is here to help.
We'll walk you through creating a rich splash screen experience using react-native-splash-screen and, more importantly, show you how to fix any Android build issues that may arise.

Let’s dive in.

Prerequisites

Make sure you have the following set up:

React Native environment (CLI or Expo with custom native code support via EAS)
Minimum React Native version: 0.70+
Android Studio properly configured (for Android builds)

Step 1:

Install react-native-splash-screen:

yarn add react-native-splash-screen:

Step 2: Native Setup (Android)
Modify MainActivity.java or MainActivity.kt

Location: android/app/src/main/java/com/[yourapp]/MainActivity.kt

Add these imports at the top:

import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;

Then override onCreate:

// Java
@Override
protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this, R.style.SplashScreenTheme, true);  // Show splash screen defined in you android `styles.xml`
    super.onCreate(savedInstanceState);
}

// Kotlin
override fun onCreate(savedInstanceState: Bundle?){
  SplashScreen.show(this, R.style.SplashScreenTheme, true);   // Show splash screen defined in you android `styles.xml`
super.onCreate(savedInstanceState)
}

Modify MainApplication.java or MainApplication.kt to use react-native-splash-screen via the following changes:

// import this
import org.devio.rn.splashscreen.SplashScreenReactPackage;

// Java
 @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
            new SplashScreenReactPackage()  //here
            );
        }

// Kotlin
override fun getPackages():List<react<Pakage>> = 
PackageList(this).package.apply{
add(SplashScreenReactPackage())
}

Step 3: Add Splash Theme

Location: android/app/src/main/res/values/styles.xml

<style name="SplashTheme" parent="SplashScreen_SplashTheme">
    <item name="android:windowBackground">@drawable/launch_screen</item>
</style>

Create a drawable XML for the splash image:
Location: android/app/src/main/res/layout/launch_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

Step 4: Fixing android error

4.1 Patch package

4.1.0 Install these packages

yarn add -D patch-package postinstall-postinstall

In your package.json file

"scripts": {
...
    "postinstall": "patch-package" // add this in package.json
  },
  "devDependencies": {
    "patch-package": "^8.0.0", // make sure this here
    "postinstall-postinstall": "^2.1.0" // make sure this here
  },

4.2 Modify your react-native-splash-screen in your node_modules
Locate /node_modules/react-native-splash-screen/android/build and replace with this

dependencies {
     implementation fileTree(dir: 'libs', include: ['*.jar'])
     testImplementation 'junit:junit:4.12'
     implementation "com.facebook.react:react-native:+" // From node_modules
 }

4.3 Apply Patch

npx patch-package react-native-splash-screen

Hide Splash After App Loads
In your main JavaScript entry point (usually App.js or index.js), hide the splash screen once your app is ready:

import SplashScreen from 'react-native-splash-screen';

useEffect(() => {
  SplashScreen.hide();
}, []);

Then build

cd android && ./gradlew clean && cd ..
npx react-native run-android

iOS Setup (Quick Overview)
iOS setup is typically straightforward and covered well in the library’s README.

Add the splash screen in your LaunchScreen.storyboard (Xcode)
No extra native code changes needed

DEMO REPO

Build a Flashlight in Jetpack Compose

Elozino Ovedhe — Tue, 15 Oct 2024 21:58:44 +0000

Today we will discuss how to build a flashlight in Jetpack Compose.

Step-by-step Guide

Setting up dependency
Setting up Manifest
Code Explanation
Code Implementation

Setting up dependencies
We will be utilising Google's new API for permission requests in our app as it provides a more elegant way of requesting permission in our apps. Since it is a work in progress, there are some known limitations like not being able to check if the user is requesting the app for the first time etc. For more info, check this out

Now, in your build.gradle.kts or build.gradle file add the dependency

 // Dependency to request hardware permission
 implementation ("com.google.accompanist:accompanist-permissions:0.32.0")

Setting up Manifest
In your AndroidManifest.xml file, add the code below inside your application tag

 <uses-feature
   android:name="android.hardware.camera"
   android:required="false" />
 <uses-permission android:name="android.permission.CAMERA" />

Code Explanation

fun toggleFlashLight(cameraManager: CameraManager, cameraId: String, isFlashOn: Boolean) {
    try {
        cameraManager.setTorchMode(cameraId, isFlashOn)
    } catch (e: Exception) {
        e.printStackTrace()
    }
}

fun handlePermissionDenied(context: Context) {
    Toast.makeText(context, "Please grant camera permission", Toast.LENGTH_LONG).show()
}

fun handlePermissionRationale(context: Context) {
    Toast.makeText(context, "Camera permission is needed", Toast.LENGTH_LONG).show()
}

@OptIn(ExperimentalPermissionsApi::class)
fun handleLogic(
    cameraPermissionState: PermissionState,
    context: Context,
    cameraManager: CameraManager,
    cameraId: String,
    isFlashOn: Boolean,
    updateState: (Boolean) -> Unit,
) {
    if (cameraPermissionState.status.isGranted) {
        val newState = !isFlashOn
        updateState(newState)
        toggleFlashLight(cameraManager, cameraId, newState)
    } else if (cameraPermissionState.status.shouldShowRationale) {
        handlePermissionRationale(context)
        cameraPermissionState.launchPermissionRequest()
    } else {
        handlePermissionDenied(context)
        cameraPermissionState.launchPermissionRequest()
    }
}

Code Implementation

import android.Manifest
import android.content.Context
import android.hardware.camera2.CameraManager
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonColors
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.kotlin_articles.ui.theme.KotlinarticlesTheme
import com.google.accompanist.permissions.ExperimentalPermissionsApi
import com.google.accompanist.permissions.PermissionState
import com.google.accompanist.permissions.isGranted
import com.google.accompanist.permissions.rememberPermissionState
import com.google.accompanist.permissions.shouldShowRationale


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            KotlinarticlesTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@OptIn(ExperimentalPermissionsApi::class)
@Composable
fun Greeting(modifier: Modifier = Modifier) {
    val context: Context = LocalContext.current
    val cameraPermissionState = rememberPermissionState(permission = Manifest.permission.CAMERA)
    var isFlashOn: Boolean by rememberSaveable {
        mutableStateOf(false)
    }
    val cameraManager: CameraManager = remember {
        context.getSystemService(Context.CAMERA_SERVICE) as CameraManager
    }
    val cameraId: String = rememberSaveable {
        try {
            cameraManager.cameraIdList[0]
        } catch (e: Exception) {
            "0"
        }
    }

    Column(
        modifier = Modifier
            .fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
    ) {
        Button(
            modifier = Modifier.height(50.dp),
            onClick = {
                handleLogic(
                    cameraPermissionState,
                    context,
                    cameraManager,
                    cameraId,
                    isFlashOn
                ) { isFlashOn = it }
            },
        ) {
            Text(
                text = "Turn flashlight ${if (isFlashOn) "Off" else "On"} !",
                fontSize = 16.sp,
                textAlign = TextAlign.Center
            )
        }
    }
}

fun toggleFlashLight(cameraManager: CameraManager, cameraId: String, isFlashOn: Boolean) {
    try {
        cameraManager.setTorchMode(cameraId, isFlashOn)
    } catch (e: Exception) {
        e.printStackTrace()
    }
}

fun handlePermissionDenied(context: Context) {
    Toast.makeText(context, "Please grant camera permission", Toast.LENGTH_LONG).show()
}

fun handlePermissionRationale(context: Context) {
    Toast.makeText(context, "Camera permission is needed", Toast.LENGTH_LONG).show()
}

@OptIn(ExperimentalPermissionsApi::class)
fun handleLogic(
    cameraPermissionState: PermissionState,
    context: Context,
    cameraManager: CameraManager,
    cameraId: String,
    isFlashOn: Boolean,
    updateState: (Boolean) -> Unit,
) {
    if (cameraPermissionState.status.isGranted) {
        val newState = !isFlashOn
        updateState(newState)
        toggleFlashLight(cameraManager, cameraId, newState)
    } else if (cameraPermissionState.status.shouldShowRationale) {
        handlePermissionRationale(context)
        cameraPermissionState.launchPermissionRequest()
    } else {
        handlePermissionDenied(context)
        cameraPermissionState.launchPermissionRequest()
    }
}

Happy coding!!!

You can check out the repo

Getting started with splash screen in Jetpack Compose

Elozino Ovedhe — Tue, 01 Oct 2024 23:31:36 +0000

Introduction
As Jetpack Compose continues to gain popularity in the Android ecosystem, it is important to deliver a smooth user experience and transition in our mobile app. Google has released an API to make splash screen seamless and this post will guide you on how to get started.

Prerequisite

Android Studio (as of writing this code, hedgehog or later is perfect)
Project setup with Jetpack Compose

Step-by-step guide
Step 1: Setting up dependency
Step 2: Adding app icon
Step 3: Setting up the splashscreen theme
Step 4: Modify the AndroidManifest.xml
Step 5: Integrating the splash screen into the MainActivity.kt

Step 1: Setting up dependency
In the app build.gradle.kts under the dependencies block, add implementation("androidx.core:core-splashscreen:1.0.1") as seen below

dependencies {
    implementation("androidx.core:core-splashscreen:1.0.1")
}

Step 2: Adding app icon
If you do not have one already created, go to Icon Kitchen create one and download. The downloaded file will come with everything you need just navigate to the folder named android copy everything and paste it into the res folder in your Android project.

Step 3: Setting up the splashscreen theme
In your styles.xml file, create a theme with a parent of Theme.SplashScreen. Set the value of postSplashScreenTheme to the theme that the Activity must use and the value of windowSplashScreenAnimatedIcon to a drawable or animated drawable. The other attributes are optional

<resources>
    <style name="Theme.App.Starting" parent="Theme.SplashScreen">
        <!-- Set the splash screen background, animated icon, and animation
        duration. -->
        <item name="windowSplashScreenBackground">@color/purple_500</item>

        <!-- Use windowSplashScreenAnimatedIcon to add a drawable or an animated
             drawable. One of these is required. -->
        <item name="windowSplashScreenAnimatedIcon">@mipmap/app_icon</item>
        <!-- Required for animated icons. -->
        <item name="windowSplashScreenAnimationDuration">200</item>

        <!-- Set the theme of the Activity that directly follows your splash
        screen. This is required. -->
        <item name="postSplashScreenTheme">@style/Theme.Kotlinarticles</item>
    </style>
</resources>

Step 4: Modify the Android Manifest

Add android:theme="@style/Theme.App.Starting" to the application and activity tag respectively

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/app_icon"
        android:supportsRtl="true"
        android:theme="@style/Theme.App.Starting"
        tools:targetApi="31">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/Theme.App.Starting">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Step 5: Integrating the splash screen into the MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        val splashscreen = installSplashScreen()
        var keepSplashScreen = true
        super.onCreate(savedInstanceState)
        splashscreen.setKeepOnScreenCondition { keepSplashScreen }
        lifecycleScope.launch {
            delay(5000)
            keepSplashScreen = false
        }
        enableEdgeToEdge()
        setContent {
            KotlinarticlesTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

Best Practices

Keep it simple: Don't overcomplicate your splash screen. A clean, branded design works best.
Minimize duration: The splash screen should only be visible for as long as necessary to load your app's initial data.
Provide visual feedback: If your app needs more time to load, consider adding a progress indicator.
Test on various devices: Ensure your splash screen looks good on different screen sizes and orientations.

Conclusion

Implementing a splash screen in Jetpack Compose is a straightforward process that can significantly enhance your app's user experience. By following these steps and best practices, you can create a professional and smooth introduction to your application.

Remember, while splash screens are useful, they should be used judiciously. The goal is to provide a seamless transition into your app's main content, not to delay the user's access to it.

Happy coding!

Check out the repo

Notable links
Splashscreen API
Icon Kitchen

React Custom Hooks

Elozino Ovedhe — Sat, 22 Apr 2023 18:50:19 +0000

Objectives

What are React Custom Hooks
Functions of React Custom Hooks
How to Create React Custom Hooks
How to use React Custom Hooks

React Custom Hooks are created to help developers eliminate the need to write repetitive codes. It makes the development process cleaner and faster.

As a React developer, you must have heard of the word hooks, in simple terms, hooks are functions that do something for us. There are varieties of hooks but sometimes we find out that we end up repeating the same codes and this is what hooks solve.

It is also worth knowing that a key feature of React is its re-usability and hooks are no exception.

To create a custom hook, there are some things we need to note.

They follow react hooks rule
They use existing hook
They have the "use" in front of the hook name as a convention to make developers know it is a custom hook
They are like a regular react component

Now, let's dive into the code aspects.

First, we need to create a new React project. So open your terminal and type

yarn create vite

Then select React as your template then follow the prompt. Once the installation is complete, enter the project directory (folder). To do so, type

cd nameOfProject

Then to open the project in a code editor like VSCode, type

code.

Congratulations!!! You have just successfully completed the first round

In your src folder create a folder name hooks and create a file name useFetch.js and paste the following code.

import { useEffect, useState } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (url) {
      setLoading(true);
      fetch(url)
        .then((response) => response.json())
        .then((data) => {
          setData(data);
          setLoading(false);
        })
        .catch((error) => {
          setError(error);
        });
    } else {
      setError("Please pass url as an argument");
    }
  }, [url]);

  return [data, loading, error];
};

export default useFetch;

Explanation

We are creating a hook to help us fetch data and show us its loading state and error.

First, we create a state with react useState to hold the data, loading, and error state. Since we want to fetch data on the initial render, we use the react built-in useEffect and pass a dependency so it only runs when the dependency changes. In our case, it is the URL.

Remember the URL needs to be dynamic hence, we need to pass it as a prop in the useFetch component. Then we write our code in the useEffect code block.

We are checking to see if there is a URL. if none we update the state of the error.
if there is a URL, we set the loading to true.
We fetch our data using fetch or axios.
After fetching the data, we update the data and set the loading state to false.
We also set the error to the error message from the API should the be an error during the fetch request.
We return the data in an array format.

Now let's use the custom hook we just created. In our App.js file, paste the following.

import useFetch from "./hooks/useFetch";
import "./styles.css";

export default function App() {
  const url = "https://jsonplaceholder.typicode.com/posts";
  const [data, loading, error] = useFetch(url);
  return (
    <div className="App">
      <h1>Power of React Custom Hook</h1>
      {loading && <p>Loading data...</p>}
      {error && <p>{error}</p>}
      {data && (
        <div>
          {data.map((item, index) => (
            <p key={index}>{item.title}</p>
          ))}
        </div>
      )}
    </div>
  );
}

Explanation

We create a react component
We import our custom hook
We pass our URL into our custom hook as an argument
We destructure out the value we sent from the useFetch hook
We use it where needed

Vuala!!! Congratulations, you now know how to create and use a custom hook.

Reference code: react-custom-hook

Best Youtube Channels To Learn React Native

Elozino Ovedhe — Sun, 01 Jan 2023 19:46:15 +0000

Are you a JavaScript developer looking to build a mobile app but do not know where to start? Hurray!!! Allow me to introduce you to what you can use.

React Native is a cross-platform mobile development technology that is used to create mobile apps. It is one of the most demanding mobile technology with good salaries across the globe.

Want to get started? Here is a list of youtube channels to learn react-native from beginner to advance:

Programming Knowledge
Programming with Mash
MissCoding
Born To Code
Bug Ninza
Notjustdev
Efficient Programming
Cryce Truly
Adul Wahab

Fun fact: React Native was initially designed for iOS development