Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

React Native style Prop

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

In React Native, we can style our application using JavaScript. All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing.

The style prop can be a plain old JavaScript object. We can also pass an array of styles.


<component_tag style={styles.bigBlue}>...</component_tag>
<component_tag style={[styles.bigBlue,]}>...</component_tag>

Now let’s start with the implementation:

  • Step 1: Open your terminal and install expo-cli by the following command.

    npm install -g expo-cli
  • Step 2: Now create a project by the following command.

    expo init myapp
  • Step 3: Now go into your project folder i.e. myapp

    cd myapp

Project Structure:

Example: Now let’s style any text or any component by using the style prop. Here we will set the background-color green to make the button center.


import React from 'react';
import { StyleSheet,
        } from 'react-native';
export default function App() {
// Alert function
const alert = ()=>{
    "A Computer Science Portal",
        text: "Cancel",
        text: "Agree",
return (
    <View style={styles.container}>
      <Button title={"Register"} onPress={alert}/>
const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: 'green',
    alignItems: 'center',
    justifyContent: 'center',

Start the server by using the following command.

npm run android

Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again. 


My Personal Notes arrow_drop_up
Last Updated : 28 Apr, 2021
Like Article
Save Article
Similar Reads
Related Tutorials