How to create a Surface in react-native ?

React native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI’s for both platforms.

Prerequisites:

• Basic knowledge of reactjs.
• Html, css and javascript with ES6 syntax.
• NodeJs should be installed in your system (install).
• Jdk and android studio for testing your app on emulator (install).

Approach:  In this article,  we will see that how to create a surface in react-native. Surface is like a container that uses depth and elevation. Whenever it is rendered, it gives Card Like view. we can add elevation property to give it required depth. It can be used in different scenarios, for example: To show notices, upcoming events, to convey urgent messages etc. We can customise its size according to the need.

In our project, we will initially show a text which has the pressable capability. On press of that text, all the upcoming events will appear below in a surface view. We will see the approach step-by-step.

Below is the step by step implementation:

Step 1: Create a project in react-native using the following command:

npx react-native init DemoProject

Step 2: Install react-native paper using the following command:

npm install react-native-paper

Step 3: Create a components folder inside your project. Inside the components folder create a file SurfaceComponent.js 

Project Structure: It will look like this.

Implementation: Write down the code in respective files.

We will import Surface Component  directly from react-native-paper library. To apply Dark theme to Surface, we can use DarkTheme from react-native-paper.

SurfaceComponent.js

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Pressable } from 'react-native';
import { DarkTheme, Surface } from 'react-native-paper';

const SurfaceExample = () => {
    const [HideSurface, setHideSurface] = useState(true);
    const [events] = useState([
      'Singing show from 7pm to 8pm ',
      'Drama show from 8pm to 9pm',
      'Online Get-Together from 10pm to 11pm',;
    ]);
    let c = 0;

    return (
      <View>
        <Pressable onPress={() => setHideSurface(false)}>
          <Text style={styles.text}> Upcoming events</Text>
        </Pressable>
        {HideSurface ? (
          <></>
        ) : (
          events.map((event) => {
            return (
              <Surface style={styles.surface} theme={DarkTheme} key={c++}>
                <Text style={styles.surfaceText}>{event}</Text>
              </Surface>
            );;
          })
        )}
      </View>
    );;
};

export default SurfaceExample;

const styles = StyleSheet.create({
    text: {
      fontSize: 30,
      fontWeight: 'bold',
      margin: 20,
    },

    surface: {
      margin: 25,
      padding: 10,
      height: 80,
      width: 150,
      elevation: 6,
      borderRadius: 4,
    },
    surfaceText: {
      color: 'white',
    },
});

App.js

import React from "react";
import type { Node } from "react";
import { View } from "react-native";
import SurfaceExample from "./components/SurfaceComponent";

const App: () => Node = () => {
    return (
        <View>
            <SurfaceExample />
        </View>
    );
};

export default App;

Step to run the application: Run the application using the following command:

npx react-native run-android

Output: