react-native-geometrical-shapes/src/components/shapes.js

import and use geometical shapes

import { Text, View } from "react-native"
import { Circle, Triangle, Square, Rectangle, Pentagon } from 'react-native-shape';

const Shapes = ({name}) =>{
  return(
    <>
    {name == 'Circle' &&
    <View style={{padding: 20}} >
      <View style={{ marginLeft: '35%', marginTop: 100 }} >
      <Circle 
      scale={3}
      />
      </View>
       <Text  style={{ marginTop: 60, fontSize: 16, fontWeight: '600' }}>A circle is a shape consisting of all points in a plane that are at a given distance from a given point, the centre. The distance between any point of the circle and the centre is called the radius.</Text>
      </View>
    }
    {name == 'Triangle' &&
    <View style={{padding: 20}} >
    <View style={{ marginLeft: '35%', marginTop: 100 }} >
    <Triangle
    scale={2.5}
    color={'white'}
    />
    </View>
     <Text  style={{ marginTop: 60, fontSize: 16, fontWeight: '600' }}>A triangle is a polygon with three edges and three vertices. It is one of the basic shapes in geometry. A triangle with vertices A, B, and C is denoted \triangle ABC.</Text>
    </View>
    }
    {name == 'Square' &&
    <View style={{padding: 20}} >
    <View style={{ marginLeft: '35%', marginTop: 100 }} >
    <Square
    scale={2.5}
    />
    </View>
     <Text  style={{ marginTop: 60, fontSize: 16, fontWeight: '600' }}>In Euclidean geometry, a square is a regular quadrilateral, which means that it has four equal sides and four equal angles</Text>
    </View>
    }
  {name == 'Rectangle' &&
    <View style={{padding: 20}} >
    <View style={{ marginLeft: '35%', marginTop: 100 }} >
    <Rectangle
    scale={2.5}
    />
    </View>
     <Text  style={{ marginTop: 60, fontSize: 16, fontWeight: '600' }}>In Euclidean plane geometry, a rectangle is a quadrilateral with four right angles.</Text>
    </View>
    }
      {name == 'Pentagon' &&
    <View style={{padding: 20}} >
    <View style={{ marginLeft: '35%', marginTop: 160 }} >
    <Pentagon
    scale={1.3}
    />
    </View>
     <Text  style={{ marginTop: -30, fontSize: 16, fontWeight: '600' }}>In geometry, a pentagon is any five-sided polygon or 5-gon.</Text>
    </View>
    }
    </>
  )
}

export default Shapes