Interview Preparations

In React Native, creating different shapes involves using a combination of styling, layout, and sometimes custom components or libraries. Here are examples of how to create different shapes:

1. Rectangle:

Rectangles are the most common shape and can be created using the View component with appropriate styles.

import React from "react";
import { View, StyleSheet } from "react-native";
 
const Rectangle = () => {
  return <View style={styles.rectangle}></View>;
};
 
const styles = StyleSheet.create({
  rectangle: {
    width: 100,
    height: 50,
    backgroundColor: "blue",
  },
});
 
export default Rectangle;

2. Circle:

Circles can be created using the View component with a border radius equal to half of the width or height.

import React from "react";
import { View, StyleSheet } from "react-native";
 
const Circle = () => {
  return <View style={styles.circle}></View>;
};
 
const styles = StyleSheet.create({
  circle: {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: "green",
  },
});
 
export default Circle;

3. Triangle:

Triangles can be created using the Polygon component or by combining View components with borders.

import React from "react";
import { View, StyleSheet } from "react-native";
 
const Triangle = () => {
  return (
    <View style={styles.triangleContainer}>
      <View style={styles.triangle}></View>
    </View>
  );
};
 
const styles = StyleSheet.create({
  triangleContainer: {
    width: 0,
    height: 0,
    borderStyle: "solid",
    borderLeftWidth: 50,
    borderRightWidth: 50,
    borderBottomWidth: 100,
    borderLeftColor: "transparent",
    borderRightColor: "transparent",
    borderBottomColor: "red",
  },
  triangle: {
    position: "absolute",
    top: 0,
    left: 0,
    width: 0,
    height: 0,
    borderStyle: "solid",
    borderLeftWidth: 50,
    borderRightWidth: 50,
    borderBottomWidth: 100,
    borderLeftColor: "transparent",
    borderRightColor: "transparent",
    borderBottomColor: "transparent",
  },
});
 
export default Triangle;

4. Custom Shapes:

For more complex shapes, consider using libraries like react-native-svg for vector graphics. SVG allows the creation of various shapes and paths.

import React from "react";
import { Svg, Path } from "react-native-svg";
 
const CustomShape = () => {
  return (
    <Svg width="100" height="100">
      <Path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent" />
    </Svg>
  );
};
 
export default CustomShape;

Important Notes:

Adjust dimensions, colors, and styles based on your design requirements.
For more complex shapes or custom drawings, consider using the react-native-svg library or other vector graphics libraries.
Experiment with different combinations of styles, borders, and layout properties to achieve the desired shapes.

Keep in mind that these examples provide a basic overview, and depending on your specific use case, you may need to adjust styles and dimensions accordingly.

Pro Guard Sso