CODEWITHSUNDEEP
react-nativereact-native-elements
Jonathan Tuzman
Jonathan Tuzman

Reputation: 13262

React Native Elements Theme Provider not working?

I'm pretty sure I'm using this according to the instructions but the text isn't changing:

import React, { Component } from "react";
import { StyleSheet, View } from "react-native";
import { ThemeProvider, Text } from "react-native-elements";
import Customer from "../models/Customer";

class CustomerScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ThemeProvider theme={theme}>
          <Text h1>{customer.fullName}</Text>
          <Text>{customer.email}</Text>
          <Text>{customer.phone}</Text>
        </ThemeProvider>
      </View>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    marginTop: 50,
    marginLeft: 20,
    justifyContent: "flex-start",
    alignItems: "flex-start"
  }
};

const theme = {
  Text: {
    color: "red"
  }
};

export default CustomerScreen;

What am I doing wrong??

Upvotes: 2

Views: 3163

Answers (1)

kenmistry
kenmistry

Reputation: 2143

i got it working by nesting it under style like this:

const theme = {
  Text: {
    style: {
      color: "red"
    }
  }
};

i am not very familiar with <ThemeProvider> and its documentation doesn't clearly indicate that <Text> styling is to be under the style props. you may have to experiment further with it. :)

Upvotes: 3

Related Questions