Question 33089 in React native Question posted in
The official React Native documentation can be found here.

How to Add External StyleSheet for My React Native Project

How to Add External StyleSheet for My React Native Project

Add External StyleSheet

Tags:

2

Answers


  1. 0

    First, you must create a file to export a StyleSheet object with styles.

    Style.js

    import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({

box: {
    width: '80%',
    height: 150,
    backgroundColor: 'red',
    alignSelf: 'center',
    borderRadius: 9
  }
   
});

export { styles }

    And in your component, you must import that.

    import React, { Component } from "react";
import { View } from 'react-native';
import { styles } from "./Style";

class Home extends Component {
    render(){
        return(
            <View>
                <View style={styles.box}>

                </View>
            </View>
        )
    }
}

export default Home;

    Finally, run the app.

    Login or Signup to reply.
  2. 0

    If I understand you correctly, you want to add a style to your component/s.

    I assume you are using a Functional Component.

    A good practice is to do it by creating a style.js file, on the same folder where your component is located.

    style.js

        import { StyleSheet } from 'react-native';
    const styles = StyleSheet.create({
      container: {
        width: '100%',
        height: '100%',
        backgroundColor: 'green'    
     }    
    })

    export { styles }

    and in your desired component you should import it.

    MyComponent.js

    import React from 'react'
import { View } from 'react-native'

import { styles } from './styles' //<<-- import

const MyComponent = (props) => {
 . (Whatever states and handlers, etc. that your component does)
 .
 . 

 return (
    <View style={styles.container}> //<<-- usage
    ...rest of your JSX
    </View>
 )

}

export default MyComponent

    good luck!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search