Charpell

//To prevent re-render, we are going to use React.memo() which is an memoization technique. It’s primarily used to speed up computing by story the result of a function and returning the cached result, when the same inputs occur again
//The onNameClick function will be wrapped with React.memo()




import * as React from "react";
const ALL_NAMES = ["foo", "bar", "baz"];
interface NameListItemProps {
    readonly name: string;

Charpell

function firstLetter(name) {
  if (typeof(name) !== "string" || name.length < 3) return "Incorrect Input"
  const removedLetter = name.slice(0, -1)
  const result = name[0].toUpperCase() + removedLetter.slice(1)
  return result
}

console.log('firstLetter', firstLetter('Obito'))

Charpell

import React, { useState }from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import {
  MaterialCommunityIcons,
  SimpleLineIcons,
  FontAwesome5,
  AntDesign,
} from "@expo/vector-icons";
import { useTheme } from "@react-navigation/native";

Charpell

import React, { useState } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import {
  MaterialCommunityIcons,
  SimpleLineIcons,
  FontAwesome5,
} from "@expo/vector-icons";
import { useTheme } from "@react-navigation/native";

const Like = ({ like }) => {

Charpell

sdd

Charpell

import { Alert } from "react-native";
import { Audio } from "expo";

export default class MusicPlayer {

    // Current item index
    index = 0;

    constructor(list, initialState = { speed: 1, autoPlay: true }) {
        // Create new object from Expo.Audio.Sound

Charpell

import React, { Component } from 'react'
import { View, ScrollView } from 'react-native'
import { Entypo } from '@expo/vector-icons';
import styled from 'styled-components';

import MusicPlayer from '../components/MusicPlayer';
import { list } from '../data/list';

import colors from '../utils/colors';
import metrics from '../utils/metrics';

Charpell

import React from 'react'
import { TouchableOpacity, FlatList } from 'react-native'
import styled from 'styled-components';

import metrics from '../utils/metrics';

export default ImageList = ({ navigation, images }) => {
  return (
    <FlatList 
      data={images}

Charpell

import React, { Component } from 'react'
import { ScrollView, View, TouchableOpacity, Image, FlatList } from 'react-native'
import styled from 'styled-components';
import { AntDesign } from '@expo/vector-icons';

import ImageList from '../components/ImageList';
import colors from '../utils/colors';
import metrics from '../utils/metrics';
import { images } from '../data/images';

Charpell

import { Alert } from "react-native";
import { Audio } from "expo";

export default class MusicPlayer {

    // Current item index
    index = 0;

    constructor(list, initialState = { speed: 1, autoPlay: true }) {
        // Create new object from Expo.Audio.Sound