Is it possible to split var styles = StyleSheet.create from React.component into different scripts in the native answer?

Question

Is it possible to split var styles = StyleSheet.create from React.component into another script in the native response?

Answer 1

it is possible. just create a js file with this template:

'use strict'; var React = require('react-native'); var myStyles = React.StyleSheet.create({ style1: { }, style2: { } )} module.exports = myStyles; 

then in your js component you need to use this stylesheet for example. if your js style file is called phongyewtong.js

 var s = require('../the/path/to/phongyewtong'); 

using:

 <View style = {s.style1} /> 

Answer 2

Both of the links below explain very well how to move styles from your "structural" code:

• https://hackernoon.com/manage-react-native-project-folder-structure-and-simplify-the-code-c98da77ef792
• https://medium.com/the-react-native-log/tips-for-styling-your-react-native-apps-3f61608655eb

Basically (copying the code fragment from the link above 2) your styles have in a separate JS, say, text.js file:

 const text = StyleSheet.create({ p: { color: 'black', fontFamily: 'Open Sans', fontSize: 14, }, title: { fontWeight: 'bold', color: 'black', fontFamily: 'Open Sans', fontSize: 20, } }); export default text; 

In the React component, you can simply import this text style and use it directly

 <Text style={text.p}>settings</Text> 

Hope this helps.

Answer 3

In a later version of React Version (0.31), I used this code:

 import React, { Component, PropTypes } from 'react'; import { StyleSheet } from 'react-native'; var styles = StyleSheet.create({ ... }); module.exports = styles;