creating a block of card container with other features

FlatCard.jsx

//rnfs=react-native function with stylesheet
import {StyleSheet, Text, View} from 'react-native';
import React from 'react';

export default function FlatCards() {
  return (
    <View>
      <Text style={styles.headingText}>FlatCards</Text>
      <View style={styles.container}>
        {/* here we are using array [] for multiple styling */}
        <View style={[styles.card, styles.cardOne]}>
          <Text style={styles.TextBox}>Red</Text>
        </View>
        <View style={[styles.card, styles.cardTwo]}>
          <Text style={styles.TextBox}>Green</Text>
        </View>
        <View style={[styles.card, styles.cardThree]}>
          <Text style={styles.TextBox}>Blue</Text>
        </View>
        <View style={[styles.card, styles.cardFour]}>
          <Text style={styles.TextBox}>Orange</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  headingText: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'black',
    textAlign: 'center',
    padding: 10,
    backgroundColor: 'white',
  },
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: 'white',
  },
  card: {
    width: '22%',
    height: 100,
    margin: 10,
    padding: 10,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  cardOne: {
    backgroundColor: 'red',
  },
  cardTwo: {
    backgroundColor: 'green',
  },
  cardThree: {
    backgroundColor: 'blue',
  },
  cardFour: {
    backgroundColor: 'orange',
  },
  TextBox: {
    fontSize: 19,
    color: 'white',
  },
});

Certainly! Let’s break down the code for the FlatCards component step by step:

1. Import Statements:

   • The code begins with import statements for React Native components: StyleSheet, Text, and View.

   • These components are essential for building user interfaces in React Native.

2. Functional Component:

   • The FlatCards function is a functional component.

   • It returns a view that contains a heading and a set of colored cards.

3. View Structure:

   • The outermost View component wraps everything.

   • Inside it, there’s a Text component for the heading with the text “FlatCards”.

   • Below the heading, there’s another View component that holds the colored cards.

4. Styling:

   • The StyleSheet.create function is used to define styles for the components.

   • Let’s look at the styles applied:

     • headingText: This style sets the font size, font weight, color, and alignment for the heading.

     • container: This style sets the flex properties, flexDirection, and background color for the card container.

     • card: This style defines the width, height, margin, padding, borderRadius, and alignment for each card.

     • cardOne, cardTwo, cardThree, and cardFour: These styles set the background color for each card.

     • TextBox: This style sets the font size and color for the text inside the cards.

5. Card Layout:

   • The cards are arranged in a row using flexDirection: 'row'.

   • They are evenly spaced with justifyContent: 'space-around'.

   • Each card has a fixed width of 22% of the container width.

   • The height is set to 100 units.

   • Margins and padding provide spacing.

   • The borderRadius gives rounded corners.

   • The text inside the cards is centered using alignItems and justifyContent.

6. Card Colors:

   • There are four cards:

     • Red card (cardOne) with a red background.

     • Green card (cardTwo) with a green background.

     • Blue card (cardThree) with a blue background.

     • Orange card (cardFour) with an orange background.

7. Text Content:

   • Each card contains a Text component with the color name (e.g., “Red”, “Green”, etc.).

   • The text color is white.

Overall, this component creates a visually appealing set of colored cards with a heading. It’s a great example of how to use styling and layout in React Native! 😊🎨

ElevatedCard.tsx

import {ScrollView, StyleSheet, Text, View} from 'react-native';
import React from 'react';

export default function ElevatedCards() {
  return (
    <View>
      <Text style={styles.headingText}>ElevatedCards</Text>

      {/* Using scrollview properties horizontal scrolling for horizontal axis */}
      <ScrollView horizontal={true} style={styles.container}>
        <View style={[styles.card, styles.cardElevated]}>
          <Text style={styles.Textbox}>Tap &</Text>
        </View>
        <View style={[styles.card, styles.cardElevated]}>
          <Text style={styles.Textbox}>Hold Me</Text>
        </View>
        <View style={[styles.card, styles.cardElevated]}>
          <Text style={styles.Textbox}>to</Text>
        </View>
        <View style={[styles.card, styles.cardElevated]}>
          <Text style={styles.Textbox}>Scroll</Text>
        </View>
        <View style={[styles.card, styles.cardElevated]}>
          <Text style={styles.Textbox}>More</Text>
        </View>
        <View style={[styles.card, styles.cardElevated]}>
          <Text style={styles.Textbox}>😁📜</Text>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  headingText: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'black',
    textAlign: 'center',
    padding: 10,
    backgroundColor: 'white',
  },
  container: {
    padding: 10,
  },
  card: {
    flex: 1,
    width: 100,
    height: 100,
    margin: 10,
    borderRadius: 10,
    shadowColor: 'black',
    justifyContent: 'center',
    alignItems: 'center',
  },
  cardElevated: {
    backgroundColor: '#cad5e2',
    elevation: 4,
  },
  Textbox: {
    fontSize: 19,
    color: 'black',
  },
});

