CODEWITHSUNDEEP
javascriptreactjsreact-native
nmnhon
nmnhon

Reputation: 77

Error: 'TypeError: undefined is not an object (evaluating 'window.document.getElementsByTagName')' when trying to initialize smartlook-client

I'm trying to integrate smartlook to a react-native project. When I try to initialize smartlook, it returns TypeError: undefined is not an object (evaluating 'window.document.getElementsByTagName') in the first time rendered but when I press save the code again, it works. Anyone knows why? Pleas. Thank you

import React, {useEffect} from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  View,
  Text,
  TextInput,
} from 'react-native';
import RootNavigation from './src/routes';
import {useFonts} from 'expo-font';
import fonts from './src/theme/fonts';
import {LogBox} from 'react-native';
import 'react-native-gesture-handler';
import {
  requestTrackingPermissionsAsync,
  getTrackingPermissionsAsync,
} from 'expo-tracking-transparency';
import smartlookClient from 'smartlook-client';

const App = () => {
  smartlookClient.init('xxx');
  const [loaded] = useFonts(fonts);
  LogBox.ignoreLogs(['Warning: ...']);
  useEffect(() => {
    (async () => {
      const {status} = await requestTrackingPermissionsAsync();
      if (status === 'granted') {
        console.log('Yay! I have user permission to track data');
      }
    })();
  }, []);
  Text.defaultProps = Text.defaultProps || {};
  Text.defaultProps.allowFontScaling = false;
  TextInput.defaultProps = {
    ...(TextInput.defaultProps || {}),
    allowFontScaling: false,
  };
  if (!loaded) {
    return null;
  }

  return (
    <View style={styles.container}>
      <StatusBar
        translucent
        barStyle="dark-content"
        backgroundColor={'transparent'}
      />
      <View style={styles.container}>
        <RootNavigation />
      </View>
    </View>
  );
};
export default App;

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, });

Upvotes: 1

Views: 956

Answers (1)

Neil Girardi
Neil Girardi

Reputation: 4933

If you look at the smartlook example code here you will see that they wait for componentDidMount to initialize the client. You are using a function component as opposed to a class component. Therefore, you don't have componentDidMount. So the way to do the equivalent of componentDidMount in a function component would be:

useEffect(() => {
    // inside here is the same as componentDidMount
    smartlookClient.init('xxx')
}, [])

Upvotes: 0

Related Questions