Styling example in react native

• Create Components folder under src folder
• Add TextEXP.js file and add below Code

import React from "react";

import { Text, View, StyleSheet } from "react-native";

const StylingEXP1 = () => {

  return (

    <View>

      <Text>Styling example</Text>

      <Text style={styles.myStyle}>Line 1</Text>

      <Text>Line 2</Text>

      <Text>Line 2</Text>

    </View>

  );

};

export default StylingEXP1;

const styles = StyleSheet.create({

  myStyle: {

    marginTop: 20,

    textAlign: "center",

    color: "blue",

    fontWeight: "bold",

    fontSize: 20

  }

});

• Open App.js file and update code as below

import React from 'react';

import { View,StyleSheet } from 'react-native';

import StylingEXP1 from './src/Component/StylingEXP1'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <StylingEXP1/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output:

CSS External Styling in React

• Create Components folder under src folder
• Add CSSExternalCss.js file and add below Code

import React, { Component } from "react";

import "./CSSExternalCss.css";

class CSSExternalCss extends Component {

render() {

return (

<div>

CSS external Styling<br />

Styling React components with CSS stylesheets

<div className="mycss">Style!</div>

<h5>Style!</h5>

</div>

);

}

}

export default CSSExternalCss;

• Add CSSExternalCss.css file and add below Code

h5 {

background-color: rebeccapurple;

height: 50px;

font-size: 20px;

}

.mycss {

background-color: red;

height: 30px;

font-size: 30px;

}

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import CSSExternalCss from "./component/CSSExternalCss";

import "./styles.css";

function App() {

return (

<div className="App">

<CSSExternalCss />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

CSS Inline Styling in React

• Create Components folder under src folder
• Add CSSInlineStyling.js file and add below Code

import React, { Component } from "react";

class CSSInlineStyling extends Component {

render() {

return (

<div>

CSS Inline Styling

<h1 style={{ color: "red", fontSize: "15px", textAlign: "center" }}>

Style!

</h1>

<h1 style={{ backgroundColor: "lightblue" }}>Style!</h1>

</div>

);

}

}

export default CSSInlineStyling;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import CSSInlineStyling from "./component/CSSInlineStyling";

import "./styles.css";

function App() {

return (

<div className="App">

<CSSInlineStyling />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output: