DEV Community: Sourav das

How to Show the Native Android Location Enable Popup in React Native (No Third-Party Libraries)

Sourav das — Sun, 27 Jul 2025 06:15:16 +0000

This guide provides a detailed, step-by-step process for creating a native Android module that can:

Check if the device's location services are currently enabled.
Prompt the user with a native Android popup to enable location services if they are off.

This guide is designed to be easy to follow, even for those new to React Native or native Android development.

Step 1: Create the Native Module Files

These files contain the actual Android code that will run on the user's device.

File 1: The Core Logic (`LocationEnablerModule.kt`)

This file contains the main logic for checking the location status and showing the popup.

Navigate to android/app/src/main/java/com/your-app-name/. > Tip: Your app name is the package name you see in other files in this directory, like MainActivity.kt.
Create a new file named LocationEnablerModule.kt.

Copy and paste the following code into the new file.

package com.kolkata // IMPORTANT: Change "com.kolkata" to your app's package name!

import android.app.Activity
import android.content.IntentSender
import com.facebook.react.bridge.*
import com.google.android.gms.common.api.ResolvableApiException
import com.google.android.gms.location.*
import android.app.Activity.RESULT_OK

class LocationEnablerModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {

    private var promise: Promise? = null

    override fun getName() = "LocationEnabler"

    @ReactMethod
    fun isLocationEnabled(promise: Promise) {
        val activity: Activity = currentActivity ?: run {
            promise.reject("NO_ACTIVITY", "No foreground activity!")
            return
        }

        val locationRequest = LocationRequest
            .Builder(Priority.PRIORITY_HIGH_ACCURACY, 10000)
            .build()

        val builder = LocationSettingsRequest
            .Builder()
            .addLocationRequest(locationRequest)

        val settingsClient = LocationServices.getSettingsClient(activity)
        val task = settingsClient.checkLocationSettings(builder.build())

        task.addOnSuccessListener {
            promise.resolve(true) // Location is on
        }
        task.addOnFailureListener { ex ->
            promise.resolve(false) // Location is off
        }
    }

    @ReactMethod
    fun promptForEnableLocation(promise: Promise) {
        val activity: Activity = currentActivity ?: run {
            promise.reject("NO_ACTIVITY", "No foreground activity!")
            return
        }
        this.promise = promise

        val locationRequest = LocationRequest
            .Builder(Priority.PRIORITY_HIGH_ACCURACY, 10000)
            .build()

        val builder = LocationSettingsRequest
            .Builder()
            .addLocationRequest(locationRequest)
            .setAlwaysShow(true) // This is what forces the popup

        val settingsClient = LocationServices.getSettingsClient(activity)
        val task = settingsClient.checkLocationSettings(builder.build())

        task.addOnSuccessListener {
            promise.resolve("already-enabled")
        }
        task.addOnFailureListener { ex ->
            if (ex is ResolvableApiException) {
                try {
                    // Show the dialog by calling startResolutionForResult(),
                    // and check the result in onActivityResult().
                    ex.startResolutionForResult(activity, REQUEST_CHECK_SETTINGS)
                } catch (sendEx: IntentSender.SendIntentException) {
                    promise.reject("SEND_INTENT_EXCEPTION", sendEx)
                }
            } else {
                promise.reject("UNRESOLVABLE", ex)
            }
        }
    }

    fun onActivityResult(requestCode: Int, resultCode: Int) {
        if (requestCode == REQUEST_CHECK_SETTINGS) {
            if (resultCode == RESULT_OK) {
                promise?.resolve("enabled")
            } else {
                promise?.reject("CANCELLED", "User cancelled the request")
            }
        }
    }

    companion object {
        const val REQUEST_CHECK_SETTINGS = 999
    }
}

File 2: The Module "Package" (`LocationEnablerPackage.kt`)

This file registers the module so React Native can find and use it.

In the same directory as the previous file, create a new file named LocationEnablerPackage.kt.

Copy and paste the following code.

package com.kolkata // IMPORTANT: Change "com.kolkata" to your app's package name!

import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ViewManager

class LocationEnablerPackage : ReactPackage {
    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
        return listOf(LocationEnablerModule(reactContext))
    }

    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
        return emptyList()
    }
}

Step 2: Register the Module with Your App

Now, you need to tell your Android app to load the new module package.

File 3: Your Application Class (`MainApplication.kt`)

Open the MainApplication.kt file, located in the same directory.
Find the getPackages() function.

Add add(LocationEnablerPackage()) to the list of packages.

