Enable Geolocation Permissions

[antoniomartos]

Good morning.

I need to enable “Geolocation” permissions in the application. I’ve been guided by the following documentation:

• PermissionsKepler | React Native Vega Reference

• https://developer.amazon.com/docs/kepler-tv-api/security-manager-overview.html

The problem I’m having is that when I try to import PermissionsKepler into the project, it can’t find it in the react-native-kepler library. I also analyzed the node_modules, and indeed, I don’t see anything about it—I only see certain Readme.md files mentioning it. I assume it’s outdated and no longer exists in the API itself.

Regarding the Security Manager, it doesn’t react at all when I implement the code and point to the “com.amazon.location.privilege.access.fine” module, with no reaction in the app or the debugger itself.

• If you have any information on how to implement and manage geolocation permissions or those for other devices, please let me know.

Thank you very much.

[Siva_Prakash]

Hi @antoniomartos,

Would you be able to share the error message (or screenshot), code sample and logs for this issue?

Regards,
Siva

[antoniomartos]

With this code, it doesn’t even enter the const handle when using the debugger — it doesn’t react at all:

import { SecurityManager, PrivilegeState } from ‘@amzn/security-manager-lib’;

const handleButtonRequestLocation = () => {SecurityManager.getPrivilegeState(‘com.amazon.location.privilege.access.fine’).then((state: PrivilegeState) => {if (state === PrivilegeState.ALLOW) {SecurityManager.requestPrivilege(‘com.amazon.location.privilege.access.fine’).then((stateRequest: PrivilegeState) => {if (stateRequest === PrivilegeState.ALLOW) {console.log(‘Request Allow permission location’);return true;}},(error: Object) => {console.log(‘Failed to request privilege: {}’, error);});}},(error: Object) => {console.log(‘Failed to get privilege state: {}’, error);});};

 useEffect(() => {
    handleButtonRequestLocation();
  }, []);

And with PermissionsKepler, it tells me this — in the library from node_modules, it doesn’t exist:

[Ivy_Mahajan]

Hi @antoniomartos

Instead of using PermissionsKepler from “@amzn/react-native-kepler” , can you try the following?

import { usePermissionsKepler, PERMISSIONS } from '@amzn/react-native-kepler';

I tried this and did not face the Geolocation Permissions issue.
Sharing my App.tsx snippet here.

/*
 * Copyright (c) 2022 Amazon.com, Inc. or its affiliates.  All rights reserved.
 *
 * PROPRIETARY/CONFIDENTIAL.  USE IS SUBJECT TO LICENSE TERMS.
 */

import React, {useState, useEffect} from 'react';
import {StyleSheet, Text, ImageBackground, View, Image} from 'react-native';
import {Link} from './components/Link';
import {usePermissionsKepler, PERMISSIONS} from '@amzn/react-native-kepler';

const images = {
  kepler: require('./assets/kepler.png'),
  learn: require('./assets/learn.png'),
  support: require('./assets/support.png'),
  build: require('./assets/build.png'),
};

export const App = () => {
  const [image, setImage] = useState(images.kepler);
  const [permissionStatus, setPermissionStatus] = useState('checking');
  const [check, request] = usePermissionsKepler();

  const requestLocationPermission = async () => {
    try {
      const hasPermission = await check(PERMISSIONS.ACCESS_FINE_LOCATION);

      if (hasPermission) {
        console.log('Location permission already granted');
        setPermissionStatus('granted');
        return true;
      }

      const requestResult = await request(PERMISSIONS.ACCESS_FINE_LOCATION);
      console.log('Permission request result:', requestResult);

      setPermissionStatus(requestResult === 'granted' ? 'granted' : 'denied');
      return requestResult === 'granted';
    } catch (error) {
      console.error('Permission error:', error);
      setPermissionStatus('error');
      return false;
    }
  };

  useEffect(() => {
    requestLocationPermission();
  }, []);

  const styles = getStyles();

  return (
    <ImageBackground
      source={require('./assets/background.png')}
      style={styles.background}>
      <View style={styles.container}>
        <View style={styles.links}>
          <View style={styles.headerContainer}>
            <Text style={styles.headerText}>Hello World!</Text>
            <Text style={styles.subHeaderText}>
              Select one of the options below to start your Kepler journey 🚀
            </Text>
            <Text style={styles.permissionText}>
              Location Permission: {permissionStatus}
            </Text>
          </View>
          <Link
            linkText={'Learn'}
            onPress={() => {
              setImage(images.learn);
            }}
            testID="sampleLink"
          />
          <Link
            linkText={'Build'}
            onPress={() => {
              setImage(images.build);
            }}
          />
          <Link
            linkText={'Support'}
            onPress={() => {
              setImage(images.support);
            }}
          />
        </View>
        <View style={styles.image}>
          <Image source={image} />
        </View>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.text}>
          💡 Edit App.tsx to change this screen and then come back to see your
          edits
        </Text>
      </View>
    </ImageBackground>
  );
};

const getStyles = () =>
  StyleSheet.create({
    background: {
      color: 'white',
      flex: 1,
      flexDirection: 'column',
    },
    container: {
      flex: 6,
      flexDirection: 'row',
      alignItems: 'center',
    },
    headerContainer: {
      marginLeft: 200,
    },
    headerText: {
      color: 'white',
      fontSize: 80,
      marginBottom: 10,
    },
    subHeaderText: {
      color: 'white',
      fontSize: 40,
    },
    links: {
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'space-around',
      height: 600,
    },
    image: {
      flex: 1,
      paddingLeft: 150,
    },
    textContainer: {
      justifyContent: 'center',
      flex: 1,
      marginLeft: 190,
    },
    text: {
      color: 'white',
      fontSize: 40,
    },
    permissionText: {
      color: 'white',
      fontSize: 30,
      marginTop: 20,
    },
  });

Please try and let me know if this helps.

Warm regards,
Ivy

[antoniomartos]

What version of react-native-kepler are you using? Is there a newer version available?

This is the version I have installed, but it keeps showing a render error every time.

[Ivy_Mahajan]

Hi @antoniomartos

While trying another workaround, we found Permission API is still giving error. We are still working on the fix.
Apologies for the delay.

Warm regards,
Ivy