How to Reuse React-Native Stylesheet (Styles) in React

How to reuse react-native StyleSheet (styles) in react?

What you could do is store all your styles in an object in some file e.g. const containerStyles = { borderRadius: 2 }, export it, then for React Native use the StyleSheets javascript class to create the styles for your div container

import {containerStyles} from '../someFile.js'
const styles = StyleSheets.create({  container: containerStyles})

How To Pass Style Props into a reusable component in React Native for more flexible styling in the future

The Goal:
To create a reusable react component and have the flexibility to style any part of the component in the future.

How to achieve this:

1. Create the reusable component using const or function.
2. Pass 'props' as a parameter to the component, whether functional or const.
3. Give the elements of your reusable component stylings that are arrays of the default styling and "props.futureStyle". Note that "futureStyle" here is just a name and you can use any name you want.
4. Whenever you call the reusable component, you can easily use "futureStyle" to make any changes. Note that you can declare "futureStyle1", "futureStyle2" etc to the different parts of the reusable components so that you can edit the styles of every View, Text, etc that is part of the components wherever they may be added in the future

Example:
Creating the reusable components:

 const ReusableButton = (props) =>{
    return(
    <View style={[styles.currentButtonStyle, props.futureButtonStyle]}>
    <Text style={[styles.currentButtonTitle, props.futureTitleStyle]}>{props.title}</Text>
    </View> )}; 

//Here are my default styles:

const styles = Stylesheet.create({
currentButtonStyle: {
    height:50,
    width: 100, 
    backgrroundColor:'red'},
currentButtonTitle:{
    color: 'white'
    fontSize: 20,
 },
})

Henceforth, anywhere I wish to call and use the ReusableButton, it can edit the styles with the future styles.
Example:

function NewComponent(){
return(
<View>
<Text>Hi let us make use of our old reusable button</Text>
<ReusableButton futureButtonStyle={{width: 200, height: 100, backgroundColor:'blue'}} futureTitleStyle={{fontWeight:'bold', fontSize: 50}}/>
</View>
)
}  

How to inherit style within StyleSheet.create in React Native (using destructuring syntax maybe)

It's impossible to Self-references in object literals / initializers

Solution: 1

const baseStyle = {
  color: 'red',
  backgroundColor: 'white'
}

const styles = StyleSheet.create({
  style1: baseStyle,
  style2: {
    width: 100,
    ...baseStyle
  }
})

Solution 2
Use Styled Components to manage and reuse styles easily.

how do i reuse a react component but with different colours?

One of the ways would be using styles, like you're trying to do in your example. Try to do something like this

const Header = (props) => {
  return <h1 style={props.style}>{props.title}</h1>
}

And you would render it like this

const App = () => {
  return (
    <div>
      <Header title="My Header with Blue text" style={{color: "blue"}} />
      <Header title="My Header with Red text" style={{color: "red"}} />
    </div>
  )
}

Note: You can do the same passing a CSS class as a prop instead of the exact style object.

Handling React reusable component styling dynamically?

I think in your case is question about composition.

You can pass to your component how it should react based on 'place' but you can use component as it is. And make place correct its behaviour for content.

For example you have CardComponent

You can write it like that

const CardComponent = (props) => {
  return (
    <div className={props.cardClasses} styles={props.cardStyles}>
      <div className={props.titleClasses} styles={props.titleStyles}>
         Title
       </div>
      <div  className={props.contentClasses} styles={props.contentStyles}>
         {props.children}
       </div>
    </div>
  )
}

I used classes and styles because it's faster to write)
In the case above you need to pass lots props to styles this component. But you can split it to smaller components CardComponent, CardTitle and CardContent

const CardTitle = (props) => {
  return (
      <div className={props.titleClasses} styles={props.titleStyles}>
         {props.children}
       </div>
  )
}

const CardContent = (props) => {
  return (
      <div className={props.contentClasses} styles={props.contentStyles}>
         {props.children}
       </div>
  )
}
const CardComponent = (props) => {
  return (
    <div className={props.cardClasses} styles={props.cardStyles}>
      {props.children}
    </div>
  )
}

And use it like that

<CardComponent>
  <CardTitle>Title</CardTitle>
  <CardContent>content</CardContent>
</CardComponent>

In that case you can style them separately and even extend/reuse some other components as child of CardComponent

Can I make dynamic styles in React Native?

I usually do something along the lines of:

<View style={this.jewelStyle()} />

...

jewelStyle = function(options) {
   return {
     borderRadius: 12,
     background: randomColor(),
   }
 }

Every time View is rendered, a new style object will be instantiated with a random color associated with it. Of course, this means that the colors will change every time the component is re-rendered, which is perhaps not what you want. Instead, you could do something like this:

var myColor = randomColor()
<View style={jewelStyle(myColor)} />

...

jewelStyle = function(myColor) {
   return {
     borderRadius: 10,
     background: myColor,
   }
 }

---

Related Topics