Colors, Typography or Spacings return undefined in StyleSheet

Abierto
  • ¿Algo no está bien?
#1,780 18 comentarios 4 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@ethanshar ya está trabajando en esto.

Desde el 16/3/2022.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

bug

Description

Colors, Typography, Spacings cannot be used in StyleSheet.create() [Forked from #1513]

Related to
  • Components
  • Demo
  • Docs
  • Typings
  • Foundation
Steps to reproduce

Initialize any RN App. Put Colors.loadColors({...}) in entry file where App Component is registered.

In any component file, use

const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.customColor //returns undefined
  }
})
Expected behavior

Any Colors property should return a HEX value. Example: Colors.customColor => "#374FE8"

Actual behavior

If you do not initialize StyleSheet.create() within the component (which is pointless) then Color values are not loaded properly.
Returns undefined.

More Info

Can provide if requested.

Code snippet
// entry file index.js
import { registerRootComponent } from "expo";
import { Colors } from "react-native-ui-lib";
import App from "./App.jsx";

Colors.loadColors({
 customColor: "#374FE8"
});
registerRootComponent(App);

import { View, Text, Colors} from 'react-native-ui-lib'

const Home = (props) => {

// Will render a View with white background instead of 'customColor'
return (
  <View style={styles.container}> 
    <Text>Home</Text>
  </View>
)
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.customColor
  }
})
Screenshots/Video

No screenshots are available at this time.

Environment
// package.json
"dependencies": {
    "expo": "~44.0.0",
    "expo-splash-screen": "^0.14.1",
    "expo-status-bar": "~1.2.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-gesture-handler": "^2.1.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-reanimated": "^2.3.1",
    "react-native-ui-lib": "^6.7.1",
    "react-native-vector-icons": "^9.0.0",
    "react-native-web": "0.17.1",
    "react-redux": "^7.2.6",
    "react-router-dom": "^5.2.0",
    "react-router-native": "^5.2.0",
    "redux": "^4.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "redux-devtools-extension": "^2.13.9"
  },
  • React Native: 0.64.3
  • React Native UI Lib: ^6.7.1
Affected platforms
  • Android
  • iOS
  • Web (untested)
Lenguaje dominante
TypeScript
Estrellas
7.2k
Forks
749
Merge medio
2 d 4 h
PR fusionados (30 d)
4

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de wix/react-native-ui-lib

Todos los issues de wix/react-native-ui-lib

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.