score:3

Accepted answer

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
})

then for react you could do inline styling with the same object, but be aware that not all styles supported in stylesheets can be used for inline styling, so if you want to do something equivalent there's libraries out there like emotion.js to dynamically load css in js

https://github.com/emotion-js/emotion heres an example

import {css} from 'emotion'
import {containerstyle} from '../somefile'

const getcontainerstyles = css`
  border-radius: ${containerstyle.borderradius}
`

export default class someclass extends component {
  render() {
    return(
      <div
        style={getcontainerstyles}
      >
      </div>
    )
  }
}

i hope this helps

score:0

you could concatenate the style of your new component with the style of container, like below

const styles = stylesheet.create({
  container: {
    borderradius: 4,
    borderwidth: 0.5,
    bordercolor: '#d6d7da',
  },
  newcomponent:{
     // new component style
  }
});

<view style={[styles.container, styles.newcomponent]}> 
</view>

score:0 

// your component file name  (button.js) 
import react, { component } from 'react';

// import the style from another file present in the same directory
import styles from 'button.style.js'; 
 // you can reuse this style in another component also

class button extends component {
    render() {
        return (
            <view style={styles.container}>
                <text style={styles.buttontext}> press me! </text>
            </view>
        );
    }
}

export default button;

// your style file  name ( "button.style.js")

import { stylesheet } from 'react-native';

export default stylesheet.create({
    container: {
        padding: 10,
        alignitems: 'center',
        justifycontent: 'center',
        backgroundcolor: '#43a1c9',
    },
    buttontext: {
        fontsize: 20,
        textalign: 'center'
    }
});

Related Query

More Query from same tag