CODEWITHSUNDEEP
javascriptfirebasereact-nativeexpo
Pradeep
Pradeep

Reputation: 808

Can't find a variable atob

Screen1.js

import React,{useEffect} from 'react'
import {View,Text} from 'react-native'
import * as firebase from 'firebase/app';
import '@firebase/firestore';

const Screen1 = props =>{

    useEffect(() => 
    {
        var dbh = firebase.firestore().collection("Jots").doc("note");
        dbh.set({name:"pradeep"}) //The yellow warning is popped up in this line.
    }); 

    return(
             <View>
                <Text>Title</Text>
             </View>
    )
}

console

[Unhandled promise rejection: ReferenceError: Can't find variable: atob]

Stack trace:
  node_modules\@firebase\firestore\dist\index.cjs.js:23101:0 in <global>
  http://192.168.0.108:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:131203:60 in fromBase64String

I just followed the guide in the expo documentation but still don't know why this problem is occurring. Need a clear explanation on this. And also what is atob variable?

Upvotes: 15

Views: 20908

Answers (5)

Zahir Masoodi
Zahir Masoodi

Reputation: 858

The atob function is part of the JavaScript window object and is not available in React Native.

To decode base64-encoded data in React Native, you can use the base-64 library

Upvotes: 0

filipesluiz
filipesluiz

Reputation: 11

Thanks @Pradeep. This worked for me on firebase 7.14.1: 

import {decode, encode} from 'base-64'

if (!global.btoa) {  global.btoa = encode }

if (!global.atob) { global.atob = decode }

and using import like this 

import firebase from 'firebase';
import 'firebase/firestore'

Upvotes: 1

Pradeep
Pradeep

Reputation: 808

I have tried downgrading but that's not resulted as a solution to me. I don't know why.

The global import of base64 in the app.js resolved this problem.

import {decode, encode} from 'base-64'

if (!global.btoa) {  global.btoa = encode }

if (!global.atob) { global.atob = decode }

Thanks for your responses.

Upvotes: 44

Eydwales
Eydwales

Reputation: 321

Worked for me ! Thanks papay0, there is indeed something wrong with version 7.9.1.

npm install [email protected]
expo r -c # restard expo without cache

You can rm -rf ./node_modules/ && npm i

Upvotes: 11

papay0
papay0

Reputation: 1311

I found a workaround, I still there is a bug on their side. They just released 2 days ago version 7.9.1. Try to use 7.9.0.

yarn add [email protected]

I am creating an issue for it, follow here.

Upvotes: 7

Related Questions