React Native TypeError: undefined is not an object

Question

I got the error while evaluating a const object, here's a minimal working example:

import React from "react";
import { View, StyleSheet } from "react-native";

const App = () => {
  return (
    <View style={styles.container}></View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor:colors.bg,
  },
});

const colors = {
  bg:'blue',
}

export default App;

Error message: TypeError: undefined is not an object (evaluating 'colors.bg')

What's going on here?

Hamas Hassan · Accepted Answer · 2021-08-16 09:25:48Z

2

You have to define colors const before the styles.

Try This

import React from 'react';
import {View, StyleSheet} from 'react-native';

const App = () => {
  return <View style={styles.container}></View>;
};

const colors = {
  bg: 'blue',
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.bg,
  },
});

export default App;

answered Aug 16, 2021 at 9:25

Hamas Hassan

9241 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ljavuras.py Over a year ago

This works, thank you. Why colors has to be defined before styles, but styles can be defined after App?

Hamas Hassan Over a year ago

In javascript code will be read line by line that's why in your code colors.bg is not define before calling it thats why its value is undefined. You can upvote if my answer is helpful. Thanks.

Collectives™ on Stack Overflow

React Native TypeError: undefined is not an object

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related