How to globally import react-native style classes

Question

Ni, I'm using a react component, in my react-native app. It transitioned over to react-native fine, except for styling. This is how the component is rendered:

<Leaderboard data={this.state.sampleData} votes="score" artistName="artist" songTitle="name" albumCover="image" id="id" />

It uses the following style sheet when running in web: import "react-h5-audio-player/lib/styles.css";

Unfortunately, react-native doesn't accept .css files. So I created the following styles.js file:

import { StyleSheet } from "react-native"; const styles = StyleSheet.create({ rhap_container: { boxSizing: "border-box", display: "flex", flexDirection: "column", lineHeight: "1", fontFamily: "inherit", width: "100%", padding: "10px 15px", backgroundColor: "#fff", boxShadow: "0 0 3px 0 rgba(0, 0, 0, 0.2)", }, rhap_container_focus_not__focus_visible: { outline: "0", }, rhap_container_svg: { verticalAlign: "initial", }, rhap_header: { marginBottom: "10px", },...

I'm stuck now: how do I import this new styles object, so it applies to Leaderboard?

Salim · Accepted Answer · 2020-06-25 10:37:19Z

First you need to export your styles in styles.js by adding export default

Now you can import it in Leaderboard component, into Leaderboard.js directly or passing styles to its props like this :

import styles from "./styles.js"; <Leaderboard data={this.state.sampleData} votes="score" artistName="artist" songTitle="name" albumCover="image" id="id" style={styles.rhap_container} // or you could pass all styles styles={styles} />

Thanks! Where do I add the export default? When I do export default styles = StyleSheet.create({ it says "styles is not defined"
You can export a const. export default const styles = StyleSheet.create({ I recommend you to read also documentation about stylesheet, their also other options in RN styling : reactnative.dev/docs/stylesheet

Collectives™ on Stack Overflow

How to globally import react-native style classes

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related