// ... other imports
import com.kolkata.LocationEnablerPackage // <-- 1. Add this import

class MainApplication : Application(), ReactApplication {

  override val reactNativeHost: ReactNativeHost =
      object : DefaultReactNativeHost(this) {
        override fun getPackages(): List<ReactPackage> =
            PackageList(this).packages.apply {
              // ...
              add(LocationEnablerPackage()) // <-- 2. Add this line
            }

        // ... rest of the file
      }
}

File 4: Your Main Activity (`MainActivity.kt`)

This change allows your module to receive the result from the location popup (i.e., whether the user tapped "Yes" or "No").

Open the MainActivity.kt file.

Add the onActivityResult function to the class.

package com.kolkata // Your package name

// ... other imports
import android.content.Intent // <-- 1. Add this import
import com.facebook.react.bridge.ReactContext // <-- 2. Add this import

class MainActivity : ReactActivity() {

  // ... (existing code like getMainComponentName and createReactActivityDelegate)

  // vvv 3. Add this entire function vvv
  override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
    super.onActivityResult(requestCode, resultCode, data)
    val reactContext: ReactContext? = reactNativeHost.reactInstanceManager.currentReactContext
    if (reactContext != null) {
        val module = reactContext.getNativeModule(LocationEnablerModule::class.java)
        module?.onActivityResult(requestCode, resultCode)
    }
  }
}

