'I can't add contacts using expo react native, "WRITE_CONTACTS" permission is required but I already have it

This is my app.json

{
  "expo": {
    "name": "add-contact-list",
    "slug": "add-contact-list",
    "version": "1.0.0",
    "assetBundlePatterns": [
      "**/*"
    ],
    "android": {
      "package": "the.contacts.adder"
    }
  },
  "android": {
    "permissions": [
      "WRITE_CONTACTS"
    ]
  }
}

As you can see I already have the permission, in my code I also ask the permission to the user

 const { status } = await Contacts.requestPermissionsAsync();
 if (status === 'granted') {
    await Contacts.addContactAsync(newContact);
 }

But I get the following error when I try to add the contact:

[Unhandled promise rejection: Error: Missing write contacts permission.]

What I'm doing wrong? I'm testing my app on android

I'm using only 1 component which is the main component, here is the full source code.

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import * as Contacts from 'expo-contacts';


export default function App() {
    const start = async (params) => {
        const { status } = await Contacts.requestPermissionsAsync();
        if (status === 'granted') {
            const newContact = {
              [Contacts.Fields.Name]: `Test`,
              [Contacts.Fields.PhoneNumbers]: [
                {
                    number: '(81) 8184-2218',
                    isPrimary: true,
                    digits: `81842218`,
                    countryCode: '+52',
                    id: `XXXX-TEST`,
                    label: `TEST`,
                },
              ]
            };

            await Contacts.addContactAsync(newContact);
        }
    }


    return (
      <View style={styles.container}>
        <Text>Click the button to save the phone number</Text>
      
        <TouchableOpacity
          onPress={start}
          style={styles.button}>
          <Text style={{ fontSize: 20, color: '#fff' }}>Click here</Text>
        </TouchableOpacity>
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    width: 120,
    height: 57,
    backgroundColor: '#000',
    textAlign: 'center'
  }
});

Update I also generate an standalone app but it also didn't work to solve my problem.

I don't know if I also need to edit AndroidManifest.xml, I have checked this file and the permission is not registered there, but because I'm using expo to build the app, I guess is not necessary to edit native platform source code.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source