Colors, Typography or Spacings return undefined in StyleSheet

Aperta
  • Qualcosa non va?
#1,780 18 commenti 4 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@ethanshar ci sta già lavorando.

Dal 16/3/2022.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

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)
Lingua principale
TypeScript
Stelle
7.2k
Fork
749
Merge medio
29m
PR unite (30g)
1

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di wix/react-native-ui-lib

Tutte le issue di wix/react-native-ui-lib

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.