Step 3: Configure Gradle (Android's Build System)

These changes tell Android's build system to download the necessary libraries.

File 5: Project-Level `build.gradle`

Open the file at android/build.gradle.

Ensure you have a kotlinVersion defined and the kotlin-gradle-plugin in your dependencies.

buildscript {
    ext {
        // ...
        kotlinVersion = "2.1.20" // Or a recent version
    }
    // ...
    dependencies {
        // ...
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin") // <-- Add this if it's missing
    }
}

File 6: App-Level `build.gradle`

Open the file at android/app/build.gradle.

Add the Google Play Services location library.

dependencies {
    // ... (other dependencies like react-android)
    implementation 'com.google.android.gms:play-services-location:21.0.1' // <-- Add this line
}

File 7: `settings.gradle`

Open the file at android/settings.gradle.

Update the dependencyResolutionManagement block. Using PREFER_SETTINGS helps avoid common build errors with React Native.

dependencyResolutionManagement {
    // vvv Use PREFER_SETTINGS to avoid build issues vvv
    repositoriesMode.set(RepositoriesMode.PREFER_SETTINGS)
    repositories {
        google()
        mavenCentral()
        maven { url 'https://www.jitpack.io' }
    }
}

Step 4: Create the TypeScript Bridge

This file makes the native module easy to use from your JavaScript/TypeScript code.

File 8: The Bridge (`LocationEnabler.ts`)

In your project's src folder, create a new file named LocationEnabler.ts.

Copy and paste the following code.

import { NativeModules } from 'react-native';

const { LocationEnabler } = NativeModules;

// This defines the functions our native module has
interface LocationEnablerInterface {
  isLocationEnabled(): Promise<boolean>;
  promptForEnableLocation(): Promise<string>;
}

export default LocationEnabler as LocationEnablerInterface;

Step 5: Use the Module in Your App!

Now you can use the module in any of your React Native components.

File 9: Example Usage (`App.tsx`)

Here is a complete example of how to use your new module.

import React, { useEffect, useState } from 'react';
import { View, Text, Button, StyleSheet, Platform } from 'react-native';
import LocationEnabler from './src/LocationEnabler'; // <-- Import the bridge

const App = () => {
  const [locationStatus, setLocationStatus] = useState<string>('Checking...');

  // Function to check the location status
  const checkLocationStatus = async () => {
    if (Platform.OS === 'android') { // Only run on Android
      try {
        const isEnabled = await LocationEnabler.isLocationEnabled();
        setLocationStatus(isEnabled ? 'On' : 'Off');
      } catch (e) {
        console.error(e);
        setLocationStatus('Error');
      }
    }
  };

  // Function to prompt the user to enable location
  const enableLocation = async () => {
    if (Platform.OS === 'android') {
      try {
        const result = await LocationEnabler.promptForEnableLocation();
        console.log('Prompt result:', result); // "already-enabled", "enabled", or an error
        // Re-check the status after the user has made a choice
        await checkLocationStatus();
      } catch (e) {
        console.error(e);
      }
    }
  };

  // Check the location status when the component first loads
  useEffect(() => {
    checkLocationStatus();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Location Status</Text>
      <Text style={styles.status}>{locationStatus}</Text>
      {locationStatus === 'Off' && (
        <Button title="Enable Location" onPress={enableLocation} />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  status: {
    fontSize: 18,
    marginBottom: 20,
  },
});

export default App;

And that's it! You now have a reusable native module for handling location services in your Android app.

Fresh Tomatoes guys

Sourav das — Thu, 09 Dec 2021 14:04:32 +0000

Alright let me clear I am not opening any tomato shop :)

I am gonna show you how to get any movie rottentomatoes score using my python package.
Let me show you,

import freshtomatoes as ft
movie=ft.FreshTomatoes()
aladdin=movie.Scores("aladdin")
coco=movie.Scores("coco",2017)

print("Aladdin:- ",aladdin)
print("Coco:- ",coco)

Output

Aladdin:-  {'audiencescore': '94', 'tomatometerscore': '57'}
Coco:-  {'audiencescore': '94', 'tomatometerscore': '97'}

As you can see it is returnig a dictionary containing two info

audiencescore
tomatometerscore

syntax

import freshtomatoes as ft
movie=ft.FreshTomatoes()
movie.Scores("MOVIE_NAME")
#or
name=movie.Scores("MOVIE_NAME",MOVIE_RELEASE_YEAR)

So as you can see it is pretty simple now to get a movie's rottentomatoes scores.

So why wait install and try it now .

pip install freshtomatoes

Visit on pypi.org:- https://pypi.org/project/freshtomatoes/

Want to contribute ?

Check the repo :- https://github.com/freakflames29/FreshTomatoes

Ruby gem for finding weekday of a date

Sourav das — Sun, 18 Jul 2021 15:24:49 +0000

I have created my first ruby gem named DayFinder

This gem is useful if you want to find the weekday of given date

Example:-

require 'DayFinder'
day=DayFinder.find 15,8,1947
puts day
#output
# Friday

You have to provide the date as d-m-Y format.
So do you want to give it a try ?
Install and try now

Installation

gem 'DayFinder'

And then execute:

$ bundle install

Or install it yourself as:

$ gem install DayFinder

The Github Repo:https://github.com/freakflames29/DayFinder
Rubgems.org:- https://rubygems.org/gems/DayFinder

Binary search tree in ruby

Sourav das — Wed, 23 Jun 2021 15:32:57 +0000

BST is data-structure that is used to store data in a tree or hierarchical format.
In bst we make a root node and store the data which is lower than the value of root node to left part of the root node and the data which is greater than the root node store it on right side of the root node

Code

# creating a node
class Node
    attr_accessor :data,:left,:right
    def initialize data
        @data=data
        @left=@right=nil
    end
end
# inserting values in tree 

def insert root,data 
    if root==nil 
        return Node.new(data)
    elsif root.data<data
        root.right=insert root.right,data 
    else
        root.left=insert root.left,data
    end
    return root
end

# printing the values in preorder fashion
def preorder root
    if root==nil 
        return
    end
    print "#{root.data} "
    preorder root.left
    preorder root.right
end

root=nil
root=insert(root,10)
insert(root,9)
insert(root,12)
preorder root
puts

output:- 10 9 12
here is a bst and we are printing the tree in preorder manner.

Zigzag tree traversal

Sourav das — Sun, 13 Jun 2021 13:00:55 +0000

In this article I will show you how to traverse a tree in zigzag manner

// zigzag trav for tree

            --->
//           12
//         /    \
        <------------
//        9      15
//       / \
      ------------>
//      4   10

// output :- 12 15 9 4 10

#include<iostream>
#include<stack>
using namespace std;
class Node
{
public:
    int data;
    Node *right,*left;
    Node(int data)
    {
        this->data=data;
        right=left=NULL;
    }
};
void zigzagtrav(Node *root)
{
    stack<Node*> curr;
    stack<Node*> next;
    bool leftToright=true;
    curr.push(root);
    while(!curr.empty())
    {
        Node *tmp=curr.top();
        curr.pop();
        if(tmp)
        {
            cout<<tmp->data<<" ";
            if(leftToright)
            {
                next.push(tmp->left);
                next.push(tmp->right);
            }
            else
            {
                next.push(tmp->right);
                next.push(tmp->left);
            }
        }
        if(curr.empty())
        {
            leftToright=!leftToright;
            swap(curr,next);
        }
    }
}
int main()
{   
    #ifndef ONLINE_JUDGE
        freopen("../input.txt", "r", stdin);
        freopen("../output.txt", "w", stdout);
    #endif
    Node *root=new Node(12);
    root->right=new Node(15);
    root->left=new Node(9);
    root->left->left=new Node(4);
    root->left->right=new Node(10);
    zigzagtrav(root);
    return 0;
}

here we are using two stacks

curr which is to store our current node
next which is to store the next node
here the leftToright is to check that are we are printing the nodes left-to-right or right-to-left if the variable is true then we are printing the nodes left to right else print right-to-left.
Here if leftToright is true we are pushing the current left and then right node to next stack else push current right and then left node to next stack.
and checking if the curr node is empty swap the stack with next stack and toggle the leftToright variable.

Do it until both stack is empty.

Merge sort

Sourav das — Wed, 05 May 2021 08:11:21 +0000

In cpp

#include <iostream>
using namespace std;
void ms(int *arr,int low,int mid,int high)
{
    int b[low+high];
    int i=low;
    int j=mid+1;
    int k=low;
    while(i<=mid && j<=high)
    {
        if (arr[i]<arr[j])
        {
            b[k]=arr[i];
            i++;
        }
        else
        {
            b[k]=arr[j];
            j++;
        }
        k++;
    }
    while(i<=mid)
    {   
        b[k]=arr[i];
        i++;
        k++;
    }
    while(j<=high)
    {
        b[k]=arr[j];
        j++;
        k++;
    }
    int p=low;
    while(p<k)
    {
        arr[p]=b[p];
        p++;
    }
}
void divide(int *arr,int low,int high)
{
    if(low<high)
    {
        int mid=(low+high)/2;
        divide(arr,low,mid);
        divide(arr,mid+1,high);
        ms(arr,low,mid,high);
    }
}
int main()
{
    int arr[]={5,6,8,9,1};
    divide(arr,0,5);
    for (int i = 0; i < 5; ++i)
    {
        cout<<arr[i]<<" ";
    }
    cout<<endl;
}

In python

def ms(n):
    if len(n)>1:
        mid=len(n)//2
        lefthalf=n[:mid]
        righthalf=n[mid:]
        ms(lefthalf)
        ms(righthalf)
        i=j=k=0
        while i<len(lefthalf) and j<len(righthalf):
            if lefthalf[i]<righthalf[j]:
                n[k]=lefthalf[i]
                i+=1
                k+=1
            else:
                n[k]=righthalf[j]
                j+=1
                k+=1
        while i<len(lefthalf):
            n[k]=lefthalf[i]
            i+=1
            k+=1
        while j<len(righthalf):
            n[k]=righthalf[j]
            j+=1
            k+=1
    return n
a=[9,1,5,3,4,3]
print(ms(a))

in ruby

def ms n
    if n.size>1
        mid=n.size/2
        left=n.slice(0,mid)
        right=n.slice(mid,100)
        ms left
        ms right
        i=j=k=0
        while i<left.size && j<right.size
            if left[i]<right[j]
                n[k]=left[i]
                i+=1
                k+=1
            else
                n[k]=right[j]
                j+=1
                k+=1
            end
        end
        while i<left.size
            n[k]=left[i]
            i+=1
            k+=1
        end
        while j<right.size
            n[k]=right[j]
            j+=1
            k+=1
        end
    end
    return n
end

n=[9,6,4,1,2]
print ms n
puts

Total number of comparision and swaps in bubble sort

Sourav das — Thu, 22 Apr 2021 16:36:55 +0000

In c++

#include <iostream>
using namespace std;
int main()
{
    int temp=0;
    int swap=0,comp=0;
    int a[3];
    cout<<"Enter 3 numbers"<<endl;
    for (int i = 0; i < 3; ++i)
    {
        cin>>a[i];
    }

    cout<<endl;
    cout<<"The list you enterd"<<endl;
    for (int i = 0; i < 3; ++i)
    {
        cout<<a[i]<<" ";
    }
    cout<<endl;
    for (int i = 1; i < 3; ++i)
    {
        for (int j = 0; j < 3-i; j++)
        {
            if(a[j]>a[j+1])
            {
                temp=a[j];
                a[j]=a[j+1];
                a[j+1]=temp;
                swap++;
            }
            comp++;
        }
    }
    cout<<endl;
    cout<<"The sorted list"<<endl;
    for (int i = 0; i < 3; ++i)
    {
        /* code */
        cout<<a[i]<<" ";
    }
    cout<<endl;
    cout<<"The number of swaps "<<swap<<endl;
    cout<<"The number of comparision "<<comp<<endl;

}

in python

a=[5,61,1]
swap=0
comp=0
leng=len(a)

for i in range(1,leng):
    for j in range(0,leng-i):
        if a[j]>a[j+1]:
            temp=a[j]
            a[j]=a[j+1]
            a[j+1]=temp
            swap+=1
        comp+=1
print("The sorted list")
for i in a:
    print(i,end=" ")
print()
print("Total number of comparison {}".format(comp))
print("Total number of swap %d"%swap)

in ruby

a=[5,61,1]
comp=0
swap=0
for i in (1...a.size)
    for j in (0...a.size-i)
        if a[j]>a[j+1]
            temp=a[j]
            a[j]=a[j+1]
            a[j+1]=temp
            swap+=1
        end
        comp+=1
    end
end
puts 
puts "The sorted list"
a.each_index do |num|
    print " #{a[num]}"
end
puts
puts " Total number of comparision #{comp}" 
puts " Total number of swaps #{swap}"

Trying to do something sexy in vue js (Spotify Clone)

Sourav das — Sat, 17 Apr 2021 16:10:39 +0000

Spotify homepage clone using Vue js
github url:- https://github.com/freakflames29/spotify-vue
Live Website:- https://spotifyvuejs.netlify.app/

Selection sort program in ruby

Sourav das — Fri, 16 Apr 2021 07:22:50 +0000

n=5 # the size of the array
a=Array.new # creating a blank aray

puts "Enter the numbers"
for i in (0...n)
  a << gets.to_i # getting user input and pushing that into the array
end
for i in (0...n)
  min=a[i] # storing the a[i] value in min for tracking the lower value
  loc=i  # storing the i's location
  for j in (i+1...n)
    if a[j]<min
      min=a[j]
      loc=j
    end
  end
  # swapping the lowest no 
  temp=a[i] 
  a[i]=min
  a[loc]=temp
end

puts "The sorted array"
# printing the numbers 
a.each_index do |x|
  print " #{a[x]}"
end
puts

Regex for email validation in rails

Sourav das — Sat, 10 Apr 2021 14:54:34 +0000

A simple regex for email validation

VALID_EMAIL_REGEX= /^(|(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6})$/i

    validates :email , presence: true,uniqueness:{case_sensetive:false},
    format:{with:VALID_EMAIL_REGEX,multiline:true}

view it on rubular
https://rubular.com/r/DofEroQvHSXNIw

How to pass data from child to parent in vue js

Sourav das — Wed, 07 Apr 2021 13:05:44 +0000

In this article I will show you how to pass data from child to parent in vue.
We know that if we want to send data from parent to child we can use props but for the reverse case we have to use a different approach to achieve this.

App.vue



<template>

  <h1>{{ title }}</h1>

  <Child @changeTitle="ChangeT($event)" />

</template>
<script>
import Child from "./components/Child"
export default{
name:'App',
components: {
    Child,
},
data()
{
   return{
     title:'Rick Grimes'
         }
},
methods:{
    ChangeT(title)
    {
      this.title=title;
    },
}
</script>
<style></style>

Child.vue



<template lang="html">
  <button type="button" @click='passEvent'> Update me</button>
</template>

<script>
export default {
  name:'Child',
  methods:{
    passEvent()
    {
      this.$emit('changeTitle','Awesome ')
    }
  }
}
</script>

<style lang="css" scoped>
</style>

In child.vue we are using a method named $emit this method takes 2 arguments first the custom event and the second is the data we are passing

changeTitle is the custom event
'Awesome' is the data we are passing to parent

in App.vue we are calling a method named 'ChangeT($event)' on the event 'changeTitle' (it is custom event you can name as your preferences)

when the ChangeT function called it takes the parameter which we are passing from child in this case $event='Awesome'

then we are simply changes the data value with this $event value

Now we have successfully passed data from child to parent in vue

Deploy your react app on netlify for free

Sourav das — Sat, 03 Apr 2021 15:29:09 +0000

In this post i will show you how to deploy your react app on netlify
It is simple :)

1 install netlify cli using npm

npm install netlify-cli -g

2 run:- npm run build

Open your project folder in terminal and run this command

npm run build

it will generate a build directory

3 run:- netlify deploy

Continue the further process like name your website whatever you want but care fully choose the ./build directory for deploy

then you will get a website_draft_url check the link and if you see your website all content and functionality is ok then proceed to further step .

now if you want to view your actual webaddress you will find the page not found message so then you have to do,

4 deploy it on your actual domain which you chose

now your website is live but web address looks horrible so
run

netlify deploy --prod

Then you will finally see your app on web address like
yourwebsitename.netlify.app