Certainly! Let’s break down the code for the ElevatedCards component and discuss the differences between ScrollView and FlatList.

1. Component Structure:

   • The ElevatedCards component is a functional component that returns a view containing a set of elevated cards.

   • It displays a heading (“ElevatedCards”) and a row of horizontally scrollable cards.

2. View Structure:

   • The outermost View component wraps everything.

   • Inside it, there’s a Text component for the heading (“ElevatedCards”).

   • Below the heading, there’s a ScrollView component that holds the cards.

   • The horizontal={true} prop in React Native is used to specify that the content within a ScrollView should scroll horizontally rather than vertically. When you set horizontal to true, the child components inside the ScrollView will be laid out horizontally, allowing users to scroll left or right.

     For example, in your code snippet for the ElevatedCards component, the ScrollView is set to scroll horizontally. As a result, the cards (“Tap &”, “Hold Me”, “to”, “Scroll”, “More”, and “😁📜”) are displayed in a row, and users can swipe left or right to see more cards.

     In summary, horizontal={true} enables horizontal scrolling within a ScrollView. If you want vertical scrolling, you can omit this prop or set it to false. 😊📜

3. Styling:

   • The StyleSheet.create function is used to define styles for the components.

   • Let’s look at the styles applied:

     • headingText: This style sets the font size, font weight, color, and alignment for the heading.

     • container: This style sets padding for the card container.

     • card: This style defines the width, height, margin, borderRadius, shadow color, and alignment for each card.

     • cardElevated: This style sets the background color for each card and adds an elevation effect.

     • Textbox: This style sets the font size and color for the text inside the cards.

4. Card Layout:

   • The cards are arranged in a row using ScrollView with horizontal={true}.

   • Each card has a fixed width of 100 units and a height of 100 units.

   • Margins provide spacing between the cards.

   • The borderRadius gives rounded corners.

   • The text inside the cards is centered using alignItems and justifyContent.

5. Card Colors and Text:

   • Each card contains a Text component with different text content:

     • “Tap &”

     • “Hold Me”

     • “to”

     • “Scroll”

     • “More”

     • “😁📜”

   • The background color of the cards is a light gray (#cad5e2).

   • The elevation effect (shadow) is applied to make the cards appear slightly raised.

6. ScrollView vs. FlatList:

   • Both ScrollView and FlatList are used for scrolling content, but they have different behaviors:

     • ScrollView:

       • Renders all child components at once, regardless of whether they are on-screen or not.

       • Suitable for a small number of items.

       • Not ideal for long lists due to potential memory usage.

     • FlatList:

       • Renders items lazily as they come into view.

       • Mounts only a subset of items initially (e.g., 10 items by default).

       • As the user scrolls, other items are mounted dynamically.

       • Better performance for long lists.

       • State is not maintained for off-screen items, which can be an advantage or disadvantage depending on the use case.

In summary, FlatList is recommended for long lists because it optimizes memory usage by rendering items only when needed. However, for smaller lists, ScrollView can be simpler to use. 😊📜

App.jsx

import {View, Text, SafeAreaView, ScrollView} from 'react-native';
import React from 'react';
import FlatCards from './components/FlatCards';
import ElevatedCards from './components/ElevatedCards';

const App = () => {
  return (
    <SafeAreaView>
      <ScrollView>
        <FlatCards />
        <ElevatedCards />
      </ScrollView>
    </SafeAreaView>
  );
};

export default App;

Calling both the components in the App.jsx file