HomeOur TeamContact

React Native Shapes

By Utkarsh Lubal
Published in Others
February 08, 2023
1 min read
React Native Shapes

Table Of Contents

01
Introduction
02
Installation
03
Example
04
Tutorial

Introduction

After drawing a bit of inspiration from ENJOY CSS Shapes We decided to see if I could remake some of these shapes with a subset of CSS.

We have to access react-design here so drawing shapes is pretty mush easy but my way is to see if I can just use normal Views and to get all the shapes in React

Installation

This doesn't required any special installation

Example


import React, { useState } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
} from 'react-native';

const App = () => {
  const [showSquare, setShowSquare] = useState(false);
  const [showCircle, setShowCircle] = useState(false);
  const [showTriangle, setShowTriangle] = useState(false);
  const [showRectangle, setShowRectangle] = useState(false);
  const [showOval, setShowOval] = useState(false);

  const changeShape = (shape) => {
    setShowSquare(shape == 'Square');
    setShowCircle(shape == 'Circle');
    setShowTriangle(shape == 'Triangle');
    setShowRectangle(shape == 'Rectangle');
    setShowOval(shape == 'Oval');
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <View
          style={
            showSquare
              ? styles.SquareShapeView
              : showCircle
              ? styles.CircleShapeView
              : showRectangle
              ? styles.RectangleShapeView
              : showTriangle
              ? styles.TriangleShapeView
              : showOval
              ? styles.OvalShapeView
              : ''
          }
        />
        <TouchableOpacity onPress={() => changeShape('Square')} active={0.8}>
          <Text style={{ marginTop: 20, fontSize: 20 }}>Square</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => changeShape('Circle')} active={0.8}>
          <Text style={{ marginTop: 20, fontSize: 20 }}>Circle</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => changeShape('Triangle')} active={0.8}>
          <Text style={{ marginTop: 20, fontSize: 20 }}>Triangle</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => changeShape('Rectangle')} active={0.8}>
          <Text style={{ marginTop: 20, fontSize: 20 }}>Rectangle</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => changeShape('Oval')} active={0.8}>
          <Text style={{ marginTop: 20, fontSize: 20 }}>Oval</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  CircleShapeView: {
    //To make Circle Shape
    width: 150,
    height: 150,
    borderRadius: 150 / 2,
    backgroundColor: '#FF00FF',
  },
  OvalShapeView: {
    //To make Oval Shape
    marginTop: 20,
    width: 100,
    height: 100,
    backgroundColor: '#ED2525',
    borderRadius: 50,
    transform: [{ scaleX: 2 }],
  },
  SquareShapeView: {
    //To make Square Shape
    width: 100,
    height: 100,
    backgroundColor: '#14ff5f',
  },
  RectangleShapeView: {
    //To make Rectangle Shape
    marginTop: 20,
    width: 120 * 2,
    height: 120,
    backgroundColor: '#14ff5f',
  },
  TriangleShapeView: {
    //To make Triangle Shape
    width: 0,
    height: 0,
    borderLeftWidth: 60,
    borderRightWidth: 60,
    borderBottomWidth: 120,
    borderStyle: 'solid',
    backgroundColor: 'transparent',
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: '#606070',
  },
});
export default App;

Tutorial

Coming Soon…


Previous Article
Reactive database in react native rxdb
Utkarsh Lubal

Utkarsh Lubal

Full Stack Developer

Related Posts

Exploring Alternative Emulators for React Native Development
Exploring Alternative Emulators for React Native Development
January 20, 2024
1 min

Quick Links

Advertise with usAbout UsContact Us

Social Media