How to import and export styles in react native?

Question

I am new to react native.I learned the benefits of components, embedding external styles.Now I am trying to use global styles.I'd like to use the same styles of text, button throughout my app.

Better not to repeat the styles in every component, I'd like to create separate text.js, button.js under styles package to customizing view styles.

Here is my project structure.I want to import text.js into my index.js.

index.js

import { AppRegistry } from 'react-native';
import React, {Component} from 'react';
import {
  Text
} from 'react-native';
import text from './App/styles';

export default class FirstApp extends Component{
    render(){
      return (
        <Text styles={text.p}>Customising React</Text>
      );
    }
}
AppRegistry.registerComponent('FirstApp', () => FirstApp);

text.js

import{
  StyleSheet
} from 'react-native';

export default const text = StyleSheet.create({
  p: {
    color: 'blue',
    fontSize: 14
  }
});

Is there any way to import my text.js style into text view in index.js?

score 6 · Answer 1 · answered Oct 23 '18 at 03:31

6

create a new file call 'style.js'

export const customStyle = StyleSheet.create({
   blueblue:{
      color: blue
   }
})

and in your component file

import {customStyle} from './style'

...
<Text style={customStyle.blueblue}>Hi</Text>

answered Oct 23 '18 at 03:31

rickysy

119
4
10

luetkemj · Answer 2 · 2018-02-10T23:36:27.367

5

Export default const is invalid. If you want text to be a default export you will need to define it and export in separate statements.

const text = StyleSheet.create({...}); export default test;

Also it looks like your import path does not match your actual application structure.

import text from './App/styles';

change to

import text from './styles/text.js';

edited Feb 10 '18 at 23:36

answered Feb 10 '18 at 23:03

luetkemj

171
7

Still, i am getting the same error.) Unable to resolve module "./style/text.js' – Ajay Jayendran Feb 10 '18 at 23:27
@AjayJayendran updated my answer - export default const is invalid. – luetkemj Feb 10 '18 at 23:36

score 2 · Answer 3 · answered Feb 11 '18 at 06:21

create this on style.js

    const style = StyleSheet.create({
    p: {
        color: 'blue',
        fontSize: 14
      }
    })

export default style;

and import anywhere you want

like this

import Style from './(path to file)/style'

use style like this

<View style={[Style.p, {
                        padding: 20,
                        backgroundColor: 'grey',
                        justifyContent: 'center',
                        alignContent: 'center'
                    }]}>

if single use

 <View style={Style.p}>

so this may help

How to import and export styles in react native?

3 Answers3