I am trying to setup global styles in react-native. I have imported
import {injectGlobal} from 'styled-components';
and have
class XoxoContainer extends Component { render() { return <Xoxo {...this.props} /> } } injectGlobal` font-family: '20' `; But I keep getting styledComponents.injectGlobals is not a function. in the console.
That function is not part of the library on react-native according to this Github issue. That's why it keeps saying that it's not a function, because it can't find it.
create a styles.js file like this:
import React, {Component} from 'react'; import { Platform, StyleSheet } from 'react-native'; export const styles = StyleSheet.create({ view_flex_one_white: { flex: 1, backgroundColor: white }}); and use this anywhere in your app with import
import {styles} from "...link to file/styles"; render(){ return( <View style={styles.view_flex_one_white}> </View> ) } Create a js file with this pattern:
'use strict'; var React = require('react-native'); var myStyle = React.StyleSheet.create({ style1: { }, style2: { } )} module.exports = myStyle; your component js use require to use that style sheet
var customStyle = require('../the/path/to/commonStyleSheet'); Use now like this:
<View style = {customStyle .style1} /> 