React Shots

React Router is one of the best and important parts of React development ecosystem. it has a very brilliant history of moving things from imperative to declarative

Photo by Artem Sapegin on Unsplash

In React Router V6 they have introduced Routes which is a very clear way of specifying routes in your application

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="users/*" element={<Users />} />
</Routes>
</BrowserRouter>
);
}

we can again use useRoutes hook for registering our routes

const App = () => {
let routes = useRoutes([
{ path: "/", element: <Home /> },
{ path: "users", element: <Users /> },
]);
return routes;
};

const AppWrapper = () =>…


I am not good code reviwer . I am still learning the things and will continue to do it until I am in programming

The way we write code

When we write some piece of code it takes time dedication for us to come up with that code as result we are always proud of that code and we should be. we should be proud of our work it should give satisfaction at the day end

But when someone tells bad about that code it directly hurts our ego. because we have given time for writing that code. And believe me, the majority of the…


Photo by Kind and Curious on Unsplash

Before starting I want to let you know that this is something I really experienced in my journey

Want to break the clock

we might have heard of this reason a lot that I want to be my own boss I don't want to work for a 9–5 job

Believe me, a 9–5 job is really easier them working as an entrepreneur, if we really think that entrepreneurship is basically to sit in a comfortable chair and just sign some papers and money will magically be appearing we are highly mistaken. people I have seen facing sleepless nights and restless days working toward their dream


React Native Moti

React Native Moti Animation Micro Interaction Animated Cart Button

import { Feather } from '@expo/vector-icons';
import { MotiView, motify, MotiText, AnimatePresence, useAnimationState } from 'moti';
import React, { useEffect, useState } from 'react'
import { View, Text, useWindowDimensions, Pressable } from 'react-native'
import { FontAwesome5 } from '@expo/vector-icons';
const MotiIcon = motify(Feather)();
const MotiFAIcon = motify(FontAwesome5)();
const MDetailView = () => {
const { height, width } = useWindowDimensions();
const [start, setStart] = useState(false);
return (
<View style={{ flex: 1,paddingVertical:50,backgroundColor:'#FFE5E2', justifyContent: 'center', alignItems: 'center', height, width }}>
<Pressable
style={{alignItems:'center'}}
onPress={() => setStart(s => !s)}>
<AnimatePresence >
{start && <ProductIcon setStart={setStart} start={start} key="product" />}…


React Native Animations

React Native Moti Animation Light And Dark Mode log Post

Insipiration from https://dribbble.com/shots/6550408-Dark-Mode


import { Feather } from '@expo/vector-icons';
import { MotiText, MotiView, motify, AnimatePresence } from 'moti';
import React, { useReducer, useState } from 'react'
import { View, Text, useWindowDimensions, Pressable, StyleSheet } from 'react-native'
import Slider from '@react-native-community/slider';
import {
useFonts,
SourceSerifPro_400Regular,
SourceSerifPro_600SemiBold,
SourceSerifPro_700Bold,
} from '@expo-google-fonts/source-serif-pro';
import AppLoading from 'expo-app-loading';
import { StatusBar } from 'expo-status-bar';
const MotiIcon = motify(Feather)();
const themes = {
dark: {
backgroundColor: '#171717',
textColor: '#6E7C7C'
},
light: {
backgroundColor: '#DBE6FD',
textColor: '#456268'
}
}
function Shape({ theme, name }: any) {
const { height, width } = useWindowDimensions();
return (…


Animation in React Native Flat List

import { Image, MotiView } from 'moti'
import React, { useEffect, useRef } from 'react'
import { useWindowDimensions } from 'react-native'
import { View, Text, StyleSheet, FlatList, Animated as RAnimated } from 'react-native'
import { BlurView } from "expo-blur";
import { StatusBar } from "expo-status-bar";
import Animated, { interpolate, interpolateColor, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated'
const AnimatedFlatlist = Animated.createAnimatedComponent(FlatList)
const images = [
{
image: 'https://images.unsplash.com/photo-1624144284128-d476c9231c91?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8NHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
color: '#47597E'
},
{…


Javascript Console

The console is the most important part of any developer in this article we will see how we can use the console in javascript to make ourselves more productive

Photo by Pankaj Patel on Unsplash

The Console method log() outputs a message to the web console. The message may be a single string (with optional substitution values), or it may be anyone or more JavaScript objects.

console.log("Hello");
console.log(`Hello my name is ${'Sam'}`);
console.log(`Hello my name is %s`, "Sam");
console.log(`my name is %s and my age is %d`, "Sam",30);
console.log(`Hello my name is %s and my age is %d and can also be seen as %o`, "Sam",30,{name:"Sam",age:30});

React Native Animation

import { Image } from 'moti'
import React, { useEffect, useRef } from 'react'
import { useWindowDimensions } from 'react-native'
import { View, Text, StyleSheet, FlatList } from 'react-native'
import { StatusBar } from "expo-status-bar";
import Animated, { useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated'
const AnimatedFlatlist = Animated.createAnimatedComponent(FlatList)
const items = [
'https://images.unsplash.com/photo-1624144284128-d476c9231c91?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8NHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
'https://images.unsplash.com/photo-1555169062-013468b47731?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8YmlyZHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
'https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NTJ8fHdpbnRlcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
'https://images.unsplash.com/photo-1512819432727-dbcb57a06f13?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fGJpcmR8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
'https://images.unsplash.com/photo-1431036101494-66a36de47def?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NTV8fHdpbnRlcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
'https://images.unsplash.com/photo-1552728089-57bdde30beb3?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YmlyZHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'


import React, { useState } from 'react'
import { View, Text, Pressable, FlatList, StyleSheet } from 'react-native'
import { Image, MotiView, MotiText, useAnimationState, } from "moti";
import { useWindowDimensions } from 'react-native';
import FontAwesome from '@expo/vector-icons/FontAwesome'
interface Car {
color: string; name: string; image: string; price: string
}
const cars: Car[] = [
{
color: '#AFB9C8',
name: 'Vanue ',
price: '692,690',
image: 'https://www.hyundai.com/content/dam/hyundai/in/en/data/find-a-car/1600x590_venue.png'
},
{…

Neeraj Dana

Experienced Software Engineer with a demonstrated history of working in the information technology and services industry. Skilled in Angular,React,React-Native,

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store